canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import UploadC from '@/pages/Invoice/waitProcessRecord/components/UploadSingleImg';
import {
  postAdminClientAddOrModifyClientComunicationInfo,
  postAdminClientQueryClientPage,
  postOrderErpOrderStagesUpload,
  postOrderErpUsersListByPage,
  postServiceConstClientWay,
  postServiceConstTradeStatus,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  ModalForm,
  ProFormDateTimePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import { Button, Col, Form, Row, message } from 'antd';
import { RcFile } from 'antd/es/upload';
import './style.css';
export default ({ data, type, reloadTable }) => {
  const [form] = Form.useForm();
  const onfinish = async (values) => {
    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;

    // const resSearchId = await postAdminClientQueryClientPage({
    //   data: {
    //     groupFilter: 'all',
    //   },
    // });
    // const matchingItem = resSearchId.data.data.find(
    //   (item) => item.id === values.name,
    // );
    const res = await postAdminClientAddOrModifyClientComunicationInfo({
      data: {
        ...values,
        // ticketsAttachments: form.getFieldValue("ticketsAttachments"),
        ticketsAttachments:
          form.getFieldValue('ticketsAttachments') !== undefined
            ? form.getFieldValue('ticketsAttachments')
            : data?.ticketsAttachments,
        // ticketsAttachments: data?.annexUrl,
      },
    });
    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>
      <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,
        }}
        initialValue={data?.ticketsType ? data?.ticketsType + '' : null}
        request={async () => {
          return [
            { label: '问题', value: 'QUESTION' },
            { label: '需求', value: 'DEMAND' },
            { label: '建议', value: 'ADVICE' },
          ];
        }}
      />
      <ProFormTextArea
        name="ticketsDetail"
        label="工单详情"
        placeholder="请输入工单详情"
        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
            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 href={data?.annexUrl} download> */}
        下载附件
      </a>
      <ProFormSelect
        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>
    </ModalForm>
  );
};