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>
);
};