资产增加视角

src/model/assetmanage.js

@@ -268,3 +268,11 @@ export function* getScore(payload) {
 export function* getResourceTypes(payload) {
   return yield call(service.getResourceTypes, payload);
 }
+
+export function* getDirectoryChild(payload) {
+  return yield call(service.getDirectoryChild, payload);
+}
+
+export function* queryCustomTypeRootDirectory() {
+  return yield call(service.queryCustomTypeRootDirectory);
+}
\ No newline at end of file

src/service/dataassetmanager.js

@@ -275,3 +275,11 @@ export function getScore(payload) {
 export function getResourceTypes(payload) {
   return GetJSON("/dataassetmanager/dataAssetApi/listSupportResourceTypes", payload);
 }
+
+export function getDirectoryChild(payload) {
+  return GetJSON("/dataassetmanager/directoryApi/getChildByParentId", payload);
+}
+
+export function queryCustomTypeRootDirectory() {
+  return GetJSON("/dataassetmanager/directoryApi/queryCustomTypeRootDirectory");
+}
\ No newline at end of file

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

 import React, { useEffect, useState, useRef, useContext } from 'react';
 import { useMount, useUnmount } from 'ahooks';
 import {Card, Spin, Tooltip, Tree, Dropdown, Menu, Modal, AutoComplete} from 'antd';
-import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutlined, CalculatorOutlined } from '@ant-design/icons';
+import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutlined, CalculatorOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 import LocalStorage from 'local-storage';
@@ -21,6 +21,34 @@ import 'react-contexify/dist/ReactContexify.css';
 
 const { Option } = AutoComplete;
 
+const viewModes = [
+  {
+    key: 'dir',
+    name: '目录视角'
+  },
+  {
+    key: 'custom',
+    name: '自定义目录视角'
+  }
+];
+
+function updateTreeData(list, key, children) {
+  return list.map((node) => {
+    if (node.nodeId === key) {
+      return { ...node, children };
+    }
+
+    if (node.children) {
+      return {
+        ...node,
+        children: updateTreeData(node.children, key, children),
+      };
+    }
+
+    return node;
+  });
+}
+
 const AssetTree = (props) => {
 
   const MENU_ID = 'asset-tree';
@@ -50,6 +78,8 @@ const AssetTree = (props) => {
   const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
   const [options, setOptions] = useState([]);
   const [ computeScoreVisible, setComputeScoreVisible ] = useState(false);
+  const [ loadedKeys, setLoadedKeys ] = useState([]);
+  const [ viewSelectedKey, setViewSelectedKey ] = useState(viewModes[0].key);
 
   const [modal, contextHolder] = Modal.useModal();
   
@@ -59,6 +89,7 @@ const AssetTree = (props) => {
 
   const treeDataRef = useRef([]);
   const dataListRef = useRef([]);
+  const viewSelectedKeyRef = useRef(viewModes[0].key)
 
   useMount(() => {
     window?.addEventListener("storage", storageChange);
@@ -70,8 +101,12 @@ const AssetTree = (props) => {
 
   useEffect(() => {
     if ((id||'') !== '') {
+      setViewSelectedKey(viewModes[0].key);
+      viewSelectedKeyRef.current = viewModes[0].key;
       getDataAssetLocationThenGetTreeData();
     } else if ((did||'') !== '') {
+      setViewSelectedKey(viewModes[0].key);
+      viewSelectedKeyRef.current = viewModes[0].key;
       getAllDirectoryAsTree(true, did);
     } else {
       getAllDirectoryAsTree(true);
@@ -149,12 +184,24 @@ const AssetTree = (props) => {
       url = 'assetmanage.queryResourceDirectoryAsTree';
     }
 
+    if (viewSelectedKeyRef.current === 'custom') {
+      url = 'assetmanage.queryCustomTypeRootDirectory';
+    }
+    
     dispatch({
       type: url,
       callback: data => {
         setLoading(false);
 
-        let newData = [...data];
+        let newData = [];
+        if (viewSelectedKeyRef.current==='dir') {
+          newData = [...data];
+        } else {
+          newData = (data||[]).map((item) => {
+            console.log(item);
+            return {...item, text: item.name, nodeId: item.id, type: item.resourceType}
+          });
+        }
 
         if (reference === Asset1104ManageReference) {
           function recursion1104(subCatalogs) {
@@ -178,6 +225,7 @@ const AssetTree = (props) => {
           newData = newData.filter(item => item.type!=='custom');
         }
 
+        setLoadedKeys([]);
         setTreeData(newData);
 
         const _dataList = [], _groupIds = [];
@@ -211,6 +259,7 @@ const AssetTree = (props) => {
         }
 
         if (resetCurrentDirId) {
+          if (viewSelectedKeyRef.current==='custom') { defaultItem = newData[0]; }
 
           if (defaultItem) {  
             const expandedKeys = _dataList
@@ -467,6 +516,62 @@ const AssetTree = (props) => {
     setCustomDirectoryModalVisible(true);
   }
 
+  const onViewClick = ({ key }) => {
+    if (viewSelectedKey &&  viewSelectedKey===key ) return;
+
+    viewSelectedKeyRef.current = key;
+    setViewSelectedKey(key);
+    setExpandedKeys([]);
+    
+    getAllDirectoryAsTree();
+  }  
+
+  const viewMenus = (
+    <Menu selectedKeys={[viewSelectedKey]} onClick={onViewClick}>
+    {
+      viewModes && viewModes.map(item => {
+        return (
+          <Menu.Item key={item.key} value={item.key} >
+            <div style={{ textAlign: 'center' }}>
+            {item.name}
+            </div>
+          </Menu.Item>
+        )
+      })
+    }
+    </Menu>
+  );
+
+  const onLoadData = ({ key, children }) => 
+    new Promise((resolve) => {
+
+      if (children) {
+        resolve();
+        return;
+      }
+
+      setLoadedKeys([...loadedKeys, key]);
+
+      dispatch({
+        type: 'assetmanage.getDirectoryChild',
+        payload: {
+          parentId: key,
+        },
+        callback: (data) => {
+          if (data && data.length>0) {
+            let newTreeData = updateTreeData(treeData, key, data);
+            setTreeData(newTreeData);
+            treeDataRef.current = newTreeData;
+          }
+      
+          resolve();
+        }, 
+        error: () => {
+          resolve();
+        }
+      });
+    });
+
   // const onChange = (e) => {
 
   //   const { value } = e.target;
@@ -607,24 +712,33 @@ const AssetTree = (props) => {
     </Menu>
   );
 
-  const loop = (data, isRootLeaf= true) =>
+  const loop = (data, rootResourceType = null) =>
     data.map(item => {
+      if (item.level === 1) {
+        rootResourceType = item.resourceType;
+      }
+
       const title = (
         <span
-          className={isRootLeaf?'title-color': 'text-color'}
+          className={(item.level===1)?'title-color': 'text-color'}
         >
           {item.text}
           {
-            reference === AssetManageReference && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
+            //自定义类型栏目不统计资产数
+            (item.level!==1||(item.level===1&&item.resourceType!=='custom')) && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
           }
         </span>
       );
 
-      if (item.children) {
-        return { ...item, ...{title, key: item.nodeId, children: loop(item.children, false)} };
+      if (item.children && item.children.length>0) {
+        return { ...item, ...{title, key: item.nodeId, children: loop(item.children, rootResourceType), className: (item.level===1)?'root':''} };
       }
 
-      return { ...item, ...{ title, key: item.nodeId }};
+      if (rootResourceType !== 'custom') {
+        return { ...item, ...{ title, key: item.nodeId, isLeaf: true, className: (item.level===1)?'root':'' }};
+      }
+
+      return { ...item, ...{ title, key: item.nodeId, children: null, className: (item.level===1)?'root':''}};
     });
 
   const classes = classNames('asset-tree', className, {
@@ -644,6 +758,13 @@ const AssetTree = (props) => {
             justifyContent: 'space-around',
           }}
         >
+          <Dropdown overlay={viewMenus} placement="bottomLeft">
+            <Tooltip title="视角">
+              <UnorderedListOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
+            </Tooltip>
+          </Dropdown>
+          {
+            (viewSelectedKeyRef.current==='dir') ? <React.Fragment>
               <Tooltip title="新增目录">
             <PlusOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom')?'not-allowed':'pointer' }}/>
           </Tooltip>
@@ -658,12 +779,21 @@ const AssetTree = (props) => {
                   <ExportOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
                 </Tooltip>
               </Dropdown>
-          <Tooltip title="自定义目录">
-            <SettingOutlined className='default' onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
-          </Tooltip>
               <Tooltip title="资产价值评分">
                 <CalculatorOutlined className='default' onClick={() => {setComputeScoreVisible(true)}} style={{ fontSize:16,cursor:'pointer' }} />
               </Tooltip>
+            </React.Fragment> : <React.Fragment>
+              <Tooltip title="刷新目录">
+                <ReloadOutlined className='default' onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
+              </Tooltip>
+              <Tooltip title="自定义目录">
+                <SettingOutlined className='default' onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
+              </Tooltip>
+              <div />
+              <div />
+              <div />
+            </React.Fragment>
+          }
         </div>
       )}
       bordered={false} 
@@ -672,7 +802,7 @@ const AssetTree = (props) => {
       style={{ width: '100%' }} 
     >
       <Spin spinning={loading}>
-        <AutoComplete
+        {viewSelectedKeyRef.current==='dir' && <AutoComplete
           allowClear
           value={keyword}
           style={{ marginBottom: 10, width: '100%' }}
@@ -692,6 +822,7 @@ const AssetTree = (props) => {
           })
         }
         </AutoComplete>
+        }
         <Tree
           checkable={checkable}
           showLine={true}
@@ -700,6 +831,8 @@ const AssetTree = (props) => {
           expandedKeys={expandedKeys}
           autoExpandParent={autoExpandParent}
           treeData={loop(treeData)}
+          loadData={onLoadData}
+          loadedKeys={loadedKeys}
           selectedKeys={[currentDirId||'']} 
           onSelect={onTreeSelect} 
           onCheck={onTreeCheck}
@@ -737,6 +870,8 @@ const AssetTree = (props) => {
       />
       {
         (reference!==AssetMountReference) && <RcMenu id={MENU_ID}>
+          {
+            viewSelectedKeyRef.current==='dir' && <React.Fragment>
               <RcItem id="edit" onClick={editDir}>
                 修改目录
               </RcItem>
@@ -746,6 +881,8 @@ const AssetTree = (props) => {
               <RcItem id="down" onClick={() => { moveNode(-1); }}>
                 下移目录
               </RcItem> 
+            </React.Fragment>
+          }
           <RcItem id="delete" onClick={deleteDir}>
             删除目录
           </RcItem>