) {
+ const {store} = this.props;
+
+ store.update({columns});
+ }
+
+ renderColumnsToggler(config?: any) {
+ const {
+ className,
+ store,
+ render,
+ classPrefix: ns,
+ classnames: cx,
+ ...rest
+ } = this.props;
+ const __ = rest.translate;
+ const env = rest.env;
+
+ if (!store.toggable) {
+ return null;
+ }
+
+ return (
+
+ }
+ draggable={config?.draggable}
+ columns={store.columnsData}
+ onColumnToggle={this.handleColumnToggle}
+ >
+ {store.toggableColumns.map(column => (
+
+
+ {column.title ? render('tpl', column.title) : null}
+
+
+ ))}
+
+ );
+ }
+
+ renderToolbar(toolbar: SchemaNode) {
+ const type = (toolbar as Schema).type || (toolbar as string);
+
+ if (type === 'columns-toggler') {
+ this.renderedToolbars.push(type);
+ return this.renderColumnsToggler(toolbar as any);
+ }
+
+ return void 0;
+ }
+
+ // handleAction() {}
+
+ renderActions(region: string) {
+ let {actions, render, store, classnames: cx, data} = this.props;
+
+ actions = Array.isArray(actions) ? actions.concat() : [];
+
+ if (
+ store.toggable &&
+ region === 'header' &&
+ !~this.renderedToolbars.indexOf('columns-toggler')
+ ) {
+ actions.push({
+ type: 'button',
+ children: this.renderColumnsToggler()
+ });
+ }
+
+ return Array.isArray(actions) && actions.length ? (
+
+ {actions.map((action, key) =>
+ render(
+ `action/${key}`,
+ {
+ type: 'button',
+ ...(action as any)
+ },
+ {
+ // onAction: this.handleAction,
+ key
+ // btnDisabled: store.dragging,
+ // data: store.getData(data)
+ }
+ )
+ )}
+
+ ) : null;
+ }
+
+ renderTable() {
+ const {
+ render,
+ title,
+ footer,
+ source,
+ columns,
+ rowSelection,
+ expandable,
+ footSummary,
+ headSummary,
+ classnames: cx,
+ store,
+ ...rest
+ } = this.props;
+
+ let sourceValue = this.props.data.items;
+
+ if (typeof source === 'string') {
+ sourceValue = resolveVariableAndFilter(source, this.props.data, '| raw');
+ }
+
+ if (expandable) {
+ if (expandable.expandableOn) {
+ const expandableOn = cloneDeep(expandable.expandableOn);
+ expandable.rowExpandable = (record: any) => {
+ return evalExpression(expandableOn, record);
+ };
+ delete expandable.expandableOn;
+ }
+
+ if (expandable.type) {
+ expandable.expandedRowRender = (record: any, rowIndex: number) => {
+ return this.renderSchema(expandable, {data: record});
+ };
+ }
+
+ if (expandable.expandedRowClassNameExpr) {
+ const expandedRowClassNameExpr = cloneDeep(expandable.expandedRowClassNameExpr);
+ expandable.expandedRowClassName = (record: any, rowIndex: number) => {
+ return filter(expandedRowClassNameExpr, {record, rowIndex});
+ };
+ delete expandable.expandedRowClassNameExpr;
+ }
+ }
+
+ if (rowSelection) {
+ if (rowSelection.disableOn) {
+ const disableOn = cloneDeep(rowSelection.disableOn);
+
+ rowSelection.getCheckboxProps = (record: any, rowIndex: number) => {
+ return {
+ disabled: evalExpression(disableOn, {record, rowIndex})
+ };
+ };
+
+ delete rowSelection.disableOn;
+ }
+ }
+
+ return ;
+ }
+
+ render() {
+ const {
+ classnames: cx
+ } = this.props;
+
+ this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了
+
+ return
+ {this.renderActions('header')}
+ {this.renderTable()}
+
;
+ }
+}
diff --git a/src/renderers/Table/TableBody.tsx b/src/renderers/Table/TableBody.tsx
index c02b3ea86..f9cd28d19 100644
--- a/src/renderers/Table/TableBody.tsx
+++ b/src/renderers/Table/TableBody.tsx
@@ -156,14 +156,16 @@ export class TableBody extends React.Component {
classnames: cx,
rows,
prefixRowClassName,
- affixRowClassName
+ affixRowClassName,
+ footable
} = this.props;
if (!(Array.isArray(items) && items.length)) {
return null;
}
- const filterColumns = columns.filter(item => item.toggable);
+ // 开启了footable，不需要考虑设置了breakpoint的列了
+ const filterColumns = columns.filter(item => item.toggable && !(footable && item.breakpoint));
const result: any[] = [];
for (let index = 0; index < filterColumns.length; index++) {
@@ -182,14 +184,16 @@ export class TableBody extends React.Component {
}
// 缺少的单元格补齐
+ // 考虑是否设置了
+ // 开启了footable，不需要考虑设置了breakpoint的列了
const appendLen =
- columns.length - result.reduce((p, c) => p + (c.colSpan || 1), 0);
+ (footable ? columns.filter(item => !item.breakpoint).length : columns.length) - result.reduce((p, c) => p + (c.colSpan || 1), 0);
if (appendLen) {
const item = result.pop();
result.push({
...item,
- colSpan: (item.colSpan || 1) + appendLen
+ colSpan: (item?.colSpan || 1) + appendLen
});
}
const ctx = createObject(data, {
diff --git a/src/store/index.ts b/src/store/index.ts
index 957802ff1..c82ac3c36 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -12,6 +12,7 @@ import {ComboStore} from './combo';
import {FormStore} from './form';
import {CRUDStore} from './crud';
import {TableStore} from './table';
+import {TableStoreV2} from './table-v2';
import {ListStore} from './list';
import {ModalStore} from './modal';
import {TranslateFn} from '../locale';
@@ -33,6 +34,7 @@ const allowedStoreList = [
ComboStore,
CRUDStore,
TableStore,
+ TableStoreV2,
ListStore,
ModalStore,
FormItemStore,
diff --git a/src/store/table-v2.ts b/src/store/table-v2.ts
new file mode 100644
index 000000000..9eb864617
--- /dev/null
+++ b/src/store/table-v2.ts
@@ -0,0 +1,185 @@
+import {
+ types,
+ getParent,
+ Instance,
+ SnapshotIn,
+ isAlive
+} from 'mobx-state-tree';
+
+import {isVisible, hasVisibleExpression} from '../utils/helper';
+import {iRendererStore} from './iRenderer';
+
+export const Column = types
+ .model('Column', {
+ title: types.optional(types.frozen(), undefined),
+ key: '',
+ toggled: false,
+ breakpoint: types.optional(types.frozen(), undefined),
+ pristine: types.optional(types.frozen(), undefined),
+ toggable: true,
+ index: 0,
+ type: ''
+ })
+ .actions(self => ({
+ toggleToggle() {
+ self.toggled = !self.toggled;
+ const table = getParent(self, 2) as ITableStore;
+
+ if (!table.activeToggaleColumns.length) {
+ self.toggled = true;
+ }
+
+ table.persistSaveToggledColumns();
+ },
+ setToggled(value: boolean) {
+ self.toggled = value;
+ }
+ }));
+
+export type IColumn = Instance;
+export type SColumn = SnapshotIn;
+
+export const Row = types
+ .model('Row', {
+ data: types.frozen({} as any)
+ });
+
+export type IRow = Instance;
+export type SRow = SnapshotIn;
+
+export const TableStoreV2 = iRendererStore
+ .named('TableStoreV2')
+ .props({
+ columns: types.array(Column),
+ rows: types.array(Row),
+ columnsToggable: types.optional(
+ types.union(types.boolean, types.literal('auto')),
+ 'auto'
+ )
+ })
+ .views(self => {
+ function getToggable() {
+ if (self.columnsToggable === 'auto') {
+ return self.columns.filter.length > 10;
+ }
+
+ return self.columnsToggable;
+ }
+
+ function hasColumnHidden() {
+ return self.columns.findIndex(column => !column.toggled) !== -1;
+ }
+
+ function getToggableColumns() {
+ return self.columns.filter(
+ item => isVisible(item.pristine, self.data) && item.toggable !== false
+ );
+ }
+
+ function getActiveToggableColumns() {
+ return getToggableColumns().filter(item => item.toggled);
+ }
+
+ function getFilteredColumns() {
+ return self.columns.filter(
+ item =>
+ item &&
+ isVisible(
+ item.pristine,
+ hasVisibleExpression(item.pristine) ? self.data : {}
+ ) &&
+ (item.toggled || !item.toggable)
+ ).map(item => ({...item.pristine, type: item.type}));
+ }
+
+ return {
+ get toggable() {
+ return getToggable();
+ },
+
+ get columnsData() {
+ return self.columns;
+ },
+
+ get toggableColumns() {
+ return getToggableColumns();
+ },
+
+ get filteredColumns() {
+ return getFilteredColumns();
+ },
+
+ get activeToggaleColumns() {
+ return getActiveToggableColumns();
+ },
+
+ // 是否隐藏了某列
+ hasColumnHidden() {
+ return hasColumnHidden();
+ }
+ }
+ })
+ .actions(self => {
+ function update(config: Partial) {
+ config.columnsToggable !== void 0 &&
+ (self.columnsToggable = config.columnsToggable);
+
+ if (config.columns && Array.isArray(config.columns)) {
+ let columns: Array = config.columns
+ .filter(column => column)
+ .concat();
+
+ columns = columns.map((item, index) => ({
+ ...item,
+ index,
+ type: item.type || 'plain',
+ pristine: item,
+ toggled: item.toggled !== false,
+ breakpoint: item.breakpoint
+ }));
+
+ self.columns.replace(columns as any);
+ }
+ }
+
+ function persistSaveToggledColumns() {
+ const key =
+ location.pathname +
+ self.path +
+ self.toggableColumns.map(item => item.key || item.index).join('-');
+ localStorage.setItem(
+ key,
+ JSON.stringify(self.activeToggaleColumns.map(item => item.index))
+ );
+ }
+
+ return {
+ update,
+ persistSaveToggledColumns,
+
+ // events
+ afterCreate() {
+ setTimeout(() => {
+ if (!isAlive(self)) {
+ return;
+ }
+ const key =
+ location.pathname +
+ self.path +
+ self.toggableColumns.map(item => item.key || item.index).join('-');
+
+ const data = localStorage.getItem(key);
+
+ if (data) {
+ const selectedColumns = JSON.parse(data);
+ self.toggableColumns.forEach(item =>
+ item.setToggled(!!~selectedColumns.indexOf(item.index))
+ );
+ }
+ }, 200);
+ }
+ };
+ });
+
+export type ITableStore = Instance;
+export type STableStore = SnapshotIn;
diff --git a/src/store/table.ts b/src/store/table.ts
index 301331c90..2584e4690 100644
--- a/src/store/table.ts
+++ b/src/store/table.ts
@@ -639,7 +639,8 @@ export const TableStore = iRendererStore
},
get disabledHeadCheckbox() {
- const selectedLength = self.data?.selectedItems.length;
+ // 设置为multiple 默认没选择会报错
+ const selectedLength = self.data?.selectedItems?.length;
const maxLength = self.maxKeepItemSelectionLength;
if (!self.data || !self.keepItemSelectionOnPageChange || !maxLength) {