perf: 新增单位-单位名称动态validate校验

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

@@ -6,7 +6,13 @@ import { Input, Alert, Popover } from 'antd'
 import CompanyDetail from '../CompanyDetail'
 import { useState } from 'react'
 
-const CompanyFormItem = ({ value, onChange }) => {
+export const validateEnum = {
+  Success: 'success',
+  Warning: 'warning',
+  Error: 'error',
+  Validating: 'validating'
+}
+const CompanyFormItem = ({ value, onChange, validateFn }) => {
   // const ref = useRef(null)
   const { toggleDrawer, setDrawerProps } = useModal()
   const [state, setState] = useState({
@@ -19,29 +25,37 @@ const CompanyFormItem = ({ value, onChange }) => {
   }
 
   const queryList = async search => {
-    if (!search) {
-      setState({ ...state, list: null })
-      return
-    }
+    if (!search) return
     const { code = -1, data } = await queryCompany({ current: 1, pageSize: 999, search })
     if (code === consts.RET_CODE.SUCCESS) {
       const { customer = [] } = data
       setState({ ...state, list: customer })
+      if (customer?.length) {
+        validateFn(validateEnum.Warning)
+      } else {
+        validateFn(validateEnum.Success)
+      }
     }
   }
 
-  const { run: handleQueryList } = useDebounceFn(queryList, { wait: 500 })
+  const { run: handleQueryList } = useDebounceFn(queryList, { wait: 600 })
 
   const handleOnInputChange = async e => {
     const val = e.target.value || ''
-    setState({ ...state, inputVal: val })
-    await handleQueryList(val)
+    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 showCompanyDrawer = id => {
     setDrawerProps({
-      zIndex: 1003,
+      zIndex: 1004,
       closable: true,
       onClose: () => toggleDrawer(),
       bodyStyle: {
@@ -55,9 +69,9 @@ const CompanyFormItem = ({ value, onChange }) => {
   const { visible, list, inputVal } = state
   return (
     <Popover
-      zIndex={1004}
+      zIndex={1003}
       placement="bottom"
-      visible={visible && list && list.length}
+      visible={list && list.length && visible}
       onVisibleChange={e => setState({ ...state, visible: e })}
       title={
         <Alert
@@ -74,7 +88,8 @@ const CompanyFormItem = ({ value, onChange }) => {
               <p key={item.id}>
                 <span
                   className="text-primary cursor-pointer hover:text-hex-967bbd"
-                  onClick={() => showCompanyDrawer(item.id)}>
+                  onClick={() => showCompanyDrawer(item.id)}
+                >
                   {item.companyName}
                 </span>
                 <span className="mx-1">/</span>
@@ -83,7 +98,8 @@ const CompanyFormItem = ({ value, onChange }) => {
             )
           })}
         </ul>
-      }>
+      }
+    >
       <Input
         type="text"
         autoComplete="false"

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

@@ -23,10 +23,10 @@ const AddCompanyModal = ({
     layout: 'horizontal',
     labelCol: { flex: '100px' }
   }
+  const [validStatusFcn, setValidStatusFcn] = useState('')
   useEffect(() => {
     if (defaultValue) {
       if (defaultValue.districtIds && defaultValue.districtIds?.length > 1) {
-        console.log('111', defaultValue.districtIds)
         dispatch({
           type: 'district/fetchWithValues',
           payload: defaultValue.districtIds
@@ -82,6 +82,7 @@ const AddCompanyModal = ({
       onFinish={async values => {
         await onConfirm(values)
         formRef.current?.resetFields()
+        setValidStatusFcn('')
         !isNullOrUnDef(reload) && reload()
         return true
       }}
@@ -90,9 +91,11 @@ const AddCompanyModal = ({
         name="companyName"
         label="单位名称"
         placeholder="请输入单位全称"
+        validateStatus={validStatusFcn}
+        hasFeedback
         rules={[{ required: true, message: '请输入单位全称' }]}
       >
-        <CompanyFormItem />
+        <CompanyFormItem validateFn={status => setValidStatusFcn(status)} />
       </Form.Item>
       {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
       <Form.Item