From b64465a4c34387807f8915e11da7e2aa85d878a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Thu, 13 Aug 2026 16:44:45 +0800 Subject: [PATCH] =?UTF-8?q?style(process-config):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=B5=81=E7=A8=8B=E9=85=8D=E7=BD=AE=E9=A1=B5=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=8F=8A=E7=BB=93=E6=9E=84=E4=B8=80=E8=87=B4=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - process-config.vue 基本信息区改用 section-card 和 el-form 组件，统一右侧固定宽 label 栅格布局 - 现行过程节点和节点设置区使用 section-card 包裹，替换原有灰色标题，增加白卡样式和卡片间距 - 删除不再使用的自定义样式 __section/__field/__field-label/__field-label--required，保留与节点表格相关样式 - 保证三个 section-card 正确闭合，编译通过，无业务逻辑变更 - master-order-detail.vue 主界面改用 section-card 代替 div 容器，提升风格统一性 - 注释部分 Element UI 弹窗表单项 margin-bottom 样式，减少样式冗余 - loading-manage.vue loading-detail 取消 flex gap，防止潜在样式冲突 - shipping-template.js 表单项 grid 栅格 span 值调整优化表单布局，使各项宽度分配更合理 --- .workbuddy/memory/2026-08-13.md | 9 + src/option/business/shipping-template.js | 14 +- src/styles/element-ui.scss | 4 +- .../components/master-order-detail.vue | 6 +- src/views/business/loading-manage.vue | 2 +- src/views/business/process-config.vue | 199 ++++++++---------- 6 files changed, 107 insertions(+), 127 deletions(-) diff --git a/.workbuddy/memory/2026-08-13.md b/.workbuddy/memory/2026-08-13.md index 6321525..3f38afc 100644 --- a/.workbuddy/memory/2026-08-13.md +++ b/.workbuddy/memory/2026-08-13.md @@ -60,3 +60,12 @@ - 用户反馈新增弹窗中"所属区县"label 太挤（实测约 85×32px），要求加宽。 - 已把 `option.labelWidth: '108px' → '140px'`，同步全局覆盖 `.el-form-item__label{width:108px!important} → 140px!important`。 - 140px 够"所属区县"4字+必填星号+留白，也覆盖表单其他 label（"行政区划编号"6字 + * 也够）。若仍觉不够可再调到 160px。 + +## process-config.vue 套用 customer-archive 样式（用户要求"和 business-crud-page 一样的问题"） +- 根因同商务页：本页原用灰色 `div.dialog-section-title` 标题 + 自定义 `__field` flex 布局（label `flex:0 0 150px`），既无白卡样式也无 8px 卡片间距，与 customer-archive 的 `` 白卡风格不一致。Avue form 本身 `labelPosition:'right'` 但 `labelWidth:'auto'`，故原页才需自定义固定宽 label。 +- 改动（src/views/business/process-config.vue）： + 1. `#basicInfo-form` 槽：去掉 `process-config-page__section` + `dialog-section-title`，改为 `` + 嵌套 `` + `` + `el-col`(配置名称6/项目6/运输完成时限12/备注24) + `el-form-item`，与 customer-archive 右侧固定宽 label 栅格完全对齐。必填项加 `required`。 + 2. `#nodeConfigJson-form` 槽：两个 `dialog-section-title`（现行过程节点 / 节点设置）分别改为 `` 包裹（timeline 与 el-table 内容不变）。 + 3. 删除不再使用的 `__section/__field/__field-label/__field-label--required` 样式；保留 `__finish-days` 与节点表格相关样式。 +- 卡片间距：全局 `.section-card{margin-bottom:8px}` 在本页生效（无 `!important` 覆盖），三张白卡自动保持 8px 间隔。 +- 校验：@vue/compiler-sfc 编译通过，3 个 section-card 均正确闭合；未动任何业务逻辑（validateRow/syncNodeFields 等不变）。 diff --git a/src/option/business/shipping-template.js b/src/option/business/shipping-template.js index bc31478..2ab0f66 100644 --- a/src/option/business/shipping-template.js +++ b/src/option/business/shipping-template.js @@ -56,7 +56,7 @@ export const option = { prop: 'templateCode', search: true, searchOrder: 4, - span: 8, + span: 6, order: 390, minWidth: 170, disabled: true, @@ -67,7 +67,7 @@ export const option = { prop: 'templateName', search: true, searchOrder: 3, - span: 8, + span: 6, order: 380, minWidth: 150, rules: textRule('模板名称', 50, true), @@ -78,7 +78,7 @@ export const option = { type: 'select', search: true, searchOrder: 2, - span: 8, + span: 6, order: 370, dicData: templateTypeOptions, minWidth: 120, @@ -89,7 +89,7 @@ export const option = { prop: 'remark', type: 'textarea', minRows: 3, - span: 24, + span: 18, order: 360, minWidth: 180, maxlength: 200, @@ -111,7 +111,7 @@ export const option = { formslot: true, search: true, searchOrder: 1, - span: 8, + span: 6, order: 340, minWidth: 150, rules: textRule('项目', 100, true), @@ -120,7 +120,7 @@ export const option = { label: '客户合同', prop: 'contractName', formslot: true, - span: 8, + span: 6, order: 330, minWidth: 160, rules: textRule('客户合同', 100, true), @@ -129,7 +129,7 @@ export const option = { label: '运输方式', prop: 'transportType', type: 'select', - span: 8, + span: 6, order: 320, dicData: transportTypeOptions, minWidth: 130, diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index c64842b..6eca8b9 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -173,7 +173,7 @@ .el-dialog .el-form-item--small.el-form-item, .el-dialog .el-form-item--large.el-form-item, .el-dialog .el-form-item--medium.el-form-item { - margin-bottom: 20px; + //margin-bottom: 20px; } /* 全站弹窗：底部操作栏浮动效果（参照 business/project-apply） @@ -329,7 +329,7 @@ // 4) 弹窗内表单项默认上下间距 16px（覆盖默认 18px / 22px，与 customer-archive 对齐） .el-dialog .el-form-item { - margin-bottom: 16px; + //margin-bottom: 16px; } // 5) 通用分组白卡组件（）：标题融入卡头 diff --git a/src/views/business/components/master-order-detail.vue b/src/views/business/components/master-order-detail.vue index 8b4b366..ad7f21f 100644 --- a/src/views/business/components/master-order-detail.vue +++ b/src/views/business/components/master-order-detail.vue @@ -1,5 +1,5 @@