1
import { RESPONSE_CODE } from '@/constants/enum';
2
import { blobToJson } from '@/utils';
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { UploadOutlined } from '@ant-design/icons';
import { ModalForm } from '@ant-design/pro-components';
import { Button, Form, Upload, UploadFile, UploadProps, message } from 'antd';
import { RcFile } from 'antd/es/upload';
import axios from 'axios';
import { useState } from 'react';
// import { cloneDeep } from 'lodash';
export default ({ setVisible, onClose }) => {
const [form] = Form.useForm<{ name: string; company: string }>();
const [fileList, setFileList] = useState<UploadFile[]>([]);
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
setFileList(newFileList);
18
const [messageApi, contextHolder] = message.useMessage();
19
20
const [uploadLoading, setUploading] = useState(false);
console.log(uploadLoading);
21
22
23
24
25
26
27
28
const exportLoading = (content: string) => {
messageApi.open({
type: 'loading',
content: content,
duration: 0,
});
};
29
30
const downloadImportTemplate = async () => {
31
exportLoading('正在下载......');
32
33
34
35
36
37
38
39
40
41
42
43
axios({
url: '/api/service/bankStatement/exportTemplate',
method: 'post',
responseType: 'blob',
headers: { Authorization: localStorage.getItem('token') },
})
.then((response) => {
// 创建一个新的 Blob 对象,它包含了服务器响应的数据(即你的 Excel 文件)
const blob = new Blob([response.data]); // Excel 的 MIME 类型
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
曾国涛
authored
about a year ago
44
a.download = '导入模板.xlsx'; // 你可以为文件命名
45
46
47
48
49
50
51
52
document.body.appendChild(a);
a.click(); // 模拟点击操作来下载文件
URL.revokeObjectURL(downloadUrl); // 释放掉 blob 对象所占用的内存
document.body.removeChild(a);
})
.catch((error) => {
// 处理错误
console.error('导出错误', error);
53
54
55
})
.finally(() => {
messageApi.destroy();
56
57
58
});
};
const handleUpload = async () => {
59
60
exportLoading('正在导入......');
61
62
63
64
const formData = new FormData();
fileList.forEach((file) => {
formData.append('file', file.originFileObj as RcFile);
});
65
66
setUploading(true);
67
68
69
70
71
axios({
url: '/api/service/bankStatement/importBankStatementForm',
method: 'post',
responseType: 'blob',
72
headers: {
73
Authorization: localStorage.getItem('token'),
74
75
76
'Content-Type':
'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
},
77
78
79
data: formData,
})
.then((response) => {
80
81
82
83
84
let data = response.data;
if (data.type === 'application/json') {
blobToJson(data).then((dataJson) => {
if (dataJson?.result === RESPONSE_CODE.SUCCESS) {
message.success(dataJson?.message);
85
onClose();
86
87
88
89
} else {
message.error(dataJson?.message);
}
});
90
} else {
91
92
93
94
95
96
97
98
99
100
101
message.error('上传失败,已下载错误信息表格');
// 创建一个新的 Blob 对象,它包含了服务器响应的数据(即你的 Excel 文件)
const blob = new Blob([response.data]); // Excel 的 MIME 类型
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = '银行流水导入模板.xlsx'; // 你可以为文件命名
document.body.appendChild(a);
a.click(); // 模拟点击操作来下载文件
URL.revokeObjectURL(downloadUrl); // 释放掉 blob 对象所占用的内存
document.body.removeChild(a);
102
103
104
105
106
}
})
.catch((error) => {
// 处理错误
message.error('系统出现异常了,请联系管理员', error);
107
108
109
})
.finally(() => {
setUploading(false);
110
messageApi.destroy();
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
};
const props: UploadProps = {
onRemove: (file) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: (file) => {
setFileList([...fileList, file]);
return false;
},
fileList,
onChange: handleChange,
accept: '.xlsx',
};
return (
<>
<ModalForm<{
name: string;
company: string;
}>
width={500}
open
138
title="银行流水导入"
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
form={form}
autoFocusFirstInput
modalProps={{
okText: '确定',
cancelText: '取消',
destroyOnClose: true,
onCancel: () => {
setVisible(false);
},
}}
onFinish={async () => {
handleUpload();
}}
onOpenChange={setVisible}
>
<div className="py-4 font-semibold">
导入银行流水
<Button type="link" onClick={downloadImportTemplate}>
下载导入模板
</Button>
</div>
<Upload {...props}>
<Button icon={<UploadOutlined />} disabled={fileList.length > 0}>
点击选择文件
</Button>
</Upload>
</ModalForm>
166
167
{contextHolder}
168
169
170
</>
);
};