Skip to content

S
szse
Commit 7c10ae68 by zhaochengxiang
Options

右键

parent 3ef3fd80
Showing with 150 additions and 52 deletions
src/index.less
......@@ -369,4 +369,78 @@ svg {
.yy-notification-notice-description {
max-height: 70vh;
overflow: auto;
}
\ No newline at end of file
}
.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;
}
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.jsx
......@@ -6,6 +6,7 @@ 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 DataGrid from '../../VirtualTable/test-table';
import { dispatch } from '../../../../model';
......@@ -501,83 +502,94 @@ const ModelTable = (props) => {
}
}
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
const onMenuRender = (row) => {
if (row) {
setCurrentItem(row);
if (!currentItem?.editable && currentItem?.state?.id!=='4') {
disableEdit = true;
let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
if (currentItem?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
}
}
if (!row?.editable && row?.state?.id!=='4') {
disableEdit = true;
if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
disableEdit = true;
editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
}
if (row?.state?.id === '2') {
editTip = '待发布的模型不允许编辑';
}
}
if (!currentItem?.deletable) {
disableDelete = true;
if (!row?.permitCheckOut && row?.state?.id==='4') {
disableEdit = true;
editTip = `${row.holder||''}正在编辑中, 不允许再编辑`;
editMenuTitle = `编辑(${row.holder||''}正在编辑中)`;
}
if (currentItem?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (currentItem?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
if (!row?.deletable) {
disableDelete = true;
return (
<div className={classes}>
<DataGrid
style={{ blockSize: modelId?'95px':'calc(100vh - 94px - 37px - 57px - 24px)' }}
columns={columns}
rows={modelId?(subData||[]):(data||[])}
rowExpandable={(row) => {
return row?.alreadyCheckedOut;
}}
expandRow={expandRow}
getComparator={getComparator}
/>
<RcMenu id={MENU_ID}>
if (row?.state?.id === '2') {
deleteTip = '待发布的模型不允许删除';
} else if (row?.state?.id === '4') {
deleteTip = '已发布的模型不允许删除';
}
}
return <React.Fragment>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
<Tooltip title={editTip}>
{ editMenuTitle }
</Tooltip>
</RcItem>
</MenuItem>
}
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
<Tooltip title={deleteTip}>
删除
</Tooltip>
</RcItem>
</MenuItem>
}
<RcItem id="history" onClick={handleItemClick}>
<MenuItem id="history" onClick={handleItemClick}>
历史版本
</RcItem>
</MenuItem>
{
(getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="copy" onClick={handleItemClick}>
(getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem id="copy" onClick={handleItemClick}>
复制模型
</RcItem>
</MenuItem>
}
{
getDataModelerRole(user)!==DataModelerRoleReader && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
getDataModelerRole(user)!==DataModelerRoleReader && (row?.state?.supportedActions||[]).length>0 && row?.state?.supportedActions.map((item, index) => {
return (
<RcItem id={`action-${index}`} onClick={handleItemClick}>
<MenuItem id={`action-${index}`} onClick={handleItemClick}>
{item.cnName||''}
</RcItem>
</MenuItem>
);
})
}
{
getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <RcItem id='createTable' onClick={handleItemClick}>
getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <MenuItem id='createTable' onClick={handleItemClick}>
建表
</RcItem>
</MenuItem>
}
</React.Fragment>
}
return <React.Fragment></React.Fragment>;
}
</RcMenu>
return (
<div className={classes}>
<DataGrid
style={{ blockSize: modelId?'95px':'calc(100vh - 94px - 37px - 57px - 24px)' }}
columns={columns}
rows={modelId?(subData||[]):(data||[])}
rowExpandable={(row) => {
return row?.alreadyCheckedOut;
}}
contextMenu={{
menu: onMenuRender
}}
expandRow={expandRow}
getComparator={getComparator}
/>
{ contextHolder }
</div>
);
......
src/view/Manage/VirtualTable/test-table.tsx
......@@ -31,7 +31,7 @@ export interface RowData {
interface Props<Row> {
contextMenu?: {
id: string
menu: ReactElement
menu: (row: Row | undefined) => ReactElement
}
gridRef?: React.RefObject<DataGridHandle>
ctxRef?: React.RefObject<{
......@@ -154,6 +154,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
}
const [checkAll, setCheckAll] = useState(false)
const [contextItem, setContextItem] = useState<Row|undefined>(undefined)
// 初始化onRowsChange
const onRowsChange = useCallback((rows: RowData[], { indexes }: RowsChangeData<Row, SR>) => {
......@@ -256,7 +257,18 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
rowKeyGetter={rowKeyGetter}
components={{
sortIcon: SortIcon,
rowRenderer: contextMenu ? RowRenderer<Row, SR>(contextMenuId) : undefined
rowRenderer: (props) => {
return (
contextMenu ? <ContextMenuTrigger id={contextMenuId} collect={() => ({ rowIdx: props?.rowIdx })} disable={props.row.__type__===RowType.Detail}>
<GridRow
onContextMenu={(e: React.MouseEvent) => {
setContextItem(props.row);
}}
{...props}
/>
</ContextMenuTrigger> : <React.Fragment></React.Fragment>
)
}
}}
onRowsChange={onRowsChange}
......@@ -278,7 +290,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
{contextMenu && createPortal(
<div className='contextMenu'>
<ContextMenu id={contextMenuId} rtl={false}>
{contextMenu.menu}
{contextMenu.menu(contextItem)}
</ContextMenu>
</div>,
document.body
......
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