diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index f4d4ac9..43e5241 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -134,6 +134,37 @@ h4.subtitle { } } +/* ================= 固定列层不吞下层事件 ================= + 根因（2026-10-14 生产实测）：iView 分组表外层「操作」列 fixed:right 时，固定层是全表覆盖的 + 独立副本；展开行处它只渲染一个 visibility:hidden 的占位单元格（用来对齐行高）。该处命中 + 测试落到固定层的 上（占位 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 { diff --git a/src/views/flow/admin/Defs.vue b/src/views/flow/admin/Defs.vue index 666ca15..660888d 100644 --- a/src/views/flow/admin/Defs.vue +++ b/src/views/flow/admin/Defs.vue @@ -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(() => {
+ @on-expand="onGroupExpand" />