主题域

src/view/Manage/AssetManage/Component/AssetAction.jsx

-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext, useMemo } from 'react';
 import { Form, Spin, Input, Descriptions, Space, Button, Tooltip, Select } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 
@@ -37,12 +37,16 @@ const AssetAction = (props) => {
   const [ loadingUsers, setLoadingUsers ] = useState(false);
   const [ departments, setDepartments ] = useState([]);
   const [ loadingDepartments, setLoadingDepartments ] = useState(false);
+  const [ treeData, setTreeData ] = useState([]);
+  const [ treeDataMap, setTreeDataMap ] = useState(undefined);
+  const [currentDomainGroup, setCurrentDomainGroup] = useState(undefined);
  
   const app = useContext(AppContext);
 
   useEffect(() => {
     getSystems();
     getUsers();
+    getTreeData();
     getDepartments();
     if (action === 'add') {
       getElements();
@@ -63,6 +67,14 @@ const AssetAction = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, dirId])
 
+  const domains = useMemo(() => {
+    if (currentDomainGroup && treeDataMap) {
+      return treeDataMap[currentDomainGroup];
+    }
+
+    return [];
+  }, [currentDomainGroup, treeDataMap])
+
   const getAssetPaths = () => {
     dispatch({
       type: 'assetmanage.getAssetPaths',
@@ -106,6 +118,21 @@ const AssetAction = (props) => {
     })
   }
 
+  const getTreeData = () => {
+    dispatch({
+      type: 'assetmanage.queryAllDirectoryAsTree',
+      callback: (data) => {
+        setTreeData(data);
+
+        const newTreeDataMap = {};
+        data?.forEach(item => {
+          newTreeDataMap[item.text] = item.children;
+        })
+        setTreeDataMap(newTreeDataMap);
+      }
+    })
+  }
+
   const getDepartments = () => {
     setLoadingDepartments(true);
     dispatch({
@@ -245,6 +272,9 @@ const AssetAction = (props) => {
         let _fieldsValue = {};
         (data.elements||[]).forEach(element => {
           _fieldsValue[element.name] = element.value||'';
+          if (element.name === '主题域分组') {
+            setCurrentDomainGroup(element.value);
+          }
         })
 
         form?.setFieldsValue(_fieldsValue);
@@ -467,6 +497,40 @@ const AssetAction = (props) => {
       />
     }
 
+    if (element.name === '主题域分组') {
+      return (
+        <Select 
+          allowClear
+          disabled={element.manualMaintain==='否'}
+        >
+        {
+          treeData?.map((item, index) => {
+            return <Select.Option key={index} value={item.text}>
+            {item.text}
+            </Select.Option>
+          })
+        }
+        </Select>
+      )
+    }
+
+    if (element.name === '主题域') {
+      return (
+        <Select 
+          allowClear
+          disabled={element.manualMaintain==='否'}
+        >
+        {
+          domains?.map((item, index) => {
+            return <Select.Option key={index} value={item.text}>
+            {item.text}
+            </Select.Option>
+          })
+        }
+        </Select>
+      )
+    }
+
     if (element.selectMode==='单选') {
       return (
         <Select 
@@ -509,6 +573,13 @@ const AssetAction = (props) => {
     return <span className='text-color'>{highlightSearchContentByTerms(item.value||'', terms)}</span>;
   }
 
+  const onValuesChange = (changedValues, allValues) => {
+    if (changedValues.hasOwnProperty('主题域分组')) {
+      setCurrentDomainGroup(changedValues['主题域分组']);
+      form.setFieldsValue({'主题域': ''});
+    }
+  }
+
   return (
     <div
       className='flex'
@@ -703,7 +774,7 @@ const AssetAction = (props) => {
                         });
 
                         return (
-                          <Form {...formItemLayout} form={form} labelWrap>
+                          <Form {...formItemLayout} form={form} labelWrap onValuesChange={onValuesChange}>
                           {
                             (sameAttributeElements||[]).map((element, _index) => {
                               return (