Skip to content

S
szse
Commit 286e5033 by zhaochengxiang
Options

调整代码

parent 4925ac78
Showing with 110 additions and 257 deletions
src/view/Manage/Model/Component/SubModelTable.jsx → src/view/Manage/Model/Component/ExpandedModelTable.jsx
import React, { useState, useEffect, useRef } from "react";
import { Tooltip, Modal, Pagination, Table, Typography } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import SmoothScroll from 'smooth-scroll';
import React, { useState, useEffect } from "react";
import { Tooltip, Modal, Table, Typography } from 'antd';
import classnames from 'classnames';
import { Resizable } from 'react-resizable';
import ResizeObserver from 'rc-resize-observer';
import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
import { nanoid } from 'nanoid';
import { createPortal } from 'react-dom';
import { MenuItem, SubMenu } from 'react-contextmenu';
import { MenuItem } from 'react-contextmenu';
import { dispatch } from '../../../../model';
import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
import { showMessage, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
// import Tag from "../../Tag";
import './ModelTable.less';
import 'react-contexify/dist/ReactContexify.css';
const { Text } = Typography;
const { Column } = Table;
......@@ -128,17 +125,18 @@ const ResizeableHeaderCell = props => {
);
};
const SubModelTable = (props) => {
const ExpandedModelTable = (props) => {
const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, checked, dataMap, onDataMapChange } = props;
const { onChange, onItemAction, onHistory, onAutoCreateTable, onExpandedSelect, onExpandedChange, catalogId, keyword, id = null, pid = null, view, user, checked, dataMap } = props;
const [ tableWidth, setTableWidth ] = useState(0);
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
// const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
const [ sortRule, setSortRule ] = useState(null);
const [ filterData, setFilterData ] = useState([]);
const [ subData, setSubData ] = useState([]);
const [ data, setData ] = useState([]);
const [ columns, setColumns ] = useState([]);
const [ currentItem, setCurrentItem ] = useState(null);
const [modal, contextHolder] = Modal.useModal();
const cols = [
{
......@@ -146,8 +144,6 @@ const SubModelTable = (props) => {
dataIndex: 'name',
width: isSzseEnv?360:160,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, record, index) => {
return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
}
......@@ -157,8 +153,6 @@ const SubModelTable = (props) => {
dataIndex: 'cnName',
width: isSzseEnv?420:160,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
......@@ -172,8 +166,6 @@ const SubModelTable = (props) => {
dataIndex: 'state',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_, record) => {
let color = '';
......@@ -198,16 +190,12 @@ const SubModelTable = (props) => {
dataIndex: 'editor',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
},
{
title: '版本号',
dataIndex: 'modifiedTs',
width: 170,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_,record) => {
return `V_${formatDate(record.modifiedTs)}`;
}
......@@ -234,8 +222,6 @@ const SubModelTable = (props) => {
title: '模型描述',
dataIndex: 'remark',
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''} overlayClassName='tooltip-common'>
......@@ -251,8 +237,6 @@ const SubModelTable = (props) => {
dataIndex: 'path',
width: 120,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
......@@ -262,21 +246,11 @@ const SubModelTable = (props) => {
}
};
const [ columns, setColumns ] = useState([]);
const [ currentItem, setCurrentItem ] = useState(null);
const [modal, contextHolder] = Modal.useModal();
const anchorId = getQueryParam(AnchorId, props.location.search);
const anchorTimestamp = getQueryParam(AnchorTimestamp, props.location.search);
const shouldScrollRef = useRef(false);
useEffect(() => {
setSelectedRowKeys(checked?[modelId]:[]);
setSelectedRowKeys(checked?[id]:[]);
if (dataMap.has(modelId)) {
setSubData([dataMap.get(modelId)]);
if (dataMap.has(id)) {
setData([dataMap.get(id)]);
} else {
getCheckoutDataModel();
}
......@@ -311,14 +285,11 @@ const SubModelTable = (props) => {
dispatch({
type: 'datamodel.getCheckoutDataModel',
payload: {
id: modelPid
id: pid
},
callback: data => {
setSubData(data?[data]:[]);
onDataMapChange && onDataMapChange(modelId, data);
},
error: () => {
setData(data?[data]:[]);
onExpandedChange && onExpandedChange(id, data);
}
})
}
......@@ -386,9 +357,9 @@ const SubModelTable = (props) => {
onHistory && onHistory(record.id);
}
const onSelectChange = keys => {
const onExpandedSelectChange = keys => {
setSelectedRowKeys(keys);
onSubSelect && onSubSelect(keys, subData[0].id);
onExpandedSelect && onExpandedSelect(keys, data[0].id);
};
const handleResize = index => (e, { size }) => {
......@@ -404,12 +375,12 @@ const SubModelTable = (props) => {
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
onChange: onExpandedSelectChange,
hideSelectAll: true,
};
const classes = classnames('model-table', {
'model-table-sub': modelId
'model-table-sub': id
});
const handleItemClick = (e, data) => {
......@@ -499,7 +470,7 @@ const SubModelTable = (props) => {
}}
columns={mergedColumns()}
rowKey={'id'}
dataSource={subData||[]}
dataSource={data||[]}
pagination={false}
size='small'
onRow={(record, index) => {
......@@ -558,4 +529,4 @@ const SubModelTable = (props) => {
);
}
export default SubModelTable;
\ No newline at end of file
export default ExpandedModelTable;
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.jsx
import React, { useState, useEffect, useRef, useMemo } from "react";
import { Tooltip, Modal, Pagination, Table, Typography } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Tooltip, Modal, Table, Typography } from 'antd';
import SmoothScroll from 'smooth-scroll';
import classnames from 'classnames';
import { Resizable } from 'react-resizable';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import ResizeObserver from 'rc-resize-observer';
import { MenuItem, SubMenu } from 'react-contextmenu';
import { MenuItem } from 'react-contextmenu';
import LocalStorage from 'local-storage';
import DataGrid from '../../VirtualTable/test-table';
import { dispatch } from '../../../../model';
import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { showMessage, getQueryParam, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
import SubModelTable from "./SubModelTable";
import ExpandedModelTable from "./ExpandedModelTable";
// import Tag from "../../Tag";
import './ModelTable.less';
import 'react-contexify/dist/ReactContexify.css';
const { Text } = Typography;
const { Column } = Table;
const ModelNameColumn = (props) => {
const { text, record, detailItem } = props;
......@@ -100,21 +94,18 @@ const ModelNameColumn = (props) => {
}
const ModelTable = (props) => {
const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user } = props;
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, dataMap, onDataMapChange, globalSelectRows } = props;
const shouldScrollRef = useRef(false);
const expandedDataMapRef = useRef(new Set());
const MENU_ID = (((modelId||'') !== '') ? `model-table-contextmenu-${modelId}` : 'model-table-contextmenu');
const anchorId = getQueryParam(AnchorId, props?.location?.search);
const anchorTimestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
const { show } = useContextMenu({
id: MENU_ID,
});
const [ tableWidth, setTableWidth ] = useState(0);
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
const [ filterData, setFilterData ] = useState([]);
const [ subData, setSubData ] = useState([]);
const [ subDataMap, setSubDataMap ] = useState(new Map());
const [modal, contextHolder] = Modal.useModal();
const cols = [
{
......@@ -218,82 +209,34 @@ const ModelTable = (props) => {
}
};
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const { pageNum, pageSize } = pagination;
const [modal, contextHolder] = Modal.useModal();
const anchorId = getQueryParam(AnchorId, props?.location?.search);
const anchorTimestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
const shouldScrollRef = useRef(false);
const columns = useMemo(() => {
const newColumns = [...cols];
if (view==='state' || (keyword||'')!=='') {
newColumns.splice(3, 0, pathColumn);
}
return newColumns;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [view, keyword]);
useEffect(() => {
window?.addEventListener("storage", modelEventChange);
return () => {
window?.removeEventListener("storage", modelEventChange);
}
//eslint-disable-next-line react-hooks/exhaustive-deps
window?.addEventListener("storage", modelEventChange);
return () => {
window?.removeEventListener("storage", modelEventChange);
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
if ((modelId||'') === '') {
onSelect && onSelect([]);
if ((keyword||'') === '') {
if (offset !== null) {
const _pageNum = parseInt(offset/pageSize + ((offset%pageSize===0)?0:1));
setPagination({...pagination, pageNum: _pageNum });
} else {
setPagination({...pagination, pageNum: 1 });
}
} else {
setPagination({...pagination, pageNum: 1 });
}
} else {
if (dataMap.has(modelId)) {
setSubData([dataMap.get(modelId)]);
} else {
getCheckoutDataModel();
}
if (globalSelectRows.indexOf(modelId) !== -1) {
setSelectedRowKeys([modelId]);
} else {
setSelectedRowKeys([]);
}
}
setSelectedRowKeys([]);
setExpandedSelectedRowKeys([]);
onSelect && onSelect([]);
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ catalogId, keyword, offset, modelState ]);
useEffect(() => {
if ((selectModelerIds||[]).length === 0) {
setSelectedRowKeys([]);
setSubSelectedRowKeys([]);
}
}, [selectModelerIds])
useEffect(() => {
if ((anchorId||'') !== '') {
shouldScrollRef.current = true;
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [anchorTimestamp])
......@@ -314,41 +257,12 @@ const ModelTable = (props) => {
const modelEventChange = (e) => {
if (e.key === 'modelChange') {
subDataMap.delete(LocalStorage.get('modelId'));
const newExpandedDataMap = new Set(expandedDataMapRef.current);
newExpandedDataMap.delete(LocalStorage.get('modelId'));
expandedDataMapRef.current = newExpandedDataMap;
}
}
const getCheckoutDataModel = () => {
dispatch({
type: 'datamodel.getCheckoutDataModel',
payload: {
id: modelPid
},
callback: data => {
setSubData(data?[data]:[]);
onDataMapChange && onDataMapChange(modelId, data);
},
error: () => {
}
})
}
// const getDataModel = () => {
// dispatch({
// type: 'datamodel.getDataModel',
// payload: {
// id: modelId
// },
// callback: data => {
// setSubData(data?[data]:[]);
// },
// error: () => {
// }
// })
// }
const editItem = (record) => {
onItemAction && onItemAction(record, 'edit');
}
......@@ -375,24 +289,15 @@ const ModelTable = (props) => {
callback: () => {
showMessage('success', `模型${action.cnName||''}成功`);
if ((modelId||'') === '') {
onChange && onChange();
const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
if (index !== -1) {
const newSelectedRowKeys = [...selectedRowKeys];
newSelectedRowKeys.splice(index, 1);
setSelectedRowKeys(newSelectedRowKeys);
onSelect && onSelect(newSelectedRowKeys);
}
} else {
if (action.id === '2') {
onChange && onChange();
} else {
getCheckoutDataModel();
}
onChange && onChange();
const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
if (index !== -1) {
const newSelectedRowKeys = [...selectedRowKeys];
newSelectedRowKeys.splice(index, 1);
setSelectedRowKeys(newSelectedRowKeys);
onSelect && onSelect(newSelectedRowKeys);
}
}
})
}
......@@ -400,7 +305,6 @@ const ModelTable = (props) => {
}
const deleteItem = (record) => {
modal.confirm({
title: '提示!',
content: '您确定要删除该模型吗?',
......@@ -416,16 +320,13 @@ const ModelTable = (props) => {
showMessage('success', '模型删除成功');
onChange && onChange();
if ((modelId||'') ==='') {
const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
if (index !== -1) {
const newSelectedRowKeys = [...selectedRowKeys];
newSelectedRowKeys.splice(index, 1);
setSelectedRowKeys(newSelectedRowKeys);
onSelect && onSelect(newSelectedRowKeys);
}
const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
if (index !== -1) {
const newSelectedRowKeys = [...selectedRowKeys];
newSelectedRowKeys.splice(index, 1);
setSelectedRowKeys(newSelectedRowKeys);
onSelect && onSelect(newSelectedRowKeys);
}
}
})
}
......@@ -438,65 +339,56 @@ const ModelTable = (props) => {
const onSelectChange = keys => {
setSelectedRowKeys(keys);
if ((modelId||'') !== '') {
onSubSelect && onSubSelect(keys, modelId);
} else {
onSelect && onSelect([...subSelectedRowKeys, ...keys]);
}
onSelect && onSelect([...expandedSelectedRowKeys, ...keys]);
};
const onSubSelectChange = (keys, id) => {
const onExpandedTableSelectChange = (keys, id) => {
if ((keys||[]).length === 0) {
const index = subSelectedRowKeys.findIndex((rowKey) => rowKey === id);
const newSubSelectedRowKeys = [...subSelectedRowKeys];
newSubSelectedRowKeys.splice(index, 1);
setSubSelectedRowKeys(newSubSelectedRowKeys);
onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
const index = expandedSelectedRowKeys.findIndex((rowKey) => rowKey === id);
const newExpandedSelectedRowKeys = [...expandedSelectedRowKeys];
newExpandedSelectedRowKeys.splice(index, 1);
setExpandedSelectedRowKeys(newExpandedSelectedRowKeys);
onSelect && onSelect([...newExpandedSelectedRowKeys, ...selectedRowKeys]);
} else {
const newSubSelectedRowKeys = [...subSelectedRowKeys, id];
setSubSelectedRowKeys(newSubSelectedRowKeys);
onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
const newExpandedSelectedRowKeys = [...expandedSelectedRowKeys, id];
setExpandedSelectedRowKeys(newExpandedSelectedRowKeys);
onSelect && onSelect([...newExpandedSelectedRowKeys, ...selectedRowKeys]);
}
}
const onSubDataMapChange = (id, value) => {
subDataMap.set(id, value);
const onExpandedDataMapChange = (id, value) => {
const newExpandedDataMap = new Set(expandedDataMapRef.current);
newExpandedDataMap.set(id, value);
expandedDataMapRef.current = newExpandedDataMap;
}
const classes = classnames('model-table', {
'model-table-sub': modelId
});
let expandRow = undefined;
if (!modelId) {
let needExpand = false;
(data||[]).forEach(record => {
if (record?.alreadyCheckedOut) {
needExpand = true;
}
})
let needExpand = false;
(data||[]).forEach(record => {
if (record?.alreadyCheckedOut) {
needExpand = true;
}
})
if (needExpand) {
expandRow = (_pid, row) => {
if (!row?.alreadyCheckedOut) return null;
if (needExpand) {
expandRow = (_pid, row) => {
if (!row?.alreadyCheckedOut) return null;
return (
<div style={{ padding: 10 }}>
<SubModelTable
modelId={row?.checkedOutId}
modelPid={row?.id}
checked={subSelectedRowKeys.indexOf(row?.checkedOutId)!==-1}
dataMap={subDataMap}
onSubSelect={onSubSelectChange}
onDataMapChange={onSubDataMapChange}
{...props}
/>
</div>
)
}
return (
<div style={{ padding: 10 }}>
<ExpandedModelTable
id={row?.checkedOutId}
pid={row?.id}
checked={expandedSelectedRowKeys.indexOf(row?.checkedOutId)!==-1}
dataMap={expandedDataMapRef.current}
onExpandedSelect={onExpandedTableSelectChange}
onExpandedChange={onExpandedDataMapChange}
{...props}
/>
</div>
)
}
}
}
const handleItemClick = (e, data) => {
const { key, item } = data;
......@@ -586,13 +478,13 @@ const ModelTable = (props) => {
}
return (
<div className={classes}>
<div>
<DataGrid
style={{ blockSize: modelId?'95px':'calc(100vh - 94px - 37px - 57px - 24px)' }}
style={{ blockSize: 'calc(100vh - 94px - 37px - 57px - 24px)' }}
checkable
columns={columns}
rows={modelId?(subData||[]):(data||[])}
rowHeight={modelId?39: 51}
rows={data||[]}
rowHeight={51}
expandedRowHeight={100}
rowExpandable={(row) => {
return row?.alreadyCheckedOut;
......
src/view/Manage/VirtualTable/test-table.tsx
import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState, forwardRef } from 'react';
import React, { ReactElement, useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
import { createPortal } from 'react-dom';
import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SelectCellFormatter, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
import type { RowRendererProps, DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
import classNames from 'classnames';
import { Checkbox, Empty } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
......@@ -123,7 +123,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
return row.id as K;
}
const [checkAll, setCheckAll] = useState(false)
const [contextItem, setContextItem] = useState<RowData|undefined>(undefined)
// 初始化onRowsChange
......@@ -164,11 +163,8 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
}
return 0;
})
setCheckAll(false)
}
console.log('new rows', newRows);
(newRows||[]).forEach((item, index) => {
item.index = `${index+1}`;
})
......@@ -194,7 +190,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
colSpan: () => columns.length+1, expand: expandRow, expandable: rowExpandable
}),
...columns,
]
return cols
} else if (checkable) {
......@@ -206,14 +201,9 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
}
return columns
}, [columns, expandRow, checkable])
// 取得选中
const getSelected = useCallback(() => {
const selected = _rows.filter((item) => item.__selected__ === true).map(item => item.id)
console.debug('selected', selected, selected.length)
return selected
}, [_rows])
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [columns, expandRow, checkable])
// 处理滚动
const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
......
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