模型范围组件

src/view/Manage/ModelCompare/update-task.jsx

@@ -358,6 +358,109 @@ const BasicForm = React.forwardRef(function ({ type, task }, ref) {
   )
 })
 
+const ModelRangeItem = ({ value, onChange }) => {
+  const [loading, setLoading] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [treeSelectedKey, setTreeSelectedKey] = React.useState()
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  React.useEffect(() => {
+    if (treeSelectedKey) {
+      const treeIndex = (treeList??[]).findIndex(item => item.key === treeSelectedKey)
+
+      if (treeIndex !== -1) {
+        onChange?.({
+          modelCatalogIdList: treeList[treeIndex].ids??[],
+          modelCatalogNameList: treeList[treeIndex].names??[]
+        })
+      } else {
+        onChange?.()
+      }
+    } else {
+      onChange?.()
+    }
+  }, [treeSelectedKey])
+
+  const generateList = (data, list, ids, names) => {
+    (data||[]).forEach(node => {
+      const newIds = [...ids??[], node.value]
+      const newNames = [...names??[], node.title]
+      list.push({
+        ...node, 
+        ids: newIds, 
+        names: newNames,
+      })
+      if (node.children) {
+        generateList(node.children, list, newIds, newNames)
+      }
+    })
+  }
+
+  const [treeData1, treeList] = React.useMemo(() => {
+    if (treeData) {
+      const newTreeList = []
+
+      const newTreeData = produce(treeData, draft => {
+        const setNode = (g) => {
+          g.key = g.id
+          g.title = g.name
+          g.value = g.id
+          g.children = []
+          for (let child of g.subCatalogs??[]) {
+            setNode(child)
+            g.children.push(child)
+          }
+        }
+
+        for (let item of draft??[]) {
+          setNode(item)
+        }
+      })
+
+      generateList(newTreeData, newTreeList, [], [])
+
+      return [
+        newTreeData,
+        newTreeList,
+      ] 
+    }
+
+    return [[], []]
+  }, [treeData])
+
+  const getTreeData = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.refreshDataModelCatalog',
+      callback: (data) => {
+        setLoading(false)
+        setTreeData(data?.subCatalogs)
+      },
+      erorr: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const onTreeSelect = (selectedKeys) => {
+    setTreeSelectedKey(selectedKeys)
+  }
+
+  return (
+    <TreeSelect
+      loading={loading}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData1}
+      selectedRowKeys={treeSelectedKey?[treeSelectedKey]:undefined}
+      onSelect={onTreeSelect}
+      placeholder="请选择模型范围"
+    />
+  )
+}
+
 const MetadataRangeItem = ({ value, onChange }) => {
   const [loadingDomains, setLoadingDomains] = React.useState(false)
   const [domains, setDomains] = React.useState()
@@ -602,76 +705,9 @@ const MetadataRangeItem = ({ value, onChange }) => {
 const Range = React.forwardRef(function ({ type, task }, ref) {
   const [ranges, setRanges] = React.useState()
   const [isAdding, setAdding] = React.useState(false)
-  const [loadingModelTree, setLoadingModelTree] = React.useState(false)
-  const [modelTreeData, setModelTreeData] = React.useState()
 
   const [form] = Form.useForm()
 
-  React.useEffect(() => {
-    getModelTree()
-  }, [])
-
-  const generateList = (data, list, ids, names) => {
-    (data||[]).forEach(node => {
-      const newIds = [...ids??[], node.value]
-      const newNames = [...names??[], node.title]
-      list.push({
-        ...node, 
-        ids: newIds, 
-        names: newNames,
-      })
-      if (node.children) {
-        generateList(node.children, list, newIds, newNames)
-      }
-    })
-  }
-
-  const [modelTreeData1, modelTreeList] = React.useMemo(() => {
-    if (modelTreeData) {
-      const newTreeList = []
-
-      const newTreeData = produce(modelTreeData, draft => {
-        const setNode = (g) => {
-          g.key = g.id
-          g.title = g.name
-          g.value = g.id
-          g.children = []
-          for (let child of g.subCatalogs??[]) {
-            setNode(child)
-            g.children.push(child)
-          }
-        }
-
-        for (let item of draft??[]) {
-          setNode(item)
-        }
-      })
-
-      generateList(newTreeData, newTreeList, [], [])
-
-      return [
-        newTreeData,
-        newTreeList,
-      ] 
-    }
-
-    return [[], []]
-  }, [modelTreeData])
-
-  const getModelTree = () => {
-    setLoadingModelTree(true)
-    dispatch({
-      type: 'datamodel.refreshDataModelCatalog',
-      callback: (data) => {
-        setLoadingModelTree(false)
-        setModelTreeData(data?.subCatalogs)
-      },
-      erorr: () => {
-        setLoadingModelTree(false)
-      }
-    })
-  }
-
   const onAddClick = () => {
     setAdding(true)
   }
@@ -689,7 +725,6 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
           labelCol={{ span: 6 }}
           wrapperCol={{ span: 18 }}
           autoComplete="off"
-          // onValuesChange={onValuesChange}
         >
           <Row gutter={15}>
             <Col span={12}>
@@ -698,12 +733,7 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
                 name="modelCatalogId"
                 rules={[{ required: true, message: '请选择模型范围!' }]}
               >
-                <TreeSelect
-                  loading={loadingModelTree}
-                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                  treeData={modelTreeData1}
-                  placeholder="请选择模型范围"
-                />
+                <ModelRangeItem />
               </Form.Item>
             </Col>
             <Col span={12}>