canrd-main / canrd-erp-front · Files

import { postErpOrderAdd } from '@/services';
import {
  DrawerForm,
  FormListActionType,
  ProCard,
  ProFormGroup,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import { useEffect, useRef } from 'react';
import { useFieldAuth } from '../hooks';
import { OPERATION_TYPE } from '../type.d';

export default ({ onClose, data }) => {
  const { authFields } = useFieldAuth({
    operation: data?.id ? OPERATION_TYPE.EDIT : OPERATION_TYPE.CREATE,
  });
  const [form] = Form.useForm<{ name: string; company: string }>();
  const actionRef = useRef<
    FormListActionType<{
      name: string;
    }>
  >();
  //作为商品行号
  const rowNumber = useRef(0);

  useEffect(() => {
    form.setFieldsValue({ ...data });
  }, [data]);

  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      open
      title="新建订单"
      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) => {
        console.log(form);
        console.log(values);
        await postErpOrderAdd({ values });
        console.log(values.name);
        message.success('提交成功');
        // 不返回不会关闭弹框
        // onClose();
        return true;
      }}
      onOpenChange={(val) => {
        return !val && onClose();
      }}
    >
      <h2>订单基本信息</h2>
      <ProFormText
        name="id"
        width="lg"
        label="订单编号"
        placeholder="请输入订单编号"
        disabled={authFields.id}
      />
      <ProFormText
        width="lg"
        name="salesCode"
        label="销售代号"
        placeholder="请输入销售代号"
        disabled={authFields.salesCode}
      />
      <ProFormText
        name="customerName"
        width="lg"
        label="收货人"
        placeholder="请输入收货人"
        disabled={authFields.customerName}
      />
      <ProFormText
        width="lg"
        name="customerContactNumber"
        label="收货人联系手机号"
        placeholder="请输入收货人联系手机号"
      />
      <ProFormText
        width="lg"
        name="customerShippingAddress"
        label="收货人地址信息"
        placeholder="请输入收货人地址信息"
      />
      <ProFormText
        width="lg"
        name="institutionContactName"
        label="单位联系人"
        placeholder="请输入单位联系人"
      />
      <ProFormText
        width="lg"
        name="institution"
        label="单位"
        placeholder="请输入单位"
      />

      <h2>商品基本信息</h2>
      <ProFormText width="lg" name="totalPayment" label="支付总金额" />
      <ProFormText
        width="lg"
        name="logisticsStatus"
        label="物流方式"
        placeholder="请输入物流方式"
      />
      <ProFormText
        width="lg"
        name="paymentStatus"
        label="支付状态"
        placeholder="请输入支付状态"
      />
      <ProFormText
        width="lg"
        name="paymentMethod"
        label="支付方式"
        placeholder="请输入支付方式"
      />
      <ProFormText
        width="lg"
        name="paymentChannel"
        label="支付渠道"
        placeholder="请输入支付渠道"
      />
      <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="subOrderInformationLists"
        label=""
        initialValue={[
          {
            productCode: '',
            productName: '',
            quantity: '',
            productPrice: '',
            parameters: '',
            subOrderPayment: '',
          },
        ]}
        actionGuard={{
          beforeAddRow: async (defaultValue, insertIndex) => {
            return new Promise((resolve) => {
              console.log(defaultValue, insertIndex);
              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={({ listDom, action }) => {
          return (
            <ProCard
              bordered
              extra={action}
              title={'商品' + rowNumber.current++}
              style={{
                marginBlockEnd: 8,
              }}
            >
              {listDom}
            </ProCard>
          );
        }}
        actionRef={actionRef}
      >
        <ProFormGroup key="group">
          <ProFormText
            width="md"
            name="productCode"
            label="商品编码"
            placeholder="请输入商品编码"
          />
          <ProFormText
            width="md"
            name="productName"
            label="商品名称"
            placeholder="请输入商品名称"
          />
          <ProFormText
            width="md"
            name="quantity"
            label="商品数量"
            placeholder="请输入商品数量"
          />
          <ProFormText
            width="md"
            name="productPrice"
            label="商品单价"
            placeholder="请输入商品单价"
          />
          <ProFormText
            width="md"
            name="unit"
            label="价格单位"
            placeholder="请输入价格单位"
          />
          <ProFormText
            width="md"
            name="parameters"
            label="商品参数"
            placeholder="请输入商品参数"
          />
          <ProFormText
            width="md"
            name="subOrderPayment"
            label="子订单金额"
            placeholder="请输入子订单金额"
          />
        </ProFormGroup>
      </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>
  );
};