Skip to content

S
szse
Commit 6e32fc0e by zhaochengxiang
Options

右键操作

parent ac5119e4
Showing with 91 additions and 135 deletions
package.json
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"less-loader": "^8.0.0", "less-loader": "^8.0.0",
"local-storage": "^2.0.0", "local-storage": "^2.0.0",
"react": "^17.0.1", "react": "^17.0.1",
"react-contexify": "^5.0.0",
"react-dnd": "^14.0.2", "react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0", "react-dnd-html5-backend": "^14.0.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
......
src/view/Manage/Model/Component/ImportAction.jsx
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Spin, Tabs, Popover, Divider, Button, Space } from 'antd'; import { Spin } from 'antd';
import LocalStorage from 'local-storage'; import LocalStorage from 'local-storage';
import { QuestionCircleOutlined } from '@ant-design/icons';
import ImportActionHeader from './ImportActionHeader'; import ImportActionHeader from './ImportActionHeader';
import ImportActionTable from './ImportActionTable'; import ImportActionTable from './ImportActionTable';
...@@ -12,10 +11,8 @@ import { Action } from '../../../../util/constant'; ...@@ -12,10 +11,8 @@ import { Action } from '../../../../util/constant';
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
const { TabPane } = Tabs;
const ImportAction = (props) => { const ImportAction = (props) => {
const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, versionId, permitCheckOut, autoTabKey } = props; const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, versionId, permitCheckOut } = props;
const [ constraints, setConstraints ] = useState([]); const [ constraints, setConstraints ] = useState([]);
const [ constraint, setConstraint ] = useState({}); const [ constraint, setConstraint ] = useState({});
...@@ -25,7 +22,6 @@ const ImportAction = (props) => { ...@@ -25,7 +22,6 @@ const ImportAction = (props) => {
const [ supportedDatatypes, setSupportedDatatypes ] = useState([]); const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
const [ supportedPartitionTypes, setSupportedPartitionTypes ] = useState([]); const [ supportedPartitionTypes, setSupportedPartitionTypes ] = useState([]);
const [ validateReports, setValidateReports ] = useState([]); const [ validateReports, setValidateReports ] = useState([]);
const [ tabKey, setTabKey ] = useState('1');
const [ loading, setLoading ] = useState(false); const [ loading, setLoading ] = useState(false);
useEffect(() =>{ useEffect(() =>{
...@@ -70,12 +66,6 @@ const ImportAction = (props) => { ...@@ -70,12 +66,6 @@ const ImportAction = (props) => {
//eslint-disable-next-line react-hooks/exhaustive-deps //eslint-disable-next-line react-hooks/exhaustive-deps
}, [action, hints, modelerId, ddl ]); }, [action, hints, modelerId, ddl ]);
useEffect(() => {
if (autoTabKey) {
setTabKey(autoTabKey);
}
}, [autoTabKey])
const getDraft = (_constraint, _template, _hints) => { const getDraft = (_constraint, _template, _hints) => {
dispatch({ dispatch({
type: 'datamodel.getDraft', type: 'datamodel.getDraft',
...@@ -423,18 +413,6 @@ const ImportAction = (props) => { ...@@ -423,18 +413,6 @@ const ImportAction = (props) => {
} }
const onTabChange = (key) => {
setTabKey(key);
}
const prevStep = () => {
setTabKey(`${Number(tabKey)-1}`);
}
const nextStep = () => {
setTabKey(`${Number(tabKey)+1}`);
}
return ( return (
<Spin spinning={loading}> <Spin spinning={loading}>
<ImportActionHeader <ImportActionHeader
......
src/view/Manage/Model/Component/ImportModal.jsx
...@@ -6,7 +6,6 @@ import ImportExcel from './ImportExcel'; ...@@ -6,7 +6,6 @@ import ImportExcel from './ImportExcel';
import ImportExcelCopy from './ImportExcelCopy'; import ImportExcelCopy from './ImportExcelCopy';
import { dispatchLatest } from '../../../../model'; import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const importModes = [ const importModes = [
{ name: 'Word导入', key: 'word' }, { name: 'Word导入', key: 'word' },
......
src/view/Manage/Model/Component/ModelTable.jsx
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { Button, Tooltip, Modal, Pagination, Table, Dropdown, Menu, Divider, Descriptions } from 'antd'; import { Tooltip, Modal, Pagination, Table, Descriptions } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons'; import { DownOutlined, UpOutlined } from '@ant-design/icons';
import SmoothScroll from 'smooth-scroll'; import SmoothScroll from 'smooth-scroll';
import classnames from 'classnames'; import classnames from 'classnames';
import { Resizable } from 'react-resizable'; import { Resizable } from 'react-resizable';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
import { showMessage, getQueryParam, paginate, isSzseEnv, getTextLength, getTextWidth } from '../../../../util'; import { showMessage, getQueryParam, paginate, isSzseEnv, getTextLength, getTextWidth } from '../../../../util';
...@@ -11,6 +12,7 @@ import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId } from '../../. ...@@ -11,6 +12,7 @@ import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId } from '../../.
// import Tag from "../../Tag"; // import Tag from "../../Tag";
import './ModelTable.less'; import './ModelTable.less';
import 'react-contexify/dist/ReactContexify.css';
const ModelNameColumn = (props) => { const ModelNameColumn = (props) => {
const { text, record, detailItem } = props; const { text, record, detailItem } = props;
...@@ -113,6 +115,12 @@ const ModelTable = (props) => { ...@@ -113,6 +115,12 @@ const ModelTable = (props) => {
const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, view, selectModelerIds, onSubSelect } = props; const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, view, selectModelerIds, onSubSelect } = props;
const MENU_ID = (((modelId||'') !== '') ? `model-table-contextmenu-${modelId}` : 'model-table-contextmenu');
const { show } = useContextMenu({
id: MENU_ID,
});
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]); const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]); const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
// const [ mouseEnterKey, setMouseEnterKey ] = useState(null); // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
...@@ -120,31 +128,6 @@ const ModelTable = (props) => { ...@@ -120,31 +128,6 @@ const ModelTable = (props) => {
const [ filterData, setFilterData ] = useState([]); const [ filterData, setFilterData ] = useState([]);
const [ subData, setSubData ] = useState([]); const [ subData, setSubData ] = useState([]);
const moreMenu = (record) => {
return <Menu onClick={(e) => { onMoreMenuClick(e, record); }}>
<Menu.Item key='history'>
历史版本
</Menu.Item>
<Menu.Item key='copy'>
复制模型
</Menu.Item>
{
(record?.state?.supportedActions||[]).length>0 && record?.state?.supportedActions.map((item, index) => {
return (
<Menu.Item key={`action-${index}`}>
{item.cnName||''}
</Menu.Item>
);
})
}
{
record?.deployable && <Menu.Item key='createTable'>
建表
</Menu.Item>
}
</Menu>
}
const commonColumns = [ const commonColumns = [
{ {
title: '序号', title: '序号',
...@@ -182,21 +165,6 @@ const ModelTable = (props) => { ...@@ -182,21 +165,6 @@ const ModelTable = (props) => {
} }
}, },
{ {
title: '模型描述',
dataIndex: 'remark',
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
width: 200,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<span>{text||''}</span>
</Tooltip>
);
}
},
{
title: '状态', title: '状态',
dataIndex: 'state', dataIndex: 'state',
width: 80, width: 80,
...@@ -247,74 +215,17 @@ const ModelTable = (props) => { ...@@ -247,74 +215,17 @@ const ModelTable = (props) => {
// } // }
// }, // },
{ {
title: '操作', title: '模型描述',
key: 'action', dataIndex: 'remark',
// width: 180,
ellipsis: true, ellipsis: true,
render: (_,record) => { sorter: true,
sortDirections: ['ascend', 'descend'],
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = ''; render: (text, _, __) => {
if (!record?.editable&&!record?.permitCheckOut) {
disableEdit = true;
if (record?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
} else if (record?.state?.id === '4') {
editTip = `${record.holder||''}正在编辑中, 不允许再编辑`;
}
}
if (!record?.deletable) {
disableDelete = true;
if (record?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (record?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
return ( return (
<div style={{ display: 'flex', alignItems: 'center' }}> <Tooltip title={text||''}>
<Tooltip title={editTip}> <span>{text||''}</span>
<Button
type='link'
size='small'
disabled={disableEdit}
onClick={() => { editItem(record); }}
style={{ padding: 0 }}
>
编辑
</Button>
</Tooltip>
<div style={{ margin: '0 5px' }}>
<Divider type='vertical' />
</div>
<Tooltip title={deleteTip} >
<Button
type='link'
size='small'
disabled={disableDelete}
onClick={() => { deleteItem(record); }}
style={{ padding: 0 }}
>
删除
</Button>
</Tooltip> </Tooltip>
<div style={{ margin: '0 5px' }}> );
<Divider type='vertical' />
</div>
<Dropdown overlay={moreMenu(record)} trigger={['click']} placement="bottomLeft">
<Button
type='link'
size='small'
style={{ padding: 0 }}
>
更多<DownOutlined />
</Button>
</Dropdown>
</div>
)
} }
}, },
]; ];
...@@ -335,6 +246,7 @@ const ModelTable = (props) => { ...@@ -335,6 +246,7 @@ const ModelTable = (props) => {
const [ columns, setColumns ] = useState(commonColumns); const [ columns, setColumns ] = useState(commonColumns);
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } ); const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const [ currentItem, setCurrentItem ] = useState(null);
const { pageNum, pageSize } = pagination; const { pageNum, pageSize } = pagination;
const [modal, contextHolder] = Modal.useModal(); const [modal, contextHolder] = Modal.useModal();
...@@ -677,6 +589,50 @@ const ModelTable = (props) => { ...@@ -677,6 +589,50 @@ const ModelTable = (props) => {
} }
} }
const displayMenu = (e) => {
show(e);
}
const handleItemClick = ({ event, props, data, triggerEvent }) => {
switch (event.currentTarget.id) {
case "edit":
editItem(currentItem);
break;
case "delete":
deleteItem(currentItem);
break;
case "history":
historyItem(currentItem);
break;
case "copy":
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${currentItem.id}`);
break;
default:
break;
}
}
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '';
if (!currentItem?.editable&&!currentItem?.permitCheckOut) {
disableEdit = true;
if (currentItem?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
} else if (currentItem?.state?.id === '4') {
editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
}
}
if (!currentItem?.deletable) {
disableDelete = true;
if (currentItem?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (currentItem?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
return ( return (
<div className={classes}> <div className={classes}>
<Table <Table
...@@ -703,6 +659,10 @@ const ModelTable = (props) => { ...@@ -703,6 +659,10 @@ const ModelTable = (props) => {
return { return {
id: `data-model-${record?.id}`, id: `data-model-${record?.id}`,
style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' }, style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
onContextMenu: event => {
setCurrentItem(record);
displayMenu(event);
},
} }
}} }}
onChange={onTableChange} onChange={onTableChange}
...@@ -728,6 +688,24 @@ const ModelTable = (props) => { ...@@ -728,6 +688,24 @@ const ModelTable = (props) => {
showTotal={total => `共 ${total} 条`} showTotal={total => `共 ${total} 条`}
/> />
} }
<RcMenu id={MENU_ID}>
<RcItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
编辑
</Tooltip>
</RcItem>
<RcItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</RcItem>
<RcItem id="history" onClick={handleItemClick}>
历史版本
</RcItem>
<RcItem id="copy" onClick={handleItemClick}>
复制模型
</RcItem>
</RcMenu>
{ contextHolder } { contextHolder }
</div> </div>
); );
......
src/view/Manage/Model/Component/UpdateTreeItemModal.jsx
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Radio, InputNumber } from 'antd'; import { Modal, Form, Input, Radio } from 'antd';
import { dispatchLatest } from '../../../../model'; import { dispatchLatest } from '../../../../model';
......
src/view/Manage/Model/index.jsx
import React from 'react'; import React from 'react';
import { Button, Space, Spin, Dropdown, Menu, Input, Select, Tooltip } from 'antd'; import { Button, Space, Spin, Input, Select, Tooltip } from 'antd';
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { DownOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'; import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import classNames from 'classnames'; import classNames from 'classnames';
import ModelTree from './Component/ModelTree'; import ModelTree from './Component/ModelTree';
...@@ -285,7 +285,7 @@ class Model extends React.Component { ...@@ -285,7 +285,7 @@ class Model extends React.Component {
} }
onImportModalCancelByWord = (refresh = false, wordData = {}) => { onImportModalCancelByWord = (refresh = false, wordData = {}) => {
const { catalogId, currentView } = this.state; const { catalogId } = this.state;
this.setState({ importModalVisible: false }, () => { this.setState({ importModalVisible: false }, () => {
refresh && this.onTableChange(); refresh && this.onTableChange();
......
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