Skip to content

S
szse
Commit bdd897ee by zhaochengxiang
Options

Merge branch 'virtual' into 'master' 

Virtual

See merge request !9
parents 9759856d 247c09f0
Showing with 1289 additions and 573 deletions
craco.config.js
const CracoLessPlugin = require('craco-less');
const { loaderByName } = require("@craco/craco");
const { name } = require('./package');
module.exports = {
......@@ -6,6 +7,24 @@ module.exports = {
{
plugin: CracoLessPlugin,
options: {
modifyLessRule(lessRule, context) {
// You have to exclude these file suffixes first,
// if you want to modify the less module's suffix
lessRule.exclude = /\.m\.less$/;
return lessRule;
},
modifyLessModuleRule(lessModuleRule, context) {
// Configure the file suffix
lessModuleRule.test = /\.m\.less$/;
// Configure the generated local ident name.
const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
cssLoader.options.modules = {
localIdentName: "[local]_[hash:base64:5]",
};
return lessModuleRule;
},
lessLoaderOptions: {
lessOptions: {
modifyVars: {
......@@ -30,8 +49,18 @@ module.exports = {
libraryTarget: 'umd',
chunkLoadingGlobal: `webpackJsonp_${name}`,
globalObject: 'window',
}
}
},
module: {
rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
],
},
},
},
devServer: {
headers: {
......
package.json
......@@ -11,10 +11,10 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.21",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.12",
"@types/jest": "^27.5.1",
"@types/node": "16.11.12",
"@types/react": "17.0.33",
"@types/react-dom": "17.0.10",
"ahooks": "^3.1.7",
"antd": "4.18.2",
"axios": "^0.19.0",
......@@ -31,6 +31,8 @@
"local-storage": "^2.0.0",
"react": "^17.0.1",
"react-contexify": "^5.0.0",
"react-contextmenu": "2.14.0",
"react-data-grid": "7.0.0-beta.13",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^17.0.1",
......@@ -44,7 +46,7 @@
"redux-saga": "^1.0.5",
"showdown": "^1.9.1",
"smooth-scroll": "^16.1.3",
"typescript": "^4.6.2",
"typescript": "4.4.4",
"web-vitals": "^1.0.1"
},
"scripts": {
......
src/global.d.ts deleted 100644 → 0
declare const rctable: any;
declare module 'rc-table' {
export default rctable;
}
declare const nprogress: any;
declare module 'nprogress' {
export default nprogress;
}
declare module 'react-resizable' {
export const Resizable:any
}
declare module 'd3v3'
declare module '*' // for import jsx
\ No newline at end of file
src/index.less
......@@ -2,6 +2,7 @@
@import '~antd/dist/antd.less';
@import './mixins.less';
@import './variables.less';
@import './view/Manage/VirtualTable/mixins.less';
//与center-home中的样式保持统一
body {
......@@ -214,6 +215,10 @@ tr.drop-over-upward td {
color: #5B5B5B;
}
.anchor {
background-color: #e7f7ff;
}
.m-common {
margin: 20px 15px;
}
......
src/react-app-env.d.ts
/// <reference types="react-scripts" />
declare const rctable: any;
declare module 'rc-table' {
export default rctable;
}
declare const nprogress: any;
declare module 'nprogress' {
export default nprogress;
}
declare module 'react-resizable' {
export const Resizable:any
}
declare module 'd3v3'
declare module "*.module.less" {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*' // for import jsx
\ No newline at end of file
src/view/Manage/Model/Component/EditModel.jsx
......@@ -182,6 +182,7 @@ const EditModel = (props) => {
setActionData({ ...actionData, ...{ action: 'detail', modelerId: data.id||'', editable: data?.editable||false, stateId: data?.state?.id||'' } });
actionRef.current = 'detail';
LocalStorage.set('modelId', data.id||'');
LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
},
error: () => {
......@@ -199,6 +200,7 @@ const EditModel = (props) => {
setActionData({ ...actionData, ...{ action: (_action==='flow')?'flow':'detail', modelerId: data.id||'', stateId: data?.state?.id||'', permitCheckOut: data?.permitCheckOut||false, editable: data?.editable||false } });
actionRef.current = (_action==='flow')?'flow':'detail';
LocalStorage.set('modelId', data.id||'');
LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
}
},
......
src/view/Manage/Model/Component/ExpandedModelTable.jsx 0 → 100644
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 } from 'react-contextmenu';
import { dispatch } from '../../../../model';
import { showMessage, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
import { Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
// import Tag from "../../Tag";
import './ModelTable.less';
const { Text } = Typography;
const { Column } = Table;
const ModelNameColumn = (props) => {
const { text, record, detailItem } = props;
const [ data, setData ] = useState(record);
const cols = [
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
width: 60,
ellipsis: true,
},
{
title: '字段中文名称',
width: 160,
dataIndex: 'cnName',
editable: true,
ellipsis: true,
},
{
title: '字段英文名称',
width: 160,
dataIndex: 'name',
editable: true,
ellipsis: true,
},
];
let _textComponent = <span style={{ color: '#000' }}>{text}</span>;
if (data.digest) {
_textComponent = <div style={{ width: 500, maxHeight: 300, overflow: 'auto' }}>
<Table
rowKey='name'
dataSource={data.digest.attributeDigests||[]}
columns={cols}
loading={false}
pagination={false}
size='small'
rowClassName={(record, index) => {
if (record?.primaryKey) {
return 'primary-row';
}
return '';
}}
/>
</div>;
}
return (
<Tooltip
title={_textComponent}
overlayClassName='tooltip-common'
onVisibleChange={(visible) => {
if (visible && !record.digest) {
dispatch({
type: 'datamodel.getDataModelDigest',
payload: {
id: record.id
},
callback: _data => {
record.digest = _data;
setData({...record});
}
})
}
}}
>
<a onClick={()=>{detailItem(record);}}>
{text||''}
</a>
</Tooltip>
);
}
const ResizeableHeaderCell = props => {
const { onResize, width, onClick, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th
onClick={onClick}
{...restProps}
/>
</Resizable>
);
};
const ExpandedModelTable = (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 [ data, setData ] = useState([]);
const [ columns, setColumns ] = useState([]);
const [ currentItem, setCurrentItem ] = useState(null);
const [modal, contextHolder] = Modal.useModal();
const cols = [
{
title: '模型名称',
dataIndex: 'name',
width: isSzseEnv?360:160,
ellipsis: true,
render: (text, record, index) => {
return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
}
},
{
title: '中文名称',
dataIndex: 'cnName',
width: isSzseEnv?420:160,
ellipsis: true,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
)
}
},
{
title: '状态',
dataIndex: 'state',
width: 100,
ellipsis: true,
render: (_, record) => {
let color = '';
if (record?.state?.id === '1') {
color = '#DE7777';
} else if (record?.state?.id === '2') {
color = '#779BDE';
} else if (record?.state?.id === '4') {
color = '#77DEBF';
}
return (
<span>
<span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color }}></span>
<span>{record?.state?.cnName||''}</span>
</span>
);
}
},
{
title: '创建人',
dataIndex: 'editor',
width: 100,
ellipsis: true,
},
{
title: '版本号',
dataIndex: 'modifiedTs',
width: 170,
ellipsis: true,
render: (_,record) => {
return `V_${formatDate(record.modifiedTs)}`;
}
},
// {
// title: '标签',
// dataIndex: 'tag',
// width: 200,
// onCell: (record) => ({
// onMouseEnter: event => {
// setMouseEnterKey(record.id);
// },
// onMouseLeave: event => {
// setMouseEnterKey(null);
// },
// }),
// render: (_,record) => {
// return (
// record.id===mouseEnterKey?<Tag styleType='complex' id={record.id} />:<Tag id={record.id} />
// );
// }
// },
{
title: '模型描述',
dataIndex: 'remark',
ellipsis: true,
render: (text, _, __) => {
return (
<Tooltip title={text||''} overlayClassName='tooltip-common'>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
);
}
},
];
const pathColumn = {
title: '路径',
dataIndex: 'path',
width: 120,
ellipsis: true,
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
)
}
};
useEffect(() => {
setSelectedRowKeys(checked?[id]:[]);
if (dataMap.has(id)) {
setData([dataMap.get(id)]);
} else {
getCheckoutDataModel();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
if (tableWidth>0 && columns.length===0) {
let newColumns = [...cols];
if (view==='state' || (keyword||'')!=='') {
newColumns.splice(3, 0, pathColumn);
}
newColumns.forEach((column, index) => {
if (!column.width) {
const rowWidth = (newColumns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
if (tableWidth - rowWidth > 200) {
column.width = tableWidth-rowWidth;
} else {
newColumns.width = 200;
}
}
});
setColumns([ ...newColumns, <Column key='auto' />]);
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ tableWidth ])
const getCheckoutDataModel = () => {
dispatch({
type: 'datamodel.getCheckoutDataModel',
payload: {
id: pid
},
callback: data => {
setData(data?[data]:[]);
onExpandedChange && onExpandedChange(id, data);
}
})
}
const editItem = (record) => {
onItemAction && onItemAction(record, 'edit');
}
const detailItem = (record) => {
onItemAction && onItemAction(record, 'detail', getDataModelerRole(user)===DataModelerRoleReader);
}
const deployAction = (record) => {
onAutoCreateTable && onAutoCreateTable(record);
}
const stateAction = (record, action) => {
modal.confirm({
title: '提示!',
content: `您确定要${action.cnName||''}该模型吗?`,
onOk: () => {
dispatch({
type: 'datamodel.nextState',
payload: {
easyDataModelerDataModelId: record.id,
actionId: action.id
},
callback: () => {
showMessage('success', `模型${action.cnName||''}成功`);
if (action.id === '2') {
onChange && onChange();
} else {
getCheckoutDataModel();
}
}
})
}
});
}
const deleteItem = (record) => {
modal.confirm({
title: '提示!',
content: '您确定要删除该模型吗?',
onOk: () => {
dispatch({
type: 'datamodel.deleteDataModel',
payload: {
params: {
id: record.id
}
},
callback: () => {
showMessage('success', '模型删除成功');
onChange && onChange();
}
})
}
});
}
const historyItem = (record) => {
onHistory && onHistory(record.id);
}
const onExpandedSelectChange = keys => {
setSelectedRowKeys(keys);
onExpandedSelect && onExpandedSelect(keys, data[0].id);
};
const handleResize = index => (e, { size }) => {
let nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width,
};
setColumns(nextColumns);
};
const rowSelection = {
selectedRowKeys,
onChange: onExpandedSelectChange,
hideSelectAll: true,
};
const classes = classnames('model-table', {
'model-table-sub': id
});
const handleItemClick = (e, data) => {
const { key } = data;
if (key === 'edit') {
editItem(currentItem);
} else if (key === 'delete') {
deleteItem(currentItem);
} else if (key === 'history') {
historyItem(currentItem);
} else if (key === 'copy') {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${currentItem.id}`);
} else if (key === 'createTable') {
deployAction(currentItem);
} else if (key.indexOf('action') !== -1) {
const index = (key.split('-'))[1];
const action = currentItem?.state?.supportedActions[index];
stateAction(currentItem, action);
}
}
const mergedColumns = () => {
let newColumns = [...columns];
return (
newColumns.map((col, index) => ({
...col,
onHeaderCell: column => ({
width: column.width,
onResize: handleResize(index),
}),
}))
);
}
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
if (!currentItem?.editable && currentItem?.state?.id!=='4') {
disableEdit = true;
if (currentItem?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
}
}
if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
disableEdit = true;
editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
}
if (!currentItem?.deletable) {
disableDelete = true;
if (currentItem?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (currentItem?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
const contextMenuId = nanoid()
return (
<div className={classes}>
<ResizeObserver
onResize={({ width }) => {
setTableWidth(width);
}}
>
<Table
rowSelection={rowSelection}
components={{
header: {
cell: ResizeableHeaderCell,
},
body: {
row: (props) => {
return (
<ContextMenuTrigger id={contextMenuId} >
<tr {...props} />
</ContextMenuTrigger>
)
},
},
}}
columns={mergedColumns()}
rowKey={'id'}
dataSource={data||[]}
pagination={false}
size='small'
onRow={(record, index) => {
return {
onContextMenu: event => {
setCurrentItem(record);
},
}
}}
/>
</ResizeObserver>
{createPortal(
<ContextMenu id={contextMenuId} rtl={false}>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'edit' }} disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</MenuItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'delete' }} disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</MenuItem>
}
<MenuItem data={{ key: 'history' }} onClick={handleItemClick}>
历史版本
</MenuItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'copy' }} onClick={handleItemClick}>
复制模型
</MenuItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
return (
<MenuItem data={{ key: `action-${index}` }} onClick={handleItemClick}>
{item.cnName||''}
</MenuItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <MenuItem id='createTable' onClick={handleItemClick}>
建表
</MenuItem>
}
</ContextMenu>
,
document.body
)}
{ contextHolder }
</div>
);
}
export default ExpandedModelTable;
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.jsx
import React, { useState, useEffect, useRef } from "react";
import { Tooltip, Modal, Pagination, Table, Typography } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import React, { useState, useEffect, useRef, useMemo } from "react";
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 } from 'react-contextmenu';
import LocalStorage from 'local-storage';
import DataGrid from '../../VirtualTable';
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 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;
......@@ -52,6 +49,7 @@ const ModelNameColumn = (props) => {
if (data.digest) {
_textComponent = <div style={{ width: 500, maxHeight: 300, overflow: 'auto' }}>
<Table
rowKey='name'
dataSource={data.digest.attributeDigests||[]}
columns={cols}
loading={false}
......@@ -94,245 +92,150 @@ const ModelNameColumn = (props) => {
);
}
const ResizeableHeaderCell = props => {
const { onResize, width, onClick, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th
onClick={onClick}
{...restProps}
/>
</Resizable>
);
};
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 } = props;
const expandedDataMapRef = useRef(new Map());
const shouldScrollRef = useRef(false);
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 [ mouseEnterKey, setMouseEnterKey ] = useState(null);
const [ sortRule, setSortRule ] = useState(null);
const [ filterData, setFilterData ] = useState([]);
const [ subData, setSubData ] = useState([]);
const [modal, contextHolder] = Modal.useModal();
const cols = [
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
name: '序号',
key: 'index',
width: 60,
ellipsis: true,
sortable: false,
},
{
title: '模型名称',
dataIndex: 'name',
name: '模型名称',
key: 'name',
width: isSzseEnv?360:160,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, record, index) => {
return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
sortable: true,
resizable: true,
formatter(props) {
return (<ModelNameColumn text={props.row.name} record={props.row} detailItem={detailItem} />);
}
},
{
title: '中文名称',
dataIndex: 'cnName',
name: '中文名称',
key: 'cnName',
width: isSzseEnv?420:160,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
sortable: true,
resizable: true,
formatter(props) {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
<Tooltip title={props.row.cnName||''}>
<Text ellipsis={true}>{props.row.cnName||''}</Text>
</Tooltip>
)
}
},
{
title: '状态',
dataIndex: 'state',
name: '状态',
key: 'state',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_, record) => {
sortable: true,
resizable: true,
formatter(props) {
let color = '';
if (record?.state?.id === '1') {
if (props.row.state?.id === '1') {
color = '#DE7777';
} else if (record?.state?.id === '2') {
} else if (props.row.state?.id === '2') {
color = '#779BDE';
} else if (record?.state?.id === '4') {
} else if (props.row.state?.id === '4') {
color = '#77DEBF';
}
return (
<span>
<span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color }}></span>
<span>{record?.state?.cnName||''}</span>
<span>{props.row.state?.cnName||''}</span>
</span>
);
}
},
{
title: '创建人',
dataIndex: 'editor',
name: '创建人',
key: 'editor',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
sortable: true,
resizable: true,
},
{
title: '版本号',
dataIndex: 'modifiedTs',
name: '版本号',
key: 'modifiedTs',
width: 170,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_,record) => {
return `V_${formatDate(record.modifiedTs)}`;
sortable: true,
resizable: true,
formatter(props) {
return `V_${formatDate(props.row.modifiedTs)}`;
}
},
// {
// title: '标签',
// dataIndex: 'tag',
// width: 200,
// onCell: (record) => ({
// onMouseEnter: event => {
// setMouseEnterKey(record.id);
// },
// onMouseLeave: event => {
// setMouseEnterKey(null);
// },
// }),
// render: (_,record) => {
// return (
// record.id===mouseEnterKey?<Tag styleType='complex' id={record.id} />:<Tag id={record.id} />
// );
// }
// },
{
title: '模型描述',
dataIndex: 'remark',
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
name: '模型描述',
key: 'remark',
sortable: true,
resizable: true,
formatter(props) {
return (
<Tooltip title={text||''} overlayClassName='tooltip-common'>
<Text ellipsis={true}>{text||''}</Text>
<Tooltip title={props.row.remark||''} overlayClassName='tooltip-common'>
<Text ellipsis={true}>{props.row.remark||''}</Text>
</Tooltip>
);
)
}
},
];
const pathColumn = {
title: '路径',
dataIndex: 'path',
name: '路径',
key: 'path',
width: 120,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
sortable: true,
resizable: true,
formatter(props) {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
<Tooltip title={props.row.path||''}>
<Text ellipsis={true}>{props.row.path||''}</Text>
</Tooltip>
)
}
};
const [ columns, setColumns ] = useState([]);
const [ includePathColumns, setIncludePathColumns ] = useState([]);
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const [ currentItem, setCurrentItem ] = useState(null);
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(() => {
if ((modelId||'') !== '') {
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 {
getCheckoutDataModel();
}
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])
......@@ -342,7 +245,7 @@ const ModelTable = (props) => {
const _id = getQueryParam(AnchorId, props.location.search);
var scroll = new SmoothScroll();
var anchor = document.querySelector(`#data-model-${_id}`);
var anchor = document.querySelector(`#row-${_id}`);
if (anchor) {
scroll.animateScroll(anchor);
......@@ -351,125 +254,12 @@ const ModelTable = (props) => {
}
})
useEffect(() => {
const newData = [...data];
if (sortRule) {
if (sortRule.order === 'ascend') {
newData.sort((item1, item2) => {
if (sortRule.field === 'state') {
return (item1[sortRule.field]?.cnName||'').localeCompare(item2[sortRule.field]?.cnName||'');
} else if (sortRule.field === 'modifiedTs') {
return formatDate(item1[sortRule.field]).localeCompare(formatDate(item2[sortRule.field]));
}
return item1[sortRule.field].localeCompare(item2[sortRule.field]);
})
} else if (sortRule.order === 'descend') {
newData.sort((item1, item2) => {
if (sortRule.field === 'state') {
return (item2[sortRule.field]?.cnName||'').localeCompare(item1[sortRule.field]?.cnName||'');
} else if (sortRule.field === 'modifiedTs') {
return formatDate(item2[sortRule.field]).localeCompare(formatDate(item1[sortRule.field]));
}
return item2[sortRule.field].localeCompare(item1[sortRule.field]);
})
}
}
const _data = paginate(newData||[], pageNum, pageSize);
setFilterData(_data);
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, pagination, sortRule])
useEffect(() => {
if (tableWidth>0 && columns.length===0) {
let newColumns = [], newIncludePathColumns = [];
let excludePathCols = [...cols];
if ((modelId||'') !== '') {
excludePathCols = cols.filter(item => item.dataIndex!=='key');
}
excludePathCols.forEach((column, index) => {
const newColumn = {...column};
if (!newColumn.width) {
const rowWidth = (excludePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97; //展开50 勾选32 滚动条15
if (tableWidth - rowWidth > 200) {
newColumn.width = tableWidth - rowWidth;
} else {
newColumn.width = 200;
}
}
newColumns.push(newColumn);
});
const includePathCols = [...cols];
includePathCols.splice(3, 0, pathColumn);
includePathCols.forEach((column, index) => {
const newColumn = {...column};
if (!newColumn.width) {
const rowWidth = (includePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
if (tableWidth - rowWidth > 200) {
newColumn.width = tableWidth-rowWidth;
} else {
newColumn.width = 200;
}
}
newIncludePathColumns.push(newColumn);
});
setColumns([ ...newColumns, <Column key='auto' />]);
setIncludePathColumns([ ...newIncludePathColumns, <Column key='auto' />]);
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ tableWidth ])
const modelEventChange = (e) => {
if (e.key === 'modelChange') {
getCheckoutDataModel();
expandedDataMapRef.current.delete(LocalStorage.get('modelId'));
}
}
const getCheckoutDataModel = () => {
dispatch({
type: 'datamodel.getCheckoutDataModel',
payload: {
id: modelPid
},
callback: data => {
setSubData(data?[data]:[]);
},
error: () => {
}
})
}
// const getDataModel = () => {
// dispatch({
// type: 'datamodel.getDataModel',
// payload: {
// id: modelId
// },
// callback: data => {
// setSubData(data?[data]:[]);
// },
// error: () => {
// }
// })
// }
const editItem = (record) => {
onItemAction && onItemAction(record, 'edit');
}
......@@ -496,24 +286,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);
}
}
})
}
......@@ -521,7 +302,6 @@ const ModelTable = (props) => {
}
const deleteItem = (record) => {
modal.confirm({
title: '提示!',
content: '您确定要删除该模型吗?',
......@@ -537,16 +317,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);
}
}
})
}
......@@ -559,263 +336,191 @@ const ModelTable = (props) => {
const onSelectChange = keys => {
setSelectedRowKeys(keys);
if ((modelId||'') !== '') {
onSubSelect && onSubSelect(keys, subData[0].id);
} 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];
onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
const newExpandedSelectedRowKeys = [...expandedSelectedRowKeys, id];
setExpandedSelectedRowKeys(newExpandedSelectedRowKeys);
onSelect && onSelect([...newExpandedSelectedRowKeys, ...selectedRowKeys]);
}
}
const handleResize = index => (e, { size }) => {
let nextColumns = [...columns];
if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
nextColumns = [...includePathColumns];
}
nextColumns[index] = {
...nextColumns[index],
width: size.width,
};
if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
setIncludePathColumns(nextColumns);
} else {
setColumns(nextColumns);
}
};
const onTableChange = (pagination, filters, sorter, extra) => {
if (sorter) {
setSortRule(sorter);
}
const onExpandedDataMapChange = (id, value) => {
expandedDataMapRef.current.set(id, value);
}
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
hideSelectAll: (modelId||'') !=='',
};
const classes = classnames('model-table', {
'model-table-sub': modelId
});
let expandable = undefined;
if (!modelId) {
let needExpand = false;
(filterData||[]).forEach(record => {
if (record?.alreadyCheckedOut) {
needExpand = true;
}
})
if (needExpand) {
expandable = {
expandedRowRender: record => <ModelTable
modelId={record?.checkedOutId}
modelPid={record?.id}
onSubSelect={onSubSelectChange}
{...props}
/>,
expandIcon: ({ expanded, onExpand, record }) => {
if (!record?.alreadyCheckedOut) return null;
return expanded ? <UpOutlined style={{ fontSize: 10 }} onClick={e => onExpand(record, e)} /> : <DownOutlined style={{ fontSize: 10 }} onClick={e => onExpand(record, e)} />
},
rowExpandable: record => {
return record?.alreadyCheckedOut;
}
};
let needExpand = false;
(data||[]).forEach(record => {
if (record?.alreadyCheckedOut) {
needExpand = true;
}
} else {
})
if (needExpand) {
expandable = {
expandedRowRender: record => <></>,
expandIcon: ({ expanded, onExpand, record }) => {
return null;
expandedRowHeight: 100,
rowExpandable: (row) => {
return row?.alreadyCheckedOut;
},
rowExpandable: record => {
return false;
expandRowRender: (row) => {
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 displayMenu = (e) => {
show(e);
}
const handleItemClick = ({ event, props, data, triggerEvent }) => {
const key = event.currentTarget.id;
const handleItemClick = (e, data) => {
const { key, item } = data;
if (key === 'edit') {
editItem(currentItem);
editItem(item);
} else if (key === 'delete') {
deleteItem(currentItem);
deleteItem(item);
} else if (key === 'history') {
historyItem(currentItem);
historyItem(item);
} else if (key === 'copy') {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${currentItem.id}`);
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${item.id}`);
} else if (key === 'createTable') {
deployAction(currentItem);
deployAction(item);
} else if (key.indexOf('action') !== -1) {
const index = (key.split('-'))[1];
const action = currentItem?.state?.supportedActions[index];
stateAction(currentItem, action);
}
}
const mergedColumns = () => {
let newColumns = [...columns];
if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
newColumns = [...includePathColumns];
const action = item?.state?.supportedActions[index];
stateAction(item, action);
}
}
return (
newColumns.map((col, index) => ({
...col,
onHeaderCell: column => ({
width: column.width,
onResize: handleResize(index),
}),
}))
);
}
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
const onMenuRender = (row) => {
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
if (!currentItem?.editable && currentItem?.state?.id!=='4') {
disableEdit = true;
if (!row?.editable && row?.state?.id!=='4') {
disableEdit = true;
if (currentItem?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
if (row?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
}
}
}
if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
disableEdit = true;
editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
}
if (!row?.permitCheckOut && row?.state?.id==='4') {
disableEdit = true;
editTip = `${row.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${row.holder||''}正在编辑中)`;
}
if (!currentItem?.deletable) {
disableDelete = true;
if (!row?.deletable) {
disableDelete = true;
if (currentItem?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (currentItem?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
if (row?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (row?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
return <React.Fragment>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem key='edit' data={{ key: 'edit', item: row }} disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</MenuItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'delete', item: row }} disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</MenuItem>
}
<MenuItem data={{ key: 'history', item: row }} onClick={handleItemClick}>
历史版本
</MenuItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem data={{ key: 'copy', item: row }} onClick={handleItemClick}>
复制模型
</MenuItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (row?.state?.supportedActions||[]).length>0 && row?.state?.supportedActions.map((item, index) => {
return (
<MenuItem key={index} data={{ key: `action-${index}`, item: row }} onClick={handleItemClick}>
{item.cnName||''}
</MenuItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&row?.deployable && <MenuItem data={{ key: "createTable", item: row }} onClick={handleItemClick}>
建表
</MenuItem>
}
</React.Fragment>
}
return (
<div className={classes}>
<ResizeObserver
onResize={({ width }) => {
setTableWidth(width);
<div>
<DataGrid
style={{ blockSize: 'calc(100vh - 94px - 37px - 57px - 24px)' }}
checkable
columns={columns}
rows={data||[]}
rowHeight={51}
rowClassName={(row) => {
return (row.id === anchorId)?'anchor':''
}}
>
<Table
rowSelection={rowSelection}
components={{
header: {
cell: ResizeableHeaderCell,
}
}}
columns={mergedColumns()}
rowKey={'id'}
dataSource={modelId?(subData||[]):(filterData||[])}
pagination={false}
size={modelId?'small':'default'}
onRow={(record, index) => {
return {
id: `data-model-${record?.id}`,
style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
onContextMenu: event => {
setCurrentItem(record);
displayMenu(event);
},
}
}}
scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
onChange={onTableChange}
expandable={expandable}
/>
</ResizeObserver>
{
!modelId && (data||[]).length>0 && <Pagination
className="text-center mt-3"
showSizeChanger
showQuickJumper
onChange={(_pageNum, _pageSize) => {
setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
}}
onShowSizeChange={(_pageNum, _pageSize) => {
setPagination({ pageNum: 1, pageSize: _pageSize });
}}
current={pageNum}
pageSize={pageSize}
defaultCurrent={1}
total={(data||[]).length}
pageSizeOptions={[10,20,50]}
showTotal={total => `共 ${total} 条`}
/>
}
<RcMenu id={MENU_ID}>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</RcItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</RcItem>
}
<RcItem id="history" onClick={handleItemClick}>
历史版本
</RcItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="copy" onClick={handleItemClick}>
复制模型
</RcItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
return (
<RcItem id={`action-${index}`} onClick={handleItemClick}>
{item.cnName||''}
</RcItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <RcItem id='createTable' onClick={handleItemClick}>
建表
</RcItem>
}
</RcMenu>
expandable={expandable}
contextMenu={{
menu: onMenuRender
}}
selectedRows={selectedRowKeys}
onSelectedRowsChange={onSelectChange}
getComparator={getComparator}
/>
{ contextHolder }
</div>
);
}
export default ModelTable;
\ No newline at end of file
export default ModelTable;
function getComparator(sortColumn) {
switch (sortColumn) {
case 'name':
case 'cnName':
case 'editor':
case 'remark':
case 'path':
return (a, b) => {
return a[sortColumn].localeCompare(b[sortColumn]);
};
case 'state':
return (a, b) => {
return a[sortColumn].id.localeCompare(b[sortColumn].id);
};
case 'modifiedTs':
return (a, b) => {
return a[sortColumn] - b[sortColumn];
};
default:
throw new Error(`unsupported sortColumn: "${sortColumn}"`);
}
}
src/view/Manage/Model/Component/ModelTable.less
......@@ -20,7 +20,7 @@
display: none;
}
.yy-table-tbody > tr:not(.yy-table-measure-row)> td {
.yy-table-tbody tr:not(.yy-table-measure-row) td {
padding: 8px 8px !important;
}
}
......
src/view/Manage/VirtualTable/index.tsx 0 → 100644
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, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
import { Checkbox, Empty } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { nanoid } from 'nanoid';
import { downNode, upNode } from './virtual-table-helper';
export enum RowAction {
None, Expand, Select
}
export enum RowType {
None, Detail
}
export interface RowData {
id: string,
index?: string;
__pid__?: string
__row__?: any
__type__?: RowType
__expanded__?: boolean
__selected__?: boolean
__action__?: RowAction
}
interface Props<Row> {
gridRef?: React.RefObject<DataGridHandle>
contextMenu?: {
id: string
menu: (row: RowData | undefined) => ReactElement
}
checkable: Boolean
expandable?: {
expandedRowHeight?: number
rowExpandable?: (row: Row) => Boolean
expandRowRender?: (row: Row) => React.ReactElement
}
getComparator?: (sortColumn: string) => (a: Row, b: Row) => number
loadMoreRows?: (length: number) => Promise<Row[]> | undefined
selectedRows?: Array<any>
onSelectedRowsChange?: (selectedRows: Array<any>) => void
rowHeight?: number
rowClassName?: (row: RowData) => string
}
const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
function CheckboxFormatter({ onChange, ...props }: CheckboxFormatterProps, ref) {
function handleChange(e: CheckboxChangeEvent) {
onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);
}
return <Checkbox ref={ref} {...props} onChange={handleChange} />;
}
);
export function getExpandingCol<Row extends RowData, SR>({ colSpan, expandRender, expandable }: {
colSpan: () => number
expandRender?: (row: Row) => React.ReactElement
expandable?: (row: Row) => Boolean
}) {
const col: Column<Row, SR> = {
key: 'expanded',
name: '',
minWidth: 30,
width: 30,
colSpan(args) {
return args.type === 'ROW' && args.row.__type__ === RowType.Detail ? colSpan() : undefined;
},
cellClass(row) {
return row.__type__ === RowType.Detail ? 'detail' : undefined;
},
formatter({ row, isCellSelected, onRowChange }) {
if (row.__type__ === RowType.Detail) {
if (expandRender) {
return expandRender(row.__row__)
}
return (
<div>{row.__pid__}</div>
);
}
if (!expandable || !expandable(row)) return null;
// 展开收起
return (
<div style={{ cursor: 'pointer', color: isCellSelected ? '#777' : '#ccc' }}
onClick={() => {
onRowChange({
...row,
__expanded__: !row.__expanded__,
__action__: RowAction.Expand
});
}}
>
{row.__expanded__ ? <UpOutlined /> : <DownOutlined />}
</div>
);
}
}
return col
}
function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: DataGridProps<Row, SR, K> & Props<Row>) {
const {
gridRef,
expandable,
getComparator,
loadMoreRows,
onSelectedRowsChange,
contextMenu, columns, rows, checkable, selectedRows, rowHeight = 45, rowClassName, ...rest } = props
const rowKeyGetter = (row: Row): K => {
return row.id as K;
}
const [contextItem, setContextItem] = useState<RowData|undefined>(undefined)
// 初始化onRowsChange
const onRowsChange = useCallback((rows: RowData[], { indexes }: RowsChangeData<Row, SR>) => {
const row = rows[indexes[0]];
if (row.__action__ === RowAction.Expand) {
if (!row.__expanded__) {
rows.splice(indexes[0] + 1, 1); // 删除下一行
} else {
rows.splice(indexes[0] + 1, 0, { // 插入下一行
id: `${row.id}-detail`, __type__: RowType.Detail, __pid__: row.id, __row__: row,
});
}
} else if (row.__action__ === RowAction.Select) {
// nothing to do, just update
}
_setRows(rows as Row[]);
}, [])
// 已排序行
const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]); // 排序列图标状态
const [_rows, _setRows] = useState<readonly Row[]>([])
useEffect(() => {
const newRows = [...rows];
if (sortColumns.length > 0) {
newRows
// .filter(item => item.__type__ !== RowType.Detail)
.sort((a, b) => {
for (const sort of sortColumns) {
const comparator = getComparator ? getComparator(sort.columnKey) : GetComparator(sort.columnKey);
const compResult = comparator(a, b);
if (compResult !== 0) {
return sort.direction === 'ASC' ? compResult : -compResult;
}
}
return 0;
})
}
(newRows||[]).forEach((item, index) => {
item.index = `${index+1}`;
})
_setRows(newRows);
}, [rows, sortColumns, getComparator]);
// 组装功能s列
const cols = useMemo(() => {
if (expandable && checkable) {
const cols: readonly Column<Row, SR>[] = [
getExpandingCol<Row, SR>({
colSpan: () => columns.length+2, expandRender: expandable.expandRowRender, expandable: expandable.rowExpandable
}),
{ ...SelectColumn, key: 'select', frozen: false },
...columns,
]
return cols
} else if (expandable) {
const cols: readonly Column<Row, SR>[] = [
getExpandingCol<Row, SR>({
colSpan: () => columns.length+1, expandRender: expandable.expandRowRender, expandable: expandable.rowExpandable
}),
...columns,
]
return cols
} else if (checkable) {
const cols: readonly Column<Row, SR>[] = [
{ ...SelectColumn, key: 'select', frozen: false },
...columns,
]
return cols
}
return columns
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [columns, expandable, checkable])
// 处理滚动
const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
if (!isAtBottom(event)) return;
loadMoreRows?.(rows.length)
}, [loadMoreRows, rows])
const contextMenuId = contextMenu?.id ?? nanoid()
return (
<React.Fragment>
<DataGrid
ref={gridRef}
{...rest}
columns={cols}
rows={_rows}
rowKeyGetter={rowKeyGetter}
components={{
sortIcon: SortIcon,
checkboxFormatter: CheckboxFormatter,
rowRenderer: (props) => {
return (
contextMenu ? <ContextMenuTrigger
id={contextMenuId}
collect={() => ({ rowIdx: props?.rowIdx })}
disable={props.row.__type__===RowType.Detail}
>
<GridRow
className={rowClassName(props.row)}
id={`row-${props.row.id}`}
onContextMenu={(e: React.MouseEvent) => {
setContextItem(props.row);
}}
{...props}
/>
</ContextMenuTrigger> : <React.Fragment></React.Fragment>
)
},
noRowsFallback: <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>,
}}
onRowsChange={onRowsChange}
// headerRowHeight={45}
rowHeight={(args) => (args.type === 'ROW' && args.row.__type__ === RowType.Detail ? (expandable.expandedRowHeight||100) : rowHeight)}
// defaultColumnOptions={{
// sortable: true,
// resizable: true
// }}
// 排序
sortColumns={sortColumns}
onSortColumnsChange={setSortColumns}
selectedRows={new Set(selectedRows||[])}
onSelectedRowsChange={(values: Set<any>) => {
onSelectedRowsChange && onSelectedRowsChange(Array.from(values));
}}
// 滚动
onScroll={loadMoreRows ? handleScroll : undefined}
/>
{contextMenu && createPortal(
<ContextMenu id={contextMenuId} rtl={false}>
{contextMenu.menu(contextItem)}
</ContextMenu>
,
document.body
)}
</React.Fragment>
);
}
export default FC
function GetComparator(sortColumn: string): (a: any, b: any) => number {
return (a, b) => {
const aVal = a[sortColumn], bVal = b[sortColumn]
if (aVal !== undefined && bVal !== undefined)
return aVal.localeCompare(bVal);
return 0
};
}
function isAtBottom({ currentTarget }: React.UIEvent<HTMLDivElement>): boolean {
return currentTarget.scrollTop + 10 >= currentTarget.scrollHeight - currentTarget.clientHeight;
}
function SortIcon({ sortDirection }: SortIconProps) {
const asc = sortDirection === 'ASC'
const desc = sortDirection === 'DESC'
return <div className="yy-table-column-sorter yy-table-column-sorter-full">
<span className="yy-table-column-sorter-inner">
{upNode(asc)}
{downNode(desc)}
</span>
</div>
}
\ No newline at end of file
src/view/Manage/VirtualTable/mixins.less 0 → 100644
.rdg {
border: none !important;
}
.rdg-header-row {
.rdg-cell {
box-shadow: none !important;
background-color: #f2f5fc!important;
border-block-end: none !important;
border-inline-end: none !important;
font-weight: normal !important;
outline: none !important;
&:before {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 1.6em;
background-color: rgba(0,0,0,.06);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: background-color .3s;
content: "";
}
}
}
.rdg-row {
&:hover {
background-color: #fafafa;
}
.rdg-cell {
box-shadow: none !important;
color: #363636 !important;
border-block-end: 1px solid #f0f0f0 !important;
border-inline-end: none !important;
outline: none !important;
}
}
.react-contextmenu-wrapper {
display: contents;
}
.react-contextmenu {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #373a3c;
font-size: 16px;
margin-block-start: 2px;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
min-inline-size: 160px;
outline: none;
opacity: 0;
padding-block: 5px;
padding-inline: 0;
pointer-events: none;
text-align: start;
transition: opacity 250ms ease !important;
}
.react-contextmenu.react-contextmenu--visible {
opacity: 1;
pointer-events: auto;
}
.react-contextmenu-item {
background: 0 0;
border: 0;
color: #373a3c;
cursor: pointer;
font-weight: 400;
line-height: 1.5;
padding-block: 3px;
padding-inline: 20px;
text-align: inherit;
white-space: nowrap;
}
.react-contextmenu-item.react-contextmenu-item--active,
.react-contextmenu-item.react-contextmenu-item--selected {
color: #fff;
background-color: #20a0ff;
border-color: #20a0ff;
text-decoration: none;
}
.react-contextmenu-item.react-contextmenu-item--disabled,
.react-contextmenu-item.react-contextmenu-item--disabled:hover {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.15);
color: #878a8c;
}
.react-contextmenu-item--divider {
border-block-end: 1px solid rgba(0, 0, 0, 0.15);
cursor: inherit;
margin-block-end: 3px;
padding-block: 2px;
padding-inline: 0;
}
.react-contextmenu-item--divider:hover {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.15);
}
.react-contextmenu-item.react-contextmenu-submenu {
padding: 0;
}
.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
content: '▶';
display: inline-block;
position: absolute;
inset-inline-end: 7px;
}
src/view/Manage/VirtualTable/virtual-table-helper.tsx 0 → 100644
import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
import classNames from 'classnames'
const prefixCls = 'yy'
export const upNode = (active:boolean) => (
<CaretUpOutlined
className={classNames(`${prefixCls}-table-column-sorter-up anticon-caret-up anticon`, {
active,
})}
/>
);
export const downNode = (active:boolean) => (
<CaretDownOutlined
className={classNames(`${prefixCls}-table-column-sorter-down anticon-caret-down anticon`, {
active,
})}
/>
);
tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "esnext",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
......
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