模型目录调整

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

@@ -240,7 +240,8 @@ const AssetTagModal = (props) => {
         </Space>
       }
     >
-      <Form {...formItemLayout} form={form}>
+    {
+      visible && <Form {...formItemLayout} form={form}>
        <AppContext.Consumer>
        {
        value => {
@@ -281,6 +282,7 @@ const AssetTagModal = (props) => {
        }}
        </AppContext.Consumer>
      </Form>
+    }
     </Modal>
   );
 } 

src/view/Manage/Model/Component/ModelTree.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { Tooltip, Tree, Modal, Spin, Dropdown, Menu, Button } from "antd";
 import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined, ImportOutlined, UnorderedListOutlined, ReloadOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import UpdateTreeItemModal from './UpdateTreeItemModal';
 import { dispatch } from '../../../../model'; 
@@ -9,6 +10,7 @@ import { showMessage, getQueryParam } from '../../../../util';
 import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
 
 import './ModelTree.less';
+import 'react-contexify/dist/ReactContexify.css';
 
 const viewModes = [
   {
@@ -23,6 +25,12 @@ const viewModes = [
 
 const ModelTree = (props) => {
 
+  const MENU_ID = 'model-tree';
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
   const { onSelect, onViewChange, refrence='', importStockModel, keyword } = props;
   const [ loading, setLoading ] = useState(false);
   const [ treeData, setTreeData ] = useState(null);
@@ -37,15 +45,13 @@ const ModelTree = (props) => {
   const [ isSetRootId, setIsSetRootId ] = useState(true);
   const [ domains, setDomains ] = useState([]);
   const [ domainSelectedKey, setDomainSelectedKey ] = useState('');
+  const [ currentRightClickDir, setCurrentRightClickDir ] = useState({});
 
   const [modal, contextHolder] = Modal.useModal();
 
   const timestamp = getQueryParam(AnchorTimestamp, props.location?.search||'');
   const id = getQueryParam(AnchorId, props.location?.search||'');
 
-  const itemRef = useRef();
-  itemRef.current = null;
-
   useEffect(() => {
     getShowSyncAndDomains();
     //eslint-disable-next-line react-hooks/exhaustive-deps
@@ -179,16 +185,9 @@ const ModelTree = (props) => {
         
         } else if (refrence === '') {
           
-          let currentItem = itemRef.current;
-
-          if (currentItem === null) {
-            currentItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
+          const currentItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
 
           setItem(currentItem);
-          }
-
-          itemRef.current = currentItem;
-
           onSelect && onSelect(currentItem?(currentItem.key||''):'');
           
         }
@@ -256,7 +255,6 @@ const ModelTree = (props) => {
 
     if (viewSelectedKey &&  viewSelectedKey===key ) return;
 
-    itemRef.current = null;
     setViewSelectedKey(key);
     onViewChange && onViewChange(key);
 
@@ -303,12 +301,6 @@ const ModelTree = (props) => {
   }
 
   const update = () => {
-
-    if (!item) {
-      showMessage('info', '请先选择目录');
-      return;
-    }
-
     setVisible(true);
     setType('update');
   }
@@ -326,22 +318,16 @@ const ModelTree = (props) => {
   }
 
   const moveNode = (steps) => {
-    if (!item) {
-      showMessage('info', '请先选择目录');
-      return;
-    }
-
     setLoading(true);
     dispatch({
       type: 'datamodel.upDownModelCatalog',
       payload: {
-        modelCatalogId: item.id,
+        modelCatalogId: currentRightClickDir.id,
         steps
       },
       callback: () => {
         showMessage('success', (steps===-1)?'上移目录成功':'下移目录成功');
-        setItem(null);
-        getDirTreeData(item.key);
+        getDirTreeData(item.id);
       }, 
       error: () => {
         setLoading(false);
@@ -350,11 +336,6 @@ const ModelTree = (props) => {
   }
 
   const deleteNode = () => {
-    if (!item) {
-      showMessage('info', '请先选择目录');
-      return;
-    }
-
     modal.confirm({
       title: '提示!',
       content: '删除目录会删除相关的模型,您确定删除吗?',
@@ -364,14 +345,17 @@ const ModelTree = (props) => {
           type: 'datamodel.deleteDataModelCatalog',
           payload: {
             params: {
-              easyDataModelerCatalogId: item.id
+              easyDataModelerCatalogId: currentRightClickDir.id
             }
           },
           callback: () => {
             showMessage('success', '删除目录成功');
-            setItem(null);
-            itemRef.current = null;
+
+            if (item && currentRightClickDir && item.id===currentRightClickDir.id) {
               getDirTreeData();
+            } else {
+              getDirTreeData(item.id);
+            }
           }, 
           error: () => {
             setLoading(false);
@@ -384,20 +368,22 @@ const ModelTree = (props) => {
 
   const onUpdateTreeItemModalOk = (id, updateItem) => {
     setVisible(false);
-
-    if (type === 'add') {
-      getDirTreeData(id);
-    } else {
-      setItem(updateItem);
-      itemRef.current = updateItem;
     getDirTreeData(id);
   }
-  }
 
   const onUpdateTreeItemModalCancel = () => {
     setVisible(false);
   }
 
+  const displayMenu = (e) => {
+    show(e, {
+      position: {
+        x: e.clientX + 30,
+        y: e.clientY - 10
+      }
+    });
+  }
+
   const exportMenu = (
     <Menu selectedKeys={[viewSelectedKey]} onClick={onViewClick}>
     {
@@ -439,7 +425,8 @@ const ModelTree = (props) => {
           display: 'flex',
           borderBottom: "1px solid #EFEFEF",
           height: 57,
-          alignItems: 'center'
+          alignItems: 'center',
+          justifyContent: (viewSelectedKey==='dir')?'space-between':'',
         }}
       >
         <Dropdown overlay={exportMenu} placement="bottomLeft">
@@ -457,13 +444,6 @@ const ModelTree = (props) => {
         }     
         {
           viewSelectedKey==='dir' && ( 
-            <Tooltip title="修改目录" className='ml-2'>
-                <EditOutlined className='default' onClick={update} style={{ fontSize:16,cursor:'pointer' }} />
-              </Tooltip>
-          )
-        }      
-        {
-          viewSelectedKey==='dir' && ( 
             <Tooltip title="存量模型导入" className='ml-2'>
               <ImportOutlined className='default' onClick={() => { importStockModel && importStockModel() }} style={{ fontSize:16,cursor:'pointer' }} />
             </Tooltip>
@@ -491,30 +471,6 @@ const ModelTree = (props) => {
               </Tooltip>
           )
         }   
-
-        {
-          viewSelectedKey==='dir' && ( 
-            <Tooltip title="上移目录" className='ml-2'>
-              <ArrowUpOutlined className='default' onClick={() => { moveNode(-1); }} style={{ fontSize:16,cursor:'pointer' }} />
-            </Tooltip>
-          )
-        } 
-
-        {
-          viewSelectedKey==='dir' && ( 
-            <Tooltip title="下移目录" className='ml-2'>
-              <ArrowDownOutlined className='default' onClick={() => { moveNode(1); }} style={{ fontSize:16,cursor:'pointer' }} />
-            </Tooltip>
-          )
-        }   
-
-        {
-          viewSelectedKey==='dir' && ( 
-            <Tooltip title="删除目录" className='ml-2'>
-              <DeleteOutlined className='default' onClick={deleteNode} style={{ fontSize:16,cursor:'pointer' }} />
-            </Tooltip>
-          )
-        }
       </div>
     }
       <div className='p-3'>
@@ -531,17 +487,38 @@ const ModelTree = (props) => {
             titleRender={(nodeData) => {
               return <span title={nodeData?.remark||''}>{nodeData?.name||''}</span>;
             }}
+            onRightClick={({event, node}) => {
+              if (viewSelectedKey==='dir') {
+                setCurrentRightClickDir(node);
+                displayMenu(event);
+              }
+            }}
           />      
         </Spin>
       </div>
       <UpdateTreeItemModal 
         visible={visible} 
         type={type}
-        item={item}
+        item={(type==='add')?item:currentRightClickDir}
         rootId={rootId}
         onOk={onUpdateTreeItemModalOk} 
         onCancel={onUpdateTreeItemModalCancel} 
         />
+
+      <RcMenu id={MENU_ID}>
+        <RcItem id="edit" onClick={update}>
+          修改目录
+        </RcItem>
+        <RcItem id="up" onClick={() => { moveNode(-1); }}>
+          上移目录
+        </RcItem> 
+        <RcItem id="down" onClick={() => { moveNode(1); }}>
+          下移目录
+        </RcItem> 
+        <RcItem id="delete" onClick={deleteNode}>
+          删除目录
+        </RcItem>
+      </RcMenu>  
       {contextHolder}  
     </div>
   );