From 8962dac7d2b6b4b272fbe1a43ea5162bf4eae2ee Mon Sep 17 00:00:00 2001 From: chenxing Date: Wed, 14 Oct 2026 16:13:50 +0800 Subject: [PATCH] =?UTF-8?q?fix(def/ui):=20=E5=88=86=E7=BB=84=E6=80=81?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=85=AD=E9=A1=B9=E6=A0=B7=E5=BC=8F=E2=80=94?= =?UTF-8?q?=E2=80=94=E2=91=A0=E5=9B=BA=E5=AE=9A=E5=88=97=E5=B1=82=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=20pointer-events:none=EF=BC=88=E6=A0=B9=E5=9B=A0?= =?UTF-8?q?=EF=BC=9Afixed:right=20=E5=9B=BA=E5=AE=9A=E5=B1=82=E5=9C=A8?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E8=A1=8C=E5=8F=AA=E6=B8=B2=E6=9F=93=20visibi?= =?UTF-8?q?lity:hidden=20=E5=8D=A0=E4=BD=8D=E6=A0=BC=EF=BC=8C=E5=91=BD?= =?UTF-8?q?=E4=B8=AD=E6=B5=8B=E8=AF=95=E8=90=BD=E5=88=B0=E5=85=B6=20=20=E4=B8=8A=EF=BC=8C=E5=90=9E=E6=8E=89=E5=AD=90=E8=A1=A8?= =?UTF-8?q?=E3=80=8C=E6=9B=B4=E5=A4=9A=E3=80=8D=E7=AD=89=E6=8E=A7=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=20hover/click=EF=BC=8C=E8=A1=A8=E7=8E=B0=E4=B8=BA?= =?UTF-8?q?=E7=9C=8B=E5=BE=97=E8=A7=81=E7=82=B9=E4=B8=8D=E5=8A=A8=EF=BC=89?= =?UTF-8?q?=EF=BC=9B=E2=91=A1=E6=A0=87=E9=A2=98=E5=88=97=E5=AE=9A=E5=AE=BD?= =?UTF-8?q?=20260=20+=20ellipsis=20+=20Tooltip=EF=BC=88=E5=88=97=E4=B8=8A?= =?UTF-8?q?=E5=86=99=20render=20=E6=97=B6=20iView=20=E5=86=85=E7=BD=AE=20c?= =?UTF-8?q?olumn.tooltip=20=E4=B8=8D=E7=94=9F=E6=95=88=EF=BC=8C=E6=95=85?= =?UTF-8?q?=E6=89=8B=E6=8C=82=20Tooltip=EF=BC=9B=E5=B9=B6=E8=A1=A5=20.ivu-?= =?UTF-8?q?table-cell-ellipsis=20=E5=86=85=20Tooltip=20=E4=B8=A4=E5=B1=82?= =?UTF-8?q?=E5=8C=85=E8=A3=85=E9=99=8D=E7=BA=A7=20inline=E2=80=94=E2=80=94?= =?UTF-8?q?=E5=90=A6=E5=88=99=E7=9C=81=E7=95=A5=E5=8F=B7=E5=8F=98=E7=A1=AC?= =?UTF-8?q?=E8=A3=81=E5=88=87=EF=BC=8C=E6=97=A0=E5=A4=B4=20Edge=20?= =?UTF-8?q?=E5=AE=9E=E6=B5=8B=EF=BC=89=EF=BC=9B=E2=91=A2=E5=BD=93=E5=89=8D?= =?UTF-8?q?=E7=94=9F=E6=95=88/=E5=9C=A8=E9=80=94=20=E4=B8=A4=E5=BE=BD?= =?UTF-8?q?=E6=A0=87=E6=8B=86=E5=87=BA=E7=8B=AC=E7=AB=8B=E5=88=97=E3=80=8C?= =?UTF-8?q?=E7=94=9F=E6=95=88/=E5=9C=A8=E9=80=94=E3=80=8D(230)=EF=BC=9B?= =?UTF-8?q?=E2=91=A3GUID=20=E5=88=97=20130=E2=86=92200=EF=BC=8C32=20?= =?UTF-8?q?=E4=BD=8D=20guid=20=E5=85=A8=E6=98=BE=E4=B8=8D=E5=86=8D?= =?UTF-8?q?=E6=88=AA=208=20=E4=BD=8D=EF=BC=9B=E2=91=A4=E4=B8=BB=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E5=88=97=20140=E2=86=92190=EF=BC=88140=20=E8=A3=85?= =?UTF-8?q?=E4=B8=8D=E4=B8=8B=E3=80=8C=E7=89=88=E6=9C=AC=E5=8E=86=E5=8F=B2?= =?UTF-8?q?+=E7=BC=96=E8=BE=91=E4=BF=A1=E6=81=AF=E3=80=8D138px=20=E5=86=85?= =?UTF-8?q?=E5=AE=B9=EF=BC=89=EF=BC=9B=E2=91=A5=E5=B1=95=E5=BC=80=E4=BB=85?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=B7=A6=E4=BE=A7=E7=AE=AD=E5=A4=B4=EF=BC=88?= =?UTF-8?q?Table=20on-expand=EF=BC=8C=E8=A1=8C=E5=86=85=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E4=B8=8D=E5=86=8D=E5=88=87=E6=8D=A2=EF=BC=89=EF=BC=9B=E5=8F=A6?= =?UTF-8?q?=EF=BC=9A=E5=AD=90=E8=A1=A8=E3=80=8C=E6=94=B9=E5=8A=A8=E8=AF=B4?= =?UTF-8?q?=E6=98=8E=E3=80=8D=E5=8E=8B=E5=88=B0=20260+Tooltip=EF=BC=8C?= =?UTF-8?q?=E5=B9=B6=E7=BB=99=E5=86=85=E5=B1=82=20Table=20=E4=BC=A0=20widt?= =?UTF-8?q?h=3D870=EF=BC=8C=E9=81=BF=E5=85=8D=20iView=20=E6=8A=8A=E5=B1=95?= =?UTF-8?q?=E5=BC=80=E8=A1=8C=E4=BD=99=E5=AE=BD=E6=91=8A=E5=9B=9E=E8=AF=A5?= =?UTF-8?q?=E5=88=97=EF=BC=88=E9=A1=BA=E5=B8=A6=E8=AE=A9=E5=AD=90=E8=A1=A8?= =?UTF-8?q?=E5=8F=B3=E7=AB=AF=E4=B8=8D=E5=86=8D=E5=8E=8B=E5=88=B0=E5=9B=BA?= =?UTF-8?q?=E5=AE=9A=E6=9D=A1=E5=B8=A6=E4=B8=8B=E6=96=B9=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/main.scss | 31 ++++++++++++++++++ src/views/flow/admin/Defs.vue | 59 ++++++++++++++++++++++------------- 2 files changed, 69 insertions(+), 21 deletions(-) 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" />