import { postOrderErpTicketsCreate, postOrderErpTicketsGetType, postOrderErpTicketsUpload, postServiceOrderQuerySalesCode, } from '@/services'; import { enumToSelect } from '@/utils'; import { UploadOutlined } from '@ant-design/icons'; import { ModalForm, ProCard, ProFormSelect, ProFormText, ProFormTextArea, } from '@ant-design/pro-components'; import { Button, Form, Upload, message } from 'antd'; import { UploadFile } from 'antd/es/upload/interface'; import { useEffect, useState } from 'react'; type Ticket = { origin?: string; detailText?: string; type?: string; typeText?: string; assignPeople?: string; status?: string; statusText?: string; annexUrl?: string; annexName?: string; resolveTime?: Date; }; const waitTime = (time = 100) => { return new Promise((resolve) => { setTimeout(() => { resolve(true); }, time); }); }; export default ({ toReload }) => { const [form] = Form.useForm<Ticket>(); const [fileList, setFileList] = useState<UploadFile[]>([]); const [assignPeopleOptions, setAssignPeopleOptions] = useState([]); const [ticketTypeOptions, setTicketTypeOptions] = useState([]); useEffect(() => { const fetchTicketTypes = async () => { try { const res = await postOrderErpTicketsGetType(); const options = enumToSelect(res.data); setTicketTypeOptions(options); } catch (error) { console.error('Failed to fetch ticket types:', error); } }; fetchTicketTypes(); }, []); useEffect(() => { const fetchAssignPeopleOptions = async () => { try { const res = await postServiceOrderQuerySalesCode(); const options = res.data?.map((item) => ({ label: item.userName, value: item.userName, })); setAssignPeopleOptions(options || []); } catch (error) { console.error('Failed to fetch assign people options:', error); } }; fetchAssignPeopleOptions(); }, []); async function refresh() { setFileList([]); } const handleUploadChange = async (info) => { if (info.file.status === 'uploading' && !info.file.uploaded) { info.file.uploaded = true; const formData = new FormData(); formData.append('file', info.file.originFileObj); try { const res = await postOrderErpTicketsUpload({ data: formData, headers: { 'Content-Type': 'multipart/form-data' }, }); if (res.message === '成功') { message.success('上传成功'); const uploadedFile = { uid: info.file.uid, name: info.file.name, url: res.data, }; setFileList([uploadedFile]); form.setFieldsValue({ annexUrl: res.data, }); form.setFieldsValue({ annexName: info.file.name, }); } else { message.error('上传失败'); } } catch (error) { message.error('上传错误'); } } }; const uploadProps = { onChange: handleUploadChange, fileList: fileList, onRemove: () => { setFileList([]); form.setFieldsValue({ annexUrl: null, annexName: null }); }, }; const addForm = async () => { let requestBody = { origin: form.getFieldValue('origin'), type: form.getFieldValue('type'), typeText: form.getFieldValue('typeText'), detailText: form.getFieldValue('detailText'), annexUrl: form.getFieldValue('annexUrl'), annexName: form.getFieldValue('annexName'), assignPeople: form.getFieldValue('assignPeople'), }; await postOrderErpTicketsCreate({ data: { ...requestBody }, }); }; const shouldShowUploadButton = fileList.length === 0; return ( <ModalForm title="新增" width={660} form={form} trigger={ <Button onClick={refresh} type="primary"> 新增 </Button> } modalProps={{ okText: '确定', cancelText: '取消', destroyOnClose: true, }} onFinish={async () => { addForm(); await waitTime(2000); toReload(); return true; }} > <ProCard split="horizontal" bordered> <ProCard> <ProCard.Group direction="column"> <Form.Item label="工单来源"> <ProFormText name="origin" placeholder="请输入名称" width={200} rules={[{ required: true, message: '此项为必填项' }]} /> </Form.Item> <Form.Item label="工单类型"> <ProFormSelect name="type" placeholder="请选择工单类型" options={ticketTypeOptions} width={200} rules={[{ required: true, message: '此项为必填项' }]} onChange={(value) => { const selectedType = ticketTypeOptions.find( (option) => option.value === value, ); if (selectedType) { form.setFieldsValue({ typeText: selectedType.label }); } }} /> </Form.Item> <Form.Item label="工单详情"> <ProFormTextArea name="detailText" placeholder="请输入工单详情" /> </Form.Item> <Form.Item label="附件" name="annexUrl"> <Upload {...uploadProps}> {shouldShowUploadButton && ( <Button icon={<UploadOutlined />}>上传附件</Button> )} </Upload> </Form.Item> <Form.Item label="指派人员" name="assignPeople"> <ProFormSelect name="assignPeople" options={assignPeopleOptions} placeholder="请选择指派人员" rules={[{ required: true, message: '此项为必填项' }]} /> </Form.Item> </ProCard.Group> </ProCard> </ProCard> </ModalForm> ); };