From a136754d481713462cdbf9f9e141f389d8c037c9 Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 4 Sep 2025 18:30:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A0=91=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=EF=BC=8C=E6=A0=91=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=BC=BA?= =?UTF-8?q?=EF=BC=8C=E7=94=98=E7=89=B9=E5=9B=BE=E9=83=A8=E4=BB=B6=E5=8F=82?= =?UTF-8?q?=E6=95=B0=20expandiconcolumn=20=E6=8C=87=E5=AE=9A=E5=B1=95?= =?UTF-8?q?=E5=BC=80=E5=9B=BE=E6=A0=87=E6=89=80=E5=9C=A8=E5=88=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/control/gantt/gantt.scss | 23 ++++++++ src/control/gantt/gantt.tsx | 52 +++++++++++-------- src/control/grid/grid/grid.tsx | 18 +++++-- .../tree-grid-ex-field-column.scss | 6 --- src/control/tree-grid-ex/tree-grid-ex.scss | 2 +- src/control/tree-grid-ex/tree-grid-ex.tsx | 23 +++++--- 7 files changed, 87 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ed80f4c..95dd2ef2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - 新增应用菜单样式： 扩展视图1，二级菜单以后的菜单均以分组菜单呈现 - 新增表单全局参数validateMode与表单部件参数validatemode，为notification时表单项错误信息以通知方式显示 +- 新增树表格，树表格增强，甘特图部件参数 expandiconcolumn 指定展开图标所在列 ### Changed diff --git a/src/control/gantt/gantt.scss b/src/control/gantt/gantt.scss index 900990c9..12f25a31 100644 --- a/src/control/gantt/gantt.scss +++ b/src/control/gantt/gantt.scss @@ -187,6 +187,29 @@ .#{bem('tree-grid-ex-edit-column', 'editor')} { min-height: 32px; } + + // 显示列界面行为项 + .xg-root .xg-table-body .xg-table-row { + .#{bem(action-toolbar,item)} { + &.is-expand { + display: inline-flex; + opacity: 1; + } + } + + &:hover { + .#{bem(action-toolbar,item)} { + display: inline-flex; + opacity: 1; + } + + .#{bem(action-toolbar,separator)} { + display: inline-flex; + opacity: 1; + } + } + } + } .xg-view-toolbar-switch-action { diff --git a/src/control/gantt/gantt.tsx b/src/control/gantt/gantt.tsx index e3d32055..3afb0e1e 100644 --- a/src/control/gantt/gantt.tsx +++ b/src/control/gantt/gantt.tsx @@ -3,53 +3,53 @@ /* eslint-disable no-unused-vars */ /* eslint-disable no-restricted-syntax */ import { - useControlController, - useNamespace, useUIStore, + useNamespace, IBizControlShell, - hasEmptyPanelRenderer, IBizCustomRender, + useControlController, + hasEmptyPanelRenderer, } from '@ibiz-template/vue3-util'; import { - computed, - defineComponent, - PropType, - resolveComponent, - VNode, h, - watch, - onMounted, - getCurrentInstance, ref, Ref, + VNode, + watch, nextTick, + computed, + PropType, + onMounted, + defineComponent, + resolveComponent, + getCurrentInstance, } from 'vue'; import { + IPanel, IDEGantt, - IDETBGroupItem, IDETBRawItem, - IDETBUIActionItem, - IDEToolbarItem, IDETreeColumn, - IPanel, + IDETBGroupItem, + IDEToolbarItem, + IDETBUIActionItem, } from '@ibiz/model-core'; import { - IControlProvider, - GanttController, - IGanttNodeData, - IButtonState, - IButtonContainerState, IModal, IModalData, + IButtonState, IColumnState, + IGanttNodeData, + GanttController, + IControlProvider, + IButtonContainerState, IOverlayPopoverContainer, } from '@ibiz-template/runtime'; import { showTitle } from '@ibiz-template/core'; import { MenuItem } from '@imengyu/vue3-context-menu'; import dayjs from 'dayjs'; import { - AllowDropType, NodeDropType, + AllowDropType, } from 'element-plus/es/components/tree/src/tree.type'; import { findNodeData, formatNodeDropType } from '../tree/el-tree-util'; import './gantt.scss'; @@ -214,6 +214,14 @@ export const GanttControl = defineComponent({ return ibiz.i18n.getLang().toLowerCase(); }); + const expandColumnName = computed(() => { + const columnKey = c.controlParams.expandiconcolumn?.toLowerCase(); + const columnSatate = c.state.columnStates.find( + item => columnKey && item.key.toLowerCase() === columnKey, + ); + return columnSatate?.key; + }); + // 监听选中数据，操作甘特来处理界面回显选中效果。 watch( [() => ganttRef.value, (): IGanttNodeData[] => c.state.selectedData], @@ -1007,6 +1015,7 @@ export const GanttControl = defineComponent({ columns, onCheck, loading, + expandColumnName, ganttStyle, onNodeClick, onNodeDbClick, @@ -1062,6 +1071,7 @@ export const GanttControl = defineComponent({ allow-drop={this.allowDrop} allow-drag={this.allowDrag} onNodeDrop={this.handleDrop} + expandColumnName={this.expandColumnName} showCheckbox={!this.c.state.singleSelect} onNodeExpand={this.onNodeExpand} onNodeCollapse={this.onNodeCollapse} diff --git a/src/control/grid/grid/grid.tsx b/src/control/grid/grid/grid.tsx index 5bee0761..6a3add47 100644 --- a/src/control/grid/grid/grid.tsx +++ b/src/control/grid/grid/grid.tsx @@ -220,6 +220,15 @@ export function renderColumn( item => item.key === columnName, )!; + // 如果配置有展开图标列且显示，则仅有图标展开列的type为default + let type = 'default'; + const expandiconcolumn = c.controlParams.expandiconcolumn?.toLowerCase(); + const expandColumnSatate = c.state.columnStates.find( + item => expandiconcolumn && item.key.toLowerCase() === expandiconcolumn, + ); + if (expandColumnSatate && !expandColumnSatate.hidden) + type = columnName?.toLowerCase() === expandiconcolumn ? 'default' : ''; + // 如果没有配置自适应列，则最后一列变为自适应列 const widthFlexGrow = columnC.isAdaptiveColumn || @@ -231,21 +240,22 @@ export function renderColumn( // 表格列自定义 return ( { const fieldName = model.id!.toLowerCase(); if (a[fieldName] < b[fieldName] || !a[fieldName]) return -1; if (a[fieldName] > b[fieldName] || !b[fieldName]) return 1; return 0; }} - align={model.align?.toLowerCase() || 'center'} + className={`${model.columnType?.toLowerCase()} ${model.columnType?.toLowerCase()}-${columnName}`} > {{ header: ({ column }: IData) => { diff --git a/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.scss b/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.scss index a63fa992..c6f7eb7d 100644 --- a/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.scss +++ b/src/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.scss @@ -68,10 +68,4 @@ $tree-grid-ex-field-column: ( .#{bem(action-toolbar,separator)} { opacity: 0; } -} - -.el-table .el-table__body-wrapper tr:hover { - @include b(tree-grid-ex-field-column-toolbar-container) { - opacity: 1; - } } \ No newline at end of file diff --git a/src/control/tree-grid-ex/tree-grid-ex.scss b/src/control/tree-grid-ex/tree-grid-ex.scss index 7d16d0a1..6ec7633b 100644 --- a/src/control/tree-grid-ex/tree-grid-ex.scss +++ b/src/control/tree-grid-ex/tree-grid-ex.scss @@ -13,7 +13,7 @@ $control-treegridex: ( $control-treegridex-header: ( text-color: getCssVar(color, text, 2), cell-padding: getCssVar(control-treegridex, cell-padding), - height: auto, + height: 54px, bg-color: rgba(#{getCssVar(grey, 1)}, 1), font-size: getCssVar(font-size, regular), font-weight: getCssVar(font-weight, regular), diff --git a/src/control/tree-grid-ex/tree-grid-ex.tsx b/src/control/tree-grid-ex/tree-grid-ex.tsx index 31948701..6adc4ed8 100644 --- a/src/control/tree-grid-ex/tree-grid-ex.tsx +++ b/src/control/tree-grid-ex/tree-grid-ex.tsx @@ -19,8 +19,8 @@ import { } from 'vue'; import { IDETreeColumn, IDETreeGridEx } from '@ibiz/model-core'; import { - IControlProvider, ITreeNodeData, + IControlProvider, TreeGridExController, } from '@ibiz-template/runtime'; import { RuntimeError } from '@ibiz-template/core'; @@ -50,7 +50,7 @@ export const TreeGridExControl = defineComponent({ provider: { type: Object as PropType }, }, setup() { - const c = useControlController( + const c: TreeGridExController = useControlController( (...args) => new TreeGridExController(...args), ); @@ -250,11 +250,11 @@ export const TreeGridExControl = defineComponent({ elTableData, renderColumns, tableRefreshKey, - renderNoData, loadData, onRowClick, - onExpandChange, + renderNoData, renderPopover, + onExpandChange, handleRowClassName, }; }, @@ -281,15 +281,26 @@ export const TreeGridExControl = defineComponent({ (!this.c.hasAdaptiveColumn && index === this.renderColumns.length - 1); const widthName = widthFlexGrow ? 'min-width' : 'width'; + + // 如果配置有展开图标列且显示，则仅有图标展开列的type为default + let type = 'default'; + const expandiconcolumn = + this.c.controlParams.expandiconcolumn?.toLowerCase(); + const expandColumnSatate = this.c.state.columnStates.find( + item => expandiconcolumn && item.key.toLowerCase() === expandiconcolumn, + ); + if (expandColumnSatate && !expandColumnSatate.hidden) + type = columnName?.toLowerCase() === expandiconcolumn ? 'default' : ''; return ( {{ header: ({ column }: IData) => { -- Gitee