FlowDetailModal.tsx
4.25 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
import React, { useEffect, useState } from 'react';
import { Button, Modal, Table } from 'antd';
import { getFlowDetail} from '@/pages/pms/storage/partShop/api';
import {typeReceiverObj, typeSenderObj} from '@/pages/pms/entity';
import moment from 'moment';
import usePagination from '@/hooks/usePagination';
const { Column } = Table;
interface Props {
item?: any
visible: boolean
onCancel: () => any
}
export default function Index({item = {}, visible, onCancel}: Props) {
const [delay, setDelay] = useState(true);
const { list, loading, setParams, paginationConfig} = usePagination<PmsStoragePartShop.FlowVO>(getFlowDetail, {partId: item.partId, shopId: item.shopId, isOut: item.isOut}, {delay});
useEffect(() => {
if (item.shopId && item.partId && visible) {
setDelay(false);
setParams({shopId: item.shopId, partId: item.partId, isOut: item.isOut}, true);
}
}, [item, visible]);
console.log('item, ', item);
return (
<Modal
title={`${item.isOut ? '出库' : '入库'}流水`}
width={1000}
visible={visible}
maskClosable={false}
onCancel={onCancel}
footer={[
<Button key="1" loading={loading} onClick={onCancel}>取消</Button>,
]}
>
<Table
loading={loading}
rowKey={(v: PmsStoragePartShop.FlowVO) => `${v.type}_${v.typeId}`}
scroll={{y: 500}}
dataSource={list}
pagination={paginationConfig}
>
<Column title={`${item.isOut ? '出库' : '入库'}类型`} dataIndex="type" />
<Column title="配件数量" dataIndex="partCnt" />
<Column title="单号" dataIndex="remark" />
<Column
title="详情"
dataIndex="text"
width={350}
render={(t: string, it: PmsStoragePartShop.FlowVO) => {
const obj = JSON.parse(t || '{}');
return (
<div>
{!!obj.shopName && <div>{`门店: ${obj.shopName}`}</div>}
{!!obj.storageName && <div>{`库房: ${obj.storageName}`}</div>}
{!!obj.shippingNo && <div>{`发运单号: ${obj.shippingNo}`}</div>}
{!!obj.importUserName && <div>{`导入人员: ${obj.importUserName}`}</div>}
{!!obj.inStorageUserName && <div>{`入库人员: ${obj.inStorageUserName}`}</div>}
{!!obj.importTime && <div>{`入库时间: ${moment(obj.importTime).format('YYYY-MM-DD HH:mm')}`}</div>}
{!!obj.inStorageName && <div>{`调入库房: ${obj.inStorageName}`}</div>}
{!!obj.inShopName && <div>{`调入门店: ${obj.inShopName}`}</div>}
{!!obj.outStorageName && <div>{`调出库房: ${obj.outStorageName}`}</div>}
{!!obj.outShopName && <div>{`调出门店: ${obj.outShopName}`}</div>}
{!!obj.method && <div>{`调运方式: ${obj.method}`}</div>}
{!!obj.transferUserName && <div>{`调运人员: ${obj.transferUserName}`}</div>}
{!!obj.creatTime && <div>{`发起时间: ${moment(obj.creatTime).format('YYYY-MM-DD HH:mm')}`}</div>}
{!!obj.receiverName && <div>{`${typeReceiverObj[it.type || '']}顾问: ${obj.receiverName}`}</div>}
{!!obj.senderName && <div>{`${typeSenderObj[it.type || '']}: ${obj.senderName}`}</div>}
{!!obj.ownerName && <div>{`车主: ${obj.ownerName}`}</div>}
{!!obj.carName && <div>{`车辆: ${obj.carName}`}</div>}
{!!obj.vin && <div>{`车架号: ${obj.vin}`}</div>}
{!!obj.plateNo && <div>{`车牌号: ${obj.plateNo}`}</div>}
{!!obj.supplierName && <div>{`供应商: ${obj.supplierName}`}</div>}
{!!obj.purchaseCnt && <div>{`外采种类: ${obj.purchaseCnt}`}</div>}
{!!obj.amount && <div>{`外采金额: ${obj.amount}`}</div>}
{!!obj.type && <div>{`类型: ${obj.type}`}</div>}
{!!obj.status && <div>{`状态: ${obj.status}`}</div>}
{!!obj.userName && <div>{`操作人员: ${obj.userName}`}</div>}
</div>
);
}}
/>
<Column title={`${item.isOut ? '出库' : '入库'}时间`} render={(t: string, it: PmsStoragePartShop.FlowVO) => moment(it.recordTime).format('YYYY-MM-DD HH:mm')} />
</Table>
</Modal>
);
}