浏览增加视角

src/view/Manage/AssetBrowse/index.jsx

@@ -87,7 +87,7 @@ const AssetBrowse = (props) => {
         <Separate height={15} />
         <div className='flex' style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
           {
-            expandRelation && <React.Fragment>
+            nodeParams?.nodeType!=='custom' && expandRelation && <React.Fragment>
               <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
                 <RelationContainer reference={reference} nodeParams={nodeParams} onChange={onRelationChange} resize={resizeRelation} />
               </div>
@@ -101,9 +101,11 @@ const AssetBrowse = (props) => {
         <div className='tree-toggle' onClick={treeToggleClick}>
         { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>
-        <div className='relation-toggle' onClick={relationToggleClick}>
+        {
+          nodeParams?.nodeType!=='custom' && <div className='relation-toggle' onClick={relationToggleClick}>
           { expandRelation ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>
+        }
       </div>
     </div>
   )

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

@@ -562,7 +562,10 @@ const AssetManageTree = (props) => {
 
     setCurrentDirType(_currentDirType);
     setCurrentDir(_currentDir);
-    onSelect && onSelect(keys[0], _currentDirType, node.level);
+
+    if (viewSelectedKeyRef.current === 'dir') {
+      onSelect && onSelect(keys[0], _currentDirType, node.level);
+    }
   }
   
   const onTreeCheck = (values, e) => {

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

 import React, { useEffect, useState, useRef } from 'react';
-import {Card, Spin, Tooltip, Tree, Modal, AutoComplete} from 'antd';
-import { ReloadOutlined, SettingOutlined } from '@ant-design/icons';
+import {Card, Spin, Tooltip, Tree, Modal, AutoComplete,Dropdown,Menu} from 'antd';
+import { ReloadOutlined, SettingOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import { dispatch } from '../../../../model';
@@ -14,6 +14,17 @@ 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) {
@@ -52,6 +63,7 @@ const AssetTree = (props) => {
   const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
   const [options, setOptions] = useState([]);
   const [ loadedKeys, setLoadedKeys ] = useState([]);
+  const [ viewSelectedKey, setViewSelectedKey ] = useState(viewModes[0].key);
 
   const [modal, contextHolder] = Modal.useModal();
   
@@ -61,6 +73,7 @@ const AssetTree = (props) => {
 
   const treeDataRef = useRef([]);
   const dataListRef = useRef([]);
+  const viewSelectedKeyRef = useRef(viewModes[0].key)
 
   useEffect(() => {
     window?.addEventListener("storage", storageChange);
@@ -74,8 +87,12 @@ const AssetTree = (props) => {
 
   useEffect(() => {
     if ((did||'') !== '') {
+      setViewSelectedKey(viewModes[0].key);
+      viewSelectedKeyRef.current = viewModes[0].key;
       getAllDirectoryAsTree(true, did);
     } else if ((id||'') !== '') {
+      setViewSelectedKey(viewModes[0].key);
+      viewSelectedKeyRef.current = viewModes[0].key;
       getDataAssetLocationThenGetTreeData();
     }  else {
       getAllDirectoryAsTree(true);
@@ -151,13 +168,22 @@ const AssetTree = (props) => {
     } else if (reference === ResourceBrowseReference) {
       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, ...{text: data.name, nodeId: data.id, type: data.resourceType}}];
+        }
 
         setLoadedKeys([]);
         setTreeData(newData);
@@ -199,6 +225,7 @@ const AssetTree = (props) => {
         }
 
         if (resetCurrentDirId) {
+          if (viewSelectedKeyRef.current==='custom') { defaultItem = newData[0]; }
 
           if (defaultItem) {  
             const expandedKeys = _dataList
@@ -460,6 +487,31 @@ const AssetTree = (props) => {
     treeDirectoryChanged(option.key);
   };
 
+  const onViewClick = ({ key }) => {
+    if (viewSelectedKey &&  viewSelectedKey===key ) return;
+
+    viewSelectedKeyRef.current = key;
+    setViewSelectedKey(key);
+    
+    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) => {
 
@@ -471,7 +523,7 @@ const AssetTree = (props) => {
       setLoadedKeys([...loadedKeys, key]);
 
       dispatch({
-        type: 'assetmanage.getPersonalCustomDirecotryChild',
+        type: 'assetmanage.getDirectoryChild',
         payload: {
           parentId: key,
         },
@@ -494,7 +546,7 @@ const AssetTree = (props) => {
     data.map(item => {
 
       if (item.level === 1) {
-        rootResourceType = item.type;
+        rootResourceType = item.resourceType;
       }
 
       const title = (
@@ -504,7 +556,7 @@ const AssetTree = (props) => {
           {item.text}
           {
             //自定义类型栏目不统计资产数
-            (item.level!==1||(item.level===1&&item.type!=='custom')) && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
+            (item.level!==1||(item.level===1&&item.resourceType!=='custom')) && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
           }
         </span>
       );
@@ -532,6 +584,11 @@ const AssetTree = (props) => {
             justifyContent: 'space-around',
           }}
         >
+          <Dropdown overlay={viewMenus} placement="bottomLeft">
+            <Tooltip title="视角">
+              <UnorderedListOutlined className='default' style={{ fontSize:16,cursor:'pointer', flex: 1 }} />
+            </Tooltip>
+          </Dropdown>
           <Tooltip title="刷新目录">
             <ReloadOutlined className='default' onClick={refreshTree} style={{ fontSize:16,cursor:'pointer',flex:1}} />
           </Tooltip>
@@ -547,26 +604,28 @@ const AssetTree = (props) => {
       style={{ width: '100%' }} 
     >
       <Spin spinning={loading}>
-        <AutoComplete
-          allowClear
-          value={keyword}
-          style={{ marginBottom: 10, width: '100%' }}
-          onSelect={onAutoCompleteSelect}
-          onSearch={onAutoCompleteSearch}
-          onClear={() => { setKeyword(''); }}
-        >
         {
-          (options||[]).map((item, index) => {
-            return (
-              <Option key={item.key} value={item.value}>
-                <div style={{ whiteSpace: 'normal' }}>
-                {highlightSearchContentByTerms(item.value, [keyword])}
-                </div>
-              </Option>
-            );
-          })
+          viewSelectedKeyRef.current==='dir' && <AutoComplete
+            allowClear
+            value={keyword}
+            style={{ marginBottom: 10, width: '100%' }}
+            onSelect={onAutoCompleteSelect}
+            onSearch={onAutoCompleteSearch}
+            onClear={() => { setKeyword(''); }}
+          >
+          {
+            (options||[]).map((item, index) => {
+              return (
+                <Option key={item.key} value={item.value}>
+                  <div style={{ whiteSpace: 'normal' }}>
+                  {highlightSearchContentByTerms(item.value, [keyword])}
+                  </div>
+                </Option>
+              );
+            })
+          }
+          </AutoComplete>
         }
-        </AutoComplete>
         <Tree
           showLine={true}
           showIcon={false}