diff --git a/CHANGELOG.md b/CHANGELOG.md index cc6bf1dfa5227d787742fcac0c062ca3b6befe02..14bd2ebaaa7079d7e2432129b47e1630c109a0a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ - 修复地图内置导航未默认选中第一条数据，第一条数据为区域时还需传递行政编码与行政等级参数 - 修复日历内置导航月和自定义样式导航异常 - 修复数据选择编辑器OBJECT和OBJECTS抛值问题 +- 修复表格和树表格刷新模式异常 ### Changed diff --git a/src/control/grid/grid/grid-control.util.ts b/src/control/grid/grid/grid-control.util.ts index 14416ad3e54203c239645c702432a157105a97fd..f347bb4a4e43ceed2645aa1953b81d20961773c4 100644 --- a/src/control/grid/grid/grid-control.util.ts +++ b/src/control/grid/grid/grid-control.util.ts @@ -11,12 +11,12 @@ import { import { Srfuf, ControlVO, - GridController, GridRowState, IColumnState, - IControlProvider, IGridRowState, ScriptFactory, + GridController, + IControlProvider, } from '@ibiz-template/runtime'; import { IDEGrid, @@ -457,6 +457,20 @@ export function useITableEvent(c: GridController): { if (!forbidChange && !c.state.isLoading) c.setSelection(selection); } + // element表格选中数据 + const elSelection = computed(() => { + const items: IData[] = []; + const keys = c.state.selectedData.map(selected => selected.srfkey); + if (tableRef.value) + recursiveIterate( + { children: tableRef.value.store.states.data.value }, + item => { + if (keys.includes(item.srfkey)) items.push(item); + }, + ); + return items; + }); + // 监听选中数据，操作表格来界面回显选中效果。 watch( [ @@ -464,25 +478,18 @@ export function useITableEvent(c: GridController): { (): boolean => c.state.isLoaded, (): IData[] => c.state.selectedData, ], - ([table, isLoaded, newVal]) => { + ([table, isLoaded, _newVal]) => { if (!isLoaded || !table) return; - if (c.state.singleSelect) { - // 单选，选中效果回显。 - if (newVal[0]) { - tableRef.value!.setCurrentRow(newVal[0], true); + forbidChange = true; + setTimeout(() => { + if (c.state.singleSelect) { + table.setCurrentRow(elSelection.value[0]); } else { - tableRef.value!.setCurrentRow(); + // 修复选中值中有父值时导致子全选中问题 + table.store.states.selection.value = elSelection.value; } - } else { - forbidChange = true; - tableRef.value!.clearSelection(); - setTimeout(() => { - newVal.forEach(item => - tableRef.value!.toggleRowSelection(item, true), - ); - forbidChange = false; - }); - } + forbidChange = false; + }); }, ); @@ -534,10 +541,9 @@ export function useITableEvent(c: GridController): { let activeClassName = ''; if (c.state.selectedData.length > 0) { c.state.selectedData.forEach((data: IData) => { - if (data === row) { - // current-row用于多选激活样式与单选保持一致，有背景色 + // current-row用于多选激活样式与单选保持一致，有背景色 + if (data === row || data.srfkey === row.srfkey) activeClassName = 'current-row'; - } }); } const rowState = c.findRowState(row); @@ -701,7 +707,7 @@ export function useAppGridBase( c.state.items = chunk(c.state.simpleData, c.state.size)[c.state.curPage - 1] || []; } - c.afterLoad({ isInitialLoad: true }, c.state.items); + c.afterLoad({ isInitialLoad: true }, c.state.items as ControlVO[]); }; const defaultSort = computed(() => { @@ -746,6 +752,7 @@ export function useAppGridBase( if (grouprowmode === 'NEWROW') { result.push({ ...item, + srfkey: item.key, tempsrfkey: item.key, isGroupRow: true, }); diff --git a/src/control/grid/grid/grid.tsx b/src/control/grid/grid/grid.tsx index b0ae02c9f8b25cf935d20d0f9b084543ac06ab67..aacdb04f98db26464654efb7a6a1273e647e49a4 100644 --- a/src/control/grid/grid/grid.tsx +++ b/src/control/grid/grid/grid.tsx @@ -388,7 +388,7 @@ export const GridControl = defineComponent({ loadDefault: { type: Boolean, default: true }, }, setup(props, { slots }) { - const c = useControlController( + const c: GridController = useControlController( (...args) => new GridController(...args), ); const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); @@ -690,27 +690,31 @@ export const GridControl = defineComponent({ > { + this.c.expandChange(row, expanded) + } {...this.$attrs} {...renderAttrs(this.c.model, { ...this.c.getEventArgs(), @@ -723,10 +727,11 @@ export const GridControl = defineComponent({ this.c.enableRowEditOrder && this.renderDragIconColumn(), !state.singleSelect && ( ), this.renderRowDetail(), diff --git a/src/control/tree-grid/tree-grid.tsx b/src/control/tree-grid/tree-grid.tsx index 67f5474bb260eed216fbe308f260b4c5ca097a3f..4a270293f92b170d28ac397b32d9ace91899895b 100644 --- a/src/control/tree-grid/tree-grid.tsx +++ b/src/control/tree-grid/tree-grid.tsx @@ -6,11 +6,14 @@ import { } from '@ibiz-template/vue3-util'; import { VNode, + watch, + nextTick, PropType, renderSlot, defineComponent, VNodeArrayChildren, } from 'vue'; +import { recursiveIterate } from '@ibiz-template/core'; import { IDEGridColumn, IDETreeGrid } from '@ibiz/model-core'; import { IControlProvider, TreeGridController } from '@ibiz-template/runtime'; import { useRowEditPopover } from '../grid/row-edit-popover/use-row-edit-popover'; @@ -70,7 +73,7 @@ export const TreeGridControl = defineComponent({ loadDefault: { type: Boolean, default: true }, }, setup(props, { slots }) { - const c = useControlController( + const c: TreeGridController = useControlController( (...args) => new TreeGridController(...args), ); // 继承表格部件样式 @@ -81,20 +84,22 @@ export const TreeGridControl = defineComponent({ tableRef, onRowClick, onDbRowClick, - onSelectionChange, - handleHeaderCellClassName, onSortChange, + onSelectionChange, handleRowClassName, + handleHeaderCellClassName, } = useITableEvent(c); const { onPageChange, onPageRefresh, onPageSizeChange } = useAppGridPagination(c); + const { tableData, - renderColumns, defaultSort, + renderColumns, summaryMethod, headerDragend, } = useAppGridBase(c, props as IGridProps, tableRef); + const { renderPopover } = useRowEditPopover(tableRef, c); const { headerCssVars } = useGridHeaderStyle(tableRef, ns); @@ -136,6 +141,66 @@ export const TreeGridControl = defineComponent({ return null; }; + /** + * @description 处理默认选中 + * - 预加载完成后执行 + * @returns {*} {void} + */ + const handleDefaultSelect = (): void => { + const { expandRowKeys, selectedData, singleSelect } = c.state; + const table = tableRef.value; + if (!table || !selectedData.length) return; + const treeData = table.store.states.treeData.value; + const expandKeys = Object.keys(treeData).filter( + key => treeData[key].loaded, + ); + // 如果elemnet表格维护的树展开和expandRowKeys相同，说明已经预加载完成了，这时在设置默认选中 + if ( + expandRowKeys.length === expandKeys.length && + expandRowKeys + .sort() + .every((item, index) => item === expandKeys.sort()[index]) + ) { + const selection: IData[] = []; + const selectKeys = selectedData.map(selected => selected.srfkey); + recursiveIterate({ children: table.store.states.data.value }, item => { + if (selectKeys.includes(item.srfkey)) selection.push(item); + }); + nextTick(() => { + if (singleSelect) { + table.setCurrentRow(selection[0]); + } else { + table.store.states.selection.value = selection; + } + }); + } + }; + + /** + * @description 处理节点默认展开 + * @param {IData[]} nodes + * @returns {*} + */ + const handleDefaultExpand = (nodes: IData[]) => { + if (!tableRef.value || !c.state.expandRowKeys.length) return; + c.state.expandRowKeys.forEach(key => { + const node = nodes.find(item => item.srfkey === key); + if (node) + nextTick(() => { + tableRef.value!.store.loadOrToggle(node); + }); + }); + handleDefaultSelect(); + }; + + watch( + () => tableRef.value, + () => { + // 初始默认展开 + handleDefaultExpand(c.state.treeGirdData); + }, + ); + // 触发节点加载数据 const loadData = async ( item: IData, @@ -150,6 +215,8 @@ export const TreeGridControl = defineComponent({ ); item.children = items; callback(items); + // 默认展开子节点 + handleDefaultExpand(items); }; // 绘制批操作工具栏 @@ -204,25 +271,25 @@ export const TreeGridControl = defineComponent({ ns2, tableRef, tableData, + defaultSort, renderColumns, + headerCssVars, + loadData, + onRowClick, renderColumn, - defaultSort, onDbRowClick, - onRowClick, - onSelectionChange, onSortChange, onPageChange, - onPageSizeChange, - onPageRefresh, - handleRowClassName, renderNoData, - loadData, + onPageRefresh, summaryMethod, headerDragend, renderPopover, + onPageSizeChange, + onSelectionChange, + handleRowClassName, renderBatchToolBar, handleHeaderCellClassName, - headerCssVars, }; }, render() { @@ -244,29 +311,33 @@ export const TreeGridControl = defineComponent({ > {this.c.state.isLoaded && ( + this.c.expandChange(row, expanded) + } header-cell-class-name={this.handleHeaderCellClassName} - row-key={'srfkey'} + tree-props={{ children: 'children', hasChildren: 'hasChildren' }} data={ this.c.state.showTreeGrid ? state.treeGirdData : this.tableData } - onRowClick={this.onRowClick} - onRowDblclick={this.onDbRowClick} - onSelectionChange={this.onSelectionChange} - onSortChange={this.onSortChange} - onHeaderDragend={this.headerDragend} - tooltip-effect={'light'} - tree-props={{ children: 'children', hasChildren: 'hasChildren' }} - load={this.loadData} - lazy {...this.$attrs} > {{ @@ -275,9 +346,10 @@ export const TreeGridControl = defineComponent({ return [ !state.singleSelect && ( ), state.isCreated &&