feat: 创建企业搜索列表

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

@@ -26,7 +26,7 @@ const CompanyFormItem = ({ value, onChange, validateFn }) => {
     if (!search) return
     const { code = -1, data } = await queryCompany({
       current: 1,
-      pageSize: 20,
+      pageSize: 10,
       search,
       waiver: true
     })

src/pages/Product/Road/Enterprise/components/AddEnterprise/SearchCompanyInput.jsx

@@ -0,0 +1,62 @@
+import { Input } from 'antd'
+import React, { useState } from 'react'
+import { useDebounceFn } from 'ahooks'
+import consts from '@/consts'
+import { queryRoadcompanyList } from '@/services/product'
+import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
+
+const SearchCompanyInput = ({ value, onChange, validateFn }) => {
+  const [state, setState] = useState({
+    inputVal: value,
+    list: null
+  })
+  const triggerChange = changedValue => {
+    onChange?.(changedValue)
+  }
+  const queryRoadList = async search => {
+    if (!search) return
+    const { code = -1, data } = await queryRoadcompanyList({
+      current: 1,
+      pageSize: 20,
+      search,
+      waiver: true
+    })
+    if (code === consts.RET_CODE.SUCCESS) {
+      const { list = [] } = data
+      setState({ ...state, data: list })
+      if (list?.length) {
+        validateFn(validateEnum.Error)
+      } else {
+        validateFn(validateEnum.Success)
+      }
+    }
+  }
+  const { run: handleQueryList, cancel: cancelQuerying } = useDebounceFn(queryRoadList, {
+    wait: 600
+  })
+  const { list, inputVal } = state
+  const handleOnInputChange = async e => {
+    const val = e.target.value || ''
+    if (!val) {
+      cancelQuerying()
+      setState({ ...state, inputVal: val, list: null })
+      validateFn(validateEnum.Error)
+    } else {
+      setState({ ...state, inputVal: val })
+      validateFn(validateEnum.Validating)
+      handleQueryList(val)
+    }
+    triggerChange(val)
+  }
+  return (
+    <Input
+      type="text"
+      autoComplete="false"
+      placeholder="请输入企业"
+      value={inputVal}
+      onChange={handleOnInputChange}
+    />
+  )
+}
+
+export default SearchCompanyInput

src/pages/Product/Road/Enterprise/components/AddEnterprise/index.jsx

@@ -2,11 +2,10 @@ import { ProFormText } from '@ant-design/pro-form'
 import { Button, Form, Input, InputNumber, Modal, Select, Space } from 'antd'
 import React, { useState, useEffect } from 'react'
 import { useDispatch, connect } from 'umi'
-import { useDebounceFn } from 'ahooks'
 import EnterpriseSelect from './EnterpriseSelect'
 import EnterpriseFormItem from './EnterpriseFormItem'
-import { queryRoadcompanyList } from '@/services/product'
 import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
+import SearchCompanyInput from './SearchCompanyInput'
 
 const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) => {
   const layout = {
@@ -22,7 +21,7 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
   const initData = () => {
     tRef.current.reset()
   }
-  const [validStatusFcn, setValidStatusFcn] = useState('')
+  const [validStatus, setValidStatus] = useState('')
   const handleOnOk = () => {
     formRef
       ?.validateFields()
@@ -33,7 +32,7 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
             !isNullOrUnDef(reload) && reload()
             formRef?.resetFields()
             setTimeout(() => {
-              setValidStatusFcn('')
+              setValidStatus('')
               onCancel()
             }, 80)
           }
@@ -41,31 +40,10 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
       })
       .catch(({ values }) => {
         if ('companyName' in values && !values.companyName) {
-          setValidStatusFcn(validateEnum.Error)
+          setValidStatus(validateEnum.Error)
         }
       })
   }
-  const queryRoadcompanyList = async search => {
-    if (!search) return
-    const { code = -1, data } = await queryRoadcompanyList({
-      current: 1,
-      pageSize: 20,
-      search,
-      waiver: true
-    })
-    if (code === consts.RET_CODE.SUCCESS) {
-      const { list = [] } = data
-      setState({ ...state, data: list, visible: !!list?.length })
-      if (list?.length) {
-        validStatusFcn(validateEnum.Error)
-      } else {
-        validStatusFcn(validateEnum.Success)
-      }
-    }
-  }
-  const { run: handleQueryList, cancel: cancelQuerying } = useDebounceFn(queryRoadcompanyList, {
-    wait: 600
-  })
   return (
     <Modal
       {...resetModalProps}
@@ -87,9 +65,9 @@ const AddEnterprise = ({ visible, onCancel, onConfirm, ...resetModalProps }) =>
         <Form.Item
           label="创建企业"
           hasFeedback
-          validateStatus={validStatusFcn}
+          validateStatus={validStatus}
           help="当前企业名称已存在，请重新输入">
-          <Input placeholder="请输入企业" id="validating" />
+          <SearchCompanyInput validateFn={status => setValidStatus(status)} />
         </Form.Item>
         {/* <Form.Item
           name="companyName"