UploadExcel.tsx
3.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
import React, { useState } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import { Button, Modal, Upload, message, Switch } from 'antd';
import { useStore } from "@/pages/pms/storage/partShop";
import {importStockFix, shopImport} from './api';
import _ from 'lodash';
import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
interface Props{
stock?:boolean
}
const apiObj: {[key: number]: any} = {
1: importStockFix,
2: shopImport
};
const Dragger = Upload.Dragger;
export default function UploadExcel(props: Props) {
const { importVisible, setImportVisible, override, setOverride } = useStore();
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [uploadResult, setUploadResult] = useState<any>();
const [confirmLoading, setConfirmLoading] = useState(false);
const {stock} = props;
function beforeUpload(file: any) {
setFileList([...fileList, file]);
if (override == null) {
message.error('请选择是否覆盖数据');
return false;
}
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isLt2M) {
message.error('文件不能超过20MB!');
return false;
}
return false;
}
function submit() {
if (override == null) {
message.error('请选择是否覆盖数据');
return;
}
setConfirmLoading(true);
const type = stock ? 1 : 2;
apiObj[type]({file: fileList[0], override}).then((res) => {
setConfirmLoading(false);
setUploadResult(res.data)
message.success('导入成功');
}).catch((e: any) => {
setConfirmLoading(false);
message.error(e.message);
});
}
const uploadProps: UploadProps = {
onRemove: (file) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload,
fileList,
};
return (
<Modal
visible={importVisible}
maskClosable={false}
title={uploadResult ? '导入结果' : stock ? '调运库存导入': '文件导入'}
onCancel={() => { setImportVisible(false); setUploadResult(null); }}
footer={
<div>
<Button
loading={confirmLoading}
onClick={() => {
setImportVisible(false);
setUploadResult(null);
}}
>
取消
</Button>
<Button type="primary" onClick={_.throttle(submit, 3000)} disabled={!fileList.length} loading={confirmLoading}>确定</Button>
</div>
}
>
{!uploadResult ? (
<div>
<div style={{marginBottom: 20}}>
<span style={{marginRight: 20, color: '#333', fontSize: 14}}>是否覆盖数据:</span>
<Switch defaultChecked={override} onChange={(checked) => setOverride(checked)} />
</div>
{stock ? (
<Dragger {...uploadProps}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">将文件拖到此处上传</p>
</Dragger>
) : (
<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>失败条数:{uploadResult.failedCount}条</p>
{uploadResult.filePath ? (<a href={uploadResult.filePath} target="_blank" rel="noopener noreferrer">下载错误文件</a>):null}
</div>
)}
</Modal>
);
}