feat: 新增客户手机好自定义动态校验手机号码

src/pages/Customer/Client/components/AddClient/TelephoneFormItem.jsx

@@ -0,0 +1,109 @@
+import { useModal } from '@/components/Modal'
+import consts from '@/consts'
+import { queryClient } from '@/services/customer'
+import { useDebounceFn } from 'ahooks'
+import { Input, Alert, Popover } from 'antd'
+import ClientDetail from '../ClientDetail'
+import { useState } from 'react'
+import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
+
+const TelephoneFormItem = ({ value, onChange, validateFn }) => {
+  const { toggleDrawer, setDrawerProps } = useModal()
+  const [state, setState] = useState({
+    inputVal: value,
+    visible: false,
+    list: null
+  })
+  const triggerChange = changedValue => {
+    onChange?.(changedValue)
+  }
+
+  const queryList = async search => {
+    if (!search) return
+    const { code = -1, data } = await queryClient({ current: 1, pageSize: 20, search })
+    if (code === consts.RET_CODE.SUCCESS) {
+      const { client = [] } = data
+      setState({ ...state, list: client })
+      if (client?.length) {
+        validateFn(validateEnum.Warning)
+      } else {
+        validateFn(validateEnum.Success)
+      }
+    }
+  }
+
+  const { run: handleQueryList } = useDebounceFn(queryList, { wait: 600 })
+
+  const handleOnInputChange = async e => {
+    const val = e.target.value || ''
+    if (!val) {
+      setState({ ...state, inputVal: val, list: null, visible: false })
+      validateFn(validateEnum.Error)
+    } else {
+      setState({ ...state, inputVal: val })
+      validateFn(validateEnum.Validating)
+      handleQueryList(val)
+    }
+    triggerChange(val)
+  }
+
+  const showClientDrawer = id => {
+    setDrawerProps({
+      zIndex: 1004,
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh'
+      },
+      children: <ClientDetail dataId={id} />
+    })
+    toggleDrawer(true)
+  }
+
+  const { visible, list, inputVal } = state
+  return (
+    <Popover
+      zIndex={1003}
+      placement="bottom"
+      visible={list && list.length && visible}
+      onVisibleChange={e => setState({ ...state, visible: e })}
+      title={
+        <Alert
+          message="已存在相同手机号码，请确认是否继续添加"
+          type="warning"
+          style={{ padding: '5px', margin: '10px 0' }}
+        />
+      }
+      trigger="click"
+      content={
+        <ul className="list-none">
+          {list?.map(item => {
+            return (
+              <p key={item.id}>
+                <span
+                  className="text-primary cursor-pointer hover:text-hex-967bbd"
+                  onClick={() => showClientDrawer(item.id)}
+                >
+                  {item.clientName}
+                </span>
+                <span className="mx-1">/</span>
+                <span>{item.districtName?.replaceAll(' / ', ',')}</span>
+              </p>
+            )
+          })}
+        </ul>
+      }
+    >
+      <Input
+        type="text"
+        autoComplete="false"
+        value={inputVal}
+        placeholder="请输入手机号码"
+        onChange={handleOnInputChange}
+        className="company-input"
+      />
+    </Popover>
+  )
+}
+
+export default TelephoneFormItem

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

@@ -6,6 +6,7 @@ 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 {
@@ -23,7 +24,7 @@ const AddClient = props => {
     labelCol: { flex: '100px' }
   }
   const [showDataItem, setShowDataItem] = useState(false)
-
+  const [validStatusFtl, setValidStatusFtl] = useState('')
   return (
     <ModalDragForm
       {...layout}
@@ -56,7 +57,8 @@ const AddClient = props => {
                 }
                 formRef.current && formRef.current.setFieldsValue(values)
                 submit()
-              }}>
+              }}
+            >
               添加并关联
             </Button>
           ) : null
@@ -67,7 +69,8 @@ const AddClient = props => {
         formRef.current?.resetFields()
         !isNullOrUnDef(reload) && reload()
         return true
-      }}>
+      }}
+    >
       {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
       <ProFormText
         name="clientName"
@@ -77,7 +80,8 @@ const AddClient = props => {
       <Form.Item
         label="客户地区"
         name="districtIds"
-        rules={[{ required: true, message: '请选择地区' }]}>
+        rules={[{ required: true, message: '请选择地区' }]}
+      >
         <LazyCascader showFooter={true} />
       </Form.Item>
       <Row>
@@ -92,11 +96,16 @@ const AddClient = props => {
             ]}
           />
           <ProFormText label="部门" name="department" />
-          <ProFormText
+
+          <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: '请输入电话/座机号' }]} />
         </Col>
         <Col span={12}>

src/pages/Customer/Company/components/AddCompany/CompanyFormItem.jsx

@@ -26,7 +26,7 @@ const CompanyFormItem = ({ value, onChange, validateFn }) => {
 
   const queryList = async search => {
     if (!search) return
-    const { code = -1, data } = await queryCompany({ current: 1, pageSize: 999, search })
+    const { code = -1, data } = await queryCompany({ current: 1, pageSize: 20, search })
     if (code === consts.RET_CODE.SUCCESS) {
       const { customer = [] } = data
       setState({ ...state, list: customer })
@@ -75,7 +75,7 @@ const CompanyFormItem = ({ value, onChange, validateFn }) => {
       onVisibleChange={e => setState({ ...state, visible: e })}
       title={
         <Alert
-          message="已存在同名单位, 请确认是否继续添加"
+          message="已存在同名单位，请确认是否继续添加"
           type="warning"
           style={{ padding: '5px', margin: '10px 0' }}
         />
@@ -104,8 +104,8 @@ const CompanyFormItem = ({ value, onChange, validateFn }) => {
         type="text"
         autoComplete="false"
         value={inputVal}
+        placeholder="请输入单位全称"
         onChange={handleOnInputChange}
-        className="company-input"
       />
     </Popover>
   )

src/pages/Customer/Company/components/AddCompany/index.jsx

@@ -90,7 +90,6 @@ const AddCompanyModal = ({
       <Form.Item
         name="companyName"
         label="单位名称"
-        placeholder="请输入单位全称"
         validateStatus={validStatusFcn}
         hasFeedback
         rules={[{ required: true, message: '请输入单位全称' }]}