增加模型视角

src/view/Manage/Model/Component/Help.js

@@ -76,7 +76,7 @@ const onDragOver = (event) => {
  */
 const throttleOnDragOver = throttle(onDragOver, 150);
 
-const addEventListenerForSidebar = (elementId) => {
+ const addEventListenerForSidebar = (elementId) => {
   // In Chrome the scrolling works.
   if (navigator.userAgent.indexOf("Chrome") === -1) {
     sidebarElement = document.getElementById(elementId);

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

@@ -486,7 +486,7 @@ const ImportActionTable = (props) => {
 
           (datatype.parameterCnNames||[]).forEach((cnName, index) => {
 
-            _text += ` ${cnName}: ` + `${(datatype.parameterValues[index]?datatype.parameterValues[index]:0)}`;
+            _text += ` ${cnName}: ${(datatype.parameterValues[index]?datatype.parameterValues[index]:0)}`;
           })
 
           return _text;

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

 import React, { useState, useEffect, useRef } from "react";
-import { Tooltip, Tree, Modal, Spin, Select } from "antd";
-import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined  } from '@ant-design/icons';
+import { Tooltip, Tree, Modal, Spin, Dropdown, Menu } from "antd";
+import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined, UnorderedListOutlined } from '@ant-design/icons';
 
 import UpdateTreeItemModal from './UpdateTreeItemModal';
 import { dispatch } from '../../../../model'; 
@@ -9,15 +9,21 @@ import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
 
 import './ModelTree.less';
 
-const { Option } = Select;
+const viewModes = [
+  {
+    key: 'dir',
+    name: '目录视角'
+  },
+  {
+    key: 'state',
+    name: '发布状态视角'
+  }
+];
 
 const ModelTree = (props) => {
 
-  const { onSelect, onStateChange } = props;
+  const { onSelect, onViewChange } = props;
   const [ loading, setLoading ] = useState(false);
-  const [ loadingStates, setLoadingStates ] = useState(false);
-  const [ modelStates, setModelStates ] = useState(null);
-  const [ currentModelState, setCurrentModelState ] = useState('');
   const [ treeData, setTreeData ] = useState(null);
   const [ item, setItem ] = useState(null);
   const [ visible, setVisible ] = useState(false);
@@ -25,6 +31,7 @@ const ModelTree = (props) => {
   const [ rootId, setRootId ] = useState('');
   const [ expandedKeys, setExpandedKeys ] = useState([]);
   const [ autoExpandParent, setAutoExpandParent ] = useState(false);
+  const [ viewSelectedKey, setViewSelectedKey ] = useState(viewModes[0].key);
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -32,23 +39,22 @@ const ModelTree = (props) => {
   const id = getQueryParam(AnchorId, props.location.search);
 
   const itemRef = useRef();
-  itemRef.current = item;
+  itemRef.current = null;
 
   useEffect(() => {
+    setViewSelectedKey(viewModes[0].key);
+    onViewChange && onViewChange(viewModes[0].key);
+
     if ((id||'') !== '') {
-      getDataModelLocationThenGetTreeData();
+      getDataModelLocationThenGetDirTreeData();
     } else {
-      getTreeData();
-    }  
-
-    if (!modelStates) {
-      getModelStates();
+      getDirTreeData();
     }  
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timestamp])
 
-  const getDataModelLocationThenGetTreeData = () => {
+  const getDataModelLocationThenGetDirTreeData = () => {
     setLoading(true);
     dispatch({
       type: 'datamodel.getDataModelLocation',
@@ -56,7 +62,7 @@ const ModelTree = (props) => {
         id
       },
       callback: data => {
-        getTreeData(data.easyDataModelerDataModelCatalogId||'');
+        getDirTreeData(data.easyDataModelerDataModelCatalogId||'');
       },
       error: () => {
         setLoading(false);
@@ -64,7 +70,7 @@ const ModelTree = (props) => {
     });
   }
 
-  const getTreeData = (defaultSelectedId='') => {
+  const getDirTreeData = (defaultSelectedId='') => {
 
     setLoading(true);
     dispatch({
@@ -100,7 +106,6 @@ const ModelTree = (props) => {
         setRootId(data.id||'');
 
         if (defaultItem) {
-
           const _dataList = [];
           generateList(data.subCatalogs||[], _dataList);
 
@@ -121,16 +126,17 @@ const ModelTree = (props) => {
         
         } else {
           
-          let firstItem = itemRef.current;
-          if (firstItem === null) {
-            firstItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
+          let currentItem = itemRef.current;
 
-            setItem(firstItem);
+          if (currentItem === null) {
+            currentItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
+
+            setItem(currentItem);
           }
 
-          itemRef.current = firstItem;
+          itemRef.current = currentItem;
 
-          onSelect && onSelect(firstItem?(firstItem.key||''):'');
+          onSelect && onSelect(currentItem?(currentItem.key||''):'');
           
         }
       },
@@ -140,16 +146,24 @@ const ModelTree = (props) => {
     })
   }
 
-  const getModelStates = () => {
-    setLoadingStates(true);
+  const getStateTreeData = () => {
+    setLoading(true);
     dispatch({
       type: 'datamodel.loadDataModelStateCatalog',
       callback: data => {
-        setLoadingStates(false);
-        setModelStates([{ name: 'all', id: '', cnName: '所有状态' }, ...(data?.subCatalogs||[])]);
+        setLoading(false);
+        let _treeData = data?.subCatalogs||[];
+        _treeData.forEach(item => {
+          item.title = item.cnName;
+          item.key = item.id; 
+        })
+
+        setTreeData(_treeData);
+        setItem(_treeData.length>0?_treeData[0]:{});
+        onSelect && onSelect(_treeData.length>0?_treeData[0].key:'');
       },
       error: () => {
-        setLoadingStates(false);
+        setLoading(false);
       }
     });
   }
@@ -185,9 +199,19 @@ const ModelTree = (props) => {
     setAutoExpandParent(false);
   };
 
-  const onModelStateChange = (value) => {
-    setCurrentModelState(value);
-    onStateChange && onStateChange(value);
+  const onViewClick = ({ key }) => {
+
+    if (viewSelectedKey &&  viewSelectedKey===key ) return;
+
+    itemRef.current = null;
+    setViewSelectedKey(key);
+    onViewChange && onViewChange(key);
+
+    if (key === 'dir') {
+      getDirTreeData();
+    } else {
+      getStateTreeData();
+    }
   }
 
   const onTreeSelect = (keys,data) => {
@@ -219,7 +243,11 @@ const ModelTree = (props) => {
   }
 
   const refresh = () => {
-    getTreeData();
+    if (viewSelectedKey==='dir') {
+      getDirTreeData();
+    } else {
+      getStateTreeData();
+    }
   }
 
   const deleteNode = () => {
@@ -244,7 +272,7 @@ const ModelTree = (props) => {
             showMessage('success', '删除目录成功');
             setItem(null);
             itemRef.current = null;
-            getTreeData();
+            getDirTreeData();
           }
         });
       }
@@ -256,40 +284,27 @@ const ModelTree = (props) => {
     setVisible(false);
     setItem(updateItem);
     itemRef.current = updateItem;
-    getTreeData();
+    getDirTreeData();
   }
 
   const onUpdateTreeItemModalCancel = () => {
     setVisible(false);
   }
 
-  return (
-    <div className='model-tree'>
-      <div
-        className='p-3'
-        style={{
-          display: 'flex',
-          borderBottom: "1px solid #EFEFEF",
-          height: 57,
-          alignItems: 'center'
-        }}
-      >
-        <span className='pr-2'>模型状态:</span>
-        <Select 
-          style={{ width: 120 }} 
-          onChange={onModelStateChange}
-          loading={loadingStates}
-          value={currentModelState}
-        >
+  const exportMenu = (
+    <Menu selectedKeys={[viewSelectedKey]} onClick={onViewClick}>
     {
-          (modelStates||[]).map(item => {
+      viewModes && viewModes.map(item => {
         return (
-              <Option key={item.id} value={item.id}>{item.cnName||''}</Option>
-            );
+          <Menu.Item key={item.key} value={item.key} >{item.name}</Menu.Item>
+        )
       })
     }
-        </Select>
-      </div>
+    </Menu>
+  );
+
+  return (
+    <div className='model-tree'>
       <div
         className='p-3'
         style={{
@@ -299,18 +314,35 @@ const ModelTree = (props) => {
           alignItems: 'center'
         }}
       >
-        <Tooltip title="新增目录">
+        <Dropdown overlay={exportMenu} placement="bottomLeft">
+          <Tooltip title="视角">
+            <UnorderedListOutlined style={{ fontSize:16,cursor:'pointer' }} />
+          </Tooltip>
+        </Dropdown>
+        {
+          viewSelectedKey==='dir' && ( 
+            <Tooltip title="新增目录" className='ml-4'>
               <PlusOutlined onClick={add} style={{ fontSize:16,cursor:'pointer' }} />
             </Tooltip>
+          )
+        }
+        {
+          viewSelectedKey==='dir' && ( 
             <Tooltip title="修改目录" className='ml-4'>
                 <EditOutlined onClick={update} style={{ fontSize:16,cursor:'pointer' }} />
               </Tooltip>
+          )
+        }      
         <Tooltip title="刷新目录" className='ml-4'>
           <SyncOutlined onClick={refresh} style={{ fontSize:16,cursor:'pointer' }} />
         </Tooltip>
+        {
+          viewSelectedKey==='dir' && ( 
             <Tooltip title="删除目录" className='ml-4'>
               <DeleteOutlined onClick={deleteNode} style={{ fontSize:16,cursor:'pointer' }} />
             </Tooltip>
+          )
+        }   
       </div>
       <div className='p-3'>
         <Spin spinning={loading} >

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

 @import '../../../../variables.less';
 .model-tree {
   .yy-tree-list {
-    height: calc(100vh - @header-height - @pm-4 - 54px - 54px - @pm-3) !important;
+    height: calc(100vh - @header-height - @pm-4 - 54px - @pm-3) !important;
     overflow: auto !important;
   }
 }
\ No newline at end of file

src/view/Manage/Model/index.jsx

 import React from 'react';
-import { Button, Input, Space, Spin } from 'antd';
+import { Button, Input, Space, Spin, Select } from 'antd';
 import copy from "copy-to-clipboard";  
 
 import ModelTree from './Component/ModelTree';
@@ -16,6 +16,8 @@ import { Action, CatalogId, ModelerId, Hints } from '../../../util/constant';
 
 import './index.less';
 
+const { Option } = Select;
+
 class Model extends React.Component {
 
   constructor() {
@@ -38,17 +40,46 @@ class Model extends React.Component {
       keyword: '',
       exportErwinLoading: false,
       hints: [],
-      modelStateId: ''
+      loadingStates: false,
+      modelStates: [],
+      currentModelState: '',
+      currentView: '',
+    }
   }
+  
+  componentDidMount() {
+    this.getModelStates();
+  }
+
+  getModelStates = () => {
+    this.setState({ loadingStates: true }, () => {
+      dispatch({
+        type: 'datamodel.loadDataModelStateCatalog',
+        callback: data => {
+          this.setState({
+            loadingStates: false,
+            modelStates: [{ name: 'all', id: '', cnName: '所有状态' }, ...(data?.subCatalogs||[])]
+          });
+        },
+        error: () => {
+          this.setState({ loadingStates: false });
+        }
+      });
+    })
+  }
+
+  onViewChange = (value) => {
+    this.setState({ currentView: value, currentModelState: '' });
   }
 
   onModelStateChange = (value) => {
-    this.setState({ modelStateId: value }, () => {
+    this.setState({ currentModelState: value }, () => {
       this.setFilterData();
     })
   }
 
   onTreeSelect = (key) => {
+
     this.setState({ catalogId: key, keyword: '' }, () => {
       if (!key || key==='') {
         this.setState({ tableData: [], filterTableData: [] });
@@ -59,9 +90,10 @@ class Model extends React.Component {
   }
 
   onTableChange = () => {
-    const { catalogId } = this.state;
+    const { currentView, catalogId } = this.state;
 
     this.setState({ loadingTableData: true }, () => {
+      if (currentView === 'dir') {
         dispatch({
           type: 'datamodel.getCurrentDataModelCatalog',
           payload: {
@@ -76,6 +108,23 @@ class Model extends React.Component {
             this.setState({ loadingTableData: false });
           }
         })
+      } else {
+        dispatch({
+          type: 'datamodel.getCurrentDataModelStateCatalog',
+          payload: {
+            easyDataModelerStateCatalogId: catalogId
+          },
+          callback: data => {
+            this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] }, () => {
+              this.setFilterData();
+            });
+          },
+          error: () => {
+            this.setState({ loadingTableData: false });
+          }
+        })
+      }
+      
     })
   }
 
@@ -110,9 +159,9 @@ class Model extends React.Component {
   }
 
   setFilterData = () => {
-    const { keyword, tableData, modelStateId } = this.state;
+    const { keyword, tableData, currentModelState } = this.state;
 
-    const _filterData = (tableData||[]).filter(item => (modelStateId===''||modelStateId===item.state?.id) && ((item.name||'').indexOf(keyword)!==-1||(item.cnName).indexOf(keyword)!==-1));
+    const _filterData = (tableData||[]).filter(item => (currentModelState===''||currentModelState===item.state?.id) && ((item.name||'').indexOf(keyword)!==-1||(item.cnName).indexOf(keyword)!==-1));
 
     this.setState({ filterTableData: _filterData });
   }
@@ -266,7 +315,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible, constraintDetailModalVisible, importWordModalVisible } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible, constraintDetailModalVisible, importWordModalVisible, loadingStates, modelStates, currentModelState, currentView } = this.state;
 
     const content = (
       <ModelTable loading={loadingTableData} catalogId={catalogId} data={filterTableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} {...this.props} />
@@ -275,7 +324,7 @@ class Model extends React.Component {
     return (
       <div className='data-model'>
         <div className='left'>
-          <ModelTree onStateChange={this.onModelStateChange} onSelect={this.onTreeSelect} {...this.props} />
+          <ModelTree onViewChange={this.onViewChange} onSelect={this.onTreeSelect} {...this.props} />
         </div> 
         <div className='right'>
           <div
@@ -285,6 +334,26 @@ class Model extends React.Component {
               justifyContent: 'space-between'
             }}
           >
+            <div>
+              {
+                currentView==='dir' && <Space className='mr-3'>
+                  <span>模型状态:</span>
+                  <Select 
+                    style={{ width: 120 }} 
+                    onChange={this.onModelStateChange}
+                    loading={loadingStates}
+                    value={currentModelState}
+                  >
+                  {
+                    (modelStates||[]).map(item => {
+                      return (
+                        <Option key={item.id} value={item.id}>{item.cnName||''}</Option>
+                      );
+                    })
+                  }
+                  </Select>
+                </Space>
+              }
               <Space>
                 <span>模型搜索:</span>
                 <Input 
@@ -295,6 +364,7 @@ class Model extends React.Component {
                   style={{ width: 240, marginLeft: 'auto' }}
                 />
               </Space>
+            </div>
             <Space>
               <Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button>
               <Button type="primary" onClick={this.onTemplateCURDClick}>数据表类型配置</Button>