样式调整

src/view/Manage/Model/Component/branch-add-model.jsx

 import React from "react"
-import { Modal, Button, Tree, Spin, } from "antd"
+import { Modal, Button, Tree, Spin, AutoComplete } from "antd"
 import produce from "immer"
 
 import { dispatch } from '../../../../model'
-import { showMessage } from "../../../../util"
+import { highlightSearchContentByTerms, showMessage } from "../../../../util"
+
+import './branch-add-model.less'
 
 const FC = ({ visible, onCancel }) => {
   const basicRef = React.useRef()
@@ -35,11 +37,12 @@ const FC = ({ visible, onCancel }) => {
 
   return (
     <Modal
+      className='branch-add-model'
       title='选择物理平台'
       visible={visible}
       footer={footer}
       width={400}
-      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '70vh' }}
+      bodyStyle={{ padding: '15px', overflowX: 'auto' }}
       centered destroyOnClose
       onCancel={() => { close() }}
     >
@@ -53,9 +56,12 @@ export default FC
 const Basic = React.forwardRef(function ({}, ref) {
   const [loadingTreeData, setLoadingTreeData] = React.useState(false)
   const [treeData, setTreeData] = React.useState()
+  const [dataList, setDataList] = React.useState()
   const [expandedKeys, setExpandedKeys] = React.useState([])
   const [autoExpandParent, setAutoExpandParent] = React.useState(false)
   const [node, setNode] = React.useState()
+  const [options, setOptions] = React.useState()
+  const [keyword, setKeyword] = React.useState()
 
   React.useImperativeHandle(ref, () => ({
     node
@@ -65,31 +71,6 @@ const Basic = React.forwardRef(function ({}, ref) {
     getTreeData()
   }, [])
 
-  const treeData1 = React.useMemo(() => {
-    if (treeData) {
-      const newTreeData = produce(treeData, draft => {
-        const setNode = (g) => {
-          g.key = g.id;
-          g.title = g.name;
-          g.children = [];
-          
-          (g.subCatalogs??[]).forEach((child) => {
-            setNode(child)
-            g.children.push(child)
-          });
-        }
-
-        draft.forEach((child) => {
-          setNode(child)
-        })
-      })
-
-      return newTreeData
-    }
-
-    return undefined
-  }, [treeData])
-
   const getTreeData = () => {
     setLoadingTreeData(true)
     dispatch({
@@ -114,6 +95,16 @@ const Basic = React.forwardRef(function ({}, ref) {
           })
         })
         setTreeData(newTreeData)
+
+        if ((newTreeData??[]).length > 0) {
+          const newDataList = []
+          generateList(newTreeData, newDataList)
+          setDataList(newDataList)
+
+          const firstNode = newTreeData[0]
+          setExpandedKeys([firstNode.id])
+          setAutoExpandParent(true)
+        }
       },
       error: () => {
         setLoadingTreeData(false)
@@ -134,14 +125,62 @@ const Basic = React.forwardRef(function ({}, ref) {
     setNode(selectedNodes[0])
   }
 
+  const generateList = (treeData, list, path = null) => {
+    for (let i = 0; i < treeData.length; i++) {
+      const node = treeData[i];
+      const { id, name } = node;
+
+      const currentPath = path ? `${path}/${name}` : name;
+      list.push({ key: id , title: currentPath, value: currentPath });
+      if (node.children) {
+        generateList(node.children, list, currentPath);
+      }
+    }
+  }
+
+  const onAutoCompleteSearch = (searchText) => {
+    setKeyword(searchText)
+    setOptions(!searchText?[]:(dataList||[]).filter(item => item.value.indexOf(searchText)!==-1))
+  }
+
+  const onAutoCompleteSelect = (value, option) => {
+    const paths = value.split('/')
+    setKeyword(paths[paths.length-1])
+    const newExpandedKeys = [...expandedKeys, option.key]
+    setExpandedKeys(Array.from(new Set(newExpandedKeys)))
+    setAutoExpandParent(true)
+  }
+
   return (
     <Spin spinning={loadingTreeData}>
+      <AutoComplete
+        allowClear
+        value={keyword}
+        style={{ marginBottom: 10, width: '100%' }}
+        onSelect={onAutoCompleteSelect}
+        onSearch={onAutoCompleteSearch}
+        onClear={() => {
+          setKeyword()
+        }}
+      >
+      {
+        (options||[]).map((item, index) => {
+          return (
+            <AutoComplete.Option key={item.key} value={item.value}>
+              <div style={{ whiteSpace: 'normal' }}>
+              {highlightSearchContentByTerms(item.value, [keyword])}
+              </div>
+            </AutoComplete.Option>
+          );
+        })
+      }  
+      </AutoComplete>
       <Tree
         className='tree'
         showLine 
         showIcon={false} 
         autoExpandParent={autoExpandParent}
-        treeData={treeData1}
+        treeData={treeData}
         selectedKeys={node?[node.id]:[]}
         expandedKeys={expandedKeys}
         onSelect={onTreeSelect}

src/view/Manage/Model/Component/branch-add-model.less

+.branch-add-model {
+  .yy-tree-list {
+    height: calc(60vh) !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file