canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import { postServiceOrderSendProduct } from '@/services';

import { enumToSelect } from '@/utils';

import {
  ProColumns,
  ProForm,

  ProFormSelect,

  ProFormText,
  ProTable,
} from '@ant-design/pro-components';

import { Button, Input, InputNumber, Modal, Select, message } from 'antd';

import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';

import { LOGISTICS_STATUS_OPTIONS } from '../constant';

const DeliverModal = ({ data: propsData, isSendProduct, onClose }) => {

  const [data, setData] = useState(propsData || {});
  const form = useRef();

  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',
      width: 80,
      dataIndex: 'id',
      render: (_, record) => <Input value={record.id} disabled />,
    },
    {

      title: '商品编号',
      width: 80,

      dataIndex: 'productCode',
      render: (_, record) => <Input value={record.productCode} disabled />,

    },
    {
      title: '商品名称',

      dataIndex: 'productName',

      align: 'right',

      width: 80,
      render: (_, record) => <Input value={record.productName} disabled />,
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      align: 'right',
      width: 80,
      render: (_, record) => <Input value={record.parameters} disabled />,

    },
    {
      title: '商品数量',
      width: 80,
      dataIndex: 'status',

      render: (_, record) => <InputNumber value={record.quantity} disabled />,

    },
    {

      title: '包裹数量',
      width: 80,
      dataIndex: 'packageNumber',

      render: (_, record, index) => (

        <InputNumber
          value={record.packageNumber}

          onChange={(value) => handleChange('packageNumber', index, value)}

        />
      ),
    },
    {

      title: '物流方式',

      width: 150,

      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数据

        />
      ),
    },
    {
      title: '物流单号',

      width: 150,

      key: 'serialNumber',

      render: (_, record, index) => (

        <Input
          placeholder="请输入物流单号"
          value={record.serialNumber}

          onChange={(value) => {
            handleChange('serialNumber', index, value);
          }}

        />
      ),
    },
  ];

  return (
    <Modal
      open

      width={900}
      title={isSendProduct ? '发货' : '修改发货信息'}

      onOk={async () => {
        //请求体封装
        let list = data.map((item) => {
          return {
            id: item.id,
            logisticsMethod: item.logisticsMethod,
            serialNumber: item.serialNumber,

            packageNumber: item.packageNumber,

          };
        });

        let body = { id: data[0].mainOrderId, list: list, flag: false };
        if (isSendProduct) {
          body.flag = true;
        }

        //发货请求
        const res = await postServiceOrderSendProduct({ data: body });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }

      }}
      onCancel={() => {
        onClose();
      }}
    >
      <strong>将物流方式和物流单号更新到下方所有订单</strong>
      <ProForm
        layout="inline"
        submitter={false}
        className="mb-8"
        formRef={form}
      >

        <ProFormSelect
          placeholder="请输入物流方式"
          name="logisticsMethod"
          width="sm"
          label="物流方式"
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
        />
        <ProFormText name="serialNumber" label="物流单号"></ProFormText>

        <Button
          type="primary"
          onClick={() => {
            const values = form.current.getFieldsValue();
            let newData = cloneDeep(data);
            newData = newData.map((item) => ({
              ...item,

              logisticsMethod: values.logisticsMethod,
              serialNumber: values.serialNumber, // 物流单号？

            }));
            setData(newData);
          }}
        >
          批量更新
        </Button>
      </ProForm>
      <ProTable<any>
        className="px-0"
        dataSource={data}

        rowKey="id"

        pagination={false}
        columns={columns}
        search={false}
        dateFormatter="string"
        options={false}
      />
    </Modal>
  );
};

export default DeliverModal;