canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import {
  postAdminClientAddAdminClient,
  postAdminClientModifyClientInfo,
  postDistrictSelectByLevel,
  postDistrictSelectByNameAndLevel,
  postDistrictSelOrderProvince,
  postServiceConstClientLevels,
  postServiceConstTradeStatus,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  DrawerForm,
  ProFormDateTimePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { useState } from 'react';

export default ({ optType, record }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  //省市区
  const [province, setProvince] = useState('');
  const [city, setCity] = useState('');
  const [setDistrict] = useState('');
  const optTypeEnum = {
    add: {
      text: '新增',
      button: <Button type="primary">新增</Button>,
      readonly: false,
      onFinish: async (values) => {
        const res = await postAdminClientAddAdminClient({
          data: values,
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success('新增成功');
          // 不返回不会关闭弹框
          return true;
        }
      },
    },
    edit: {
      text: '编辑',
      button: <a type="primary">编辑</a>,
      readonly: false,
      onFinish: async (values) => {
        const res = await postAdminClientModifyClientInfo({
          data: values,
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success('编辑成功');
          // 不返回不会关闭弹框
          return true;
        }
      },
    },
    detail: {
      text: '详情',
      button: <a type="primary">详情</a>,
      readonly: true,
    },
  };

  return (
    <DrawerForm
      title={optTypeEnum[optType].text}
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 300,
      }}
      initialValues={record}
      form={form}
      trigger={optTypeEnum[optType].button}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      width={500}
      readonly={optTypeEnum[optType].readonly}
      onFinish={optTypeEnum[optType].onFinish}
    >
      <ProFormText name="id" label="id" hidden={true} />

      <ProFormText
        name="name"
        label="客户名称"
        placeholder="请输入名称"
        rules={[
          {
            required: true,
            message: '请输入客户名称',
          },
        ]}
      />
      <ProFormText
        name="companyName"
        label="单位名称"
        placeholder="请输入单位名称"
        rules={[
          {
            required: true,
            message: '请输入单位名称',
          },
        ]}
      />
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          width: 340,
        }}
      >
        <ProFormSelect
          name="province"
          key="province"
          width={100}
          label="省"
          allowClear={false}
          onChange={(value) => {
            console.log(value);

            if (value !== undefined || value !== null) {
              console.log('setProvince');

              setProvince(value);
            }
          }}
          placeholder="请选择"
          rules={[
            {
              required: true,
              message: '请选择!',
            },
          ]}
          request={async () => {
            let province = [];
            let res = await postDistrictSelectByLevel({ data: 1 });
            if (res) {
              res.data.forEach((item) => {
                province.push({ value: item.district, label: item.district });
              });
            }
            return province;
          }}
        />
        <ProFormSelect
          key={province}
          name="city"
          width={100}
          label="市"
          allowClear={false}
          disabled={province === ''}
          placeholder="请选择"
          onChange={(value) => {
            if (value !== undefined || value !== null) {
              setCity(value);
            }
          }}
          rules={[
            {
              required: true,
              message: '请选择!',
            },
          ]}
          request={async () => {
            let cityOptions = [];
            console.log(form.getFieldValue('id'));
            if (form.getFieldValue('id')) {
              const resp = await postDistrictSelOrderProvince({
                data: form.getFieldValue('id'),
              });
              if (
                resp.data.province !== null &&
                resp.data.province !== undefined
              ) {
                console.log('province is ok');
                let res = await postDistrictSelectByNameAndLevel({
                  data: { district: resp.data.province, level: 1 },
                });
                if (res && res.data) {
                  cityOptions = res.data.map((item) => ({
                    value: item.district,
                    label: item.district,
                  }));
                }
              }
            }
            if (province !== '') {
              console.log(province);
              console.log('province is okk');
              let res = await postDistrictSelectByNameAndLevel({
                data: { district: province, level: 1 },
              });
              if (res && res.data) {
                cityOptions = res.data.map((item) => ({
                  value: item.district,
                  label: item.district,
                }));
              }
            }
            return cityOptions;
          }}
        />
        <ProFormSelect
          key={city ? city.toString() : 'district'}
          name="district"
          width={100}
          label="区"
          allowClear={false}
          onChange={(value) => {
            if (value !== undefined || value !== null) {
              setDistrict(value);
            }
          }}
          disabled={city === ''}
          placeholder="请选择"
          rules={[
            {
              required: true,
              message: '请选择!',
            },
          ]}
          request={async () => {
            let districtOptions = [];
            if (form.getFieldValue('id')) {
              const resp = await postDistrictSelOrderProvince({
                data: form.getFieldValue('id'),
              });
              if (resp.data.city !== null && resp.data.city !== undefined) {
                let res = await postDistrictSelectByNameAndLevel({
                  data: { district: resp.data.city, level: 2 },
                });
                if (res && res.data) {
                  districtOptions = res.data.map((item) => ({
                    value: item.district,
                    label: item.district,
                  }));
                }
              }
            }
            if (city !== '') {
              let res = await postDistrictSelectByNameAndLevel({
                data: { district: city, level: 2 },
              });
              if (res && res.data) {
                districtOptions = res.data.map((item) => ({
                  value: item.district,
                  label: item.district,
                }));
              }
            }
            return districtOptions;
          }}
        />
      </div>
      <ProFormText
        name="companyAddress"
        label="详细地址"
        placeholder="请输入单位地址"
        rules={[
          {
            required: true,
            message: '请输入单位地址',
          },
        ]}
      />
      <ProFormText
        name="phoneNumber"
        label="联系电话"
        placeholder="请输入联系电话"
        rules={[
          {
            required: true,
            message: '请输入联系电话',
          },
        ]}
      />
      <ProFormText
        name="source"
        label="客户来源"
        placeholder="请输入客户来源"
      />
      <ProFormText
        name="requirements"
        label="客户需求"
        placeholder="请输入客户需求"
        rules={[
          {
            required: true,
            message: '请输入客户需求',
          },
        ]}
      />
      <ProFormText name="referrers" label="推荐人" placeholder="请输入推荐人" />
      <ProFormSelect
        name="hasScheme"
        label="是否已报方案"
        placeholder="请选择是否已报方案"
        options={[
          {
            label: '是',
            value: true,
          },
          {
            label: '否',
            value: false,
          },
        ]}
        rules={[
          {
            required: true,
            message: '请选择是否已报方案',
          },
        ]}
      />
      <ProFormDateTimePicker
        name="quoteDatetime"
        label="报价时间"
        placeholder="请输入报价时间"
      />
      <ProFormSelect
        name="level"
        label="客户等级"
        placeholder="请输入客户等级"
        rules={[
          {
            required: true,
            message: '请输入客户等级',
          },
        ]}
        request={async () => {
          const res = await postServiceConstClientLevels();
          return enumToSelect(res.data);
        }}
      />
      <ProFormSelect
        name="tradeStatus"
        label="跟进状态"
        placeholder="请输入跟进状态"
        rules={[
          {
            required: true,
            message: '请输入跟进状态',
          },
        ]}
        request={async () => {
          const res = await postServiceConstTradeStatus();
          return enumToSelect(res.data);
        }}
      />
      <ProFormText name="notes" label="备注" placeholder="请输入备注" />
    </DrawerForm>
  );
};