DetailModal.tsx
3.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
import React, {useState, useEffect, useMemo} from 'react';
import { Button, Modal, Table } from 'antd';
import { getProgressDetail, ProgressVO, ListVO, Params, SubmitListVO } from "../api";
import useInitial from "@/hooks/useInitail";
import ProgressView from "./ProgressView";
import ShippingDetailModal from './ShippingDetailModal';
import PartDetailModal from './PartDetailModal';
import {flattenDeep} from "@/pages/pms/entity";
import {getDetail, DetailVO, Item} from "@/pages/pms/partPlan/PlanManage/subpages/Detail/api";
interface Props {
visible: boolean,
onCancel: Function,
item: ListVO,
}
const { Column } = Table;
export default function DetailModal(props: Props) {
const { visible, onCancel, item } = props;
const params = {planId: item.planId};
const [delay, setDelay] = useState(true);
// @ts-ignore
const { data: progresss, setParams: setProgresssParams } = useInitial<ProgressVO[], Params>(getProgressDetail, [], params, delay);
// @ts-ignore
const { data, setParams, loading } = useInitial<Item, Params>(getDetail, {}, params, delay);
const [visibleDetail, setVisibleDetail] = useState(false);
const [_item, setItem] = useState<SubmitListVO>({});
const [visiblePartDetail, setVisiblePartDetail] = useState(false);
const suppliers = useMemo(() => {
return flattenDeep(data.list?.map((it: DetailVO) => (it.suppliers || []).map(su => ({...it, ...su}))));
}, [data]);
useEffect(() => {
if (visible) {
setProgresssParams(params, true);
setParams(params, true);
setDelay(false);
}
}, [visible]);
return (
<Modal
title="配件计划进度"
width={1000}
visible={visible}
maskClosable={false}
onCancel={() => onCancel()}
footer={
<Button onClick={() => onCancel()}>取消</Button>
}
>
<div style={{display: 'flex', flexDirection: 'row'}}>
<ProgressView data={progresss} />
<div style={{width: 700}}>
<Table loading={loading} rowKey={(v: any) => `${v.planSupplierId}`} scroll={{y: 500, x: 650}} dataSource={suppliers} pagination={false}>
<Column title="品牌" dataIndex="brandName" />
<Column title="结算商家" dataIndex="settleDealerName" />
<Column title="结算门店" dataIndex="settleShopName" />
<Column title="供应商" dataIndex="supplierName" />
<Column title="总金额(元)" dataIndex="totalAmount" render={(t: number) => t && t.toFixed(2) || 0} />
<Column
title="操作"
render={(text, _item: SubmitListVO) => (
<>
<a onClick={() => { setVisiblePartDetail(true); setItem(_item); }} style={{marginRight: 20}}>查看配件</a>
<a onClick={() => { setVisibleDetail(true); setItem(_item); }}>查看进度</a>
</>
)}
/>
</Table>
</div>
</div>
<ShippingDetailModal
visible={visibleDetail}
item={{..._item, ...params}}
onCancel={() => setVisibleDetail(false)}
/>
<PartDetailModal
visible={visiblePartDetail}
item={_item}
onCancel={() => setVisiblePartDetail(false)}
/>
</Modal>
);
}