实现searchSelect拼音搜索

package.json

@@ -42,6 +42,7 @@
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",
     "moment": "^2.27.0",
+    "pinyin": "^2.9.1",
     "prettier": "^1.19.1",
     "qrcode": "^1.4.4",
     "query-string": "^6.13.1",

src/components/ModalTable/index.tsx

@@ -20,6 +20,8 @@ const ModalTable:React.FC<ModalTableProps> = (props) => {
       selfRef.current.resetField && selfRef.current.resetField({
         validate: false
       })
+      // 重新开启时需reload接口
+      selfRef.current.reload && selfRef.current.reload()
     }
   }, [visible, selfRef.current])
   return (

src/components/NiceForm/components/SearchSelect.tsx

-import React, { useState, useEffect } from 'react'
-import { Select } from 'antd';
+import React, { useState, useEffect, useRef } from 'react'
+import { Select, Input } from 'antd';
 import { useDebounceFn } from '@umijs/hooks';
 import { ISchemaFieldComponentProps, FormPath, useFormEffects, createFormActions, createAsyncFormActions } from '@formily/antd'
+import pinyin from 'pinyin'
+
+const SelectContent = (props) => {
+  const { handleChange } = props
+  return <div>
+    <div style={{padding: '12px'}}>
+      <Input.Search
+        onChange={handleChange}
+      />
+    </div>
+    {props.children}
+  </div>
+}
 
 // 自定义搜索型下拉框
 const SearchSelect = (props: ISchemaFieldComponentProps) => {
-  const { schema, form, path } = props
-  console.log(props)
+  const { schema, form, path, mutators } = props
+  const dataSourceRef = useRef<any[]>([])
+  const pinyinRef = useRef<any[]>([])
   // 可选参数 fetchSearch, select为search
   const { fetchSearch, fetchParams = 'name', fetchFormat, ...resetProps } = schema.getExtendsComponentProps()
   const [dataSource, setDataSource] = useState<any[]>([])
   const [loading, setLoading] = useState(false)
-  const dispatchSearch = (searchValue: string) => {
-    if (fetchSearch) {
-      fetchSearch({
-        [fetchParams]: searchValue
-      }).then(({data = []}) => {
-        const formatData = fetchFormat ? fetchFormat(data) : data.map(v => ({
-          label: v.name,
-          value: v.id
-        }))
-        setDataSource(formatData)
-      }).finally(() => {
-        setLoading(false)
-      })
-    }
 
-    // 触发自定义事件
-    form.notify('onSearchSelect', {
-      ...props,
-      searchValue
+  const fuzzyQuery = (keyword) => {
+    const pinyinArr = pinyinRef.current
+
+    // 获取拼音处理后的结果
+    const pinyinResult = pinyinArr.reduce((prev, next) => {
+      if (next.label.includes(keyword.toLowerCase())) {
+        prev.push(next.value)
+      }
+      return prev
+    }, [])
+
+    const result = dataSourceRef.current.filter(v => pinyinResult.includes(v.value))
+
+    return result
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    fetchSearch({
+      [fetchParams]: ''
+    }).then(({data = []}) => {
+      const transformData = data.map(v => ({
+        label: v.name,
+        value: v.id
+      }))
+      dataSourceRef.current = transformData
+      pinyinRef.current = transformData.map(v => {
+        return {
+          label: pinyin(v.label, {
+              style: pinyin.STYLE_NORMAL
+            }).join('').toLowerCase(),
+          value: v.value
+        }
+      })
+      setDataSource(transformData)
+    }).finally(() => {
+      setLoading(false)
     })
+  }, [])
+
+  const handleChange = e => {
+    const { value } = e.target
+    const filterDataSource = fuzzyQuery(value)
+    setDataSource(filterDataSource)
   }
 
-  const { run } = useDebounceFn(dispatchSearch, 500)
+  // 注释部分为下拉搜索框
+
+  // const dispatchSearch = (searchValue: string) => {
+  //   if (fetchSearch) {
+  //     fetchSearch({
+  //       [fetchParams]: searchValue
+  //     }).then(({data = []}) => {
+  //       const formatData = fetchFormat ? fetchFormat(data) : data.map(v => ({
+  //         label: v.name,
+  //         value: v.id
+  //       }))
+  //       setDataSource(formatData)
+  //     }).finally(() => {
+  //       setLoading(false)
+  //     })
+  //   }
+
+  //   // 触发自定义事件
+  //   form.notify('onSearchSelect', {
+  //     ...props,
+  //     searchValue
+  //   })
+  // }
+
+  // const { run } = useDebounceFn(dispatchSearch, 500)
 
   return (
     <Select
-      onChange={e => console.log(e)}
+      onChange={e => mutators.change(e)}
       filterOption={false}
       loading={loading}
       options={dataSource}
+      value={props.value}
+      dropdownRender={originNode => <SelectContent handleChange={handleChange}>{originNode}</SelectContent>}
       {...resetProps}
     >
     </Select>

src/pages/repositories/index.tsx

@@ -189,9 +189,12 @@ const Repositories: React.FC<{}> = () => {
                   'search',
                   FORM_FILTER_PATH,
                 );
+                $('onFieldChange', FORM_FILTER_PATH).subscribe(state => {
+                  console.log(state)
+                })
                 // 填充下拉框
-                useAsyncInitSelect(['category'], async () => (await PublicApi.getProductSelectGetSelectCategory({name: ''})).data.map(v => ({label: v.name, value: v.id})))
-                useAsyncInitSelect(['brand'], async () => (await PublicApi.getProductSelectGetSelectBrand({name: ''})).data.map(v => ({label: v.name, value: v.id})))
+                // useAsyncInitSelect(['category'], async () => (await PublicApi.getProductSelectGetSelectCategory({name: ''})).data.map(v => ({label: v.name, value: v.id})))
+                // useAsyncInitSelect(['brand'], async () => (await PublicApi.getProductSelectGetSelectBrand({name: ''})).data.map(v => ({label: v.name, value: v.id})))
               }}
               schema={repositSchema}
             />

src/pages/repositories/schema/index.tsx

@@ -77,7 +77,7 @@ export const repositSchema: ISchema = {
                     fetchSearch: PublicApi.getProductSelectGetSelectCategory,
                     placeholder: '请选择品类',
                     style: {
-                      minWidth: 120
+                      minWidth: 160
                     }
                   },
                   enum: []
@@ -86,9 +86,10 @@ export const repositSchema: ISchema = {
                   type: 'string',
                   "x-component": 'SearchSelect',
                   "x-component-props": {
+                    fetchSearch: PublicApi.getProductSelectGetSelectBrand,
                     placeholder: '请选择品牌',
                     style: {
-                      minWidth: 120
+                      minWidth: 160
                     }
                   },
                   enum: []