import { RESPONSE_CODE } from '@/constants/enum'; import { postAdminClientAddOrModifyClientComunicationInfo, postAdminClientQueryClientPage, postOrderErpOrderStagesUpload, postOrderErpUsersListByPage, postServiceConstClientWay, postServiceConstTradeStatus, } from '@/services'; import { enumToSelect } from '@/utils'; import { FormListActionType, ModalForm, ProCard, ProFormDateTimePicker, ProFormList, ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadDragger, } from '@ant-design/pro-components'; import { Button, Form, message } from 'antd'; import { RcFile } from 'antd/es/upload'; import { useEffect, useRef } from 'react'; import './style.css'; export default ({ data, type, reloadTable }) => { useEffect(() => {}); const [form] = Form.useForm(); const actionRef = useRef< FormListActionType<{ name: string; }> >(); const fileList: any = []; const onfinish = async (values) => { let list = values.ticketsList; list = list.map((item) => { let itemAnnexUrl = null; // 尝试从 item.filePaths 中获取 annexUrl if (item?.filePaths) { itemAnnexUrl = item?.filePaths?.[0]?.response?.data?.[0] || null; } else { itemAnnexUrl = null; } item.annexUrl = itemAnnexUrl; return item; }); values.list = list; const resSearchId = await postAdminClientQueryClientPage({ data: { groupFilter: 'all', }, }); const matchingItem = resSearchId.data.data.find( (item) => item.id === values.name, ); let matchedId; if (matchingItem) { matchedId = matchingItem.id; // 匹配成功,取出 id values.name = matchingItem.name; } else { matchedId = null; // 如果没有匹配项,可以设置为 null 或其他值 } const res = await postAdminClientAddOrModifyClientComunicationInfo({ data: { ...values, // ticketsAttachments: form.getFieldValue('ticketsAttachments'), clientId: matchedId, }, }); if (res.result === RESPONSE_CODE.SUCCESS) { message.success('新增成功'); reloadTable(); return true; } // 不返回不会关闭弹框 }; const editOnfinish = async (values) => { // setEditClientId(data.clientId); values.clientId = data.clientId; let list = values.ticketsList; // list = list.map((item) => { // // item.annexUrl = item.filePaths?.map((file) => { // // return { url: file.response.data[0] }; // // }); // // item.annexUrl = item?.filePaths[0].response?.data[0]; // item.annexUrl = item?.filePaths?.[0]?.response?.data?.[0] || null; // 使用 null 或默认值 // return item; // }); list = list.map((item, index) => { // 尝试从 item.filePaths 中获取 annexUrl const itemAnnexUrl = item?.filePaths?.[0]?.response?.data?.[0] || null; // 如果 itemAnnexUrl 为 null,则使用 data.ticketsList 对应的 annexUrl if ( itemAnnexUrl === null && data.ticketsList[index]?.annexUrl && index < data.ticketsList.length ) { item.annexUrl = data.ticketsList[index].annexUrl; // 确保对比中的 annesUrl 也是 null } else { item.annexUrl = itemAnnexUrl; // 否则,使用从 item.filePaths 中获取的值 } return item; }); values.list = list; const res = await postAdminClientAddOrModifyClientComunicationInfo({ data: { ...values, }, }); if (res.result === RESPONSE_CODE.SUCCESS) { message.success('新增成功'); reloadTable(); return true; } // 不返回不会关闭弹框 }; const optType = { add: { readOnly: false, title: '新增跟进记录', button: ( <Button size={'middle'} type="primary"> 新增 </Button> ), onFinish: onfinish, }, modify: { readOnly: false, title: '修改跟进记录', button: ( <Button size={'middle'} type="primary"> 编辑 </Button> ), onFinish: editOnfinish, }, detail: { readOnly: true, title: '查看跟进记录', button: ( <Button size={'middle'} type="primary" color="red"> 查看 </Button> ), onFinish: () => {}, }, }; return ( <ModalForm title={optType[type].title} resize={{ onResize() { console.log('resize!'); }, maxWidth: window.innerWidth * 0.8, minWidth: 400, }} form={form} trigger={optType[type].button} autoFocusFirstInput drawerProps={{ destroyOnClose: true, }} submitTimeout={2000} onFinish={optType[type].onFinish} > <ProFormSelect name="name" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, disabled: type === 'modify', }} initialValue={data ? data?.clientName + '' : null} label="客户" width="sm" request={async () => { const res = await postAdminClientQueryClientPage({ data: { groupFilter: 'all', }, }); // const namesArray = res.data.data.map((item) => item.name); // const formattedObject = res.data.data.reduce((acc, name) => { // acc[name] = name; // 将名称作为键和值 // return acc; // }, {}); // console.log(namesArray, '5656namesArray'); // const formattedObject = res.data.data.reduce((acc, item) => { // acc[item.name] = item.name; // 使用 name 作为键,id 作为值 // return acc; // }, {}); // return enumToSelect(formattedObject); const options = res.data.data.reduce((acc, item) => { acc.push({ label: item.name, value: item.id }); // 使用 name 作为 label,id 作为 value return acc; }, []); return options; }} rules={[ { required: true, message: '请选择客户', }, ]} ></ProFormSelect> <ProFormText name="contact" label="联系人" width="sm" placeholder="请输入联系人" initialValue={data?.content} readonly={optType[type].readOnly} rules={[ { required: true, message: '请输入联系人', }, ]} ></ProFormText> <ProFormText name="contactPhone" label="联系电话" width="sm" placeholder="请输入联系电话" initialValue={data?.content} readonly={optType[type].readOnly} rules={[ { required: true, message: '请输入联系电话', }, ]} ></ProFormText> <ProFormDateTimePicker name="datetime" label="跟进日期" initialValue={data ? data?.datetime + '' : null} placeholder="请选择跟进时间" width="sm" rules={[ { required: true, message: '请选择跟进日期', }, ]} /> <ProFormSelect name="tradeStatus" label="跟进状态" width="sm" placeholder="请输入跟进状态" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, }} initialValue={data?.tradeStatus ? data?.tradeStatus + '' : null} rules={[ { required: true, message: '请输入跟进状态', }, ]} request={async () => { const res = await postServiceConstTradeStatus(); return enumToSelect(res.data); }} /> <ProFormSelect name="way" width="sm" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, }} initialValue={data?.way ? data?.way + '' : null} label="跟进方式" request={async () => { const res = await postServiceConstClientWay(); return enumToSelect(res.data); }} rules={[ { required: true, message: '请选择跟进方式', }, ]} ></ProFormSelect> <ProFormTextArea name="content" label="跟进详情" placeholder="请输入跟进详情" initialValue={data?.content} readonly={optType[type].readOnly} rules={[ { required: true, message: '请输入跟进详情', }, ]} ></ProFormTextArea> <ProFormUploadDragger label="附件" name="attachment" action="upload.do" hidden={optType[type].readOnly} onChange={(info) => { const uploadFile = async ({ fileList: newFileList }) => { if (newFileList.length > 0) { const formData = new FormData(); formData.append('file', newFileList[0].originFileObj as RcFile); const res = await postOrderErpOrderStagesUpload({ data: formData, headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq', }, }); const url = res.data; console.log('attachments' + JSON.stringify(url)); form.setFieldValue('attachments', url); } else { form.setFieldValue('attachments', null); } }; uploadFile(info); }} max={1} /> <a hidden={!optType[type].readOnly} href={data?.attachments} download> 下载附件 </a> <ProFormTextArea name="comment" label="客户评价" placeholder="请输入客户评价" initialValue={data?.comment} readonly={optType[type].readOnly} ></ProFormTextArea> <ProFormText initialValue={data?.attachments} name="attachments" hidden ></ProFormText> <ProFormText initialValue={data?.id} name="id" hidden></ProFormText> <h2>工单指派</h2> <ProFormList // creatorButtonProps={{ disabled: optType('after-sales-check') }} // deleteIconProps={!optType('after-sales-check')} deleteIconProps={true} name="ticketsList" label="" copyIconProps={false} //复制按钮不显示 // initialValue={[ // { // ticketsType: '', // ticketsDetail: '', // assignPeople: '', // ticketsAttachment: '', // ticketsAttachments: '', // }, // ]} initialValue={ optType[type].title === '修改跟进记录' ? data.ticketsList || [] : [ { type: '', detailText: '', assignPeople: '', annexUrl: '', }, ] } actionGuard={{ beforeRemoveRow: async () => { return new Promise((resolve) => { let list = form.getFieldValue('ticketsList'); if (list && list.length === 1) { message.error('至少需要保留一个工单'); resolve(false); return; } resolve(true); }); }, }} itemRender={(doms, listMeta) => { if (optType[type].title === '修改跟进记录') { // let i = 0; // // let defaultFileList = data.ticketsList?.annexUrl?.map((annex) => { // // return { // // uid: i++, // // name: annex, // // status: 'uploaded', // // url: annex, // // response: { data: [annex] }, // // }; // // }); let defaultFileList = [ { uid: listMeta.index, name: data.ticketsList[listMeta.index]?.annexUrl, status: 'uploaded', url: data.ticketsList[listMeta.index]?.annexUrl, response: { data: [data.ticketsList[listMeta.index]?.annexUrl], }, }, ]; fileList[listMeta.index] = defaultFileList; } let itemFileList = fileList[listMeta.index]; return ( <ProCard bordered extra={doms.action} title={'工单指派' + (listMeta.index + 1)} style={{ marginBlockEnd: 8, }} > {[ <ProFormSelect key={'type' + listMeta.index} name="type" label="工单类型" width="sm" placeholder="请输入工单类型" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, }} // initialValue={data?.ticketsList?.type ? data?.ticketsList?.type + '' : null} initialValue={ data?.ticketsList ? data?.ticketsList?.type + '' : null } request={async () => { return [ { label: '问题', value: 'QUESTION' }, { label: '需求', value: 'DEMAND' }, { label: '建议', value: 'ADVICE' }, ]; }} />, <ProFormTextArea key={'detailText' + listMeta.index} name="detailText" label="工单详情" placeholder="请输入工单详情" initialValue={data?.detailText ? data?.detailText + '' : null} readonly={optType[type].readOnly} ></ProFormTextArea>, <ProFormSelect key={'assignPeople' + listMeta.index} name="assignPeople" width="sm" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, }} initialValue={ data?.assignPeople ? data?.assignPeople + '' : null } label="指派人员" request={async () => { const res = await postOrderErpUsersListByPage({ data: { pageSize: 10000, }, }); const userOptions = res.data.records ? res.data.records.map((user) => ({ label: user.userName, // 或者使用其他需要的属性 value: user.userName, // 作为value的字段 })) : []; return userOptions; }} ></ProFormSelect>, <> <ProFormUploadDragger key={'filePaths' + listMeta.index} label="附件" name="filePaths" action="/api/service/order/fileProcess" fieldProps={{ headers: { Authorization: localStorage.getItem('token'), }, // headers: { // 'Content-Type': // 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq', // }, itemFileList, }} max={1} /> </>, ]} </ProCard> ); }} actionRef={actionRef} ></ProFormList> {/* <div className="styled-text"> <div className="vertical-line"></div> <span className="text">工单指派</span> </div> <ProFormSelect name="ticketsType" label="工单类型" width="sm" placeholder="请输入工单类型" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, disabled: data?.ticketsStatus === 'SOLVED', }} initialValue={data?.ticketsType ? data?.ticketsType + '' : null} request={async () => { return [ { label: '问题', value: 'QUESTION' }, { label: '需求', value: 'DEMAND' }, { label: '建议', value: 'ADVICE' }, ]; }} /> <ProFormTextArea name="ticketsDetail" label="工单详情" placeholder="请输入工单详情" fieldProps={{ labelInValue: false, disabled: data?.ticketsStatus === 'SOLVED', }} initialValue={data?.ticketsDetail ? data?.ticketsDetail + '' : null} readonly={optType[type].readOnly} ></ProFormTextArea> */} {/* <ProFormUploadDragger label="工单附件" name="ticketsAttachment" action="upload.do" hidden={optType[type].readOnly} onChange={(info) => { const uploadFile = async ({ fileList: newFileList }) => { if (newFileList.length > 0) { const formData = new FormData(); formData.append('file', newFileList[0].originFileObj as RcFile); const res = await postOrderErpOrderStagesUpload({ data: formData, headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq', }, }); const url = res.data; console.log('ticketsAttachments' + JSON.stringify(url)); form.setFieldValue('ticketsAttachments', url); } else { form.setFieldValue('ticketsAttachments', null); } }; uploadFile(info); }} max={1} /> */} {/* <Row> <Col span={4}>附件:</Col> <Col span={20}> <UploadC fieldProps={{ labelInValue: false, disabled: data?.ticketsStatus === 'SOLVED', }} onFilesChange={async (newFileList) => { if (newFileList.length > 0) { const urls = []; // 创建一个数组来存储所有的 URL for (const file of newFileList) { const formData = new FormData(); formData.append('file', file.originFileObj as RcFile); const res = await postOrderErpOrderStagesUpload({ data: formData, headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq', }, }); const url = res.data; // 获取响应中的 URL urls.push(url); // 将每个 URL 追加到数组中 } // 将所有 URL 使用 ',' 进行拼接 const combinedUrl = urls.join(','); form.setFieldValue('ticketsAttachments', combinedUrl); // 设置表单字段值为拼接后的 URL } else { form.setFieldValue('ticketsAttachments', null); // 如果没有文件,则清空 URL } }} ></UploadC> </Col> </Row> <a hidden={!optType[type].readOnly} href={data?.orderAttachment} download> 下载附件 </a> <ProFormSelect name="assignPeople" width="sm" readonly={optType[type].readOnly} fieldProps={{ labelInValue: false, disabled: data?.ticketsStatus === 'SOLVED', }} initialValue={data?.assignPeople ? data?.assignPeople + '' : null} label="指派人员" request={async () => { const res = await postOrderErpUsersListByPage({ data: { pageSize: 10000, }, }); const userOptions = res.data.records ? res.data.records.map((user) => ({ label: user.userName, // 或者使用其他需要的属性 value: user.userName, // 作为value的字段 })) : []; return userOptions; }} ></ProFormSelect> */} </ModalForm> ); };