f21e3d56d9
- 新增 menuPaths 计算属性,递归收集全站菜单路径 - 修改 activeMenu 逻辑,针对无匹配菜单路径尝试最长前缀匹配 - 解决子路由菜单高亮消失问题,支持全站多场景适用 - 优化 master-order-dispatch 页面 select 宽度,防止 append 区域撑爆 - 修正运输单位 select 固定宽度为 92px,并防止被父容器拉伸 - 调整 business-crud-page 任务备注和附加选择器宽度及样式 - 减少 process-config 备注输入区域行数,提升界面紧凑度
153 lines
24 KiB
Markdown
153 lines
24 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。
|
||
|
||
## 临时额度管理附件上传按钮移至表格左下角
|
||
- 需求:用户截图反馈 `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…」描述",单行两端对齐。
|
||
|
||
## sidebar 子路由高亮回退(方案B)
|
||
- 需求:用户反馈点「客商档案」菜单后,再点新增/编辑/查看(跳子路由 /vehicle/customer-archive/form),左侧菜单选中灰底消失。
|
||
- 根因:sidebar `activeMenu` getter 在无 `meta.activeMenu` 时退到 `route.path`(即子路由 /vehicle/customer-archive/form),与菜单 path /vehicle/customer-archive 不匹配,`<el-menu :default-active>` 找不到项 → 高亮丢失。同因还影响 /business/contract-manage/change 等独立子路由。
|
||
- 修复(方案B,通用兜底,改 1 文件):`src/page/index/sidebar/index.vue`
|
||
- 新增 `menuPaths` computed:递归收集全站菜单 `website.menu` 的 `path` 字段进 Set。
|
||
- `activeMenu` 在 `return path` 前加分支:当 `path` 不在 menuPaths 时,过滤出所有 `path.startsWith(p + '/')` 的菜单路径,按长度降序取最长前缀匹配者作为高亮项(即 /vehicle/customer-archive/form → /vehicle/customer-archive)。
|
||
- 原有 `meta.activeMenu` 与 `menuIndexes`(带参菜单精确匹配)分支保持不变;路径完全相同的路由仍精确匹配,不受影响。
|
||
- 结论:一次改动全站受益,所有"父菜单 + 独立子表单页"场景(customer-archive/form、contract-manage/change 等)自动保持父菜单高亮,无需逐路由配 activeMenu。HMR 已生效。
|
||
|
||
## master-order-dispatch 运费单位 select 撑爆 append 槽
|
||
- 需求:用户截图 dispatch 页"任务信息"块下"数量 → 吨"与"单价 → 元/吨"两个 select 宽度比左侧 input 还宽,红框标记要求改小。
|
||
- 根因:`src/views/business/components/master-order-dispatch.vue` 第 702 行 `.dispatch-form` 全局规则 `:deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; }` 把整个 dispatch 表单内**所有** el-select 强制 100% 宽;这两个 select 处于 `el-input` 的 `#append` slot 内,被强制撑开 append 容器,append 又把整个 `el-col :span="6"` 列占满。第 707 行 `.freight-form { :deep(.freight-unit-select) { width: 92px; } }` 想兜底 92px,但因 specificity 与覆盖时机问题未生效。
|
||
- 修复(最小改动,2 处):
|
||
- 行 702 末尾追加 `:deep(.el-input-group__append .el-select) { width: auto; }`,使 append 内的 select 退回内容自适应宽度(避免被 100% 拉伸)。
|
||
- 行 707 强化兜底:`.freight-unit-select` 加 `flex: 0 0 92px; min-width: 0;`,固定 92px 防止 append flex 拉伸。
|
||
- 结论:单位 select(吨/元/吨)宽度由内容决定(≈92px),不再撑爆 append 与列;其它顶层 select(承运商/币种等)仍维持 100% 宽,行为不变。
|