canrd-main / canrd-erp-front · Files

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

import {
  postServiceOrderAddOrder,
  postServiceOrderQueryProductInformation,

  postServiceOrderUpdateOrder,

} from '@/services';

import { enumToSelect, getUserInfo } 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, useState } from 'react';

import {
  INVOCING_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
} from '../constant';

export default ({ onClose, data, isAdd }) => {
  const [invoicingStatus, setInvoicingStatus] = useState('');

  if (!isAdd) {

    //订单修改和新增的子订单列表命名是list
    data.list = data.subOrderInformationLists;
    //主订单事业部默认显示子订单第一条的事业部
    data.productBelongBusiness = data.list[0].productBelongBusiness;

    data.paymentMethod = data.list[0].paymentMethod;
    data.paymentChannel = data.list[0].paymentChannel;
    data.invoicingStatus = data.list[0].invoicingStatus;
  }

  const [form] = Form.useForm<{
    salesCode: '';
    customerName: '';
    customerContactNumber: '';
    institution: '';
    institutionContactName: '';
    customerShippingAddress: '';
    totalPayment: '';
    paymentChannel: '';
    paymentMethod: '';
    productBelongBusiness: '';
    invoicingStatus: '';
    invoiceIdentificationNumber: '';
    invoicingTime: '';
    bank: '';
    bankAccountNumber: '';

    deleteSubOrderLists: [];

    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={isAdd ? '新建订单' : '修改订单'}
      initialValues={() => {
        if (!isAdd) {
          return data;
        }

      }}

      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) => {

        let res = {};

        if (isAdd) {

          res = await postServiceOrderAddOrder({ data: values });

        } else {

          //计算已删除的子订单id
          const originIds = data.subOrderInformationLists.map((item) => {
            return item.id;
          });
          console.log('originIds：' + originIds);
          const curIds = form.getFieldValue('list')?.map((item) => {
            return item.id;
          });
          console.log('curIds：' + curIds);
          const diff = originIds.filter((item) => !curIds.includes(item));
          values.deleteSubOrderLists = diff;
          res = await postServiceOrderUpdateOrder({ data: values });

        }

        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);

          // 不返回不会关闭弹框
          onClose();
          return true;

        }

      }}
      onOpenChange={(val) => {

        return !val && onClose();

      }}
    >
      <h2>订单基本信息</h2>
      <ProFormText

        name="id"
        width="lg"
        disabled
        label="id"
        placeholder="id"
        hidden
      />
      <ProFormText

        name="salesCode"

        width="lg"
        disabled
        label="销售代表"
        placeholder="请输入销售代表"

        initialValue={getUserInfo().nickName}

      />
      <ProFormText
        name="customerName"
        width="lg"
        label="收货人"
        placeholder="请输入收货人"

        rules={[{ required: true, message: '收货人必填' }]}

      />
      <ProFormText
        width="lg"
        name="customerContactNumber"

        label="联系方式"
        placeholder="请输入联系方式"

        rules={[{ required: true, message: '联系方式必填' }]}

      />
      <ProFormText
        width="lg"

        name="institution"
        label="单位"
        placeholder="请输入单位"

        rules={[{ required: true, message: '单位必填' }]}

      />

      <ProFormText
        width="lg"
        name="institutionContactName"
        label="单位联系人"
        placeholder="请输入单位联系人"

        rules={[{ required: true, message: '单位联系人必填' }]}

      />

      <ProFormTextArea
        width="lg"
        name="customerShippingAddress"
        label="收货地址"
        placeholder="请输入收货地址"

        rules={[{ required: true, message: '收货地址必填' }]}
      />
      <ProFormText
        name="totalPayment"
        width="lg"
        label="支付总额（￥）"
        rules={[{ required: true, message: '支付总额必填' }]}

      />
      <ProFormSelect
        placeholder="请输入支付渠道"
        name="paymentChannel"
        width="lg"
        label="支付渠道"
        options={enumToSelect(PAYMENT_CHANNEL_OPTIONS)}

        rules={[{ required: true, message: '支付渠道必填' }]}

      />
      <ProFormSelect
        placeholder="请输入支付方式"
        name="paymentMethod"
        width="lg"
        label="支付方式"
        options={enumToSelect(PAYMENT_METHOD_OPTIONS)}

        rules={[{ required: true, message: '支付方式必填' }]}

      />
      <ProFormSelect
        placeholder="请输入所属事业部"
        name="productBelongBusiness"
        width="lg"
        label="所属事业部"
        options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}

        rules={[{ required: true, message: '所属事业部必填' }]}

      />
      <ProFormSelect

        placeholder="选择是否需要开票"

        name="invoicingStatus"
        width="lg"

        label="是否需要开票"

        options={enumToSelect(INVOCING_STATUS_OPTIONS)}

        onChange={(_, option) => {
          setInvoicingStatus(option.value);
        }}

        rules={[{ required: true, message: '是否需要开票必填' }]}

      />

      <ProFormText
        width="lg"

        name="invoiceIdentificationNumber"
        label="开票信息"

        hidden={invoicingStatus !== 'INVOICED'}

        placeholder="请输入开票信息"

        rules={[
          {
            required: invoicingStatus === 'INVOICED' ? true : false,
            message: '开票信息必填',
          },
        ]}

      />

      {getUserInfo().roleSmallVO?.code === 'admin' ? (
        <ProFormDateTimePicker
          width="lg"
          name="invoicingTime"

          hidden={invoicingStatus === 'INVOICED'}

          label="开票时间"
          placeholder="请输入开票时间"
        />
      ) : (
        ''
      )}

      <ProFormText
        width="lg"
        name="bank"
        label="开户银行"

        hidden={invoicingStatus !== 'INVOICED'}

        placeholder="请输入开户银行"
      />
      <ProFormText
        width="lg"
        name="bankAccountNumber"

        hidden={invoicingStatus !== 'INVOICED'}

        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="请搜索商品"

                  rules={[{ required: true, message: '商品名称必填' }]}

                  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="请输入商品数量"

          rules={[{ required: true, message: '商品数量必填' }]}

        />
        <ProFormDigit
          width="lg"
          name="productPrice"
          label="商品单价"
          placeholder="请输入商品单价"

          rules={[{ required: true, message: '商品单价必填' }]}

        />
        <ProFormText
          width="lg"
          name="unit"
          disabled

          label="商品单位"
          placeholder="请输入商品单位"
          rules={[{ required: true, message: '商品单位必填' }]}

        />

        <ProFormDigit
          width="lg"
          name="subOrderPayment"
          label="子订单金额"
          placeholder="请输入子订单金额"

          rules={[{ required: true, message: '子订单金额必填' }]}

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