import { getOrderErpTicketsDetail, postOrderErpTicketsGetType, postOrderErpTicketsUpdate, 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, Space, Upload, message } from 'antd'; import { UploadFile } from 'antd/es/upload/interface'; import { useEffect, useState } from 'react'; import SolveBtnModal from './solveBtnModal'; const waitTime = (time = 100) => { return new Promise((resolve) => { setTimeout(() => { resolve(true); }, time); }); }; export default ({ id, toReload }) => { const [form] = Form.useForm(); const [isEditMode, setIsEditMode] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [status, setStatus] = useState(''); 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() { setIsEditMode(false); setIsProcessing(false); const res = await getOrderErpTicketsDetail({ query: { id: id, }, }); const ticketData = res.data; form.setFieldsValue(ticketData); setStatus(ticketData.status); setFileList( ticketData.annexUrl ? [ { uid: ticketData.annexUrl, name: ticketData.annexName, url: ticketData.annexUrl, }, ] : [], ); } 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 updateForm = async () => { let requestBody = { id: form.getFieldValue('id'), 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 postOrderErpTicketsUpdate({ data: { ...requestBody }, }); toReload(); }; const shouldShowUploadButton = fileList.length === 0; return ( <ModalForm title="查看" width={660} form={form} trigger={<a onClick={refresh}>查看</a>} modalProps={{ okText: '确定', cancelText: '取消', destroyOnClose: true, }} submitter={{ render: (props, defaultDoms) => { return [ defaultDoms[0], <Space key="buttons"> {!isEditMode && !isProcessing && ( <Button type="primary" onClick={() => setIsEditMode(true)} disabled={status === 'SOLVED'} > 编辑 </Button> )} {!isEditMode && !isProcessing && ( <SolveBtnModal id={id} reload={toReload} show={status === 'SOLVED'} solved={refresh} /> )} {(isEditMode || isProcessing) && ( <Button type="primary" onClick={async () => { form.submit(); setIsEditMode(false); setIsProcessing(false); updateForm(); await waitTime(2000); }} > 确认 </Button> )} </Space>, ]; }, }} onFinish={async () => { return true; }} > <ProCard split="horizontal" bordered headerBordered> <ProCard> <ProCard.Group split="vertical"> <ProCard> <Form.Item label="创建人"> <ProFormText name="createByName" placeholder="请输入名称" width={200} readonly /> </Form.Item> </ProCard> <ProCard> <Form.Item label="创建时间"> <ProFormText name="createTime" placeholder="请输入名称" width={200} readonly /> </Form.Item> </ProCard> </ProCard.Group> </ProCard> <ProCard> <ProCard.Group split="horizontal" direction="column"> <ProCard> <Form.Item label="工单来源"> <ProFormText name="origin" placeholder="请输入名称" width={200} readonly={!isEditMode} /> </Form.Item> </ProCard> <ProCard> <Form.Item label="工单类型"> {isEditMode ? ( <ProFormSelect name="type" placeholder="请选择工单类型" options={ticketTypeOptions} width={200} onChange={(value) => { const selectedType = ticketTypeOptions.find( (option) => option.value === value, ); if (selectedType) { form.setFieldsValue({ typeText: selectedType.label }); } }} /> ) : ( <ProFormText name="typeText" placeholder="请输入工单类型" width={200} readonly /> )} </Form.Item> </ProCard> <ProCard> <Form.Item label="工单详情"> <ProFormTextArea name="detailText" placeholder="请输入工单详情" readonly={!isEditMode} /> </Form.Item> </ProCard> <ProCard> <Form.Item label="附件" name="annexUrl"> {isEditMode ? ( <Upload {...uploadProps}> {shouldShowUploadButton && ( <Button icon={<UploadOutlined />}>上传附件</Button> )} </Upload> ) : form.getFieldValue('annexUrl') ? ( <a href={form.getFieldValue('annexUrl')} target="_blank" rel="noopener noreferrer" > {form.getFieldValue('annexName') || '附件'} </a> ) : ( <span>无附件</span> )} </Form.Item> </ProCard> <ProCard> <Form.Item label="指派人员" name="assignPeople"> {isEditMode ? ( <ProFormSelect name="assignPeople" options={assignPeopleOptions} placeholder="请选择指派人员" /> ) : ( <ProFormText name="assignPeople" placeholder="请输入指派人员" readonly /> )} </Form.Item> </ProCard> </ProCard.Group> </ProCard> <ProCard> <ProCard.Group split="horizontal"> <ProCard> <Form.Item label="工单状态"> <span>{status === 'SOLVED' ? '已处理' : '待处理'}</span> </Form.Item> </ProCard> {status === 'SOLVED' && ( <> <ProCard> <Form.Item label="处理结果"> <ProFormText name="result" placeholder="请输入处理结果" width={200} readonly /> </Form.Item> </ProCard> <ProCard> <Form.Item label="附件"> {form.getFieldValue('resultAnnexUrl') ? ( <a href={form.getFieldValue('resultAnnexUrl')} target="_blank" rel="noopener noreferrer" > {form.getFieldValue('resultAnnexName') || '附件'} </a> ) : ( <span>无附件</span> )} </Form.Item> </ProCard> </> )} </ProCard.Group> </ProCard> </ProCard> </ModalForm> ); };