提交 4159ac0f 编写于 作者: RedPig97's avatar RedPig97

update: 表格分组行优化

上级 8325476a
import { DataTypes, dateFormat, deepCopy, GridControlState, IActionParam, IParam, isExistAndNotEmpty, MDControl } from "@core"; import { DataTypes, dateFormat, deepCopy, GridControlState, IActionParam, IParam, isExistAndNotEmpty, MDControl } from "@core";
import { createUUID } from "qx-util"; import { createUUID } from "qx-util";
import schema, { ErrorList, FieldErrorList } from 'async-validator'; import schema, { ErrorList, FieldErrorList } from 'async-validator';
import { Ref } from "vue";
/** /**
* @description 表格部件 * @description 表格部件
* @export * @export
...@@ -100,6 +101,11 @@ export class GridControl extends MDControl { ...@@ -100,6 +101,11 @@ export class GridControl extends MDControl {
} }
}; };
} }
// 展开行
const useExpandedRowKeys: Ref<Array<string>> = ref([]);
const onExpandedRowsChange = (expandedRows: string[]) => {
useExpandedRowKeys.value = expandedRows;
}
// 表格选择功能配置 // 表格选择功能配置
const useRowSelectionOption = computed(() => { const useRowSelectionOption = computed(() => {
if (selectFirstDefault) { if (selectFirstDefault) {
...@@ -109,18 +115,28 @@ export class GridControl extends MDControl { ...@@ -109,18 +115,28 @@ export class GridControl extends MDControl {
type: isSingleSelect ? 'radio' : 'checkbox', type: isSingleSelect ? 'radio' : 'checkbox',
columnWidth: 50, columnWidth: 50,
selectedRowKeys: this.state.selectedRowKeys, selectedRowKeys: this.state.selectedRowKeys,
checkStrictly: this.props.multiple ? false : true, checkStrictly: false,
onChange: (_selectedRowKeys: string[], selectedRows: IParam[]) => { onSelect: (record: IParam, selected: boolean, selectedRows: IParam[], $event: any) => {
this.state.selectedRowKeys = _selectedRowKeys; if (selected) {
const selection: IParam[] = []; const { appDeKeyFieldName } = this.state;
selectedRows.forEach((select: IParam) => { const selectedRowKey: string = record[appDeKeyFieldName] || record.srfkey;
if (!select.children) { const index: number = useExpandedRowKeys.value.findIndex((key: string) => Object.is(key,selectedRowKey))
selection.push(select); if (Object.is(index,-1) && record.children && record.children.length > 0) {
useExpandedRowKeys.value.push(selectedRowKey);
} }
}) }
// 选中赋值 },
this.state.selectedData = selection; onChange: (_selectedRowKeys: string[], selectedRows: any[]) => {
this.emit("ctrlEvent", { tag: this.props.name, action: "selectionChange", data: selection }) this.state.selectedRowKeys = _selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
if (!select.children) {
selection.push(select);
}
})
// 选中赋值
this.state.selectedData = selection;
this.emit("ctrlEvent", { tag: this.props.name, action: "selectionChange", data: selection })
}, },
}; };
}); });
...@@ -142,9 +158,11 @@ export class GridControl extends MDControl { ...@@ -142,9 +158,11 @@ export class GridControl extends MDControl {
useRowKey, useRowKey,
useRowClassName, useRowClassName,
useCustomRow, useCustomRow,
useExpandedRowKeys,
useRowSelectionOption, useRowSelectionOption,
onResizeColumn, onResizeColumn,
onGridChange onGridChange,
onExpandedRowsChange
} }
} }
......
...@@ -40,7 +40,7 @@ const emit = defineEmits<CtrlEmit>(); ...@@ -40,7 +40,7 @@ const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力 // 安装功能模块,提供状态和能力
const { name, state, useCustom, onEditorEvent, onToolbarEvent, onActionColEvent, newRow, remove, save, load, refresh, getData } = new GridControl(ctrlState, props, emit).moduleInstall(); const { name, state, useCustom, onEditorEvent, onToolbarEvent, onActionColEvent, newRow, remove, save, load, refresh, getData } = new GridControl(ctrlState, props, emit).moduleInstall();
const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange } = useCustom; const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange, useExpandedRowKeys, onExpandedRowsChange } = useCustom;
{{#if ctrl.batchToolBarItems}} {{#if ctrl.batchToolBarItems}}
const renderBatchToolbar = (total: number, range: IParam[]) => { const renderBatchToolbar = (total: number, range: IParam[]) => {
return ( return (
...@@ -73,6 +73,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData }); ...@@ -73,6 +73,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
:sortDirections="['ascend', 'descend']" :sortDirections="['ascend', 'descend']"
:data-source="state.items" :data-source="state.items"
:row-selection="useRowSelectionOption" :row-selection="useRowSelectionOption"
:expandedRowKeys="useExpandedRowKeys"
:columns="state.columnsModel" :columns="state.columnsModel"
{{#if ctrl.batchToolBarItems}} {{#if ctrl.batchToolBarItems}}
:pagination="Object.assign(state.mdCtrlPaging.pagination, { :pagination="Object.assign(state.mdCtrlPaging.pagination, {
...@@ -86,6 +87,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData }); ...@@ -86,6 +87,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
:customRow="useCustomRow" :customRow="useCustomRow"
:rowClassName="useRowClassName" :rowClassName="useRowClassName"
@change="onGridChange" @change="onGridChange"
@expandedRowsChange="onExpandedRowsChange"
@resizeColumn="onResizeColumn" @resizeColumn="onResizeColumn"
> >
<template #emptyText> <template #emptyText>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册