ConfirmDetailModal.tsx
3.28 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
import React, { useState, useEffect } from 'react';
import { Button, message, Modal, Table, Descriptions } from 'antd';
import { confirmApi, getDetail, Detail, Item, DetailItem } from "../api";
import useInitail from "@/hooks/useInitail";
import _ from "lodash";
interface Props {
visible: boolean,
onCancel: Function,
item: Item,
confirm: boolean,
fetchList: () => any
}
const { Column } = Table;
export default function Index(props: Props) {
const { visible, onCancel, fetchList, item, confirm } = props;
const [delay, setDelay] = useState(true);
const { data, setParams, loading: aloading} = useInitail<Detail, string | undefined>(getDetail, {}, item.shippingNo, delay);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (visible) {
setParams(item.shippingNo, true);
setDelay(false);
}
}, [visible]);
const submit = _.throttle((valid: boolean) => {
if (loading) {
return;
}
setLoading(true);
confirmApi({valid, shippingNo: item.shippingNo}).then(() => {
message.success("操作成功");
setLoading(false);
onCancel();
fetchList();
}).catch(e => {
message.error(e.message);
setLoading(false);
});
}, 3000);
return (
<Modal
title="发运单导入明细"
width={1000}
visible={visible}
maskClosable={false}
onCancel={() => onCancel()}
footer={confirm ? [
<Button key="1" loading={loading} onClick={() => submit(false)}>作废</Button>,
<Button key="2" type="primary" loading={loading} disabled={loading} onClick={() => submit(true)}>确认</Button>
] : [<Button key="1" loading={loading} onClick={() => onCancel()}>取消</Button>]}
>
<Descriptions column={3}>
<Descriptions.Item label="品牌">{data.brandName}</Descriptions.Item>
<Descriptions.Item label="供应商" span={2}>{data.supplierName}</Descriptions.Item>
<Descriptions.Item label="库房">{data.storageName}</Descriptions.Item>
<Descriptions.Item label="提报门店" span={2}>{data.settleShopName}</Descriptions.Item>
</Descriptions>
<Table loading={aloading} rowKey={(v: DetailItem) => `${v.partId}`} scroll={{y: 500, x: 1200}} dataSource={data.list || []} pagination={false}>
<Column title="配件名称" dataIndex="partName" />
<Column title="配件编码" dataIndex="partCode" />
<Column title="配件件号" dataIndex="partNo" />
<Column title="发运数量" dataIndex="partCount" />
<Column title="采购单价" dataIndex="price" />
<Column title="总金额(元)" dataIndex="totalAmount" render={(t: number, _: DetailItem) => ((_.price || 0) * (_.partCount || 0) || '--')} />
{!confirm && <Column title="入库数量" dataIndex="storageCnt" render={(t: number) => (t || '--')} />}
{!confirm && <Column title="遗漏数量" dataIndex="omitCnt" render={(t: number) => (t || '--')} />}
{!confirm && <Column title="破损数量" dataIndex="damagedCnt" render={(t: number) => (t || '--')} />}
{!confirm && <Column title="补发数量" dataIndex="againCnt" render={(t: number) => (t || '--')} />}
{!confirm && <Column title="对方责任占比" dataIndex="otherRatio" render={(t: number) => (t ? `${t*10}%` : '--')} />}
</Table>
</Modal>
);
}