StoragePartTable.tsx
4.96 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
125
126
127
128
129
130
131
132
133
134
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';
import _ from 'lodash';
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, setItem, setOutVisible, setCustVisible } = useStore();
const [form] = Form.useForm();
const { data: parts, setParams, loading } = useInitial(getList, [], dfParams);
const [visible, setVisible] = useState(false);
const [itemPrice, setItemPrice] = useState<ListVO>();
useEffect(() => {
if (key == props.type) {
setParams(dfParams, true);
}
}, [dfParams, key]);
useEffect(() => {
if (visible && itemPrice?.poolId) {
form.setFieldsValue({ cnt: itemPrice.cnt});
} else {
form.resetFields;
}
}, [visible]);
return (
<div>
<Table rowKey={(v: ListVO) => `${v.poolId}`} scroll={{y: 500, x: 3000}} dataSource={parts || []} pagination={false} loading={loading}>
<Column title="配件编码" dataIndex="code" fixed="left" />
<Column title="配件名称" dataIndex="name" fixed="left" />
<Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />
<Column
title="操作"
fixed="left"
render={r => (
<>
<a onClick={() => { setVisible(true); setItemPrice(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>
</>
)}
/>
<Column title="库房名称" dataIndex="storageName" />
<Column title="门店名称" dataIndex="shopName" />
<Column title="来源类型" dataIndex="typeName" />
<Column title="配件类型" dataIndex="partTypeName" />
<Column title="计划前库销比" dataIndex="ratio" render={t => (t ? t.toFixed(2) : "--")} />
<Column title="计划后库销比" dataIndex="planRatio" render={t => (t ? t.toFixed(2) : "--")} />
<Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
<Column title="客户订件数量(个)" render={r => (r.buyCnt ? <a onClick={() => { setCustVisible(true); setItem(r); }}>{r.buyCnt}</a> : r.buyCnt)} />
<Column title="客户订件金额(元)" dataIndex="buyAmount" />
<Column title="在途未锁(个)" dataIndex="onTheWayUnlockCnt" />
<Column title="在库未锁(个)" dataIndex="storageUnlockCnt" />
<Column title="在库已锁(个)" dataIndex="storageLockedCnt" />
<Column title="近90天月均出库(个)" render={r => (r.outStockCnt ? <a onClick={() => { setOutVisible(true); setItem(r); }}>{_.floor(r.outStockCnt/3)}</a> : r.outStockCnt)} />
</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: itemPrice?.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>
);
}