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

import React, { useRef, useState, useEffect } from 'react'
import { Form, Row, Col, Button } from 'antd'
import LazyCascader from '@/components/LazyCascader'
import {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormDependency
} from '@ant-design/pro-form'
import { Plus } from '@icon-park/react'
import { useDispatch, connect } from 'umi'
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,
    sourceList
  } = props
  const formRef = useRef(null)
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }
  const [showDataItem, setShowDataItem] = useState(false)
  const [validStatusFtl, setValidStatusFtl] = useState('')
  const dispatch = useDispatch()
  useEffect(() => {
    if (!sourceList?.length) {
      dispatch({
        type: 'client/fetchSourceList'
      })
    }
  }, [])
  // const handleChange = () => {
  //   if (clientName !== '') {
  //     const clientNameNum = clientName.value.split('')
  //     const clientText = '工'
  //     const symbolBefore = '（'
  //     const symbolAfter = '）'
  //     if (clientNameNum?.length < 3) {
  //       const clientNameTwo = clientNameNum[1]
  //       const newClientName =
  //         clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
  //       niceName.value = newClientName
  //     } else if (clientNameNum?.length < 4) {
  //       const clientNameTwo = clientNameNum[1] + clientNameNum[2]
  //       const newClientName =
  //         clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
  //       niceName.value = newClientName
  //     } else if (clientNameNum?.length < 5) {
  //       const clientNameTwo = clientNameNum[1] + clientNameNum[2] + clientNameNum[3]
  //       const newClientName =
  //         clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
  //       niceName.value = newClientName
  //     } else {
  //       niceName.value = ''
  //     }
  //   }
  //   if (qq !== '') {
  //     const emailText = 'qq.com'
  //     const emailNew = qq.value + emailText
  //     email.value = emailNew
  //   }
  // }
  // const handleChange = () => {
  //   const newEmail = `${email.value}@qq.com`
  //   formRef.current?.setFieldsValue({
  //     email: newEmail
  //   })
  // }
  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}>
          <ProFormDependency name={['clientName']}>
            {({ clientName, newClientName }) => {
              if (!clientName === false) {
                const clientNameNum = clientName.split('')
                const [firstName, ...lastName] = clientNameNum
                const nameAfter = `（${lastName.join('')}）`
                // eslint-disable-next-line no-param-reassign
                newClientName = `${firstName + nameAfter}工`
              }
              return (
                <ProFormText
                  label="昵称"
                  name="niceName"
                  placeholder=""
                  value={`${newClientName || ''}`}
                />
              )
            }}
          </ProFormDependency>
          <ProFormText label="职位" name="position" placeholder="" />
          <ProFormText label="QQ" name="qq" placeholder="" />
          <ProFormText label="邮箱" name="email" placeholder="" />
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <ProFormText label="办公室" name="office" placeholder="" />
        </Col>
        <Col span={12}>
          <ProFormSelect
            name="sourceId"
            label="来源"
            placeholder=""
            rules={[{ message: '来源' }]}
            options={sourceList}
          />
        </Col>
      </Row>
      <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 connect(({ client }) => ({
  sourceList: client.sourceList
}))(AddClient)