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

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