cldV2react/src/pages/Customer/Client/components/AddClient/index.jsx

import React, { useState, useRef } from 'react'
import { Form, Row, Col, Button } from 'antd'
import LazyCascader from '@/components/LazyCascader'
import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
import { Plus } from '@icon-park/react'
import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
import { isNullOrUnDef } from '@/utils/is'
import TelephoneFormItem from './TelephoneFormItem'

const AddClient = props => {
  const {
    reload,
    onConfirm,
    buttonProps,
    dataId,
    dataType,
    btnTitle = '客户',
    defaultValues
  } = props
  const formRef = useRef(null)
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }
  const [showDataItem, setShowDataItem] = useState(false)
  const [validStatusFtl, setValidStatusFtl] = useState('')
  return (
    <ModalDragForm
      {...layout}
      formRef={formRef}
      modalProps={{ zIndex: 1003, getContainer: false }}
      title="添加客户"
      onVisibleChange={visible => {
        if (visible) {
          formRef.current?.setFieldsValue({ ...defaultValues })
        }
      }}
      trigger={
        <Button type="primary" {...buttonProps} className="mr-1">
          <Plus className="mr-1" />
          {btnTitle}
        </Button>
      }
      submitter={{
        render: ({ submit }, defaultDoms) => [
          ...defaultDoms,
          dataId ? (
            <Button
              type="primary"
              key="2"
              onClick={() => {
                setShowDataItem(true)
                const values = {}
                if (dataType === ChangeCompMap.BUSINESS.key) {
                  values.businessId = dataId
                }
                formRef.current && formRef.current.setFieldsValue(values)
                submit()
              }}
            >
              添加并关联
            </Button>
          ) : null
        ]
      }}
      onFinish={async values => {
        await onConfirm(values)
        formRef.current?.resetFields()
        setValidStatusFtl('')
        !isNullOrUnDef(reload) && reload()
        return true
      }}
    >
      {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
      <ProFormText
        name="clientName"
        label="姓名"
        placeholder="请输入客户名称"
        rules={[{ required: true, message: '请输入姓名' }]}
      />
      <Form.Item
        label="客户地区"
        name="districtIds"
        rules={[{ required: true, message: '请选择地区' }]}
      >
        <LazyCascader showFooter={true} />
      </Form.Item>
      <Row>
        <Col span={12}>
          <ProFormSelect
            name="gender"
            label="性别"
            placeholder=""
            rules={[{ message: '请选择性别' }]}
            options={[
              { label: '男', value: '男' },
              { label: '女', value: '女' }
            ]}
          />
          <ProFormText label="部门" name="department" placeholder="" />

          <Form.Item
            label="手机"
            name="telephone"
            validateStatus={validStatusFtl}
            hasFeedback
            rules={[{ required: true, message: '请输入手机号码' }]}
          >
            <TelephoneFormItem validateFn={status => setValidStatusFtl(status)} />
          </Form.Item>
          <ProFormText
            label="电话"
            name="phone"
            rules={[{ message: '请输入电话/座机号' }]}
            placeholder=""
          />
        </Col>
        <Col span={12}>
          <ProFormText label="昵称" name="niceName" placeholder="" />
          <ProFormText label="职位" name="position" placeholder="" />
          <ProFormText label="QQ" name="qq" placeholder="" />
          <ProFormText label="邮箱" name="email" placeholder="" />
        </Col>
      </Row>
      <ProFormText label="办公室" name="office" placeholder="" />
      <Row>
        <Col span={12}>
          <ProFormText label="客户地址" name="address" placeholder="" />
          <ProFormText label="客户地标" name="landmarks" placeholder="" />
        </Col>
        <Col span={12}>
          <ProFormText label="客户乘车" name="ride" placeholder="" />
          <ProFormText label="客户住宿" name="stay" placeholder="" />
        </Col>
      </Row>
      <ProFormTextArea label="备注" name="mark" placeholder="" />
    </ModalDragForm>
  )
}

export default AddClient