solveBtnModal.tsx
3.27 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
import {
postOrderErpTicketsUpdate,
postOrderErpTicketsUpload,
} from '@/services';
import { UploadOutlined } from '@ant-design/icons';
import {
ModalForm,
ProCard,
ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, Space, Upload, message } from 'antd';
import type { RcFile, UploadProps } from 'antd/es/upload';
import { useState } from 'react';
const waitTime = (time = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
export default ({ id, reload, show, solved }) => {
const [form] = Form.useForm<{ result: string }>();
const [fileList, setFileList] = useState<file[]>([]);
type file = {
uid: number;
name: string;
url: string;
};
const handleUploadChange = async (value) => {
setFileList(value.fileList);
if (value.fileList.length && value.fileList[0].status === 'uploading') {
if (value.fileList[0].originFileObj instanceof File) {
const formData = new FormData();
formData.append('file', value.fileList[0].originFileObj as RcFile);
const res = await postOrderErpTicketsUpload({
data: formData,
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (res.message === '成功') {
message.success('上传成功');
setFileList([
{
uid: value.fileList[0].originFileObj.uid,
name: value.fileList[0].originFileObj.name,
url: res.data,
},
]);
}
}
}
};
const uploadProps: UploadProps = {
onChange: handleUploadChange,
fileList: fileList.filter((item) => item.url),
};
const shouldShowUploadButton = fileList.length !== 1 || !fileList[0].url;
return (
<Space>
<ModalForm<{ result: string }>
title="处理工单"
width={660}
form={form}
trigger={<Button disabled={show}>处理</Button>}
modalProps={{
okText: '确定',
cancelText: '取消',
destroyOnClose: true,
}}
onFinish={async (values) => {
let ticketRequest = {};
ticketRequest.id = id;
ticketRequest.status = 'SOLVED';
if (values.result) {
ticketRequest.result = values.result;
}
if (fileList.length !== 0) {
ticketRequest.resultAnnexUrl = fileList[0].url;
ticketRequest.resultAnnexName = fileList[0].name;
}
let res = postOrderErpTicketsUpdate({
data: {
...ticketRequest,
},
});
if (res.message === '成功') {
message.success('操作成功');
}
await waitTime(2000);
setFileList([]);
reload();
solved();
return true;
}}
>
<ProCard bordered>
<Form.Item label="处理结果">
<ProFormTextArea name="result" />
</Form.Item>
<Form.Item label="附件">
<Upload {...uploadProps}>
{shouldShowUploadButton && (
<Button icon={<UploadOutlined />}>上传附件</Button>
)}
</Upload>
</Form.Item>
</ProCard>
</ModalForm>
</Space>
);
};