tms-erp-web/.workbuddy/memory/2026-08-13.md

2026-08-13 工作记录

business-crud-page.vue UI 对齐 customer-archive（section-card 间隔 + 表单排列统一）

问题

• 该组件内 .section-card { margin-bottom: 0 !important }（scoped 顶层）把全局 8px 卡片间距清零，导致弹窗里的 section-card 卡片贴在一起（与 customer-archive 的留白不一致）。
• 手写的 dispatch-item 表单 markup 仍写 label-width="auto"（虽被共享 CSS 块强制为 calc(6em+24px)，但不直观）。

改动（src/views/business/components/business-crud-page.vue）

1. 删除 margin-bottom:0 !important 覆盖，改为 .section-card{margin-bottom:8px !important; &:last-child{margin-bottom:0}}，与 customer-archive/全局 element-ui.scss 的 8px 节奏一致。
2. .business-crud-page__detail-content（详情弹窗，原本 gap:12px）改为 gap:8px 并给内部 .section-card{margin-bottom:0 !important}，避免 8px 外边距 + gap 双重留白。
3. :deep(.avue-form__group:has(.dialog-section-title)) 白卡 margin-bottom:16px→8px，使主弹窗分组白卡与 section-card 同节奏。
4. &__dispatch-summary 的 margin-bottom:12px→8px。
5. dispatch-item 表单 label-width="auto"→"calc(6em + 24px)"（与 task-form/freight-form 共享的 label 标准一致；参考 customer-archive 的右侧固定宽 label + el-row :gutter 网格思路）。

验证

• 仅改 scoped SCSS + 1 处 markup 属性，未动逻辑；SFC 结构未变。表单组件排列本就通过共享 __task-form/__freight-form/__dispatch-item-form 块统一为 calc(6em+24px) label + 4 列网格，本次使其显式对齐。

弹窗样式与交互调整（base 模块）

1. port-terminal.vue 港口/码头弹窗

• 去掉浏览器 input autocomplete 地址联想：新增 disableDialogAutocomplete() 方法（批量给 .port-terminal-edit-dialog 内 input/textarea 设 autocomplete=off 等），在 beforeOpen 两个分支 done() 后用 setTimeout(50) 调用。
• option 字段调整（用户此前需求，已指导）：详细地址 detailAddress 的 span:24→12、order:86→88，与区县 districtCode(span12,order87) 并排。

2. railway-station.vue 铁路车站弹窗

• label 宽度 85→108：option labelWidth:'auto'→'108px'（字符串不生效），再补 dialogCustomClass:'railway-station-edit-dialog' + 非 scoped <style> 强制 .el-form-item__label{width:108px!important}。

3. 全站弹窗底部浮动按钮（统一规范）

• 在 src/styles/element-ui.scss 新增全局规则：.el-dialog__body{max-height:calc(100vh-200px);overflow-y:auto} + .el-dialog__footer{白底+上边框+轻阴影}，实现取消/保存按钮固定在底部（参照 business/project-apply）。全站 Avue 弹窗自动生效，含 railway-station。已记入 MEMORY.md 长期规范。

4. port-terminal.vue 字段分组白卡 + label 108（本次）

• 改用 Avue option.group 把表单分成 3 张白卡：基础信息 / 位置信息 / 其他信息（对齐 driver/vehicle/ship/customer-archive 的 section-card 风格）。
• root column 保留不动（脚本大量用 findColumn(this.option.column,...) 动态设 dicData/显示），在 created() 里循环把 root 列 display=false，使其只服务表格/搜索、不重复渲染进表单。
• 新增 getColumnsByProp(prop) 助手，统一把 8 处 dicData/显示切换同时作用于 root 与 group 两处（否则 group 列的级联下拉不会刷新）。
• 样式：外层 .avue-form 透明化（卡片交由分组）；.avue-form__group 白卡 + 4px 主色竖条标题 + 内容区左右 16px；.el-form-item__label{width:108px!important} 对齐 railway-station。
• 关键坑：Avue form 的 columnOption 会把 root column 也作为「无标题组」渲染进表单，故 group 页必须给 root 列 display:false，否则字段重复；且动态 dicData 必须双写 root+group。

