OutFlowModal.tsx
2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { useEffect, useState } from 'react';
import {Button, Modal, Table} from 'antd';
import {useStore} from '../index';
import { outFlowApi, outListVO } from '../api';
import useInitial from '@/hooks/useInitail';
import OutFlowDetailModal from './OutFlowDetailModal';
const {Column} = Table;
export default function Index() {
const {outVisible, setOutVisible, item} = useStore();
const [delay, setDelay]= useState(true);
const { data, setParams, loading } = useInitial(outFlowApi, [], {}, delay);
const [current, setCurrent] = useState<{visible?: boolean, itemData?: any}>();
useEffect(() => {
if (outVisible && item?.poolIds) {
setParams({poolIds: item.poolIds}, true);
setDelay(false);
}
}, [outVisible]);
const total = data
.map(i => i.outCnt)
.reduce((prev, cur) => {
return (prev || 0) + (cur || 0);
}, 0);
return (
<Modal
title={`${item?.partName}滚动90天出库流水`}
width={1000}
visible={outVisible}
maskClosable={false}
onCancel={() => setOutVisible(false)}
footer={[
<Button onClick={() => setOutVisible(false)}>取消</Button>
]}
>
<div style={{marginBottom: 20}}>
滚动90天出库数：
<span
style={{ color: '#0000FF', cursor: 'pointer' }}
onClick={() => setCurrent({ visible: true, itemData: { poolIds: item?.poolIds } })}
>
{total}
</span>
</div>
<Table
dataSource={data}
loading={loading}
rowKey={(v: outListVO) => `${v.date}`}
pagination={false}
scroll={{y: 400}}
>
<Column title="出库日期" dataIndex="date" />
<Column title="出库数量" render={r => <a onClick={() => setCurrent({ visible: true, itemData: { ...r, poolIds: item?.poolIds }})}>{r.outCnt}</a>} />
</Table>
<OutFlowDetailModal visible={current?.visible} setVisible={() => setCurrent({visible: false, itemData: undefined})} item={current?.itemData} />
</Modal>
);
}