元数据范围组件

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

@@ -359,39 +359,116 @@ const BasicForm = React.forwardRef(function ({ type, task }, ref) {
 })
 
 const MetadataRangeItem = ({ value, onChange }) => {
-  const [loading, setLoading] = React.useState(false)
+  const [loadingDomains, setLoadingDomains] = React.useState(false)
+  const [domains, setDomains] = React.useState()
+  const [currentDomainId, setCurrentDomainId] = React.useState()
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
   const [treeData, setTreeData] = React.useState()
+  const [treeSelectedKey, setTreeSelectedKey] = React.useState()
 
   React.useEffect(() => {
-    getSystems()
+    getDomains()
   }, [])
 
+  React.useEffect(() => {
+    if (currentDomainId) {
+      getSystems()
+    }
+  }, [currentDomainId])
+
+  React.useEffect(() => {
+    if (currentDomainId && treeSelectedKey) {
+      const domainIndex = (domains??[]).findIndex(item => item.domainId === currentDomainId)
+      const treeIndex = (treeList??[]).findIndex(item => item.key === treeSelectedKey)
+
+      if (domainIndex !== -1 && treeIndex !== -1) {
+        onChange?.({
+          metadataCatalogIdList: [
+            `${domains[domainIndex].domainId}`,
+            ...treeList[treeIndex].ids??[],
+          ],
+          metadataCatalogNameList: [
+            domains[domainIndex].domainName,
+            ...treeList[treeIndex].names??[],
+          ]
+        })
+      } else {
+        onChange?.()
+      }
+    } else {
+      onChange?.()
+    }
+  }, [currentDomainId, treeSelectedKey])
+
+  const generateList = (data, list, ids, names) => {
+    (data||[]).forEach(node => {
+      const newIds = [...ids??[], node.idStr]
+      const newNames = [...names??[], node.title]
+      list.push({
+        ...node, 
+        ids: newIds, 
+        names: newNames,
+      })
+      if (node.children) {
+        generateList(node.children, list, newIds, newNames)
+      }
+    })
+  }
+
+  const treeList = React.useMemo(() => {
+    if (treeData) {
+      const newTreeList = []
+      generateList(treeData, newTreeList, [], [])
+
+      return newTreeList
+    }
+
+    return []
+  }, [treeData])
+
+  const getDomains = () => {
+    setLoadingDomains(true)
+    dispatch({
+      type: 'user.getDomains',
+      callback: data => {
+        setLoadingDomains(false)
+        setDomains(data)
+        if ((data??[]).length > 0) {
+          setCurrentDomainId(data[0].domainId)
+        }
+      },
+      error: () => {
+        setLoadingDomains(false)
+      }
+    })
+  }
+
   const getSystems = () => {
-    setLoading(true)
+    setLoadingTreeData(true)
     dispatch({
       type: 'assetmanage.getDatasources',
       payload: {
-        //zcx todo
-        catalog: 1
+        catalog: currentDomainId
       },
       callback: (data) => {
-        setLoading(false)
+        setLoadingTreeData(false)
 
         const newTreeData = produce(data??[], draft => { 
           for (let item of draft??[]) {
-            item.key = item.catalogId
+            item.key = `${item.catalogId}`
             item.title = item.catalogName
-            item.id = item.catalogId
+            item.value = `${item.catalogId}`
             item.idStr = `${item.catalogId}`
-            item.value = item.catalogId
+            item.disabled = true
             item.children = []
 
             for (let child of item.scopes??[]) {
               child.key = `${item.catalogId}-${child.scopeId}`
               child.title = child.scopeName
-              child.id = item.scopeId
-              child.idStr = `${child.scopeId}`
+              child.catalogId = item.catalogId
               child.value = `${item.catalogId}-${child.scopeId}`
+              child.idStr = `${child.scopeId}`
+              child.disabled = true
               item.children.push(child)
             }
           }
@@ -400,11 +477,37 @@ const MetadataRangeItem = ({ value, onChange }) => {
         setTreeData(newTreeData)
       },
       erorr: () => {
-        setLoading(false)
+        setLoadingTreeData(false)
       }
     })
   }
 
+  const onDomainChange = (val) => {
+    setCurrentDomainId(val)
+    setTreeData()
+  }
+
+  const onTreeSelect = (selectedKeys) => {
+    setTreeSelectedKey(selectedKeys)
+  }
+
+  const updateTreeData = (list, key, children) =>
+    list.map(node => {
+      if (node.key === key) {
+        return {
+          ...node,
+          children,
+        };
+      }
+      if (node.children) {
+        return {
+          ...node,
+          children: updateTreeData(node.children, key, children),
+        };
+      }
+      return node;
+    })
+
   const onLoadData = (node) => 
     new Promise(resolve => {
       if (node?.children) {
@@ -412,31 +515,87 @@ const MetadataRangeItem = ({ value, onChange }) => {
         return
       }
 
-      resolve();
-      // setTimeout(() => {
-      //   setTreeData(origin =>
-      //     updateTreeData(origin, key, [
-      //       { title: 'Child Node', key: `${key}-0` },
-      //       { title: 'Child Node', key: `${key}-1` },
-      //     ]),
-      //   );
-
-      //   resolve();
-      // }, 1000);
+      if (node?._id) {
+        //获取schema
+        dispatch({
+          type: 'datamodel.getChildByParentId',
+          payload: {
+            catalog: node?.catalogId,
+            system: node?.scopeId,
+            parentId: node?._id,
+          }, 
+          callback: (data) => {
+            const newData = (data??[]).filter(item => item._class === 'Catalog,Database,Schema').map(item => ({
+              key: item._id,
+              title: item.name,
+              value: item._id,
+              catalogId: node?.catalogId,
+              scopeId: node?.scopeId,
+              idStr: item._id,
+              isLeaf: true,
+              ...item
+            }))
+
+            setTreeData(updateTreeData(treeData, node?.key, newData)) 
+            resolve()
+          },
+          error: () => {
+            resolve()
+          }
+        })
+      } else {
+        //获取数据源
+        dispatch({
+          type: 'datamodel.getChildBySystem',
+          payload: {
+            catalog: node?.catalogId,
+            system: node?.scopeId,
+          }, 
+          callback: (data) => {
+            const newData = (data??[]).filter(item => item._class === 'Catalog,Database').map(item => ({
+              key: item._id,
+              title: item.name,
+              value: item._id,
+              catalogId: node?.catalogId,
+              scopeId: node?.scopeId,
+              idStr: item._id,
+              ...item
+            }))
+
+            setTreeData(updateTreeData(treeData, node?.key, newData)) 
+            resolve()
+          },
+          error: () => {
+            resolve()
+          }
+        })
+      }
     });
 
-  console.log('tree data', treeData)
-
   return (
-    <div>
-      <TreeSelect
-        loading={loading}
-        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-        treeData={treeData}
-        loadData={onLoadData}
-        placeholder="请选择元数据范围"
-      />
-    </div>
+    <Row gutter={15}>
+      <Col span={6}>
+        <Select 
+          placeholder='请选择环境' 
+          loading={loadingDomains}
+          value={currentDomainId}
+          onChange={onDomainChange}
+        >
+          {domains?.map(item => <Select.Option key={item.domainId} value={item.domainId}>{item.domainName}</Select.Option>)}
+        </Select>
+      </Col>
+      <Col span={18}>
+        <TreeSelect
+          loading={loadingTreeData}
+          selectedRowKeys={treeSelectedKey?[treeSelectedKey]:undefined}
+          onSelect={onTreeSelect}
+          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+          treeData={treeData}
+          loadData={onLoadData}
+          placeholder="请选择元数据范围"
+        />
+      </Col>
+    </Row>
   )
 }