index.tsx
4.47 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
import { Card, ConfigProvider, Spin, Upload } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React, {useState} from "react";
import useInitial from "@/hooks/useInitail";
import { getDetail, Item, Params, SupplierVO, StorageVO, PartVO, DetailVO } from "./api";
import zhCN from "antd/lib/locale-provider/zh_CN";
import st from "@/pages/pms/partPlan/PlanManage/style.less";
import StepBnt from "@/pages/pms/comonents/StepBnt";
// @ts-ignore
import {common} from "@/typing/common";
import {flattenDeep} from "@/pages/pms/entity";
import {sum} from "lodash";
import PartDetailModal from './components/PartDetailModal';
export default function Index({ match }: common.ConnectProps) {
const { planId } = match.params;
const { data, loading } = useInitial<Item, Params>(getDetail, {}, {planId});
const [visiblePart, setVisiblePart] = useState(false);
const [parts, setParts] = useState<PartVO[]>([]);
return (
<PageHeaderWrapper title="配件计划详情">
<Spin spinning={loading}>
<ConfigProvider locale={zhCN}>
<Card className={st.page}>
{data.list?.map((dealer: DetailVO = {}) => (
<div key={`dealer${dealer.settleDealerName}`} style={{ marginTop: 10 }}>
<div style={{ fontWeight: "bold" }}>{`商家: ${dealer.settleDealerName || ''}`}</div>
{(dealer.suppliers || []).map((supplier: SupplierVO = {}) => {
const paList: any[] = flattenDeep((supplier.storages || []).map((st: any) => (st.parts || [])));
return (
<div key={`supplier${supplier.supplierName}`} style={{ marginTop: 10, marginLeft: 40 }}>
<div style={{ fontWeight: "bold" }}>{`供应商: ${supplier.supplierName || ''}`}</div>
<div style={{display: 'flex', marginLeft: 40, marginTop: 10}}>
<div style={{marginRight: 20}}>
{`总金额: ${sum(paList.map((it: any) => (it.price || 0) * (it.partCnt || 0))).toFixed(2)}元`}
</div>
<div>{`品种数: ${paList.length}种`}</div>
</div>
{(supplier.storages || []).map((storage: StorageVO) => (
<div key={`storage${storage.storageName}`} style={{ marginTop: 10, marginLeft: 60 }}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<div style={{ fontWeight: "bold" }}>{`发运库房: ${storage.storageName || ''}`}</div>
<div style={{marginLeft: 20}}>{`总金额: ${sum((storage.parts || []).map((it: any) => (it.price || 0) * (it.partCnt || 0))).toFixed(2)}元`}</div>
<div style={{marginLeft: 20}}>{`品种数: ${(storage.parts || []).length}种`}</div>
<a style={{marginLeft: 20}} onClick={() => { setVisiblePart(true); setParts(storage.parts || []); }}>
查看配件
</a>
<a style={{marginLeft: 20}} href={`/api/pms/erp/part/plan/export/plan/list?id=${storage.planGroupId}`}>
导出
</a>
</div>
</div>
))}
</div>
);
})}
</div>
))}
<div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 20 }}>
<span style={{ marginRight: 10 }}>备注:{data.remark}</span>
</div>
<div style={{ display: 'flex', alignItems: 'flex-start' }}>
<span style={{ marginRight: 10 }}>附件:</span>
<div style={{display: 'flex'}}>
{data.fids?.split(',').map(i => (
<Upload
listType="picture-card"
fileList={[{
uid: '-1',
name: i,
status: 'done',
url: `/api/file/show?fid=${i}`,
}]}
disabled
/>
))}
</div>
</div>
<PartDetailModal visible={visiblePart} onCancel={() => setVisiblePart(false)} parts={parts} />
<StepBnt
disable={false}
bntLoading={false}
close={() => history.back()}
/>
</Card>
</ConfigProvider>
</Spin>
</PageHeaderWrapper>
);
}