fix(def/ui): 分组态列表六项样式——①固定列层容器 pointer-events:none(根因:fixed:right 固定层在展开行只渲染 visibility:hidden 占位格,命中测试落到其 <table> 上,吞掉子表「更多」等控件的 hover/click,表现为看得见点不动);②标题列定宽 260 + ellipsis + Tooltip(列上写 render 时 iView 内置 column.tooltip 不生效,故手挂 Tooltip;并补 .ivu-table-cell-ellipsis 内 Tooltip 两层包装降级 inline——否则省略号变硬裁切,无头 Edge 实测);③当前生效/在途 两徽标拆出独立列「生效/在途」(230);④GUID 列 130→200,32 位 guid 全显不再截 8 位;⑤主操作列 140→190(140 装不下「版本历史+编辑信息」138px 内容);⑥展开仅响应左侧箭头(Table on-expand,行内点击不再切换);另:子表「改动说明」压到 260+Tooltip,并给内层 Table 传 width=870,避免 iView 把展开行余宽摊回该列(顺带让子表右端不再压到固定条带下方)
build / build (push) Successful in 2m59s

This commit is contained in:
chenxing
2026-10-14 16:13:50 +08:00
parent 0a060ab22a
commit 8962dac7d2
2 changed files with 69 additions and 21 deletions
+31
View File
@@ -134,6 +134,37 @@ h4.subtitle {
}
}
/* ================= 固定列层不吞下层事件 =================
根因(2026-10-14 生产实测):iView 分组表外层「操作」列 fixed:right 时,固定层是全表覆盖的
独立副本;展开行处它只渲染一个 visibility:hidden 的占位单元格(用来对齐行高)。该处命中
测试落到固定层的 <table> 上(占位 td 因 visibility:hidden 不可命中),于是展开子表落在
固定条带内的「更多」等控件 hover/click 全部失效——表现为「看得见、点不动」。
固定层只做视觉覆盖,容器层 pointer-events:none、真实单元格恢复 auto,空白处(含展开行
占位)事件自然穿透到下层;滚轮/行 hover 靠事件冒泡与 vue 侧 scroll 同步,不受影响。 */
.ivu-table-fixed,
.ivu-table-fixed-right {
pointer-events: none;
th,
td,
.ivu-table-cell {
pointer-events: auto;
}
}
/* ================= 省略号单元格内的 Tooltip =================
iView 的 Tooltip 根节点与 .ivu-tooltip-rel 都是 inline-block(见 tooltip.less),
放进 column.ellipsis 单元格时会把 text-overflow:ellipsis 变成**硬裁切**(省略号不渲染,
2026-10-14 无头 Edge 实测 A/B 对照:裸文本有「…」,两层 inline-block 包裹则无)。
故仅在省略号单元格内把它们降级为 inline —— 保持省略号,popper 定位仍按 rect 计算不受影响。 */
.ivu-table-cell-ellipsis {
.ivu-tooltip,
.ivu-tooltip-rel {
display: inline;
width: auto;
}
}
/* 「更多▾」触发器(Dropdown transfer 后菜单挂 body,样式必须全局) */
.op-more {
.op-more-label {
+38 -21
View File
@@ -4,7 +4,7 @@
// 本页不再直接编辑 JSON 文本(编辑器内置"源码"高级模式兜底);行内「源码」为只读查看+复制。
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Message, Table, Tag } from "view-ui-plus";
import { Message, Table, Tag, Tooltip } from "view-ui-plus";
import MyConfirm from "@/components/MyConfirm";
import SourceDrawer from "@/views/flow/components/SourceDrawer.vue";
import { flowApi } from "@/api/module/flow";
@@ -61,6 +61,22 @@ const renderStatus = (h: any, p: any) => {
return h(Tag, { color: c }, () => DEF_STATUS[p.row.status] || p.row.status);
};
/** 生效/在途 徽标(2026-10-14 从「流程」列拆出独立成列,口径不变:计数仍按流程线) */
const renderRunState = (h: any, p: any) => {
const n = inflightMap.value[p.row.flowGuid];
return h("span", {}, [
h(Tag, { color: p.row.hasPublished ? "green" : "default" },
() => (p.row.hasPublished ? `当前生效 v${p.row.version}` : "无生效版")),
h(Tag, { color: n ? "blue" : "default", style: "margin-left:12px" }, () => inflightText(p.row.flowGuid)),
]);
};
/** 固定宽文本列 + 省略号 + Tooltip:列上写了 render 时 iView 内置 column.tooltip 不生效(cell 只在
* renderType==='normal' 分支渲染 tooltip),故手挂 Tooltip;ellipsis 仍走 column 配置。 */
const ellipsisCell = (key: string, tag = "span") => (h: any, p: any) => h(Tooltip, {
content: p.row[key] ?? "", transfer: true, maxWidth: 480,
}, () => h(tag, p.row[key] ?? ""));
/** 行操作集(平铺态、分组展开行同一套;禁用规则按 status) */
const rowActions = [
{ key: "edit", label: "编辑", icon: "icon-edit", on: (r: any) => onEdit(r), disabledWhen: (r: any) => r.status !== 0 },
@@ -85,8 +101,8 @@ const columns = [
{ title: "应用", key: "appKey", width: 130, align: "center", render: renderApp },
{ title: "版本", key: "version", width: 70, align: "center" },
{ title: "状态", width: 90, align: "center", render: renderStatus },
{ title: "GUID", key: "flowGuid", width: 240, render: (h: any, p: any) => {
// 平铺态也带在途(议题二④):计数按流程线口径,故挂在 GUID 旁
{ title: "GUID", key: "flowGuid", width: 280, render: (h: any, p: any) => {
// 平铺态也带在途(议题二④):计数按流程线口径,故挂在 GUID 旁;列宽须容下 32 位 guid + 徽标
const n = inflightMap.value[p.row.flowGuid];
return h("span", {}, [
p.row.flowGuid,
@@ -169,32 +185,33 @@ const versionColumns = [
{ title: "状态", width: 90, align: "center", render: renderStatus },
{ title: "创建人", width: 100, render: (h: any, p: any) => h("span", p.row.createBy || "-") },
{ title: "创建时间", width: 140, render: (h: any, p: any) => h("span", fmtTime(p.row.createTime)) },
{ title: "改动说明", minWidth: 230, render: (h: any, p: any) => (p.row.changeLog
? h("span", p.row.changeLog)
// 改动说明:固定窄列 + 省略号 + Tooltip(2026-10-14 用户要求压短,完整内容进 Tooltip)
{ title: "改动说明", width: 260, ellipsis: true, render: (h: any, p: any) => (p.row.changeLog
? ellipsisCell("changeLog")(h, p)
: h("span", { style: "color:#999" }, "(未填写)")) },
actionColumn(rowActions, { mode: "text", width: 210 }),
];
/** 子表各列声明宽之和:作为内层 Table 的 width 传下去,避免 iView 把展开行剩余空间摊到各列
* (否则「改动说明」会被撑回数百像素,等于没压短),同时让子表右端不再压到固定条带下方。 */
const VERSIONS_TABLE_WIDTH = 70 + 90 + 100 + 140 + 260 + 210;
const groupColumns = [
{ type: "expand", width: 40, render: (h: any, p: any) => h(Table, {
columns: versionColumns, data: p.row.versions, size: "small", noDataText: "暂无数据",
width: VERSIONS_TABLE_WIDTH,
}) },
{ title: "序号", type: "index", width: 60, align: "center" },
{ title: "流程", minWidth: 260, render: (h: any, p: any) => {
const n = inflightMap.value[p.row.flowGuid];
return h("span", {}, [
h("b", p.row.name),
h(Tag, { color: p.row.hasPublished ? "green" : "default", style: "margin-left:6px" },
() => (p.row.hasPublished ? `当前生效 v${p.row.version}` : "无生效版")),
h(Tag, { color: n ? "blue" : "default", style: "margin-left:6px" }, () => inflightText(p.row.flowGuid)),
]);
} },
// 标题列固定宽 + 超长省略 + Tooltip;生效/在途 徽标已拆到独立列(2026-10-14)
{ title: "流程", width: 260, ellipsis: true, render: ellipsisCell("name", "b") },
{ title: "生效/在途", width: 230, align: "center", render: renderRunState },
{ title: "编码", key: "code", width: 160 },
{ title: "应用", key: "appKey", width: 130, align: "center", render: renderApp },
{ title: "版本", width: 120, render: (h: any, p: any) => h("span", `v${p.row.version} · 共 ${p.row.total} 版`) },
{ title: "状态", width: 90, align: "center", render: renderStatus },
{ title: "GUID", width: 130, render: (h: any, p: any) => (p.row.flowGuid
? h("span", { title: p.row.flowGuid }, `${String(p.row.flowGuid).slice(0, 8)}…`)
// GUID 列宽按 32 位 uuid 全显(约 160px)+ 单元格内边距;不再截断成 8 位 + 省略号
{ title: "GUID", width: 200, render: (h: any, p: any) => (p.row.flowGuid
? h("span", { title: p.row.flowGuid }, p.row.flowGuid)
: h("span", { style: "color:#999" }, "—")) },
{ title: "发布时间", width: 160, render: (h: any, p: any) => h("span", fmtTime(p.row.publishTime)) },
actionColumn(
@@ -202,14 +219,14 @@ const groupColumns = [
{ key: "versions", label: "版本历史", icon: "icon-shijian", on: (r: any) => onVersions(r) },
{ key: "editMeta", label: "编辑信息", icon: "icon-bianji", on: (r: any) => onEditMeta(r) },
],
{ mode: "text", width: 140, fixed: "right" },
{ mode: "text", width: 190, fixed: "right" },
),
];
/** 分组态点行展开/收起(展开箭头同一路径:箭头内部态会被下一帧的 _expanded 重新校准) */
function onGroupRowClick(row: any) {
/** 分组态展开/收起:只由左侧箭头触发(Table 的 on-expand),行内任意位置点击不再切换 */
function onGroupExpand(row: any, status: boolean) {
if (row && row._key) {
openMap.value[row._key] = !openMap.value[row._key];
openMap.value[row._key] = !!status;
}
}
@@ -395,7 +412,7 @@ onMounted(() => {
<div class="table-region" ref="defsRegionRef">
<Table v-if="viewMode === 'group'" :columns="groupColumns" :data="groups" :loading="loading"
class="link-table table-bottom-box" :height="defsH || undefined" no-data-text="暂无数据"
@on-row-click="onGroupRowClick" />
@on-expand="onGroupExpand" />
<Table v-else :columns="columns" :data="rows" :loading="loading" class="link-table table-bottom-box"
:height="defsH || undefined" no-data-text="暂无数据" />
</div>