OrderDrawer.tsx 3 KB
import { postErpOrderAdd, postErpOrderUpdate } from '@/services';
import {
  DrawerForm,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import { useEffect } from 'react';

export default ({ onClose, data }: { onClose: () => void; data: any }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();

  const handleAddProduct = () => {};
  useEffect(() => {
    if (data?.main_order_id) {
      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) => {
        if (data?.main_order_id) {
          await postErpOrderUpdate({ data: values });
        } else {
          await postErpOrderAdd({ data: values });
        }
        message.success('提交成功');
        // 不返回不会关闭弹框
        // onClose();
        return true;
      }}
      onOpenChange={(val) => {
        !val && onClose();
      }}
    >
      <h2>订单基本信息</h2>
      <ProFormText
        name="orderId"
        width="lg"
        label="订单编号"
        placeholder="请输入名称"
      />
      <ProFormText
        width="lg"
        name="orderName"
        label="销售代号"
        placeholder="请输入名称"
      />
      <h2>商品基本信息</h2>
      <ProFormText width="lg" name="id" label="支付总金额" />
      <ProFormList name="sub_orders" label="商品">
        {({ name }) => {
          return (
            <div key="row">
              <h2>商品{name + 1}</h2>
              <ProFormText name="product_code" label="product_code" />
              <ProFormText name="name2" label="名称" />
              <ProFormText name="name3" label="名称" />
              <ProFormText name="name4" label="名称" />
            </div>
          );
        }}
      </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>
  );
};