5. port-terminal.vue 回退分组白卡 + label 108（用户要求）

• 用户决定不在本页使用分组白卡与 label 宽度 108，已全部回退：
  • 删除 option.group 三张白卡，恢复扁平 column 结构（sed 删 695–974 行）。
  • created() 去掉 root 列 display=false 循环；删除 getColumnsByProp 助手；setColumnDisplay 与 8 处 dicData/显示切换全部还原为 findColumn(this.option.column, prop) 写法。
  • 样式块恢复：.avue-form 恢复为单张白卡（去透明化），删除 .avue-form__group 分组白卡规则与 .el-form-item__label{width:108px}；保留灰底 + 浮动底栏统一风格、input/select 250px、备注 85%。
• 校验：SFC 解析通过，无 getColumnsByProp/group/avue-form__group/label108 残留。

6. railway-station.vue 对齐 port-terminal 统一风格（用户要求"按 port-terminal 效果改"）

• 扩充 .railway-station-edit-dialog 非 scoped 样式块，对齐 port-terminal：灰底 .el-dialog__body(#f2f2f2, padding 8px) + 表单白卡 .avue-form(白底/圆角6/轻阴影/内边距16px) + 浮动底栏 .avue-dialog__footer(白底/圆角/轻阴影/右对齐) + 输入框 .el-input,.el-select 宽 250px + 备注 .remark-input 宽 85%。
• 给备注字段(prop:'remark')加 class:'remark-input'，使备注 85% 规则生效（原字段仅 type:textarea，无 class）。
• 保留用户之前要求的 labelWidth:'108px' 与 .el-form-item__label{width:108px!important}。
• 未包含 port-terminal 的「关闭浏览器地址联想 autocomplete」逻辑（用户未要求，railway 未反馈该问题）；如需一致可后续补。
• 校验：SFC 解析通过。

7. 方向纠正：应改 port-terminal 参考 railway-station（非改 railway 参考 port）

• 用户澄清：第6条方向搞反了。正确语义是「改 port-terminal，参考 railway-station」。railway-station 是参考样板，不应被改。
• 还原 railway-station（撤销第6条）：删除误加的冗余专属灰底白卡/250px/备注85% 块（该块 .avue-form{padding:16px} 会与全局 .el-dialog .avue-form 的 24px 冲突造成不齐），仅保留 labelWidth:'108px' + .el-form-item__label{width:108px!important}；移除备注字段误加的 class:'remark-input'。
• 关键认知：全局 src/styles/element-ui.scss 第240-265行已有完整弹窗标准规则（灰底 .el-dialog__body#f2f2f2 + 白卡 .el-dialog .avue-form padding 24px + 浮动底栏 .avue-crud__dialog .avue-dialog__footer）。railway-station「整齐」即靠全局规则 + label 108；专属块属冗余且会覆盖全局 24px→16px 导致不齐。
• 改造 port-terminal 对齐 railway-station：保留专属灰底白卡兜底（其历史未命中全局，保留以防回归），补 labelWidth:'108px' + 样式块 .el-form-item__label{width:108px!important}；并将专属块 .avue-form padding 由 16px 改为 24px 以与全局/railway 一致。
• 校验：两文件 SFC 解析通过；railway 无 remark-input/padding16px 残留；port-terminal 已含 label 108 + padding 24px。

8. railway-station.vue label 加宽（用户反馈太挤）

• 用户反馈新增弹窗中"所属区县"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 的 <section-card> 白卡风格不一致。Avue form 本身 labelPosition:'right' 但 labelWidth:'auto'，故原页才需自定义固定宽 label。
• 改动（src/views/business/process-config.vue）：
  1. #basicInfo-form 槽：去掉 process-config-page__section + dialog-section-title，改为 <section-card title="基本信息"> + 嵌套 <el-form label-position="right" label-width="calc(6em + 24px)"> + <el-row :gutter="18"> + el-col(配置名称6/项目6/运输完成时限12/备注24) + el-form-item，与 customer-archive 右侧固定宽 label 栅格完全对齐。必填项加 required。
  2. #nodeConfigJson-form 槽：两个 dialog-section-title（现行过程节点 / 节点设置）分别改为 <section-card 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 等不变）。