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
build / build (push) Successful in 2m59s
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user