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
import { Button, Stack, Typography } from "@mui/material";
import { useState } from "react";
import DraggableDialog from "../DraggableDialog";
import InitForm from "../InitForm";
function ImportExcel({ importurl, downloadurl, refresh }) {
const [dialogprops, setdialogprops] = useState();
const [errorList, seterrorList] = useState([]);
return (
<>
<Stack direction={"row"}>
<Button
variant="outlined"
onClick={() => {
setdialogprops({
open: true,
title: "导入",
footer: false,
});
}}
>
导入
</Button>
<DraggableDialog
dialogprops={dialogprops}
handleClose={() => {
setdialogprops((s) => ({
...s,
open: false,
}));
}}
formdom={
<InitForm
style={{ marginTop: 12, marginBottom: -18 }}
fields={[
{
title: "",
dataIndex: "file",
key: "file",
valueType: "uploadDragger",
url: importurl,
colProps: {
span: 24,
},
fieldProps: {
showUploadList: false,
},
},
]}
onValuesChange={(vals) => {
seterrorList([]);
if (Object.values(vals)?.[0]?.length === 0) {
refresh?.();
setdialogprops((s) => ({
...s,
open: false,
}));
} else {
seterrorList(Object.values(vals)?.[0]);
}
}}
></InitForm>
}
>
<Stack direction={"column"}>
<Stack
direction={"row"}
gap={1}
alignItems={"center"}
justifyContent={"space-between"}
>
<Typography variant={"b"} color={"#999999"}>
*请先下载模板文件
</Typography>
<Button
variant="text"
onClick={() => {
window.open(DOWNLOAD_URL + downloadurl);
}}
>
模板文件
</Button>
</Stack>
{errorList?.length > 0 && <b style={{ marginTop: 12 }}>错误信息</b>}
{errorList?.map?.((it) => {
return (
<Stack
direction={"row"}
style={{ color: "#ff4800", margin: "6px 0" }}
>
<span>{it?.name}</span>
<span style={{ flex: 1 }}>{it?.error}</span>
</Stack>
);
})}
</Stack>
</DraggableDialog>
</Stack>
</>
);
}
export default ImportExcel;