b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
3cb365253b8208a55ae60fd537acf25cf6845497
tms-erp-web/.workbuddy/memory/2026-08-25.md
T
gxwebsoft 3cb365253b style(attachment): 统一附件上传按钮位置及样式及提示文案格式 
- 将站点所有附件上传按钮移至表格下方左侧，与批量下载按钮分开，布局统一
- 统一附件上传按钮旁提示文案格式，改为同一行按钮右侧显示，间距固定30px，文本左对齐
- 统一附件上传支持文件格式说明为“支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过500M”
- 统一单个附件文件大小限制改为500M，涉及多页面文件修改
- 恢复vehicle-attachment-upload组件showTip属性门控，支持按需隐藏提示
- 修复master-order编辑页附件上传按钮与描述文字排列，改为单行且按钮左侧描述右侧排列
- 优化customer-archive客商材料上传按钮及提示的布局，按钮左、提示右，间距30px，超长文案省略
- 调整部分页面缩进与标签样式，提升视觉一致性
- 修改部分组件及页面的css样式，适配上述布局与样式调整
2026-08-25 18:43:25 +08:00

136 lines
21 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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。
## 临时额度管理附件上传按钮移至表格左下角
- 需求：用户截图反馈 `business/temporary-credit-limit` 新增弹窗中「上传附件」按钮在表格上方，要求统一放到附件表格左下角，与 project-apply 的项目材料交互一致。
- 改动文件：`src/views/business/temporary-credit-limit.vue`：
- 模板：将 `vehicle-attachment-upload` 从 `temporary-credit-limit-page__attachment-head` 移除，放到 `el-table` 之后的新增 `temporary-credit-limit-page__attachment-upload` 容器内；head 内只保留「批量下载」按钮。
- 样式：`&__attachment-head` 的 `justify-content` 由 `space-between` 改为 `flex-end`；新增 `&__attachment-upload` 样式，左对齐并控制上传组件宽度自适应。
- 结论：临时额度管理附件区域现与合同管理、项目材料保持一致：批量下载在表格上方右侧，上传附件在表格下方左侧。
## 项目材料上传提示文字移到按钮右侧
- 需求：用户要求 project-apply/form「上传附件」按钮支持指定格式（pdf/bmp/jpeg/png/jpg/doc/docx/ppt/pptx/xlsx/xls/eml/msg/zip）、单文件 50M，并把提示文字放到按钮后面（右侧同一行）。
- 现状：project-apply.vue 第 537-540 行早已配置 `:file-types`、`:max-size="50"` 与完整 `tip` 文案，但 vehicle-attachment-upload 组件默认把提示渲染在按钮下方。
- 修复：仅改 `&__upload` 样式，用 `:deep` 把 `.vehicle-attachment-upload` 设为 `display:flex; align-items:center`，并把 `.el-upload__tip` 由默认块级（下方）改为 `display:inline-block; margin-left:12px`，使格式/大小提示与按钮同一行、位于按钮右侧。
- 结论：project-apply 附件提示现为"上传附件按钮 + 右侧灰色提示文字"，未改动组件逻辑与其它页面。
## 附件格式说明三页统一（按钮右侧 30px / 500M）
- 需求：用户要求「支持pdf、bmp、…、zip，单个文件不超过500M」这段说明在 project-apply / temporary-credit-limit / contract-manage 三处附件上传区统一摆放：放到「上传附件」按钮右侧、间距 30px、文字左对齐；文件限制上限由 50M 改为 500M（说明与校验一致）。
- 实现（三页一致）：
- 统一 `tip` 文案：`支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过500M`。
- `:max-size`（contract-manage 为 `maxSize`）统一 500；project-apply / temporary-credit-limit 由 50→500。
- 样式：用 `:deep` 把 `.vehicle-attachment-upload` 设为 `display:flex;align-items:center`，`.el-upload__tip` 改 `display:inline-block;margin-left:30px;color:#909399;font-size:13px;text-align:left`，使说明在按钮右侧 30px、左对齐。
- contract-manage 的 AttachmentSection render 把上传按钮从表格上方 head 移到表格下方左侧（`.contract-manage-form__attachment-upload`），head 仅保留「批量下载」；同步删除失效的 `__attachment-actions` 死样式，新增 `__attachment-upload` 样式。至此三页上传按钮均位于附件表格左下角、说明在按钮右侧。
- 校验：@vue/compiler-sfc 对三文件 parse/compileScript/compileTemplate 均 OK；dev localhost:2889 HMR 已生效。
## 全站附件上传统一（vehicle-attachment-upload 组件级单一事实来源）
- 需求：把"上传附件按钮在附件表格左下角 + 按钮右侧 30px 左对齐统一说明 + 单文件 500M"方案应用到整个站点，统一风格。
- 核心做法（改 1 个组件即全站生效）：`src/components/vehicle-attachment-upload/main.vue`
- 新增常量 `UNIFIED_ATTACHMENT_TIP = '支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过500M'`；`tipText` 改为 `this.tip || UNIFIED_ATTACHMENT_TIP`（不再按 acceptText 拼装）。
- `maxSize` 默认值 `0` → `500`（说明与校验一致）。
- 模板 `v-if="showTip && ..."` 去掉 `showTip` 门控 → `v-if="tipText && !readonly"`，全站始终显示统一说明（原 `:show-tip="false"` 变为无害 no-op，未逐一清理）。
- SCSS 新增 `.vehicle-attachment-upload :deep(.el-upload){display:flex;align-items:center}` 与 `:deep(.el-upload__tip){display:inline-block;margin:0 0 0 30px;color:#909399;font-size:13px;text-align:left}`，按钮与说明内联、说明在按钮右侧 30px 左对齐。
- 表格型附件区布局对齐（上传移表格下方左侧，批量下载留表头右侧）：business-crud-page.vue（2 处 attachmentsJson-form / 派车明细附件）、contract-manage-change.vue、pre-settlement-editor.vue、master-order-editor.vue、payment-application-form.vue、invoice-application-form.vue；各页新增 `__attachment-upload` 左对齐样式、`__attachment-head` 改 `justify-content:flex-end`。
- 大小异常值修正：bill-ledger-form / bill-payment-form 的 `:max-size="10"` → 500；invoice-application-form `:max-size="50"` → 500（同时把上传从表格上方移到下方）。
- 已是下方布局无需移动（仅随组件生效）：invoice-receipt / receipt-claim-record / receipt-flow / bill-ledger / bill-payment / formal-settlement-editor（独立上传无表格）/ 各 vehicle 页（独立上传无表格）。
- 校验：@vue/compiler-sfc 对 12 个改动文件（组件 + 上述各页 + 此前已改的 project-apply/temporary-credit-limit/contract-manage）全部编译通过；grep 确认全站无残留非 500M 的附件 max-size。
## master-order 附件上传"按钮 + 描述"由两行改一行
- 需求：用户截图 `/business/master-order?mode=editor` 详情附件区，"上传附件"按钮与"支持pdf…"描述文字分别居中、各占一行，要求并到同一行（与 vehicle-attachment-upload 组件默认样式一致）。
- 根因：`master-order-editor.vue` 第 1814-1824 行 scoped CSS 把 `.master-editor__attachment-upload .el-upload` 强制 `display: inline-flex` 但未显式 `flex-wrap/align-items/text-align`；而 Element Plus 全局 `.el-upload` 默认 `text-align: center`，加 inline-flex 子元素被 EP 默认行为按各自一行居中显示。
- 修复：在 `.master-editor__attachment-upload` 内用 `:deep(.el-upload)` 显式声明 `display: inline-flex; align-items: center; flex-wrap: nowrap; text-align: left`，并 `:deep(.el-upload__tip)` 改 `display: inline-block; margin: 0 0 0 8px; color:#909399; font-size:13px; line-height:1.4; white-space:normal; text-align:left`，让按钮与说明内联排成一行。
- 结论：master-order 附件区与 project-apply/temporary-credit-limit/contract-manage 风格一致（按钮左 + 描述贴右侧）。
## vehicle-attachment-upload 恢复 showTip 门控
- 根因：用户截图 feedback `customer-archive/form` 的「OCR上传识别」按钮下方仍显示统一附件说明，要求「OCR上传识别这里不用加描述」。该组件虽有 `showTip` prop，但此前「全站附件上传统一」时把模板门控 `v-if="showTip && tipText && !readonly"` 简化成了 `v-if="tipText && !readonly"`，导致 `:show-tip="false"` 失效。
- 修复：恢复 `src/components/vehicle-attachment-upload/main.vue` 第 24 行的 `showTip &&` 条件，使 `:show-tip="false"` 可正常隐藏按钮旁说明；`customer-archive.vue` 中 OCR 上传实例已配置 `:show-tip="false"`，无需额外改动。
- 影响：所有 `:show-tip="false"` 的调用点（annual-inspection/maintenance/accident/violation/tire/customer-archive 等）现在会按预期隐藏提示；未配置 `show-tip` 或 `:show-tip="true"` 的实例继续显示 `UNIFIED_ATTACHMENT_TIP`。
## customer-archive 客商材料上传按钮左、描述右、间距 30px
- 需求：用户第三轮明确「客商材料」表格下"上传附件"按钮与「支持pdf…」描述需并排、按钮左、描述右、间距严格 30px。
- 定位：`src/views/vehicle/customer-archive.vue` 第 4637-4666 行 `.qualification-upload-bar`（grid 1fr auto 1fr 改 flex 的二次修正）。
- 修复：保留 flex 容器，按钮区 `.vehicle-attachment-upload > :deep(.el-upload)` `flex: 0 0 auto` 贴左固定；描述 `:deep(.el-upload__tip)` `margin-left: 30px + white-space: nowrap + overflow:hidden + text-overflow:ellipsis + text-align:left`，与按钮同行紧贴、间距固定 30px、超长文案省略号。
- 结论：布局"「上传附件」按钮 ←30px→ 「支持pdf…」描述"，单行两端对齐。
Reference in New Issue View Git Blame Copy Permalink