1625fb292d
- 全站业务状态标签文字化,el-tag.status-text 转为纯文本,统一字号、行高和基线对齐 - 临时额度详情弹窗加宽 label 列宽至 180px,避免标签折成三行 - 年检记录费用字段将单位“元”移至标签内,清理无效 append 配置和 template 代码 - 维修记录里程字段单位动态显示于标签,移除输入框右侧单位后缀 - 全站 Avue CRUD 弹窗标题自动添加页面全称,支持手动覆盖和自定义 - 合同管理独立表单页顶部补充“新增合同管理”标题,统一与其它表单页面样式 - 结算-正式结算页表格整合到“应付/应收”两个标签页内,复用组件并调整操作列宽度至320px - 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配 - 取消部分页面样式中冗余或注释代码,调整组件内按钮布局和权限判断函数逻辑 - 新增全局 mixin 以设置 CRUD 弹窗标题,主入口 main.js 注册相关初始化函数
13 KiB
13 KiB
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-application、invoice-receipt、receipt-claim-record、receipt-flow 的
- 结论:全 /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;列表数据值仍由
#mileageslot 的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),页面内已有
formPageTitlecomputed(取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。