import ClientModal from '@/pages/Client/FollowRecord/Components/ClientModal';
import {
postAdminClientQueryClientComunicationInfo,
postAdminClientRemoveClientComunicationInfo,
} from '@/services/request';
import { ModalForm } from '@ant-design/pro-components';
import { Button, Descriptions, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';
import '../index.less';
export default ({ data, reloadTable }) => {
// const [isModalVisible, setIsModalVisible] = useState(false); // 控制 ClientModal 的显示
const actionRef = useRef(); // 引用 actionRef，方便调用 reload 方法
const [datetime, setDatetime] = useState(); // 跟进日期
const [createByName, setCreateByName] = useState(''); // 跟进人员
const [clientName, setClientName] = useState(''); // 客户名称
// const [clientAddress, setClientAddress] = useState(''); // 客户地址
const [way, setWay] = useState(); // 跟进方式
const [tradeStatusText, setTradeStatusText] = useState(); // 状态
// const [clientNameLike, setClientNameLike] = useState(''); // 客户名称模糊查询
// const [clientAddressLike, setClientAddressLike] = useState(''); // 客户地址模糊查询
// const [tradeStatus, setTradeStatus] = useState(''); // 客户状态
// const [tradeStatusLike, setTradeStatusLike] = useState(''); // 客户状态模糊查询
const [content, setContent] = useState(''); // 跟进详情
const [createTime, setCreateTime] = useState(null); // 创建时间
const [attachments, setAttachments] = useState(); //附件
const [attachmentsName, setAttachmentsName] = useState(''); // 附件名称
const [ticketsType, setTicketsType] = useState(''); // 附件名称
const [ticketsDetail, setTicketsDetail] = useState(''); // 附件名称
const [ticketsAttachment, setTicketsAttachment] = useState(); // 附件名称
// const [ticketsAttachmentName, setTicketsAttachmentName] = useState(''); // 附件名称
const [comment, setComment] = useState(''); // 客户评价
const [assignPeople, setAssignPeople] = useState(''); // 附件名称
useEffect(() => {
const request = async () => {
console.log(data, '5656datatatatata');
const res = await postAdminClientQueryClientComunicationInfo({
data: {
id: data.id,
},
});
// const resTicket = await getOrderErpTicketsGetTicketsByClientId({
// query: {
// id: data.id,
// },
// });
// data.type = resTicket.data.type;
// data.detailText = resTicket.data.detailText;
// data.annexUrl = resTicket.data.annexUrl;
// data.assignPeople = resTicket.data.assignPeople;
// console.log(resTicket, '5656resTicket');
// const dataSearch = res.data.data[0];
const dataSearch = res.data.data[0];
if (dataSearch) {
// data.type = resTicket.data.type;
// data.detailText = resTicket.data.detailText;
// data.annexUrl = resTicket.data.annexUrl;
// data.assignPeople = resTicket.data.assignPeople;
if (dataSearch.attachments) {
const url = dataSearch.attachments;
const match = url.match(/aliyuncs\.com\/(.*?)\?/);
let decodedStr = '';
if (match) {
// 获取匹配的字符串并进行解码
const encodedStr = match[1];
decodedStr = decodeURIComponent(encodedStr);
setAttachmentsName(decodedStr); // 设置跟进日期
}
}
// if (dataSearch.ticketAttachments) {
// const url = dataSearch.attachments;
// const match = url.match(/aliyuncs\.com\/(.*?)\?/);
// let decodedStr = '';
// if (match) {
// // 获取匹配的字符串并进行解码
// const encodedStr = match[1];
// decodedStr = decodeURIComponent(encodedStr);
// setTicketsAttachmentName(decodedStr); // 设置跟进日期
// }
// }
setComment(dataSearch.comment);
setTicketsType(dataSearch.ticketsTypeText);
setTicketsDetail(dataSearch.ticketsDetail);
setTicketsAttachment(dataSearch.ticketsAttachments);
setAssignPeople(dataSearch.assignPeople);
setComment(dataSearch.comment);
setDatetime(dataSearch.datetime); // 设置跟进日期
// setDateRange(data.dateRange || []); // 设置跟进时间范围
setCreateByName(dataSearch.createByName); // 设置跟进人员
setClientName(dataSearch.clientName); // 设置客户名称
// setClientAddress(data.clientAddress || ''); // 设置客户地址
// setClientNameLike(data.clientNameLike || ''); // 设置客户名称模糊查询
// setClientAddressLike(data.clientAddressLike || ''); // 设置客户地址模糊查询
// setTradeStatus(data.tradeStatus || ''); // 设置客户状态
setTradeStatusText(data.tradeStatusLike || ''); // 设置客户状态模糊查询
setContent(dataSearch.content); // 设置跟进详情
setCreateTime(dataSearch.createTime); // 设置创建时间
setWay(dataSearch.wayText);
setAttachments(dataSearch.attachments);
}
};
request();
}, []);
const items = [
{
key: '1',
label: '跟进日期',
children: datetime, // 跟进日期
},
{
key: '2',
label: '跟进人员',
children: createByName, // 跟进人员
},
{
key: '3',
label: '客户名称',
children: clientName, // 客户名称
},
{
key: '4',
label: '跟进详情',
children: content, // 跟进详情
},
{
key: '5',
label: '创建时间',
children: createTime, // 创建时间
},
{
key: '6',
label: '跟进方式',
children: way, // 跟进方式
},
{
key: '7',
label: '跟进状态',
children: tradeStatusText, // 跟进状态
},
{
key: '8',
label: '工单类型',
children: ticketsType, // 跟进状态
},
{
key: '9',
label: '工单详情',
children: ticketsDetail, // 跟进状态
},
// {
// key: '12',
// label: '工单附件',
// children: ticketsAttachment, // 跟进状态
// },
{
key: '10',
label: '指派人员',
children: assignPeople, // 跟进状态
},
{
key: '11',
label: '客户评价',
children: comment, // 跟进状态
},
];
const handleDelete = async () => {
// 调用删除接口
const success = await postAdminClientRemoveClientComunicationInfo({
query: {
id: data.id,
},
});
// setIsModalVisible(false);
if (success) {
actionRef?.current?.reload(); // 重新加载表格数据
}
};
return (
<Space>
<ModalForm
className="client-index"
title="跟进记录"
trigger={<Button type="primary">查看</Button>}
submitter={{
resetButtonProps: {
style: {
display: 'none',
},
},
submitButtonProps: {
style: {
display: 'none',
},
},
render: (props, defaultDoms) => {
return [
...defaultDoms,
<>
<ClientModal
key={'modify'}
// data={data} // 将表单数据传递给 ClientModal
data={data} // 传递修改后的 data
reloadTable={() => {
actionRef?.current?.reload(); // 重新加载表格数据
props.submit();
reloadTable();
}}
type={'modify'}
onFinish={() => {
// setIsModalVisible(false);
}} // 关闭 Modal
style={{ marginRight: '10px' }}
/>
<Button
key={'delete'}
onClick={() => {
handleDelete();
props.submit();
reloadTable();
}}
type="primary"
size="middle"
danger // 使用 danger 属性来将按钮颜色设置为红色
style={{ marginLeft: '10px' }}
onFinish={() => {
actionRef.current.reload();
}}
>
删除
</Button>
</>,
];
},
}}
onFinish={async () => {
// 提交成功后，显示 ClientDrawer
// setIsModalVisible(true);
return true;
}}
>
<Descriptions items={items} column={1} />
{/* {attachmentsName && (
<a href={attachments} download>
附件：{attachmentsName}
</a>
)}
<div></div>
{ticketsAttachment && (
<a href={ticketsAttachment} download>
工单附件：{ticketsAttachment}
</a>
)} */}
{attachmentsName && (
<div>
{attachmentsName.endsWith('.png') ||
attachmentsName.endsWith('.jpg') ? (
<>
<img
src={attachments}
alt={attachmentsName}
style={{ maxWidth: '300px', height: 'auto' }}
/>
<div></div>
<a href={attachments} download>
附件：{attachmentsName}
</a>
</>
) : (
<a href={attachments} download>
附件：{attachmentsName}
</a>
)}
</div>
)}
<div></div>
{/* {ticketsAttachment && (
<a href={ticketsAttachment} download>
工单附件：{ticketsAttachment}
</a>
)} */}
{/* {ticketsAttachment && (
<div>
{ticketsAttachment.includes('jpg') ||
ticketsAttachment.includes('png') ? (
<>
<img
src={ticketsAttachment}
alt={ticketsAttachment}
style={{ maxWidth: '300px', height: 'auto' }}
/>
<div></div>
<a href={ticketsAttachment} download>
工单附件：{ticketsAttachment}
</a>
</>
) : (
<a href={ticketsAttachment} download>
工单附件：{ticketsAttachment}
</a>
)}
</div>
)} */}
{ticketsAttachment && (
<div>
{ticketsAttachment.split(',').map((ticketsAttachment, index) => (
<div key={index}>
{ticketsAttachment.includes('jpg') ||
ticketsAttachment.includes('png') ? (
<>
<img
src={ticketsAttachment}
alt={`附件 ${index + 1}`}
style={{ maxWidth: '300px', height: 'auto' }}
/>
<div></div>
</>
) : null}
<a href={ticketsAttachment} download>
工单附件：{ticketsAttachment}
</a>
</div>
))}
</div>
)}
</ModalForm>
</Space>
);
};