gxwebsoft
21b7877ff1
- 独立表单页 shipping-template、transport-plan、waybill-manage 加入统一的 archive-page-form__title 页面标题支持 - 全局样式抽离 archive-page-form__title 至 element-ui.scss，实现统一样式和竖条修饰 - loading-manage/form 页面新增页标题展示，保持风格一致 - master-order 编辑模式下新增页面标题支持，动态显示编辑或新增总单 - business-crud-page 组件新增 formPageTitle 属性，支持父级传递页面标题数据 - 优化多个业务页面表格和弹窗样式，调整列宽及边框圆角阴影，提高视觉一致性 - 删除 customer-archive.vue 中重复本地标题样式定义，使用全局统一样式 - 全站弹窗分组组件 section-card 相关设计规范文档更新，强化统一卡片风格 - 移除 cargo-type.vue 添加 "新建" 按钮逻辑，调整按钮显示权限 - 统一所有新增弹窗的底部操作区浮动效果及内容区最大高度限制，提升交互体验
61 lines
9.6 KiB
Markdown
61 lines
9.6 KiB
Markdown
# 2026-08-21
|
||
|
||
## process-config 弹窗卡片间隔（对齐 project-apply 风格）
|
||
- 需求：process-config 新增/编辑弹窗内三张 `<section-card>`（基本信息 / 现行过程节点 / 节点设置）要像 project-apply 表单页一样独立成卡、卡间露出灰底（12px）。
|
||
- 根因：全站规则 `.el-dialog .avue-form { background:#fff; padding:8px 16px 4px }`（element-ui.scss ~246 行）把 Avue 弹窗表单整体包成一张白卡，section-card 白卡叠在其上看不出间隔。
|
||
- 改动（仅 2 文件）：
|
||
1. `src/option/business/process-config.js`：option 顶层加 `dialogCustomClass: 'process-config-dialog'`。
|
||
2. `src/styles/element-ui.scss`（contract-manage-dialog 规则块后新增）：
|
||
- `.process-config-dialog .avue-form { background:transparent; box-shadow:none; padding:0 }` —— 白卡透明化，灰底（.el-dialog__body 全局 #f2f2f2）露出，section-card 自带 margin-bottom:12px 形成卡距。
|
||
- `.process-config-dialog .avue-form__group > .el-col > .el-form-item { margin-bottom:0 }` —— formslot 外层 form-item margin 与卡片 margin 叠加会拉大卡距，归零统一 12px。
|
||
- `.process-config-dialog .avue-dialog__footer` + `.avue-crud__dialog .process-config-dialog .avue-dialog__footer { margin-top:0 !important }` —— 抵消全局 947 行 `.avue-crud__dialog .avue-dialog__footer { margin-top:-30px !important }`（form 透明化后会上移压卡）。双选择器兼顾 dialog 未 teleport / teleport 两种挂载。
|
||
- 已验证：Vite 2889 编译通过、HMR 生效。
|
||
- 备注：`menu-form-before` 插槽（保存草稿/保存并启用按钮）渲染在 `.avue-dialog__footer` 内（avue 源码 dialog-form3.mjs 确认），不受 form 透明化影响，仍处白底底栏。
|
||
|
||
## 合同管理表单页：多分组卡片风格（对齐 project-apply 风格）
|
||
- 需求：合同管理新增/编辑表单页（`/business/contract-manage/form?mode=add|edit`）的 7 个业务分组（基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录）要像 project-apply 一样独立成白底卡、卡间 12px 间距、标题 4px 主色蓝条。
|
||
- 关键事实（容易踩坑）：
|
||
- 合同表单走 `PageAvueForm` 组件（`src/views/business/components/business-crud-page.vue:5577`），render 函数 `h('div', { class: option.dialogCustomClass }, [h('avue-form', ...)])`，**不包 el-dialog**（所以底部按钮天然不浮动贴底，会随内容滚动——这点与 project-apply 的 el-dialog #footer 浮动有差异）。
|
||
- `option` 顶层在 `isStandaloneFormPage` 时已设 `dialogCustomClass: 'contract-manage-form-dialog'`、`dialogAppendToBody: false`、`dialogModal: false`、`dialogTop: '0'`、`dialogWidth: '100%'`（5897-5914 行）。
|
||
- 7 个分区标题列在 option.column 里以 `order` 升序分块（`basicInfoTitle=200` → `contractFileTitle=30` → `billingInfoTitle=10` → `settlementRuleTitle=-10` → `paymentRatioTitle=-30` → `attachmentTitle=-50` → `changeRecordTitle=-70`），其余字段 order 在每对标题列之间。
|
||
- 实施方案（已提交 63256a9）：
|
||
1. `buildContractFormGroupOption(option)`（business-crud-page.vue 新增方法）：按 order 降序遍历 option.column，遇到 7 个 `*Title` 列就切片分组；`groups.length<=1` 时回退原 option（不影响其他业务弹窗）。返回 `{ ...option, column: groups[0], group: groups.slice(1).map(g=>({ label:'', arrow:false, column:g })) }`。
|
||
2. `pageFormOption`（6205 行）`isContractFormPage` 时调用上述方法。
|
||
3. CSS（business-crud-page.vue scoped 末尾）：
|
||
- `.contract-manage-form-dialog` 设 `padding:20px 24px 96px; background:#f5f6fa; box-sizing:border-box;`（外层灰底）
|
||
- `.business-crud-page--contract-form .avue-form { background:transparent; padding:0 }`（表单白卡透明化）
|
||
- `.business-crud-page--contract-form .avue-form > .el-form > .avue-form__group` 和 `.avue-group` 都设白底 + 6px 圆角 + 0 1px 2px 阴影 + 12px margin-bottom + 14px 16px 4px padding（两张选择器分别覆盖第 1 组 column 与第 2-7 组 group 渲染）
|
||
- 验证（agent-browser + 系统 Chrome，已登录后截图核对）：
|
||
- 合同表单 7 张白底卡清晰分隔，每张卡左侧 4px 主色蓝条 + 标题（基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录），卡间约 12px 灰底露白。
|
||
- 底部 5 个按钮（提交 / 关闭 / 保存 / 提交临时合同 / 提交正式合同）随内容滚动（非浮动贴底）。
|
||
- 与 project-apply 滚动后的"客户信息 / 承运商信息"卡风格完全一致。
|
||
- 与 project-apply 的已知差异（用户本次未要求改）：
|
||
- 合同表单底部按钮非浮动贴底（PageAvueForm 不包 el-dialog，avue-form 的 form_menu 渲染在内部）
|
||
- 合同表单无"返回"按钮（用"关闭"代替）
|
||
- 合同表单无独立页面标题（page-header 区域在 breadcrumb 处，不在 main 标题区）
|
||
- 行为验证码：登录页拼图/旋转求解基础设施已搭好——`/tmp/captcha_solve.py`（CORS 修复后支持 puzzle+rotate 双模式）、`/tmp/ab-install/node_modules/.bin/agent-browser --browser-channel chrome`。登录流程：访问 → 切"账号密码登录" → 点登录 → 检测 `.puzzle-stage`/`.rotate-image` → POST 至 http://127.0.0.1:8765 → 取 xDisp/angle → JS PointerEvent 模拟拖动 .track-handle 即可。
|
||
- 提交：63256a9 feat(business-crud-page): 合同管理表单页改为多分组卡片风格（1 file, +86/-2）。未提交改动（process-config.js、element-ui.scss、master-order-editor.vue、loading-manage.vue、project-apply.vue、formal-settlement.vue、customer-archive.vue）与本任务无关，未纳入。
|
||
|
||
## shipping-template 独立表单页加 archive-page-form__title（参考 customer-archive）
|
||
- 需求：独立表单页 `/business/shipping-template/form?mode=add&name=新运费发货模板` 顶部缺页面标题，参考 customer-archive 的 `.archive-page-form__title` 加标题。
|
||
- 改动（单文件 `src/views/business/components/business-crud-page.vue`）：
|
||
1. `PageAvueForm`（5578 行）声明 `props.formPageTitle`，render 时若非空则先 push `<div class="archive-page-form__title">{{ title }}</div>` 再渲染 avue-form（title 在表单容器 `shipping-template-dialog` 内、avue-form 之前）。
|
||
2. 模板 `<component :is="crudContainer">` 新增 `:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"`。
|
||
3. 新增 computed `formPageTitle()`：`isStandaloneFormPage && isShippingTemplatePage` 时返回 `this.$route.query.name || '新增'/'编辑' + config.title`，否则 ''。
|
||
4. 样式（scoped 末尾，用 `:global` 因为 title div 由 PageAvueForm 函数式组件渲染、无 scoped 属性）：`:global(.business-crud-page--form-page .archive-page-form__title)` 复制 customer-archive 的 18px/600/#303133 + margin-bottom:20px（::before 为空，与参考一致，仅纯文字标题）。
|
||
- 仅作用于 shipping-template 独立表单页；其他独立表单页（waybill/transport-plan/contract）`formPageTitle` 返回 ''，不受影响。
|
||
|
||
## transport-plan 独立表单页也加 archive-page-form__title
|
||
- 需求：`/business/transport-plan/form?mode=add&name=新运费运输计划` 也要同样的页面标题。
|
||
- 改动：`formPageTitle()` 条件由 `isStandaloneFormPage && isShippingTemplatePage` 改为 `isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage)`（复用已有 `isTransportPlanPage` computed：`config.permission==='transport_plan'`）。标题文案取 `this.$route.query.name`（「新运费运输计划」）或回退「新增/编辑运输计划」。
|
||
- 验证：Vite 2889 编译通过（HTTP 200，无错误）。
|
||
- 验证：Vite 2889 编译通过（HTTP 200，无 transform/syntax 错误），HMR 生效。如需扩展到其他独立表单页，去掉 `isShippingTemplatePage` 限定即可。
|
||
|
||
## 将 .archive-page-form__title 全局化，并再加 waybill / loading-manage / master-order 三页
|
||
- 需求：把页面标题扩展到 `/business/waybill-manage/form`、`/business/loading-manage/form`、`/business/master-order?mode=editor` 三页，并与 customer-archive / shipping-template / transport-plan 视觉统一。
|
||
- **全局化样式**：`.archive-page-form__title` 原本分散在 `customer-archive.vue`（scoped）与 `business-crud-page.vue`（`:global`，::before 为空纯文字）。现统一提取到 `src/styles/element-ui.scss`（5b 段）：18px/600/#303133 + margin-bottom:20px + `::before` 4px 主色竖条 + 8px 间距（补全竖条，与 section-card 卡头风格一致）。并删除上述两处本地重复定义。
|
||
- **waybill-manage/form**：在 `business-crud-page.vue` 的 `formPageTitle()` 条件再并入 `isWaybillDetailLayout`（`config.permission==='waybill_manage'`），复用既有 computed。标题取 `query.name || '新增/编辑运单管理'`。
|
||
- **loading-manage/form**：该路由直接映射到 `loading-manage.vue`（非 business-crud-page）。新增 computed `formPageTitle()`（`query.name || '新增/编辑配载管理'`），并在独立表单页的 `<component>` 内、body 之前加 `<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>`。
|
||
- **master-order?mode=editor**：`master-order.vue` 渲染 `master-order-editor.vue`。将 `<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`，前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`；新增 computed `masterEditorTitle`（`routeId ? '编辑总单' : '新增总单'`）。
|
||
- 验证：4 个 SFC + element-ui.scss 经 Vite 2889 编译均 HTTP 200、无 transform/syntax 错误。
|