canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderProcureSend,
  postServiceOrderSendProduct,
  postServiceOrderSupplierSendOrder,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  ProColumns,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import {
  Button,
  Col,
  Flex,
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
  message,
} from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { CHECK_TYPE, LOGISTICS_STATUS_OPTIONS } from '../constant';

const DeliverModal = ({
  data: propsData,
  isSendProduct,
  setVisible,
  sendType,
  onClose,
}) => {
  const [data, setData] = useState(propsData || {});
  const form = useRef();

  /**
   * 是供应商发货还是普通发货
   * @param typeString
   * @returns
   */
  function optType(typeString: string) {
    if (sendType === typeString) {
      return true;
    }

    return false;
  }

  useEffect(() => {
    setData(propsData);
  }, [propsData]);

  const handleChange = (key: string, index: number, obj: any) => {
    const newData = cloneDeep(data);
    if (typeof obj !== 'object') {
      newData[index][key] = obj;
    } else {
      newData[index][key] = obj.target?.value;
    }
    setData(newData);
  };
  const columns: ProColumns<any>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 120,
      render: (_, record) => <Input value={record.id} disabled />,
    },
    {
      title: '商品编号',
      dataIndex: 'productCode',
      width: 120,
      render: (_, record) => <Input value={record.productCode} disabled />,
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      width: 120,
      render: (_, record) => <Input value={record.productName} disabled />,
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      width: 80,
      render: (_, record) => <Input value={record.parameters} disabled />,
    },
    {
      title: '商品数量',
      dataIndex: 'status',
      render: (_, record) => <InputNumber value={record.quantity} disabled />,
    },
    {
      title: '包裹数量',
      dataIndex: 'packageNumber',
      render: (_, record, index) => (
        <InputNumber
          min={1}
          value={record.packageNumber}
          defaultValue={1}
          onChange={(value) => handleChange('packageNumber', index, value)}
        />
      ),
    },
    {
      title: '物流方式',
      key: 'logisticsMethod',
      render: (_, record, index) => (
        <Select
          style={{ minWidth: 150 }}
          placeholder="请输入物流方式"
          value={record.logisticsMethod}
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
          onChange={(value) => {
            handleChange('logisticsMethod', index, value); //修改时更改record数据
            if (value === 'OTHER_LOGISTICS') {
              message.info(
                '您选择的是[其他物流方式]，请将该物流方式写在备注中',
              );
            }
          }}
        />
      ),
    },
    {
      title: '物流单号',
      key: 'serialNumber',
      render: (_, record, index) => (
        <Input
          placeholder="请输入物流单号"
          value={record.serialNumber}
          onChange={(value) => {
            handleChange('serialNumber', index, value);
          }}
        />
      ),
    },
    {
      title: '物流备注',
      dataIndex: 'packageNumber',
      render: (_, record, index) => (
        <Input.TextArea
          value={record.logisticsNotes}
          onChange={(value) => handleChange('logisticsNotes', index, value)}
        />
      ),
    },
  ];

  return (
    <Modal
      open
      width={1000}
      title={isSendProduct ? '发货' : '修改发货信息'}
      onOk={async () => {
        //请求体封装
        let list = data.map((item) => {
          return {
            id: item.id,
            logisticsMethod: item.logisticsMethod,
            serialNumber: item.serialNumber,
            packageNumber:
              item.packageNumber === null || item.packageNumber === undefined
                ? 1
                : item.packageNumber,
            logisticsNotes: item.logisticsNotes,
          };
        });

        for (let item of list) {
          let method = item.logisticsMethod;
          let notes = item.logisticsNotes;
          if (
            method === 'OTHER_LOGISTICS' &&
            (notes === '' || notes === undefined)
          ) {
            message.error(
              '请检查：物流方式为[其他物流方式]的记录中，物流备注不能为空！请将实际的物流方式填写在备注中！',
            );
            return;
          }
        }
        let body = { id: data[0].mainOrderId, list: list, flag: false };
        if (isSendProduct) {
          body.flag = true;
        }
        //发货请求
        let res;
        if (optType(CHECK_TYPE.SUPPLIER)) {
          res = await postServiceOrderSupplierSendOrder({ data: body });
        } else if (optType(CHECK_TYPE.PROCURE)) {
          res = await postServiceOrderProcureSend({ data: body });
        } else {
          res = await postServiceOrderSendProduct({ data: body });
        }

        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
      }}
      onCancel={() => {
        setVisible(false);
      }}
    >
      <Flex vertical>
        <strong>将物流方式和物流单号更新到下方所有订单</strong>
        <span className="text-[red] py-1">
          选择【其他物流方式】时，需要将对应的物流方式填写在备注中。例如：如果发圆通快递，系统上没有这个选项，就需要选【其他物流方式】，然后把“圆通快递”填在备注上。
        </span>
      </Flex>

      <ProForm
        layout="inline"
        submitter={false}
        className="mb-8"
        formRef={form}
      >
        <Row gutter={[0, 6]}>
          <Col>
            <ProFormSelect
              placeholder="请输入物流方式"
              name="logisticsMethod"
              width="sm"
              label="物流方式"
              options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
            />
            <ProFormText name="logisticsNotes" label="物流备注"></ProFormText>
          </Col>
          <Col>
            <ProFormText name="serialNumber" label="物流单号"></ProFormText>
          </Col>
        </Row>

        <Button
          type="primary"
          onClick={() => {
            const values = form.current.getFieldsValue();
            if (values.logisticsMethod === 'OTHER_LOGISTICS') {
              message.info(
                '自动填充成功！您选择的是其他物流方式，请将物流方式写在物流备注中！',
              );
            }
            let newData = cloneDeep(data);
            newData = newData.map((item) => ({
              ...item,
              logisticsMethod: values.logisticsMethod,
              serialNumber: values.serialNumber,
              logisticsNotes: values.logisticsNotes,
            }));
            setData(newData);
          }}
        >
          批量更新
        </Button>
      </ProForm>
      <ProTable<any>
        className="px-0"
        dataSource={data}
        rowKey="id"
        pagination={false}
        columns={columns}
        search={false}
        dateFormatter="string"
        options={false}
        scroll={{ x: 1400 }}
      />
    </Modal>
  );
};

export default DeliverModal;