From 5cf688bf062c4099b123c5bd2db9bdca6a24df6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Fri, 21 Aug 2026 16:29:44 +0800 Subject: [PATCH] =?UTF-8?q?fix(business-crud-page):=20=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E5=A4=9A=E8=A1=A8=E5=8D=95=E9=A1=B5=E6=A0=87=E7=AD=BE=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E5=8F=8A=E5=9B=9B=E5=88=97=E5=B8=83=E5=B1=80=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化 business-crud-page.vue 中 buildFormGroupOption，抽取 setFourColumns 函数实现合同、发货模板、运输计划和运单管理表单统一四列展示 - 调整发货模板表单中的“模板信息”和“基本信息”两组列的 span 为 6，标签统一宽度为 100 像素，实现右对齐及超出换行 - 在 shipping-template.js、transport-plan.js、waybill-manage.js 中 labelWidth 设置为 100，覆盖 createCrudOption 默认的自动宽度，保证标签宽度一致 - 在 element-ui.scss 中新增发货模板、运输计划及运单管理弹窗标签换行样式，提升长标签显示效果 - 修正首次设置 labelWidth 为 100 写法错误，必须放在 createCrudOption 展开之后以覆盖默认值 --- .workbuddy/memory/2026-08-21.md | 17 +++++++++++++++++ src/option/business/shipping-template.js | 2 ++ src/option/business/transport-plan.js | 2 ++ src/option/business/waybill-manage.js | 2 ++ src/styles/element-ui.scss | 18 ++++++++++++++++++ .../business/components/business-crud-page.vue | 17 +++++++++++++---- 6 files changed, 54 insertions(+), 4 deletions(-) diff --git a/.workbuddy/memory/2026-08-21.md b/.workbuddy/memory/2026-08-21.md index 83d4200..27eec74 100644 --- a/.workbuddy/memory/2026-08-21.md +++ b/.workbuddy/memory/2026-08-21.md @@ -173,3 +173,20 @@ - 改动（`src/views/business/components/master-order-dispatch.vue` 模板，21-45 行）：起/经、终节点各自的 strong（名称）+ 两个 small（地址、联系人）共 6 个文本元素分别用 `` 包裹，`:content` 与原文本一致；保持原有 `text-overflow:ellipsis` 截断视觉不变。 - `:show-after="120"` 让鼠标停留 120ms 才弹，避免快速划过连续触发多个 tooltip；`placement="top"` 配合节点垂直居中位置弹出，体验稳定。 - 风险：仅模板增加 6 个 el-tooltip 实例，无 JS/style 改动；与之前段头 `el-tooltip`（segment-checkbox-label）用法一致。 + +## shipping-template（发货模板）表单页：模板信息+基本信息 4 列 + label 统一宽度 +- 需求：`/business/shipping-template/form` 的「模板信息」「基本信息」两组改 4 列；左侧 label 宽度一致右对齐；全站统一（6 汉字宽、超出换行）。 +- 改动 3 处： + 1. `business-crud-page.vue` `buildFormGroupOption` 新增 `isShippingTemplatePage` 分支：对 groups[0]（模板信息）、groups[1]（基本信息）的非标题、非 span24 列设 `span:6`（该页分组：templateInfoTitle/basicInfoTitle/shippingInfoTitle/goodsInfoTitle/attachmentTitle 均已在 sectionTitleProps，发货信息及之后组保持原样）。 + 2. `src/option/business/shipping-template.js`：option 顶层加 `labelWidth: 100`（覆盖 createCrudOption 的 'auto'，全表单 label 一致 100px；右对齐已由 labelPosition:'right' 保证）。 + 3. `src/styles/element-ui.scss` `.shipping-template-dialog .el-form-item__label { white-space: normal; line-height: 20px }`（长 label 换行，独立表单页容器也是 div.shipping-template-dialog，class 命中）。 +- 模式沉淀：contract（isContractConfig 首组）/ shipping-template（前两组）都走 buildFormGroupOption 统一处理；普通 el-col 循环页直接改 span；CSS grid 页改 repeat 数 + label 规则。4 列=span 6，6 汉字=100px。 + +## transport-plan / waybill-manage 表单页：整表单 4 列 + label 统一（全站统一） +- `business-crud-page.vue` `buildFormGroupOption` 重构：抽取 `setFourColumns(group)` helper（非标题、非 span24 列设 span:6）；contract→首组、shipping-template→前两组、transport_plan/waybill_manage→**所有分组**统一 4 列（这两页很多字段无显式 span 会落到 Avue 默认 12=2 列，是之前不 4 列的原因）。 +- `waybill-manage.js` option 加 `labelWidth:100`（transport-plan.js 上轮已加）；element-ui.scss 追加 `.waybill-manage-dialog .el-form-item__label` 换行规则（transport-plan-dialog 上轮已加）。 +- 经验：Avue 表单「没 4 列」先查是否有字段漏设 span（默认 12）；统一 4 列优先走 buildFormGroupOption 的页面级分支，避免逐个字段改。 + +## ⚠️ option.labelWidth 必须放在 createCrudOption 展开之后 +- 第一次给 transport-plan.js、waybill-manage.js 加 `labelWidth: 100` 时写在 `...createCrudOption(...)` **之前**，被 createCrudOption 自带 `labelWidth: 'auto'` 覆盖，label 仍是 auto（按内容参差，看着像"150 不统一"）。shipping-template 当时写在 createCrudOption 之后才生效。 +- 教训：业务 option 文件顶层 `export const option = { labelWidth: 100, ...createCrudOption([...]) }` 写法**无效**，必须 `export const option = { ...createCrudOption([...]), labelWidth: 100, dialogWidth, ... }` 后写覆盖前写。 diff --git a/src/option/business/shipping-template.js b/src/option/business/shipping-template.js index 598b263..55d5841 100644 --- a/src/option/business/shipping-template.js +++ b/src/option/business/shipping-template.js @@ -275,6 +275,8 @@ export const option = { ), dialogWidth: '92%', dialogTop: '4vh', + // label 宽度一致（容纳 6 汉字，超出换行由全局样式控制），右对齐由 labelPosition: 'right' 保证 + labelWidth: 100, // 自定义弹窗 class，用于让新增/编辑弹窗体占满视口高度、视觉居中（参照 vehicle/customer-archive） dialogCustomClass: 'shipping-template-dialog', }; diff --git a/src/option/business/transport-plan.js b/src/option/business/transport-plan.js index 72afbc0..0b65b82 100644 --- a/src/option/business/transport-plan.js +++ b/src/option/business/transport-plan.js @@ -605,6 +605,8 @@ export const option = { }, ]) ), + // label 固定宽度（容纳 6 汉字），覆盖 createCrudOption 默认 labelWidth:'auto' + labelWidth: 100, dialogWidth: '96%', dialogTop: '4vh', dialogCustomClass: 'transport-plan-dialog', diff --git a/src/option/business/waybill-manage.js b/src/option/business/waybill-manage.js index c788ae5..4805f93 100644 --- a/src/option/business/waybill-manage.js +++ b/src/option/business/waybill-manage.js @@ -999,6 +999,8 @@ export const option = { }, ]) ), + // label 固定宽度（容纳 6 汉字），覆盖 createCrudOption 默认 labelWidth:'auto' + labelWidth: 100, dialogWidth: '96%', dialogTop: '4vh', menuWidth: 280, diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 6e2cb4e..562aae4 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -510,6 +510,24 @@ background: #fff; } +// 发货模板 label 固定宽度（option labelWidth:100 容纳 6 汉字），超出自动换行 +.shipping-template-dialog .el-form-item__label { + white-space: normal; + line-height: 20px; +} + +// 运输计划 label 固定宽度（option labelWidth:100 容纳 6 汉字），超出自动换行 +.transport-plan-dialog .el-form-item__label { + white-space: normal; + line-height: 20px; +} + +// 运单管理 label 固定宽度（option labelWidth:100 容纳 6 汉字），超出自动换行 +.waybill-manage-dialog .el-form-item__label { + white-space: normal; + line-height: 20px; +} + // 运输计划新增/编辑弹窗：参照 vehicle/customer-archive，弹窗体接近全屏（上下各留 20px 边距）； // 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限， // 改由 flex 控制，底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见 diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index a4ea72c..0a2d4f8 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -694,7 +694,6 @@
@@ -6980,13 +6979,23 @@ export default { }); if (current.length) groups.push(current); if (groups.length <= 1) return option; - // 合同「基本信息」分区改为 4 列显示（分区标题列与已设整行的字段保持原样） - if (this.isContractConfig && groups[0].length) { - groups[0].forEach(col => { + // 分组内非标题、非整行字段统一为 4 列（span 6） + const setFourColumns = group => { + group.forEach(col => { if (sectionTitleProps.includes(col.prop)) return; if (col.span === 24) return; col.span = 6; }); + }; + // 合同「基本信息」分区改为 4 列显示（分区标题列与已设整行的字段保持原样） + if (this.isContractConfig && groups[0].length) setFourColumns(groups[0]); + // 发货模板「模板信息」「基本信息」前两组改为 4 列显示 + if (this.isShippingTemplatePage && groups.length >= 2) { + [groups[0], groups[1]].forEach(setFourColumns); + } + // 运输计划 / 运单管理：整表单统一 4 列 + if ((this.isTransportPlanPage || this.isWaybillDetailLayout) && groups.length) { + groups.forEach(setFourColumns); } return { ...option,