gxwebsoft
1625fb292d
- 全站业务状态标签文字化，el-tag.status-text 转为纯文本，统一字号、行高和基线对齐 - 临时额度详情弹窗加宽 label 列宽至 180px，避免标签折成三行 - 年检记录费用字段将单位“元”移至标签内，清理无效 append 配置和 template 代码 - 维修记录里程字段单位动态显示于标签，移除输入框右侧单位后缀 - 全站 Avue CRUD 弹窗标题自动添加页面全称，支持手动覆盖和自定义 - 合同管理独立表单页顶部补充“新增合同管理”标题，统一与其它表单页面样式 - 结算-正式结算页表格整合到“应付/应收”两个标签页内，复用组件并调整操作列宽度至320px - 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配 - 取消部分页面样式中冗余或注释代码，调整组件内按钮布局和权限判断函数逻辑 - 新增全局 mixin 以设置 CRUD 弹窗标题，主入口 main.js 注册相关初始化函数
85 lines
13 KiB
Markdown
85 lines
13 KiB
Markdown
# 2026-08-25
|
||
|
||
## 全站操作列按钮居中统一
|
||
- 根因：pre-settlement 等手写操作列用 `<div class="xxx__links">` 包裹 `el-link`，而全局 `element-ui.scss` 第 904 行原选择器为 `:has(> .el-link)`（仅命中直接子元素），导致包了一层 div 的操作列未被居中规则命中，按钮靠左。
|
||
- 修复：将 `.el-table .el-table__body .cell:not(.avue-crud__menu)` 相关的三处选择器 `:has(> .el-link)` 全部放宽为 `:has(.el-link)`（第 904 / 935 / 954 行），兼容"el-link 被 div 包裹"的手写操作列；`.avue-crud__menu`（Avue 内置操作列）原已居中不受影响。
|
||
- 另在 `pre-settlement.vue` 的 `.pre-settlement-page__links` 补 `justify-content:center` 兜底。
|
||
- 结论：全站所有基于 el-link 的操作列（无论是否包裹 div）统一居中，符合 AGENTS.md 操作列规范。
|
||
|
||
## 全站业务状态标签改为普通文字（无颜色圆点）
|
||
- 根因：用户反馈审批状态列显示为带彩色圆点的文字（如截图），要求改成"普通的文字不要颜色"。此前 `.status-text` 是"文字 + 彩色圆点"风格。
|
||
- 修复：修改 `src/styles/element-ui.scss` 中 `.el-tag.status-text` 全局规则，去掉 `&::before` 圆点，并将 `color` 强制设为 `var(--el-text-color-regular)`，`font-weight:normal`，`margin:0`，背景边框保持透明。所有带 `class="status-text"` 的 `el-tag` 自动生效，无需逐页改模板。
|
||
- 结论：全站业务状态（调度状态/运单状态/审批状态等）统一为普通文字，不再带彩色圆点。
|
||
|
||
## /payment 下全部表单页板块风格统一
|
||
- 需求：所有 /payment 表单页（invoice-receipt / invoice-application / payment-application / bill-ledger / bill-payment / receipt-claim-record / receipt-flow）统一为"页面标题无蓝标 + 每个蓝标板块用白底卡片包裹 + 板块间距 12px"，参考 business/project-apply/form。
|
||
- 实现：页面标题改用全局 `archive-page-form__title`（蓝标已注释，无竖条）；各 `<section class="X-form-page__section"><div class="X-form-page__section-title">标题</div>` 整体改为全局组件 `<section-card title="标题">`（白底卡片 + 4px 主色竖条 + 卡间 12px，由 `src/styles/element-ui.scss` 全局 `.section-card` 提供）；带按钮的板块（附件信息/开票内容）用 `<section-card title="..."><template #extra>按钮</template>`。
|
||
- 清理：删除各文件 scoped 中 `__title`/`__section` 相关的废弃 CSS（蓝标 ::before、板块间距、heading 等）；`payment-application` 的 `.payment-form-page__section-actions`（按钮行右对齐）属有效独立样式，清理时被误删，已补回。
|
||
- 校验：用 @vue/compiler-sfc 对 7 个文件做 template/script 编译，全部通过。
|
||
|
||
## /payment 板块表单控件统一 4 列（span=6）
|
||
- 需求：用户要求 /payment 下"板块表单控件都改成 4 列"。此前列数不一致：多数页用 `el-col :span="12"`（2 列），invoice-application 用 `:span="8"`（3 列），bill-payment / bill-ledger 是"两列各叠多个控件"的嵌套结构。
|
||
- 实现：
|
||
- 直接网格（每列一个控件）：payment-application、invoice-receipt、receipt-claim-record、receipt-flow 的 `:span="12"` → `:span="6"`；invoice-application 的 `:span="8"` → `:span="6"`（两处 el-row）。
|
||
- 嵌套网格：bill-payment、bill-ledger 拆成每个字段独立 `el-col :span="6"`（真 4 列），gutter 48→24；备注保留 `:span="24"` 整行。
|
||
- 媒体查询同步：`.el-col-12`/`.el-col-8` 窄屏折叠规则改成 `.el-col-6`（≤1024/1200/900/768px 折叠为整行）。
|
||
- 结论：全 /payment 表单页板块表单控件统一为 4 列网格，备注/长文本仍整行；pre-settlement-editor「结算基本信息」此前也已改 `:span="8"`→`span="6"`。
|
||
|
||
## 全站 el-tag 状态语义统一转纯文本（status-text）
|
||
- 需求：用户要求"全站看看还有哪些地方使用 el-tag 的？都要统一改一下"，保持与调度状态一致的纯文本风格。
|
||
- 范围确认：用 AskUserQuestion 确认采用"所有状态语义"——业务状态(审批/调度/运单/匹配/认领) + 启用停用 + 工作流激活挂起/完成 + 其它状态(statusName/是否封存/否是/认证/锁状态/合同阶段) 一律转 `.status-text` 纯文本；类型标签/版本号/分类名/值类(车牌颜色、锁类型、运输方式、categoryName、code、apiKey 等) 保留 tag。
|
||
- 改动文件（约 35 个，仅加 `class="status-text"`，不动逻辑/`:type` 绑定）：
|
||
- 启用/停用：base(railway-station/airport-master/currency/customer-type/fee-item/port-terminal)、system/dept、transportCapacity(vehicle/driver/ship)、authority(apikey/ratelimit)
|
||
- 业务状态遗漏补：settlement/formal-settlement、business/temporary-credit-limit、business/contract-manage(合同阶段+审批)、payment(invoice-application/bill-payment-table/receipt-flow/receipt-claim-record/invoice-receipt/payment-application)、settlement/components/transport-reconciliation-editor(匹配结果/状态/更新结果)、transit/risk-disposal(column.tag/field.tag)
|
||
- 工作流/其它：flow(manager/follow 激活挂起)、work(start 激活挂起/send 完成)、transportCapacity/vehicle 认证状态、system/authlock lockStatus、tool/codesetting、resource(sms/oss) statusName、vehicle/customer-archive(审批+启用停用)、system/dict+dictbiz 及 util/demo 各 dict 页 是否封存
|
||
- 校验：重新 grep `el-tag[^>]*:type=` 确认除 authlock lockType、vehicle-ledger plateColor 两个刻意保留的"类型标签"外，所有状态语义 el-tag 均已带 status-text。改动为纯属性添加，Vite HMR 自动生效。
|
||
|
||
## 业务状态文字化后字号/行高对齐单元格
|
||
- 根因：用户截图反馈 customer-archive 的"准入类型/审批状态/状态"列文字比其它列小/错位。`.el-tag` 默认 `font-size: var(--el-tag-font-size)`（12px）且 `height` 固定，即便 `.status-text` 去掉了背景边框，字号和盒模型仍与单元格普通文本不一致。
|
||
- 修复：在 `src/styles/element-ui.scss` 的 `.el-tag.status-text` 全局规则追加 `font-size: inherit !important; height: auto !important; vertical-align: baseline; line-height: inherit;`，强制继承父级字号与行高，高度随内容自适应，基线对齐与普通 inline 文本一致。
|
||
- 结论：所有使用 `.status-text` 的状态列（customer-archive 准入类型/审批状态/状态、transport-plan 调度状态、waybill 运单状态、payment 审批状态、启用停用等）自动与相邻普通文字列的字体字号/行高/基线完全统一，无需逐页修改。
|
||
|
||
## 临时额度详情弹窗长 label 折成两行
|
||
- 需求：用户截图反馈 `temporary-credit-limit` 详情弹窗中，"已使用项目资金使用额度（万元）" 和 "剩余项目资金使用额度（万元）" label 被折成三行，希望只折两行。
|
||
- 根因：`business-crud-page` 自定义详情弹窗（`detailBox`）使用 `el-descriptions :column="2"`，`.el-descriptions__label` 在 `business-crud-page__detail-content` 里被全局固定 `width: 140px`，15 个汉字的超长 label 在 140px 下被挤成三行。
|
||
- 修复：
|
||
- 让 `business-crud-page` 的详情弹窗根节点也携带页面对话框的 `dialogCustomClass`（在 `:class` 数组中加入 `$attrs.option?.dialogCustomClass`），使 `temporary-credit-limit-dialog` 类能作用到详情弹窗。
|
||
- 在 `temporary-credit-limit.vue` 全局 `<style>` 中新增 `.temporary-credit-limit-dialog .business-crud-page__detail-content .el-descriptions__label { width: 180px !important; }`，只对该页详情 label 加宽，让 15 字 label 自然折成两行。
|
||
- 改动文件：`src/views/business/components/business-crud-page.vue`、`src/views/business/temporary-credit-limit.vue`。
|
||
- 结论：仅临时额度管理详情弹窗的 label 列宽加宽到 180px，其它页面详情弹窗保持 140px 不变。
|
||
|
||
## 年检记录费用字段单位放 label
|
||
- 需求：用户截图反馈 `annual-inspection-record` 新增弹窗中"费用"输入框右侧带"元" suffix，要求把"元"放到 label 后并用括号括起，即"费用（元）"，保持风格一致。
|
||
- 改动文件：
|
||
- `src/option/vehicle/annual-inspection-record.js`：`label` 由 "费用" 改为 "费用（元）"；移除 `append: '元'`（因表单走自定义 slot，该属性本不生效，但清理避免歧义）。
|
||
- `src/views/vehicle/annual-inspection-record.vue`：自定义 `#feeForm` 的 `<el-input>` 移除 `<template #append>元</template>`。
|
||
- 结论：新增/编辑弹窗中费用字段 label 显示为"费用（元）"，输入框不再带右侧"元" suffix。
|
||
|
||
## 维修记录里程字段单位放 label（动态单位）
|
||
- 需求：用户要求 `maintenance-record` 把里程输入框右侧"公里" suffix 移到 label 后括起来，风格与"费用（元）"一致。
|
||
- 差异：该字段有单位切换（车辆→公里，船舶→海里），故 label 需动态。
|
||
- 改动文件：`src/views/vehicle/maintenance-record.vue`（option 内联在 data 中，无独立 option 文件）：
|
||
- 默认 `label` 由 "里程/航程数" 改为 "里程/航程数（公里）"。
|
||
- `updateVehicleType()` 中原 `mileageColumn.append = mileageUnit;` 改为 `mileageColumn.label = \`里程/航程数（${mileageUnit}）\``，跟随车船类型动态切换标签（车辆→公里 / 船舶→海里）。
|
||
- 自定义 `#mileageForm` 的 `<el-input>` 移除 `<template #append>{{ form.mileageUnit || '公里' }}</template>`。
|
||
- 结论：表单/列头 label 随车船类型显示"里程/航程数（公里）"或"里程/航程数（海里）"，输入框不再带单位 suffix；列表数据值仍由 `#mileage` slot 的 `formatMileage()` 带单位显示（如"100 公里"），未改动。
|
||
|
||
## 全站 Avue CRUD 弹窗标题加页面全称
|
||
- 需求：新增/编辑/查看弹窗标题统一加全名称，如"新增空港机场主数据"（原只显示"新增"/"编辑"/"查看"）。
|
||
- 根因：Avue 弹窗标题默认走 i18n 的 addTitle/editTitle/viewTitle，全站页面均未配置，故只有动作词。
|
||
- 实现：新增全局 mixin `src/utils/crud-dialog-title.js` 的 `setupCrudDialogTitle(app)`，在 `main.js` 中 `app.mount` 前调用注册；组件 `created` 时自动给含 `column` 数组的 `this.option` 注入 `addTitle/editTitle/viewTitle = 新增/编辑/查看 + 页面菜单中文标题`（来源 `this.$router.$avueRouter.generateTitle(this.$route,{label:'name'})`）；页面可手动配置这三个字段覆盖，或定义 `getCrudPageTitle()` 自定义来源；已配置则不覆盖。
|
||
- 影响范围：全站约 80 个 avue-crud 页面自动生效；手写 el-dialog / PageAvueForm 独立表单页不受影响。
|
||
- 校验：dev 服务器 localhost:2889 正常（200）。HMR 热更新生效，无需重启。
|
||
|
||
## 合同管理独立表单页标题补漏
|
||
- 需求：用户反馈 `business/contract-manage/form` 独立表单页顶部没有像 `project-apply/form` 一样的"新增合同管理"标题。
|
||
- 根因：contract-manage 是手写表单页（非 business-crud-page），页面内已有 `formPageTitle` computed（取 `query.name` 或默认"新增/编辑合同管理"），但模板里未渲染。
|
||
- 修复：在 `src/views/business/contract-manage.vue` 的表单页 `<template v-else>` 中、`<el-form>` 前加入 `<div class="archive-page-form__title">{{ formPageTitle }}</div>`，复用全局 `archive-page-form__title` 样式。
|
||
- 结论：contract-manage/form 现在顶部显示"新增合同管理"/"编辑合同管理"，与 project-apply 风格一致。
|
||
|
||
## formal-settlement 表格包进应付/应收 tabs
|
||
- 需求：结算-正式结算页（/settlement/formal-settlement）表格要包进"应付/应收"两个 tab 内（原 el-tabs 的 pane 是空壳，表格在 el-tabs 外作为兄弟节点）。
|
||
- 实现：复用已有组件 `src/views/settlement/components/formal-settlement-table-panel.vue`（工具栏+表格+分页一体，通过 emit 事件与父通信），分别挂入"应付""应收"两个 `el-tab-pane` 内，共享父级 `rows/columns/loading/page/hasPermissionFn`，事件回连：@create→openCreate、@payment→openPaymentDialog、@sync→handleSync、@export→handleExport、@refresh→loadTable、@page-change→onPageChange、@action→onAction（分发 view/edit/delete/submit/approve/return/void/print）、@update:selection→selection 同步。切 tab 仍走 `handleSettlementTypeChange` 重载数据。
|
||
- 配套改动：父页 `:has-permission` 传 `hasPermissionFn`（computed 返回箭头函数，避免方法作 prop 时 this 丢失导致权限恒为 true）；`handlePrint(row)` 增加可选 row 入参；移除父页内联表格及对应 scoped 样式（.formal-page__toolbar/links/pagination）；组件操作列 width 120→320（符合 AGENTS.md >3 按钮规范）。
|
||
- 校验：@vue/compiler-sfc parse/compileTemplate 0 错误、esbuild 脚本语法 OK；`pnpm build` 因沙箱保护 dist/ 被拦截（非代码问题）。仅改 formal-settlement.vue 一个页面文件 + 组件 width。
|