fix(styles): 优化多页面表单及弹窗样式统一性和功能

- 全站业务状态标签文字化,el-tag.status-text 转为纯文本,统一字号、行高和基线对齐
- 临时额度详情弹窗加宽 label 列宽至 180px,避免标签折成三行
- 年检记录费用字段将单位“元”移至标签内,清理无效 append 配置和 template 代码
- 维修记录里程字段单位动态显示于标签,移除输入框右侧单位后缀
- 全站 Avue CRUD 弹窗标题自动添加页面全称,支持手动覆盖和自定义
- 合同管理独立表单页顶部补充“新增合同管理”标题,统一与其它表单页面样式
- 结算-正式结算页表格整合到“应付/应收”两个标签页内,复用组件并调整操作列宽度至320px
- 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配
- 取消部分页面样式中冗余或注释代码,调整组件内按钮布局和权限判断函数逻辑
- 新增全局 mixin 以设置 CRUD 弹窗标题,主入口 main.js 注册相关初始化函数
This commit is contained in:
2026-08-25 15:18:44 +08:00
parent 2bd9d8c047
commit 1625fb292d
16 changed files with 234 additions and 267 deletions
+44
View File
@@ -38,3 +38,47 @@
- 根因:用户截图反馈 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。