ClientDrawer.tsx 2.81 KB
import {
  postServiceConstClientLevels,
  postServiceConstTradeStatus,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  DrawerForm,
  ProFormDateTimePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';

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

  return (
    <DrawerForm
      title="新建表单"
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 300,
      }}
      form={form}
      trigger={<a type="primary">新增客户</a>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values);
        message.success('提交成功');
        // 不返回不会关闭弹框
        return true;
      }}
    >
      <ProFormText name="name" label="客户名称" placeholder="请输入名称" />
      <ProFormText
        name="companyName"
        label="单位名称"
        placeholder="请输入单位名称"
      />
      <ProFormText
        name="companyAddress"
        label="单位地址"
        placeholder="请输入单位地址"
      />
      <ProFormText
        name="phoneNumber"
        label="联系电话"
        placeholder="请输入联系电话"
      />
      <ProFormText
        name="source"
        label="客户来源"
        placeholder="请输入客户来源"
      />
      <ProFormText
        name="requirements"
        label="客户需求"
        placeholder="请输入客户需求"
      />
      <ProFormText name="referrers" label="推荐人" placeholder="请输入推荐人" />
      <ProFormSelect
        name="hasScheme"
        label="是否已报方案"
        placeholder="请选择是否已报方案"
        options={[
          {
            label: '是',
            value: true,
          },
          {
            label: '否',
            value: false,
          },
        ]}
      />
      <ProFormDateTimePicker
        name="quoteDatetime"
        label="报价时间"
        placeholder="请输入报价时间"
      />
      <ProFormSelect
        name="level"
        label="客户等级"
        placeholder="请输入客户等级"
        request={async () => {
          const res = await postServiceConstClientLevels();
          return enumToSelect(res.data);
        }}
      />
      <ProFormSelect
        name="tradeStatus"
        label="跟进状态"
        placeholder="请输入跟进状态"
        request={async () => {
          const res = await postServiceConstTradeStatus();
          return enumToSelect(res.data);
        }}
      />
      <ProFormText name="notes" label="备注" placeholder="请输入备注" />
    </DrawerForm>
  );
};