UploadExcel.tsx
5.74 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import React, { useEffect, useState } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import { Button, Modal, Upload, message } from 'antd';
import ConfirmDetailModal from '@/pages/pms/partPlan/PlanShipping/components/ConfirmDetailModal';
import usePagination from '@/hooks/usePagination';
import { getStoragePage } from '@/pages/pms/storage/StorageManage/api';
import { getPageListApi, Item } from '@/pages/pms/partPlan/PlanSupplier/api';
import SelectRow from '@/pages/pms/comonents/SelectRow';
import useInitail from "@/hooks/useInitail";
import { getShopApi } from '@/pages/pms/storage/partShop/api';
const Dragger = Upload.Dragger;
interface Props {
getList: () => any
importVisible: boolean
brands: any[]
setImportVisible: (v: boolean) => any
}
export default function UploadExcel({ getList, importVisible, setImportVisible, brands }: Props) {
const [delay, setDelay] = useState(true);
const [fileList, setFileList] = useState<any[]>([]);
const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, {pageSize: 1000});
const { list: suppliers, setParams, innerParams } = usePagination<Item>(getPageListApi, { pageSize: 500, supplierType: 10 }, {delay});
const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(getShopApi, [], {});
const [param, setParam] = useState({ brandId: null, storageId: null, supplierId: null, settleShopId: null});
const [visibleDetail, setVisibleDetail] = useState(false);
const [uploadResult, setUploadResult] = useState<any>();
useEffect(() => {
if (!importVisible) {
setUploadResult(null);
setParam({ brandId: null, storageId: null, supplierId: null, settleShopId: null });
setFileList([]);
}
}, [importVisible]);
useEffect(() => {
if (!visibleDetail) {
setImportVisible(false);
}
}, [visibleDetail]);
function beforeUpload(file: any) {
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isLt2M) {
message.error('文件不能超过20MB!');
}
return isLt2M;
}
function handleChange(info: any) {
const { file: { status, response }, fileList } = info;
if (status !== 'uploading' && response) {
const { success, result, data } = response;
if (status === 'done' && success) {
message.success(`${info.file.name} 上传成功`);
// 调用上传接口
setUploadResult(data);
getList();
} else if (response && !success) {
message.error(`${info.file.name} 上传失败: ${result}`);
}
}
setFileList(fileList.splice(-1));
}
const uploadProps = {
accept: '.xls, .xlsx',
name: 'file',
fileList,
multiple: false,
data: param,
action: `/api/pms/app/part/shipping/save`,
onChange: (file: any) => handleChange(file),
beforeUpload: (info: any) => beforeUpload(info)
};
return (
<Modal
visible={importVisible}
maskClosable={false}
title={uploadResult ? '导入结果' : '文件导入'}
onCancel={() => { setImportVisible(false); setUploadResult(null); }}
footer={
<Button onClick={() => { setImportVisible(false); setUploadResult(null); }}>取消</Button>
}
>
<div style={{ display: 'flex', flexDirection: 'column'}}>
<SelectRow
title="品牌"
value={param.brandId}
data={brands}
id="id"
name="name"
onChange={brandId => {
setParam({...param, brandId});
setParams({ ...innerParams, brandId, current: 1 }, true);
setDelay(false);
}}
/>
<SelectRow
title="供应商"
value={param.supplierId}
data={suppliers}
id="supplierId"
name="supplierName"
onChange={supplierId => setParam({ ...param, supplierId })}
/>
<SelectRow
title="库房"
value={param.storageId}
data={storages}
id="id"
name="storageName"
onChange={storageId => setParam({ ...param, storageId })}
/>
<SelectRow
title="结算门店"
value={param.settleShopId}
data={shops}
id="id"
name="name"
onChange={settleShopId => setParam({ ...param, settleShopId })}
/>
</div>
{!uploadResult ? !!param.brandId && !!param.storageId && !!param.supplierId && (
<div>
<Dragger {...uploadProps}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">将文件拖到此处上传</p>
</Dragger>
</div>
) : (
<div>
<p>数据总条数：{uploadResult.totalCount}条</p>
<p>成功条数：{uploadResult.successCount}条</p>
<p>失败条数：<span style={{ color: 'red' }}>{uploadResult.failedCount}</span>条</p>
{uploadResult.filePath ? (<a href={uploadResult.filePath} target="_blank" rel="noopener noreferrer">下载错误文件</a>) : null}
{!!uploadResult.data && !!uploadResult.successCount && (
<div style={{marginTop: 10}}>
<p>供应商：{uploadResult.data?.supplierName || '--'}</p>
<p>发运单号：{uploadResult.data?.shippingNo || '--'}</p>
<p>发运品种：{uploadResult.data?.cnt || 0}种</p>
<p>本次导入金额：{uploadResult.data?.importAmount || 0}元</p>
<a onClick={() => { setVisibleDetail(true); }}>去确认</a>
</div>
)}
</div>
)}
<ConfirmDetailModal
visible={visibleDetail}
item={uploadResult?.data || {}}
confirm
onCancel={() => setVisibleDetail(false)}
fetchList={() => { setUploadResult(null); getList(); }}
/>
</Modal>
);
}