Skip to content

S
szse
Commit ef698b43 by zhaochengxiang
Options

增加模型视角

parent 332294b5
Showing with 206 additions and 103 deletions
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();
getDirTreeData();
}
if (!modelStates) {
getModelStates();
}
//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);
......@@ -120,18 +125,19 @@ const ModelTree = (props) => {
onSelect && onSelect(defaultItem.key||'');
} else {
let currentItem = itemRef.current;
let firstItem = itemRef.current;
if (firstItem === null) {
firstItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
if (currentItem === null) {
currentItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
setItem(firstItem);
setItem(currentItem);
}
itemRef.current = firstItem;
itemRef.current = currentItem;
onSelect && onSelect(firstItem?(firstItem.key||''):'');
onSelect && onSelect(currentItem?(currentItem.key||''):'');
}
},
error: () => {
......@@ -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,13 +284,25 @@ const ModelTree = (props) => {
setVisible(false);
setItem(updateItem);
itemRef.current = updateItem;
getTreeData();
getDirTreeData();
}
const onUpdateTreeItemModalCancel = () => {
setVisible(false);
}
const exportMenu = (
<Menu selectedKeys={[viewSelectedKey]} onClick={onViewClick}>
{
viewModes && viewModes.map(item => {
return (
<Menu.Item key={item.key} value={item.key} >{item.name}</Menu.Item>
)
})
}
</Menu>
);
return (
<div className='model-tree'>
<div
......@@ -274,43 +314,35 @@ const ModelTree = (props) => {
alignItems: 'center'
}}
>
<span className='pr-2'>模型状态:</span>
<Select
style={{ width: 120 }}
onChange={onModelStateChange}
loading={loadingStates}
value={currentModelState}
>
<Dropdown overlay={exportMenu} placement="bottomLeft">
<Tooltip title="视角">
<UnorderedListOutlined style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
</Dropdown>
{
(modelStates||[]).map(item => {
return (
<Option key={item.id} value={item.id}>{item.cnName||''}</Option>
);
})
viewSelectedKey==='dir' && (
<Tooltip title="新增目录" className='ml-4'>
<PlusOutlined onClick={add} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
)
}
</Select>
</div>
<div
className='p-3'
style={{
display: 'flex',
borderBottom: "1px solid #EFEFEF",
height: 57,
alignItems: 'center'
}}
>
<Tooltip title="新增目录">
<PlusOutlined onClick={add} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
<Tooltip title="修改目录" className='ml-4'>
<EditOutlined onClick={update} 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>
<Tooltip title="删除目录" className='ml-4'>
<DeleteOutlined onClick={deleteNode} 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,23 +90,41 @@ class Model extends React.Component {
}
onTableChange = () => {
const { catalogId } = this.state;
const { currentView, catalogId } = this.state;
this.setState({ loadingTableData: true }, () => {
dispatch({
type: 'datamodel.getCurrentDataModelCatalog',
payload: {
easyDataModelerCatalogId: catalogId
},
callback: data => {
this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] }, () => {
this.setFilterData();
});
},
error: () => {
this.setState({ loadingTableData: false });
}
})
if (currentView === 'dir') {
dispatch({
type: 'datamodel.getCurrentDataModelCatalog',
payload: {
easyDataModelerCatalogId: catalogId
},
callback: data => {
this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] }, () => {
this.setFilterData();
});
},
error: () => {
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,16 +334,37 @@ class Model extends React.Component {
justifyContent: 'space-between'
}}
>
<Space>
<span>模型搜索:</span>
<Input
placeholder="请输入模型名称或者中文名称"
allowClear
value={keyword}
onChange={this.onSearchInputChange}
style={{ width: 240, marginLeft: 'auto' }}
/>
</Space>
<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
placeholder="请输入模型名称或者中文名称"
allowClear
value={keyword}
onChange={this.onSearchInputChange}
style={{ width: 240, marginLeft: 'auto' }}
/>
</Space>
</div>
<Space>
<Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button>
<Button type="primary" onClick={this.onTemplateCURDClick}>数据表类型配置</Button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment