canrd-main / canrd-erp-front · Files

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

import {
  postServiceOrderAddOrder,

  postServiceOrderQueryCustomerNameInformation,

  postServiceOrderQueryProductInformation,

  postServiceOrderUpdateOrder,

} from '@/services';

import {
  enumToSelect,
  getAliYunOSSFileNameFromUrl,
  getUserInfo,
} from '@/utils';

import {
  DrawerForm,
  FormListActionType,
  ProCard,

  ProFormDateTimePicker,

  ProFormDigit,

  ProFormList,

  ProFormSelect,

  ProFormText,

  ProFormTextArea,

  ProFormUploadDragger,

} from '@ant-design/pro-components';

import { Button, Form, message } from 'antd';

import { cloneDeep } from 'lodash';

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

import {
  INVOCING_STATUS_OPTIONS,

  INVOCING_STATUS_OPTIONS_OLD,

  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,

  SALES_CODE_OPTIONS,

} from '../constant';

export default ({ onClose, data, subOrders, orderOptType }) => {

  const [invoicingStatus, setInvoicingStatus] = useState('');

  let originSubOrders = cloneDeep(subOrders);

  /**
   * 获取当前的操作类型boolean值
   * @param type 操作类型，如果与当前匹配返回true
   */
  function optType(type: string) {
    return orderOptType === type;
  }

  /**
   *
   * @returns 获取开票选项
   */
  function getInvoicingSelect() {
    if (optType('edit') || optType('copy')) {
      return enumToSelect(INVOCING_STATUS_OPTIONS_OLD);
    }
    return enumToSelect(INVOCING_STATUS_OPTIONS);
  }

  const fileList: any = [];

  useEffect(() => {
    // 在组件挂载或数据变化时，更新组件状态
    if (data) {
      setInvoicingStatus(data.invoicingStatus);
    }
  }, [data]);

  // let mainInfoDisbled = optType('edit');

  if (optType('edit') || optType('copy')) {

    //订单修改和新增的子订单列表命名是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;

    data.list = data.list?.map((item) => {
      item.filePaths = item.listAnnex?.map((path) => {
        let i = 0;
        return {
          uid: i++,
          name: getAliYunOSSFileNameFromUrl(path),
          status: 'uploaded',
          url: path,
          response: { data: [path] },
        };
      });
      return item;
    });

  }

  //复制的时候，如果是不需要开票，要把开票信息清空
  if (optType('copy') && data.invoicingStatus === 'UN_INVOICE') {
    data.invoiceIdentificationNumber = undefined;
  }

  if (subOrders !== undefined && subOrders.length > 0) {
    data.list = subOrders;
  }

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

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

  }

  /**
   * 选择收货人后自动填充信息
   * @param option 收货人信息
   */
  function autoFillCustomerInfo(option: any) {
    form.setFieldValue('institution', option.institution);
    form.setFieldValue('institutionContactName', option.institutionContactName);
    form.setFieldValue(
      'customerShippingAddress',
      option.customerShippingAddress,
    );
    form.setFieldValue('customerContactNumber', option.customerContactNumber);
    form.setFieldValue('customerName', option.customerName);
  }

  /**
   * 计算子订单金额
   * @param listMeta 当前商品信息
   */
  function computeSubOrderPayment(listMeta: any) {
    let quantity = listMeta?.record?.quantity;
    let productPrice = listMeta?.record?.productPrice;
    quantity = quantity === '' || quantity === undefined ? 0 : quantity;
    productPrice =
      productPrice === '' || productPrice === undefined ? 0 : productPrice;

    listMeta.subOrderPayment = quantity * productPrice;
    let list = form.getFieldValue('list');
    list[listMeta?.index].subOrderPayment = quantity * productPrice;
    form.setFieldValue('list', list);
  }

  /**
   * 计算支付总额
   */
  function computeTotalPayment() {
    let list = form.getFieldValue('list');
    let totalPayment = 0;
    list?.forEach((subOrder: any) => {
      let subOrderPayment = subOrder?.subOrderPayment;
      if (subOrderPayment === '' || subOrderPayment === undefined) {
        totalPayment += 0;
      } else {
        totalPayment += subOrderPayment;
      }
    });
    form.setFieldValue('totalPayment', totalPayment);
  }

  return (
    <DrawerForm<{

      deleteSubOrderLists: any;

      name: string;
      company: string;
    }>
      open

      width="35%"

      title={optType('add') || optType('copy') ? '新建订单' : '修改订单'}

      initialValues={() => {

        //编辑和复制回显数据
        if (optType('edit') || optType('copy')) {

          return data;
        }

        return {};

      }}

      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      // layout="horizontal"
      // labelCol={{ span: 8 }}
      form={form}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,

        maskClosable: false,

      }}
      submitTimeout={2000}
      onFinish={async (values) => {

        let res = {};

        //附件处理
        let list = values.list;
        // console.log(list);
        list = list.map((item) => {
          item.filePaths = item.filePaths?.map((file) => {
            console.log(file);
            return { url: file.response.data[0] };
          });
          return item;
        });

        values.list = list;

        if (optType('add') || optType('copy')) {

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

        } else {

          //计算已删除的子订单id

          const originIds = originSubOrders.map((item) => {

            return item.id;
          });
          const curIds = form.getFieldValue('list')?.map((item) => {
            return item.id;
          });

          let 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(true);

          return true;

        }

      }}
      onOpenChange={(val) => {

        return !val && onClose();

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

        key="id"

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

      <ProFormSelect

        name="salesCode"

        key="salesCode"

        width="lg"

        showSearch

        label="销售代表"
        placeholder="请输入销售代表"

        options={SALES_CODE_OPTIONS}
        rules={[{ required: true, message: '销售代表必填' }]}

        // disabled={mainInfoDisbled}

      />

      <ProFormSelect

        key="customerName"

        label="收货人"

        width="lg"
        showSearch
        name="customerName"
        // options={options}

        placeholder="请输入收货人"

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

        onChange={(_, option) => {
          autoFillCustomerInfo(option);
        }}
        fieldProps={{
          optionItemRender(item) {
            if (item.type === 'add') {
              return (
                <div title={item.customerName + '（新增商品信息）'}>
                  <span style={{ color: '#333333' }}>{item.customerName}</span>
                  {' | '}
                  <span style={{ color: 'orange' }}>自定义</span>
                </div>
              );
            }
            return (
              <div
                title={
                  item.customerName +
                  ' | ' +
                  item.customerContactNumber +
                  ' | ' +
                  (item.customerShippingAddress === undefined
                    ? '无地址'
                    : item.customerShippingAddress) +
                  ' | ' +
                  item.institutionContactName +
                  ' | ' +
                  item.institution
                }
              >
                <span style={{ color: '#333333' }}>{item.customerName}</span>
                {' | '}
                <span style={{ color: '#339999' }}>
                  {item.customerContactNumber === undefined
                    ? '无电话号码'
                    : item.customerContactNumber}
                </span>
                {' | '}
                <span style={{ color: '#666666' }}>
                  {item.customerShippingAddress === undefined
                    ? '无地址'
                    : item.customerShippingAddress}
                </span>
                {' | '}
                <span style={{ color: '#666666' }}>
                  {item.institutionContactName === undefined
                    ? '无单位联系人'
                    : item.institutionContactName}
                </span>
                {' | '}
                <span style={{ color: '#666666' }}>
                  {item.institution === undefined ? '无单位' : item.institution}
                </span>
              </div>
            );
          },
        }}
        request={async (value, { params }) => {
          const keywords = value.keyWords;
          const { data } = await postServiceOrderQueryCustomerNameInformation({
            data: { customerName: keywords },
            params: params,
          });
          let options = data.map((c: any) => {
            return {
              ...c,
              label: c.customerName,
              value: c.id,
              key: c.id,
            };
          });

          //第一个商品默认为要新增的商品
          if (keywords.trim() !== '') {
            options.unshift({
              customerName: keywords,
              type: 'add',
              label: keywords,
              value: 3.1415926,
              key: keywords,
            });
          }
          return options;
        }}

      />
      <ProFormText
        width="lg"

        key="customerContactNumber"

        name="customerContactNumber"

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

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

        // disabled={mainInfoDisbled}

      />
      <ProFormText
        width="lg"

        key="institution"

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

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

        // disabled={mainInfoDisbled}

      />

      <ProFormText
        width="lg"

        key="institutionContactName"

        name="institutionContactName"
        label="单位联系人"
        placeholder="请输入单位联系人"

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

        // disabled={mainInfoDisbled}

      />

      <ProFormTextArea
        width="lg"

        key="customerShippingAddress"

        name="customerShippingAddress"
        label="收货地址"
        placeholder="请输入收货地址"

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

        // disabled={mainInfoDisbled}

      />

      <div id="total-payment">
        <ProFormDigit
          name="totalPayment"
          width="lg"

          key="totalPayment"

          label="支付总额（￥）"
          rules={[{ required: true, message: '支付总额必填' }]}
          tooltip="点击计算，合计所有子订单金额"
          fieldProps={{
            addonAfter: (
              <Button
                className="rounded-l-none"
                type="primary"
                onClick={computeTotalPayment}
              >
                计算
              </Button>
            ),
          }}
          // disabled={mainInfoDisbled}
        />
      </div>

      <ProFormSelect
        placeholder="请输入支付渠道"
        name="paymentChannel"
        width="lg"

        key="paymentChannel"

        label="支付渠道"
        options={enumToSelect(PAYMENT_CHANNEL_OPTIONS)}

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

        // disabled={mainInfoDisbled}

      />
      <ProFormSelect
        placeholder="请输入支付方式"
        name="paymentMethod"
        width="lg"

        key="paymentMethod"

        label="支付方式"
        options={enumToSelect(PAYMENT_METHOD_OPTIONS)}

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

        // disabled={mainInfoDisbled}

      />
      <ProFormSelect

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

        name="invoicingStatus"
        width="lg"

        key="invoicingStatus"

        label="是否需要开票"

        options={getInvoicingSelect()}

        // disabled={mainInfoDisbled}

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

          if (option.value === 'UN_INVOICE') {
            form.setFieldValue('invoiceIdentificationNumber', undefined);
            form.setFieldValue('bank', undefined);
            form.setFieldValue('bankAccountNumber', undefined);
          }

        }}

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

      />

      <ProFormText
        width="lg"
        name="invoiceIdentificationNumber"
        label="开票信息"

        key="invoiceIdentificationNumber"

        // disabled={mainInfoDisbled}

        hidden={invoicingStatus === 'UN_INVOICE'}

        placeholder="请输入开票信息"
        rules={[
          {

            required: invoicingStatus === 'UN_INVOICE' ? false : true,

            message: '开票信息必填',
          },
        ]}
      />

      {getUserInfo().roleSmallVO?.code === 'admin' ? (

        <ProFormDateTimePicker
          width="lg"

          key="invoicingTime"

          name="invoicingTime"

          // disabled={mainInfoDisbled}

          hidden={invoicingStatus === 'UN_INVOICE'}

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

      <ProFormText
        width="lg"
        name="bank"

        key="bank"

        label="开户银行"

        // disabled={mainInfoDisbled}

        hidden={invoicingStatus === 'UN_INVOICE'}

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

        key="bankAccountNumber"

        name="bankAccountNumber"

        hidden={invoicingStatus === 'UN_INVOICE'}

        label="银行账号"

        // disabled={mainInfoDisbled}

        placeholder="请输入银行账号"
      />
      <ProFormText
        width="lg"
        name="notes"
        label="备注"

        key="notes"

        // disabled={mainInfoDisbled}

        placeholder="请输入备注"

        rules={[
          {
            max: 120, // 最大长度为120个字符
            message: '备注不能超过120个字符',
          },
        ]}

      />

      <h2>商品信息</h2>
      <ProFormList

        creatorButtonProps={{ disabled: false }}

        name="list"

        label=""

        copyIconProps={false} //复制按钮不显示

        initialValue={[
          {
            productCode: '',
            productName: '',
            quantity: '',
            productPrice: '',
            parameters: '',
            subOrderPayment: '',
          },
        ]}

        actionGuard={{
          beforeRemoveRow: async (index) => {
            return new Promise((resolve) => {
              if (index === 0) {

                message.error('第一行数据不能删除');

                resolve(false);
                return;
              }

              resolve(true);

            });
          },
        }}

        itemRender={(doms, listMeta) => {

          if (optType('edit')) {
            let i = 0;
            let defaultFileList = listMeta.record?.listAnnex?.map((annex) => {
              return {
                uid: i++,
                name: annex,
                status: 'uploaded',
                url: annex,
                response: { data: [annex] },
              };
            });
            fileList[listMeta.index] = defaultFileList;
          }
          let itemFileList = fileList[listMeta.index];

          return (

            <ProCard
              bordered

              extra={doms.action}

              title={'商品' + (listMeta.index + 1)}

              style={{
                marginBlockEnd: 8,
              }}
            >

              {[
                <ProFormSelect

                  key="key"

                  label="商品名称"
                  width="lg"
                  showSearch
                  name="productName"

                  // options={options}

                  placeholder="请搜索商品"

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

                  onChange={(_, option) => {
                    autoFillProductInfo(option, listMeta);
                  }}

                  fieldProps={{
                    optionItemRender(item) {
                      if (item.type === 'add') {
                        return (
                          <div title={item.productName + '（新增商品信息）'}>
                            <span style={{ color: '#333333' }}>
                              {item.productName}
                            </span>
                            {' | '}
                            <span style={{ color: 'orange' }}>新增商品</span>
                          </div>
                        );
                      }
                      return (
                        <div
                          title={
                            item.label +
                            ' | ' +
                            (item.specifications === undefined
                              ? '无参数'
                              : item.specifications) +
                            ' | ' +
                            item.unit
                          }
                        >
                          <span style={{ color: '#333333' }}>{item.label}</span>
                          {' | '}
                          <span style={{ color: '#339999' }}>
                            {item.specifications === undefined
                              ? '无参数'
                              : item.specifications}
                          </span>
                          {' | '}
                          <span style={{ color: '#666666' }}>
                            {item.unit === undefined ? '无单位' : item.unit}
                          </span>
                        </div>
                      );
                    },
                  }}
                  request={async (value, { params }) => {
                    const keywords = value.keyWords;

                    const { data } =
                      await postServiceOrderQueryProductInformation({

                        data: { productName: keywords },
                        params: params,

                      });

                    let options = data.map((p: any) => {

                      return {
                        ...p,
                        label: p.productName,

                        value: p.id + '|' + p.productName,

                        key: p.id,
                      };

                    });

                    //第一个商品默认为要新增的商品
                    if (keywords.trim() !== '') {
                      options.unshift({
                        productName: keywords,
                        type: 'add',
                        label: keywords,

                        value: 13 + '|' + keywords,
                        key: keywords,

                      });
                    }
                    return options;

                  }}
                />,

                <ProFormText

                  key={'productCode' + listMeta.index}

                  width="lg"
                  name="productCode"
                  disabled
                  label={
                    <>
                      <span>商品编码</span>
                      <span className="text-gray-400 text-xs pl-2">
                        新增商品时，商品编码由系统自动生成
                      </span>
                    </>
                  }
                  placeholder="未输入商品名称"
                />,
                <ProFormText

                  key={'parameters' + listMeta.index}

                  width="lg"
                  name="parameters"
                  label="商品参数"
                  placeholder="请输入商品参数"
                  rules={[{ required: true, message: '商品参数必填' }]}
                />,
                <ProFormDigit

                  key={'quantity' + listMeta.index}

                  width="lg"
                  name="quantity"
                  label="商品数量"
                  fieldProps={{
                    onChange: (value) => {
                      listMeta.record.quantity = value;
                      computeSubOrderPayment(listMeta);
                    },
                  }}
                  placeholder="请输入商品数量"
                  rules={[{ required: true, message: '商品数量必填' }]}
                />,
                <ProFormDigit

                  key={'productPrice' + listMeta.index}

                  width="lg"
                  name="productPrice"
                  label="商品单价"
                  fieldProps={{
                    onChange: (value) => {
                      listMeta.record.productPrice = value;
                      computeSubOrderPayment(listMeta);
                    },
                  }}
                  placeholder="请输入商品单价"
                  rules={[{ required: true, message: '商品单价必填' }]}
                />,
                <ProFormText

                  key={'unit' + listMeta.index}

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

                <ProFormDigit
                  width="lg"

                  key={'subOrderPayment' + listMeta.index}

                  name="subOrderPayment"
                  label="子订单金额"
                  placeholder="请输入子订单金额"
                  tooltip="商品数量和单价变化后会自动计算子订单金额"
                  rules={[{ required: true, message: '子订单金额必填' }]}
                />,
                <ProFormSelect

                  key={'productBelongBusiness' + listMeta.index}

                  placeholder="请输入所属事业部"
                  name="productBelongBusiness"
                  width="lg"
                  label="所属事业部"
                  options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
                  initialValue={'EXPERIMENTAL_CONSUMABLES'}
                  rules={[{ required: true, message: '所属事业部必填' }]}
                  // disabled={mainInfoDisbled}
                />,
                <ProFormText

                  key={'notes' + listMeta.index}

                  width="lg"
                  name="notes"
                  label="备注"
                  placeholder="请输入备注"

                  rules={[
                    {
                      max: 120, // 最大长度为120个字符
                      message: '备注不能超过120个字符',
                    },
                  ]}

                />,

                <>
                  <ProFormUploadDragger

                    key={'filePaths' + listMeta.index}

                    label="附件"
                    name="filePaths"
                    action="/api/service/order/fileProcess"
                    fieldProps={{
                      headers: { Authorization: localStorage.getItem('token') },
                      itemFileList,
                    }}
                  />
                </>,

              ]}

            </ProCard>

          );
        }}

        actionRef={actionRef}

      ></ProFormList>

    </DrawerForm>
  );
};