资产自定义树

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

@@ -20,10 +20,12 @@ const AssetTree = (props) => {
   const [ expandedKeys, setExpandedKeys ] = useState([]);
   const [ autoExpandParent, setAutoExpandParent ] = useState(false);
   const [ currentDirId, setCurrentDirId ] = useState('');
+  const [ currentDirType, setCurrentDirType ] = useState('');
   const [ importDirectoryVisible, setImportDirectoryVisible ] = useState(false);
   const [ updateDirectoryModalVisible, setUpdateDirectoryModalVisible ] = useState(false);
   const [ updateDirectoryAction, setUpdateDirectoryAction ] = useState('');
   const [ customDirectoryModalVisible, setCustomDirectoryModalVisible ] = useState(false);
+  const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -46,8 +48,10 @@ const AssetTree = (props) => {
 
         if (resetCurrentDirId) {
           const _currentDirId = (data&&data[0]?(data[0].nodeId||''):'');
-        
+          const _type = (data&&data[0]?(data[0].type||''):'');
+
           setCurrentDirId(_currentDirId);
+          setCurrentDirType(_type);
           onSelect && onSelect(_currentDirId);
         }
       },
@@ -82,6 +86,25 @@ const AssetTree = (props) => {
     }
     return parentKey;
   };
+
+  const getCurrentType = (key, tree, root=true) => {
+    let type;
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i];
+      if (node.nodeId === key) {
+        type = node.type||'';
+        if (type !== '') {
+          type += (root?'-root':'');
+        }
+        
+      } else if (node.children) {
+        if (getCurrentType(key, node.children, false)) {
+          type = getCurrentType(key, node.children, false);
+        }
+      }
+    }
+    return type;
+  }
  
   const addDir = () => {
     setUpdateDirectoryAction('add');
@@ -89,8 +112,17 @@ const AssetTree = (props) => {
   }
 
   const editDir = () => {
-    setUpdateDirectoryAction('edit');
-    setUpdateDirectoryModalVisible(true);
+    if (currentDirType === '') {
+
+      setUpdateDirectoryAction('edit');
+      setUpdateDirectoryModalVisible(true);
+    
+    } else if (currentDirType === 'custom-root') {
+      
+      setCustomDirectoryAction('edit');
+      setCustomDirectoryModalVisible(true);
+    
+    }
   }
 
   const refreshTree = () => {
@@ -144,6 +176,7 @@ const AssetTree = (props) => {
   }
 
   const customDir = () => {
+    setCustomDirectoryAction('add');
     setCustomDirectoryModalVisible(true);
   }
 
@@ -172,13 +205,14 @@ const AssetTree = (props) => {
     setKeyword(value);
   }
 
-  const onTreeSelect = (keys,_) => {
+  const onTreeSelect = (keys, _) => {
 
     if ((keys||[]).length === 0) {
       return;
     }
 
     setCurrentDirId(keys[0]);
+    setCurrentDirType(getCurrentType(keys[0], treeData));
     onSelect && onSelect(keys[0]);
   }
 
@@ -250,18 +284,18 @@ const AssetTree = (props) => {
     <Card
       className={classes}
       title={ readOnly ? null : (
-        <Space wrap>
+        <Space size={5}>
           <Tooltip title="新增目录">
-            <Button shape="circle" icon={<PlusOutlined />} onClick={addDir} />
+            <Button shape="circle" icon={<PlusOutlined />} onClick={addDir} disabled={currentDirType==='custom-root'||currentDirType==='custom'} />
           </Tooltip>
           <Tooltip title="修改">
-            <Button shape="circle" icon={<EditOutlined />} onClick={editDir} />
+            <Button shape="circle" icon={<EditOutlined />} onClick={editDir} disabled={currentDirType==='custom'}/>
           </Tooltip>
           <Tooltip title="刷新">
             <Button shape="circle" icon={<SyncOutlined />} onClick={refreshTree} />
           </Tooltip>
           <Tooltip title="导入">
-            <Button shape="circle" icon={<ImportOutlined />} onClick={importDir} />
+            <Button shape="circle" icon={<ImportOutlined />} onClick={importDir} disabled={currentDirType==='custom-root'||currentDirType==='custom'} />
           </Tooltip>
           <Dropdown overlay={exportMenu} placement="bottomLeft">
             <Tooltip title="导出">
@@ -269,7 +303,7 @@ const AssetTree = (props) => {
             </Tooltip>
           </Dropdown>
           <Tooltip title="删除">
-            <Button shape="circle" icon={<DeleteOutlined />} onClick={deleteDir} />
+            <Button shape="circle" icon={<DeleteOutlined />} onClick={deleteDir} disabled={currentDirType==='custom'} />
           </Tooltip>
           <Tooltip title="自定义">
             <Button shape="circle" icon={<SettingOutlined />} onClick={customDir} />
@@ -314,6 +348,8 @@ const AssetTree = (props) => {
       <CustomDirectoryModal 
         visible={ customDirectoryModalVisible }
         onCancel={ onCustomDirectoryCancel }
+        action={ customDirectoryAction }
+        dirId= { currentDirId }
       />
       {contextHolder}
     </Card>

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

@@ -11,7 +11,7 @@ import { dispatch, dispatchLatest } from '../../../../model';
 import { showMessage } from '../../../../util';
 
 const CustomDirectoryModal = (props) => {
-  const { visible, onCancel } = props;
+  const { visible, onCancel, action, dirId } = props;
 
   const [ data, setData ] = useState([]);
   const [ previewTreeData, setPreviewTreeData ] = useState({});
@@ -24,7 +24,7 @@ const CustomDirectoryModal = (props) => {
   useEffect(() => { 
     if (visible) {
       reset();
-      getAllElements();
+      getAllElementsThenGetCurrentDirectory();
     } 
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible])
@@ -35,13 +35,31 @@ const CustomDirectoryModal = (props) => {
       getPreviewTreeData();
     }
 
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkedValues])
 
-  const getAllElements = () => {
+  const getAllElementsThenGetCurrentDirectory = () => {
     dispatch({
       type: 'assetmanage.listElements',
+      callback: elements => {
+        setData(elements||[]);
+        if (action === 'edit') {
+          getCurrentDirectory(elements||[]);
+        }
+      }
+    })
+  }
+
+  const getCurrentDirectory = (elements) => {
+    dispatch({
+      type: 'assetmanage.getDirectoryById',
+      payload: { 
+        dirId
+      },
       callback: data => {
-        setData(data||[]);
+        setCheckedValues(data.elementIds||[]);
+        form.setFieldsValue({ name: data.name||'', desc: data.desc||'' });
+        onChange(data.elementIds||[], elements);
       }
     })
   }
@@ -58,12 +76,12 @@ const CustomDirectoryModal = (props) => {
     })
   }
 
-  const onChange = (checkedValues) => {
+  const onChange = (checkedValues, elements = data) => {
     setCheckedValues(checkedValues);
     const _checkedData = [];
 
     (checkedValues||[]).forEach(value => {
-      (data||[]).forEach(item => {
+      (elements||[]).forEach(item => {
         if (value === item.id) {
           _checkedData.push(item);
         }
@@ -77,6 +95,7 @@ const CustomDirectoryModal = (props) => {
     setConfirmLoading(false);
     setCheckedValues([]);
     setCheckedData([]);
+    setPreviewTreeData({});
     form.resetFields();
   }
 
@@ -90,12 +109,19 @@ const CustomDirectoryModal = (props) => {
       const row = await form.validateFields();
       
       setConfirmLoading(true);
+
+      let payload = {
+        data: checkedValues,
+        params: row
+      }
+
+      if (action === 'edit') {
+        payload.params = {...payload.params, dirId};
+      }
+
       dispatch({
         type: 'assetmanage.saveTreeByCustomElements',
-        payload: {
-          data: checkedValues,
-          params: row
-        },
+        payload,
         callback: () => {
           setConfirmLoading(false);
           onCancel && onCancel(true);
@@ -156,7 +182,7 @@ const CustomDirectoryModal = (props) => {
   return (
     <Modal
       forceRender
-      title={'新增自定义'}
+      title={action==='add'?'新增自定义':'修改自定义'}
       visible={visible}
       width={800}
       confirmLoading={confirmLoading}

src/view/Manage/Map/Component/Relation.jsx

 import React from 'react';
 import G6 from '@antv/g6';
-import { isNumber } from '@antv/util';
-// import { ContextPath } from '../../../../util';
 
 const colors = [
   '#BDD2FD',
@@ -68,7 +66,7 @@ class Relation extends React.Component {
             [x, y] = textXY(root, cfg)
           }
 
-          const circle = group.addShape('circle', {
+          group.addShape('circle', {
             attrs: {
               x: 0,
               y: 0,

src/view/Manage/Map/index.jsx

 import React from 'react';
-import { Tabs, Spin, Select } from 'antd';
+import { Tabs, Spin, Radio, Tooltip } from 'antd';
 
 import MapContent from './MapContent';
 import { dispatchLatest } from '../../../model';
@@ -7,7 +7,6 @@ import { dispatchLatest } from '../../../model';
 import './index.less';
 
 const { TabPane } = Tabs;
-const { Option } = Select;
 
 const graphModes = [
   {
@@ -59,8 +58,8 @@ class Map extends React.Component {
     })
   }
 
-  onTypeChange = value => {
-    this.setState({ type: value||'' });
+  onTypeChange = e => {
+    this.setState({ type: e.target.value });
   };
 
   onTabChange = activeKey => {
@@ -85,17 +84,21 @@ class Map extends React.Component {
               return (
                 <TabPane tab={topic.name||''} key={topic.id||''}>
                   <div className='d-flex px-3' style={{ height: 53, alignItems: 'center' }}>
-                    <Select 
-                      value={type} 
-                      style={{ width: 120, marginLeft: 'auto' }} 
-                      onChange={this.onTypeChange}
-                    >
-                    {
-                      graphModes && graphModes.map((mode, index) => {
-                        return <Option key={index} value={mode.key||''}>{mode.title||''}</Option>
-                      })
-                    }
-                    </Select>
+                  <Radio.Group 
+                    value={type} 
+                    onChange={this.onTypeChange}
+                    style={{ marginLeft: 'auto' }}
+                  >
+                  {
+                    graphModes && graphModes.map((mode, index) => {
+                      return (
+                        <Tooltip key={index} title={mode.title||''} >
+                          <Radio.Button value={mode.key}>{(mode.title||'').substring(0, 1)}</Radio.Button>
+                        </Tooltip>
+                      );
+                    })
+                  }
+                  </Radio.Group>
                   </div>
                   { 
                     tabKey===topic.id && <div className='map-container' style={{ padding: '0 10px' }}>