index.tsx
3.78 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
import React, {useState} from "react";
import {Divider, InputNumber, message, Popconfirm, Table} from 'antd';
import { useStore } from '@/pages/pms/partPlan/AmountPlan';
import lodash from 'lodash';
import useInitial from "@/hooks/useInitail";
import {getList, ListVO, Params, savePlanApi} from "@/pages/pms/partPlan/AmountPlan/api";
import StepBnt from "@/pages/pms/comonents/StepBnt";
const { Column } = Table;
export default function Index() {
const { setCurrent, dfParams } = useStore();
const [bntLoading, setBntLoading] = useState(false);
const { data: parts, setData: setParts } = useInitial<ListVO[], Params>(getList, [], dfParams);
const [poolId, setPoolId] = useState<any>();
const changeCnt = lodash.debounce(count => setParts(parts.map((it: ListVO) => (it.poolId == poolId ? ({...it, cnt: count}) : it))), 800);
const changePrice = lodash.debounce(price => setParts(parts.map((it: ListVO) => (it.poolId == poolId ? ({...it, price}) : it))), 800);
function prev() {
setCurrent(2);
}
function submit() {
setBntLoading(true);
savePlanApi({
...dfParams,
// @ts-ignore
storageIds: (dfParams.storageIds|| '').split(','),
parts: parts.map(it => ({...it, partId: it.id}))
}).then(() => {
setCurrent(1);
setBntLoading(false);
}).catch((e: any) => {
message.error(e.message);
setBntLoading(false);
});
}
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="stockCnt" />
<Column title="滚动90天月均出库数" dataIndex="outCnt" />
<Column
title="采购单价"
dataIndex="price"
fixed="right"
width={120}
render={(t: any, _: ListVO) => (_.poolId != poolId ? (_.price || 0) : (
<InputNumber
value={_.price}
onChange={changePrice}
style={{ width: '100%' }}
min={0}
/>
))}
/>
<Column
title="采购数量"
dataIndex="cnt"
fixed="right"
width={120}
render={(t, _: ListVO) => (_.poolId != poolId ? (_.cnt || 0) : (
<InputNumber
value={_.cnt}
onChange={changeCnt}
style={{ width: '100%' }}
min={1}
/>
))}
/>
<Column
title="操作"
fixed="right"
render={(t, _: ListVO) => (
<>
{_.poolId != poolId ? (
<a onClick={() => setPoolId(_.poolId)}>编辑</a>
) : (
<a onClick={() => setPoolId(null)}>保存</a>
)}
<Divider type="vertical" />
<Popconfirm
title="是否删除?"
onConfirm={() => setParts(parts.filter((it: ListVO) => it.poolId != _.poolId))}
okText="确定"
cancelText="取消"
>
<a onClick={(e) => { e.preventDefault(); }} style={{ color: 'red' }}>删除</a>
</Popconfirm>
</>
)}
/>
</Table>
<div style={{margin: 10, display: 'flex', justifyContent: 'flex-end'}}>
<span style={{fontSize: 16}}>总金额：{(parts.reduce((sum, i) => (sum + ((i.price || 0) * (i.cnt || 0))), 0)).toFixed(2)} 元</span>
</div>
<StepBnt
disable={false}
bntLoading={bntLoading}
prev={prev}
submit={submit}
/>
</div>
);
}