src/pages/Order/components/OrderDrawer.tsx

import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderAddOrder,
  postServiceOrderQueryProductInformation,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  DrawerForm,
  FormListActionType,
  ProCard,
  ProFormDateTimePicker,
  ProFormDigit,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import { useEffect, useRef } from 'react';
import {
  INVOCING_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
} from '../constant';
export default ({ onClose, data }) => {
  const [form] = Form.useForm<{
    salesCode: '';
    customerName: '';
    customerContactNumber: '';
    institution: '';
    institutionContactName: '';
    customerShippingAddress: '';
    totalPayment: '';
    paymentChannel: '';
    paymentMethod: '';
    productBelongBusiness: '';
    invoicingStatus: '';
    invoiceIdentificationNumber: '';
    invoicingTime: '';
    bank: '';
    bankAccountNumber: '';
    notes: '';
    list: [
      {
        productCode: '';
        productName: '';
        quantity: '';
        productPrice: '';
        parameters: '';
        subOrderPayment: '';
        unit: '';
        serialNumber: '';
        notes: '';
      },
    ];
  }>();
  const actionRef = useRef<
    FormListActionType<{
      name: string;
    }>
  >();
  //作为商品行号
  const rowNumber = useRef(0);
  useEffect(() => {
    form.setFieldsValue({ ...data });
  }, [data]);
  /**
   *
   * @param option 商品名称所对应的商品数据
   * @param currentRowData list中当前行的数据
   */
  function autoFillProductInfo(option: any, currentRowData: any) {
    let copyList = form.getFieldValue('list');
    let currentData = copyList[currentRowData.field.key];
    currentData.productCode = option.productCode;
    currentData.parameters = option.specifications;
    currentData.unit = option.unit;
    form.setFieldValue('list', copyList);
  }
  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      open
      width="35%"
      title="新建订单"
      initialValues={{
        customerName: '123',
        customerContactNumber: '123',
        institution: '123',
        institutionContactName: '123',
        customerShippingAddress: '123123',
        totalPayment: '12312',
        paymentChannel: 'BANK_TRANSFER',
        paymentMethod: 'PAYMENT_IN_ADVANCE',
        productBelongBusiness: 'EXPERIMENTAL_CONSUMABLES',
        invoicingStatus: 'INVOICED',
        invoiceIdentificationNumber: '12312',
        invoicingTime: '2023-11-29 23:19:15',
        bank: '123',
        bankAccountNumber: '1231',
        notes: '123',
        list: [
          {
            productCode: 'qweq',
            productName: 'qweqwe',
            quantity: '99',
            productPrice: '12313',
            parameters: 'qweq',
            subOrderPayment: '1231',
            unit: 'qweq',
            serialNumber: 'qwewqe',
            notes: 'qweqw',
          },
          {
            productName: 'asdsda',
            productCode: 'dasda',
            parameters: 'sdasa',
            quantity: '99',
            productPrice: '123',
            unit: '123',
            subOrderPayment: '123',
            serialNumber: 'adadas',
          },
        ],
      }}
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      // layout="horizontal"
      // labelCol={{ span: 8 }}
      form={form}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const data = await postServiceOrderAddOrder({ data: values });
        if (data.result === RESPONSE_CODE.SUCCESS) {
          message.success(data.message);
        }
        // 不返回不会关闭弹框
        onClose();
        return true;
      }}
      onOpenChange={(val) => {
        return !val && onClose();
      }}
    >
      <h2>订单基本信息</h2>
      <ProFormText
        name="salesCode"
        width="lg"
        disabled
        label="销售代表"
        placeholder="请输入销售代表"
        initialValue="JOJO"
      />
      <ProFormText
        name="customerName"
        width="lg"
        label="收货人"
        placeholder="请输入收货人"
      />
      <ProFormText
        width="lg"
        name="customerContactNumber"
        label="联系方式"
        placeholder="请输入联系方式"
      />
      <ProFormText
        width="lg"
        name="institution"
        label="单位"
        placeholder="请输入单位"
      />
      <ProFormText
        width="lg"
        name="institutionContactName"
        label="单位联系人"
        placeholder="请输入单位联系人"
      />
      <ProFormTextArea
        width="lg"
        name="customerShippingAddress"
        label="收货地址"
        placeholder="请输入收货地址"
      />
      <ProFormText name="totalPayment" width="lg" label="支付总额（￥）" />
      <ProFormSelect
        placeholder="请输入支付渠道"
        name="paymentChannel"
        width="lg"
        label="支付渠道"
        options={enumToSelect(PAYMENT_CHANNEL_OPTIONS)}
      />
      <ProFormSelect
        placeholder="请输入支付方式"
        name="paymentMethod"
        width="lg"
        label="支付方式"
        options={enumToSelect(PAYMENT_METHOD_OPTIONS)}
      />
      <ProFormSelect
        placeholder="请输入所属事业部"
        name="productBelongBusiness"
        width="lg"
        label="所属事业部"
        options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
      />
      <ProFormSelect
        placeholder="选择是否要开票"
        name="invoicingStatus"
        width="lg"
        label="是否要开票"
        options={enumToSelect(INVOCING_STATUS_OPTIONS)}
      />
      <ProFormText
        width="lg"
        name="invoiceIdentificationNumber"
        label="开票信息"
        placeholder="请输入开票信息"
      />
      <ProFormDateTimePicker
        width="lg"
        name="invoicingTime"
        label="开票时间"
        placeholder="请输入开票时间"
      />
      <ProFormText
        width="lg"
        name="bank"
        label="开户银行"
        placeholder="请输入开户银行"
      />
      <ProFormText
        width="lg"
        name="bankAccountNumber"
        label="银行账号"
        placeholder="请输入银行账号"
      />
      <ProFormText
        width="lg"
        name="notes"
        label="备注"
        placeholder="请输入备注"
      />
      {/* <h2>商品基本信息</h2>
      <ProFormText width="lg" name="totalPayment" label="支付总金额" />
      <ProFormSelect
        disabled
        placeholder="请输入物流方式"
        name="logisticsMethod"
        width="lg"
        label="物流方式"
        request={async () => {
          // 发送请求获取选项数据
          const { data } = await getServiceOrderProvideLogisticsStatus();
          return enumToSelect(data);
        }}
      />
      <ProFormText
        width="lg"
        name="paymentStatus"
        label="支付状态"
        placeholder="请输入支付状态"
      />
      <ProFormSelect
        placeholder="请输入支付方式"
        name="paymentMethod"
        width="lg"
        label="支付方式"
        request={async () => {
          // 发送请求获取选项数据
          const { data } = await getServiceOrderProvidePaymentMethod();
          return enumToSelect(data);
        }}
      />
      <ProFormSelect
        placeholder="请输入支付渠道"
        name="paymentChannel"
        width="lg"
        label="支付渠道"
        request={async () => {
          // 发送请求获取选项数据
          const { data } = await getServiceOrderProvidePaymentChannel();
          return enumToSelect(data);
        }}
      />
      <ProFormText
        width="lg"
        name="paymentTransactionId"
        label="支付流水号"
        placeholder="请输入支付流水号"
      />
      <ProFormText
        width="lg"
        name="invoiceInformation"
        label="发票信息"
        placeholder="请输入发票信息"
      />
      <ProFormText
        width="lg"
        name="invoicingStatus"
        label="开票状态"
        placeholder="请输入开票状态"
      />
      <ProFormText
        width="lg"
        name="productBelongDepartment"
        label="商品所属部门"
        placeholder="请输入商品所属部门"
      />
      <ProFormText
        width="lg"
        name="waybillNumber"
        label="运单号"
        placeholder="请输入运单号"
      />
      <ProFormText
        width="lg"
        name="notes"
        label="备注"
        placeholder="请输入备注"
      />
      <ProFormText
        width="lg"
        name="examineNotes"
        label="审核备注"
        placeholder="请输入审核备注"
      />
      <ProFormText
        width="lg"
        name="orderStatus"
        label="订单状态"
        placeholder="请输入订单状态"
      /> */}
      <h2>商品信息</h2>
      <ProFormList
        name="list"
        label=""
        initialValue={[
          {
            productCode: '',
            productName: '',
            quantity: '',
            productPrice: '',
            parameters: '',
            subOrderPayment: '',
          },
        ]}
        actionGuard={{
          beforeAddRow: async () => {
            return new Promise((resolve) => {
              rowNumber.current = 1;
              setTimeout(() => resolve(true), 1000);
            });
          },
          beforeRemoveRow: async (index) => {
            return new Promise((resolve) => {
              if (index === 0) {
                message.error('第一行数据不能删除');
                resolve(false);
                return;
              }
              rowNumber.current = 1;
              setTimeout(() => {
                resolve(true);
              }, 1000);
            });
          },
        }}
        itemRender={(doms, listMeta) => {
          // const list = actionRef.current?.getList();
          return (
            <ProCard
              bordered
              extra={doms.action}
              title={'商品' + rowNumber.current++}
              style={{
                marginBlockEnd: 8,
              }}
            >
              {[
                <ProFormSelect
                  key={listMeta.field.key}
                  label="商品名称"
                  width="lg"
                  showSearch
                  name="productName"
                  placeholder="请搜索商品"
                  onChange={(_, option) => {
                    autoFillProductInfo(option, listMeta);
                  }}
                  request={async (value) => {
                    const { data } =
                      await postServiceOrderQueryProductInformation({
                        data: { productName: value.keyWords },
                      });
                    return data.map((p: any) => {
                      return { ...p, label: p.productName, value: p.id };
                    });
                  }}
                />,
                doms.listDom,
              ]}
            </ProCard>
          );
        }}
        actionRef={actionRef}
      >
        <ProFormText
          width="lg"
          name="productCode"
          disabled
          label="商品编码"
          placeholder="未输入商品名称"
        />
        <ProFormText
          width="lg"
          disabled
          name="parameters"
          label="商品参数"
          placeholder="请输入商品参数"
        />
        <ProFormText
          width="lg"
          name="quantity"
          label="商品数量"
          placeholder="请输入商品数量"
        />
        <ProFormDigit
          width="lg"
          name="productPrice"
          label="商品单价"
          placeholder="请输入商品单价"
        />
        <ProFormText
          width="lg"
          name="unit"
          disabled
          label="价格单位"
          placeholder="请输入价格单位"
        />
        <ProFormDigit
          width="lg"
          name="subOrderPayment"
          label="子订单金额"
          placeholder="请输入子订单金额"
        />
        <ProFormText
          width="lg"
          name="serialNumber"
          label="物流单号"
          placeholder="请输入物流单号"
        />
        <ProFormText
          width="lg"
          name="notes"
          label="备注"
          placeholder="请输入备注"
        />
      </ProFormList>
      {/* <ProFormDateRangePicker name="contractTime" label="合同生效时间" /> */}
      {/* <ProForm.Group>
        <ProFormSelect
          options={[
            {
              value: 'chapter',
              label: '盖章后生效',
            },
          ]}
          width="xs"
          name="useMode"
          label="合同约定生效方式"
        />
        <ProFormSelect
          width="xs"
          options={[
            {
              value: 'time',
              label: '履行完终止',
            },
          ]}
          formItemProps={{
            style: {
              margin: 0,
            },
          }}
          name="unusedMode"
          label="合同约定失效效方式"
        />
      </ProForm.Group>
   */}
    </DrawerForm>
  );
};