StoragePartTable.tsx
4.18 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import {Table, Popconfirm, Divider, Modal, Input, Button, message, Form} from 'antd';
import React, {useEffect, useState} from 'react';
import useInitial from "@/hooks/useInitail";
import {getList, ListVO} from "@/pages/pms/partPlan/PlanPool/api";
import {useStore} from "@/pages/pms/partPlan/PlanPool";
import {deleteApi, editApi} from '../api';
const { Column } = Table;
const {Item} = Form;
interface Props {
// eslint-disable-next-line react/no-unused-prop-types
type?: number, // 类型1区域库2库房3车系4车型5配件
}
export default function Index(props: Props = {}) {
const { dfParams, key, partTypeData } = useStore();
const [form] = Form.useForm();
const { data: parts, setParams } = useInitial(getList, [], dfParams);
const [visible, setVisible] = useState(false);
const [item, setItem] = useState<ListVO>();
useEffect(() => {
if (key == props.type) {
setParams(dfParams, true);
}
}, [dfParams, key]);
useEffect(() => {
if (visible && item?.poolId) {
form.setFieldsValue({cnt: item.cnt});
} else {
form.resetFields;
}
}, [visible]);
return (
<div>
<Table rowKey={(v: ListVO) => `${v.poolId}`} scroll={{y: 500, x: 2000}} dataSource={parts || []} pagination={false}>
<Column title="配件编码" dataIndex="code" fixed="left" />
<Column title="配件名称" dataIndex="name" />
<Column title="库房名称" dataIndex="storageName" />
<Column title="门店名称" dataIndex="shopName" />
<Column title="来源类型" dataIndex="typeName" />
<Column title="配件类型" dataIndex="partType" render={t => partTypeData.find(i => i.value == t)?.label} />
<Column title="采购规格" dataIndex="unit" render={t => t || '--'} />
<Column title="采购数量" dataIndex="cnt" />
<Column title="采购单价" dataIndex="price" />
<Column title="在库数量" dataIndex="stockCnt" />
<Column title="滚动90天月均出库" dataIndex="outCnt" />
<Column
title="操作"
render={r => (
<>
<a onClick={() => { setVisible(true); setItem(r); }}>编辑</a>
<Divider type="vertical" />
<Popconfirm
title="确认删除?"
onConfirm={() => {
deleteApi({poolId: r.poolId}).then(res => {
message.success("操作成功");
setParams({}, true);
}).catch(e => message.error(e.message));
}}
>
<a>删除</a>
</Popconfirm>
</>
)}
/>
</Table>
<Modal
title="编辑采购数量"
visible={visible}
maskClosable={false}
onCancel={() => setVisible(false)}
footer={[
<Button key="cancel" onClick={() => setVisible(false)}>取消</Button>,
<Button
key="ok"
type="primary"
style={{marginLeft: 10}}
htmlType="submit"
onClick={() => {
form.validateFields().then(fields => {
editApi({poolId: item?.poolId, partCnt: fields.cnt}).then(res => {
setVisible(false);
message.success("操作成功");
setParams({}, true);
}).catch(e => {
message.error(e.message);
setVisible(false);
});
});
}}
>保存
</Button>
]}
>
<Form
form={form}
labelCol={{span: 7}}
wrapperCol={{span: 10}}
>
<Item
label="配件采购数量"
name="cnt"
rules={[
{required: true},
() => ({
validator(_, value) {
if (value > 0) {
return Promise.resolve();
}
return Promise.reject(new Error('配件采购数量不能低于0'));
},
}),
]}
>
<Input placeholder="请输入配件采购数量" />
</Item>
</Form>
</Modal>
</div>
);
}