src/pages/Client/FollowRecord/Components/CommunicationHistoryModal.tsx

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 [way, setWay] = useState(); // 跟进方式
  const [tradeStatusText, setTradeStatusText] = useState(); // 状态
  const [content, setContent] = useState(''); // 跟进详情
  const [createTime, setCreateTime] = useState(null); // 创建时间
  const [attachments, setAttachments] = useState(); //附件
  const [attachmentsName, setAttachmentsName] = useState(''); // 附件名称
  const [comment, setComment] = useState(''); // 客户评价
  useEffect(() => {
    const request = async () => {
      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);
        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: comment, // 跟进状态
    },
    // {
    //   key: '9',
    //   label: '工单类型',
    //   children: ticketsType, // 跟进状态
    // },
    // {
    //   key: '10',
    //   label: '工单详情',
    //   children: ticketsDetail, // 跟进状态
    // },
    // {
    //   key: '11',
    //   label: '指派人员',
    //   children: assignPeople, // 跟进状态
    // },
  ];
  const handleDelete = async () => {
    // 调用删除接口
    const success = await postAdminClientRemoveClientComunicationInfo({
      query: {
        id: data.id,
      },
    });
    // setIsModalVisible(false);
    if (success) {
      actionRef?.current?.reload(); // 重新加载表格数据
    }
  };
  const TicketDescriptions = ({ data }) => {
    return (
      <div>
        {data.ticketsList && data.ticketsList.length > 0 ? (
          data.ticketsList.map((ticket, index) => (
            <div key={index} style={{ marginBottom: '20px' }}>
              <Descriptions title={`工单 ${index + 1}`} column={1}>
                <Descriptions.Item label="工单类型">
                  {ticket.typeText}
                </Descriptions.Item>
                <Descriptions.Item label="工单详情">
                  {ticket.detailText}
                </Descriptions.Item>
                <Descriptions.Item label="指派人员">
                  {ticket.assignPeople}
                </Descriptions.Item>
              </Descriptions>
              {ticket.annexUrl && (
                <a
                  href={ticket.annexUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  下载工单附件
                </a>
              )}
            </div>
          ))
        ) : (
          <p></p>
        )}
      </div>
    );
  };
  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 && (
          <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>
        )}
        <TicketDescriptions data={data} />
        {/* {attachmentsName && (
          <a href={attachments} download>
            附件：{attachmentsName}
          </a>
        )}
        <div></div>
        {ticketsAttachment && (
          <a href={ticketsAttachment} download>
            工单附件：{ticketsAttachment}
          </a>
        )} */}
        <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>
        )} */}
      </ModalForm>
    </Space>
  );
};