mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:18:29 +08:00
fix: Table组件开启checkOnItemClick后无法限制选择上限问题 (#5632)
This commit is contained in:
parent
96d81855ce
commit
82ae87bacc
@ -202,6 +202,40 @@ export const Row = types
|
|||||||
return table && table.itemDraggableOn
|
return table && table.itemDraggableOn
|
||||||
? evalExpression(table.itemDraggableOn, (self as IRow).locals)
|
? evalExpression(table.itemDraggableOn, (self as IRow).locals)
|
||||||
: true;
|
: true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断当前行点击后是否应该继续触发check
|
||||||
|
* 用于限制checkOnItemClick触发的check事件
|
||||||
|
*/
|
||||||
|
get isCheckAvaiableOnClick(): boolean {
|
||||||
|
const table = getParent(self, self.depth * 2) as ITableStore;
|
||||||
|
const keepItemSelectionOnPageChange =
|
||||||
|
table?.keepItemSelectionOnPageChange;
|
||||||
|
const selectionUpperLimit = table?.maxKeepItemSelectionLength;
|
||||||
|
|
||||||
|
// 如果未做配置,或者配置不合法直接通过检查
|
||||||
|
if (
|
||||||
|
!keepItemSelectionOnPageChange ||
|
||||||
|
!Number.isInteger(selectionUpperLimit)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用内置ID,不会重复
|
||||||
|
const selectedIds = (table?.selectedRows ?? []).map(
|
||||||
|
(item: IRow) => item.id
|
||||||
|
);
|
||||||
|
// 此时syncSelected还没有触发,所以需要比较点击之后的数量
|
||||||
|
const selectedCount = selectedIds.includes(self.id)
|
||||||
|
? selectedIds.length - 1
|
||||||
|
: selectedIds.length + 1;
|
||||||
|
|
||||||
|
if (selectedCount > selectionUpperLimit) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
.actions(self => ({
|
.actions(self => ({
|
||||||
@ -688,7 +722,8 @@ export const TableStore = iRendererStore
|
|||||||
return getHovedRow();
|
return getHovedRow();
|
||||||
},
|
},
|
||||||
|
|
||||||
get disabledHeadCheckbox() {
|
/** 已选择item是否达到数量上限 */
|
||||||
|
get isSelectionThresholdReached() {
|
||||||
const selectedLength = self.data?.selectedItems?.length;
|
const selectedLength = self.data?.selectedItems?.length;
|
||||||
const maxLength = self.maxKeepItemSelectionLength;
|
const maxLength = self.maxKeepItemSelectionLength;
|
||||||
|
|
||||||
@ -696,7 +731,7 @@ export const TableStore = iRendererStore
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return maxLength === selectedLength;
|
return maxLength <= selectedLength;
|
||||||
},
|
},
|
||||||
|
|
||||||
get firstToggledColumnIndex() {
|
get firstToggledColumnIndex() {
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import {observer} from 'mobx-react';
|
import {observer} from 'mobx-react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import uniq from 'lodash/uniq';
|
||||||
import type {IColumn, IRow} from 'amis-core/lib/store/table';
|
import type {IColumn, IRow} from 'amis-core/lib/store/table';
|
||||||
import {RendererProps} from 'amis-core';
|
import {RendererProps} from 'amis-core';
|
||||||
import {Action} from '../Action';
|
import {Action} from '../Action';
|
||||||
import {isClickOnInput, createObject} from 'amis-core';
|
import {isClickOnInput, createObject} from 'amis-core';
|
||||||
|
|
||||||
interface TableRowProps extends Pick<RendererProps, 'render'> {
|
interface TableRowProps extends Pick<RendererProps, 'render'> {
|
||||||
onCheck: (item: IRow) => void;
|
onCheck: (item: IRow) => Promise<void>;
|
||||||
classPrefix: string;
|
classPrefix: string;
|
||||||
renderCell: (
|
renderCell: (
|
||||||
region: string,
|
region: string,
|
||||||
@ -42,7 +43,8 @@ export class TableRow extends React.Component<TableRowProps> {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {itemAction, onAction, item, data, dispatchEvent} = this.props;
|
const {itemAction, onAction, item, data, dispatchEvent, onCheck} =
|
||||||
|
this.props;
|
||||||
|
|
||||||
const rendererEvent = await dispatchEvent(
|
const rendererEvent = await dispatchEvent(
|
||||||
'rowClick',
|
'rowClick',
|
||||||
@ -59,7 +61,9 @@ export class TableRow extends React.Component<TableRowProps> {
|
|||||||
onAction && onAction(e, itemAction, item?.data);
|
onAction && onAction(e, itemAction, item?.data);
|
||||||
item.toggle();
|
item.toggle();
|
||||||
} else {
|
} else {
|
||||||
this.props.onCheck(this.props.item);
|
if (item.checkable && item.isCheckAvaiableOnClick) {
|
||||||
|
onCheck?.(item);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1876,7 +1876,7 @@ export default class Table extends React.Component<TableProps, object> {
|
|||||||
classPrefix={ns}
|
classPrefix={ns}
|
||||||
partial={store.someChecked && !store.allChecked}
|
partial={store.someChecked && !store.allChecked}
|
||||||
checked={store.someChecked}
|
checked={store.someChecked}
|
||||||
disabled={store.disabledHeadCheckbox}
|
disabled={store.isSelectionThresholdReached}
|
||||||
onChange={this.handleCheckAll}
|
onChange={this.handleCheckAll}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
Loading…
Reference in New Issue
Block a user