gxwebsoft
e48e5b6989
- 调整调度弹窗顶部“基本信息”与“收发货路线”两卡片最小高度至260px，实现高度一致 - 通过设置 flex 属性确保卡片内部白底区域等高对齐 - 修改调度摘要容器底部间距为12px，避免与卡片自身 margin 叠加 - 收紧“货物信息”标题的行高，保证与右侧链接垂直居中对齐 - 设置右侧导入货物和常用货物链接使用 inline-flex 和垂直居中样式 - master-order-editor 组件中调整页面布局，将行内元素两端对齐，并移除不必要背景色
96 lines
12 KiB
Markdown
96 lines
12 KiB
Markdown
# 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 等不变）。
|
||
|
||
## business-crud-page.vue 待调度列表汇总「件」蓝色高亮
|
||
- 需求：调度弹窗「待调度列表」标题右侧汇总 `共50吨、100件 | 已调度 50吨、100件，剩余0吨、0件` 中，单位是「件」的数字用蓝色显示。
|
||
- 改造（src/views/business/components/business-crud-page.vue）：
|
||
1. 新增 computed `dispatchSummarySegments`，把原纯文本 `dispatchSummaryText` 拆成结构化三段（共/已调度/剩余），每段 items 带 `{unit, value, isPiece: unit==='件'}`，文本拼接方式与原格式完全一致（含空格、`|`、`、`、逗号）。
|
||
2. 模板（约 2546 行）由 `{{ dispatchSummaryText }}` 改为 `v-for` 渲染；`件` 数字包裹 `<span class="dispatch-summary-value is-piece">`。
|
||
3. 样式：`.business-crud-page__dispatch-list-summary .dispatch-summary-value.is-piece { color:#409eff; font-weight:600 }`（项目主蓝，轻微加粗更醒目）。
|
||
- 校验：文本格式与原串逐字符一致，仅「件」数字变色；未动 `dispatchSummaryItems` 等其它逻辑。
|
||
- 修正（用户反馈）：原把整段「数字+件」一起变蓝导致「件」字也蓝。改为数字与单位拆成两个 span（`dispatch-summary-value` 仅含数字、`dispatch-summary-unit` 含单位），蓝色与加粗只作用于数字，「件」字保持默认色。
|
||
- 二次修正（用户反馈）：「吨」数字也要蓝。将 `isPiece` 由 `unit==='件'` 放宽为恒 `true`，即所有单位的数字均蓝色、单位字默认色（覆盖 吨/件/方 等）。
|
||
|
||
## business-crud-page.vue 调度弹窗顶部两卡片对齐 + 下方间距 12px
|
||
- 需求：截图显示「基本信息」与「收发货路线」两张 section-card 高度不一致，且与下方「待调度列表」间距需 12px。
|
||
- 改动（src/views/business/components/business-crud-page.vue）：
|
||
1. `&__dispatch-summary` 容器 `margin-bottom:8px→12px`，并在容器内覆盖 `.section-card{margin-bottom:0 !important}`，避免 section-card 自带 8px margin 与容器 margin 叠加。
|
||
2. `&__dispatch-summary-card` 与 `&__dispatch-route-card` 加 `min-height:260px`；内部 `:deep(.section-card)` 与 `:deep(.section-card__body)` 均 `flex:1` 并设 `display:flex;flex-direction:column`，确保左右卡片外框与内部白底区域都等高对齐。
|
||
- 校验：grid `align-items:stretch` + section-card flex:1 撑满，卡片底部会对齐；下方间距精确 12px。
|
||
|
||
## business-crud-page.vue「货物信息」标题与右侧链接水平对齐
|
||
- 需求：截图显示「货物信息」标题与右侧「导入货物」「常用货物」两个 `el-link` 不在同一水平线。
|
||
- 改动（src/views/business/components/business-crud-page.vue）：
|
||
1. `.dialog-section-title > span { line-height: 1 }` 收紧标题文字行高。
|
||
2. `&__section-actions .el-link { display:inline-flex; align-items:center; line-height:1 }` 让链接严格垂直居中。
|
||
- 校验：两处使用 `.dialog-section-title--action.business-crud-page__goods-title` + `__section-actions` 的货物信息标题都会生效。
|