Files
tms-erp-web/.workbuddy/memory/2026-08-14.md
T
gxwebsoft 2fae0772fe style(business-crud-page): 调整到期筛选标签对齐和优化网格列宽
- contract-manage 页面到期筛选标签由靠左改为靠右对齐,满足用户需求
- 修改 .business-crud-page__contract-expiry-search 样式,移除 order 并应用 margin-left: auto
- 增加 waybill-summary-grid 网格最后一列宽度,提升布局视觉效果
- transportCapacity 下 transport-ship 和 transport-vehicle 配置中调整 searchIndex 值以优化搜索栏顺序
- 确认 vite build 全量编译通过,无新增构建错误或警告
2026-08-14 12:10:16 +08:00

6.8 KiB
Raw Blame History

2026-08-14 工作记录

temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行

  • 需求:用户反馈 /business/temporary-credit-limit 新增弹窗中 label「已使用项目资金使用额度(万元)」过宽(227px),希望超过 6 个汉字就换行。
  • 宽度来源:
    • src/option/business/common.jscreateCrudOptionlabelWidth: 'auto'
    • Avue 会按当前弹窗内最长 label 自动计算宽度,故出现 227px。
    • src/styles/element-ui.scss 第 164 行 .el-dialog .el-form-item__label { white-space: nowrap } 阻止换行。
  • 改动:
    1. src/option/business/temporary-credit-limit.jsoption 增加 dialogCustomClass: 'temporary-credit-limit-dialog'
    2. src/styles/element-ui.scss:新增 .temporary-credit-limit-dialog .el-form-item__label 规则,固定宽度 calc(6em + 24px),并设置 white-space: normal; word-break: break-all; overflow-wrap: anywhere; line-height: 18px,实现超长 label 自动换行。
    3. 同时给 .temporary-credit-limit-dialog .el-form-item { align-items: center; } 保持垂直居中。
  • 参考:同文件已有 .avue-dialog--common-route 使用相同 6em label 宽度方案。

transportCapacity/ship 到期筛选标签默认展开并靠前

  • 需求:用户反馈 /transportCapacity/ship 页面搜索栏的「全部/30天内到期/已到期」标签需要点击「展开」后才显示,希望默认直接显示;且位置要位于搜索按钮前面。
  • 原因:src/option/transportCapacity/transport-ship.jssearchIndex: 4,默认只展示前 4 个搜索条件,而 expireStatussearchOrder: 0(Avue 越大越靠前)排在第 6 位,因此被折叠到第二行。
  • 改动:
    • src/option/transportCapacity/transport-ship.jssearchIndex: 4 → 6,让全部 6 个搜索条件默认展开,标签无需再点展开即可看到。
    • 由于 expireStatus 排在最后,展开后它自然位于第二行末尾、搜索按钮之前,满足"移到搜索按钮前面"的要求。

transportCapacity/vehicle 与 ship 到期筛选标签重构(对齐 driver 的 #search-menu 方案)

  • 需求:用户希望 /transportCapacity/vehicle/transportCapacity/ship 的「全部/30天内到期/已到期」标签与 driver 页一致:① 不展开就直接显示;② 移到搜索按钮前面并保留间距。
  • 关键差异(排查发现):driver 用 #search-menu 插槽把标签渲染在按钮所在行;而 vehicle/ship 之前用 #expireStatus-search 列插槽,标签被渲染进搜索条件网格(位置不对)。
  • 改动(两页同样处理):
    1. .vue<template #expireStatus-search><template #search-menu>,标签 div 内容不变。
    2. .vue 样式 __expiry-tags:去掉 width: 100%,改为 order: -1; margin-right: 12px; min-width: 0;(与 driver 完全一致,使标签左移并落在搜索按钮前)。
    3. option:将 expireStatus 列的 search: true → search: false(否则会在搜索网格里多渲染一个空输入框);searchIndex 设为 ≥ 真实搜索列数(vehicle: 4 → 6ship 已是 6),使 columnLen ≤ searchIndexAvue 不再显示「展开」按钮。
  • 原理:Avue header-search3.js#search-menu 插槽内容渲染进 menu-form,位于默认搜索/重置按钮之后、展开按钮之前;order: -1 将标签推到按钮左侧。
  • 验证:node --check 两个 option 文件通过;页面刷新即可见效果。

process-config.vue 弹窗重构为手写 el-dialog(对齐 customer-archive 风格)

  • 需求:用户要求 /business/process-config.vue 排版风格改成和 /vehicle/customer-archive.vue 一样,保持风格统一。
  • 根因:两页弹窗架构根本不同——customer-archive 用手写 <el-dialog> + section-card 分组 + #footer 按钮;process-config 原用 Avue 内置弹窗(#basicInfo-form/#nodeConfigJson-form 插槽 + #menu-form-before 保存按钮)。要真正统一,只能把 process-config 改成手写弹窗。
  • 模板改动(已完成):
    • 移除 avue-crud 的 :before-open/@row-save/@row-update/@row-del#menu-form-before#basicInfo-form#nodeConfigJson-form 插槽。
    • </avue-crud> 后新增手写 <el-dialog class="process-dialog" v-model="processBox" width="92%" top="4vh" append-to-body @closed="resetProcess">,内部 <el-form ref="processForm" :model="form" label-width="calc(6em + 24px)" :disabled="dialogReadonly" class="process-form dialog-form-label-fixed">,含 3 个 section-card:基本信息 / 现行过程节点(时间线)/ 节点设置(节点表格);#footer 含 保存草稿(plain) + 保存并启用(primary) + 取消/关闭。
    • 顶部「新建过程配置」、表格「查看/编辑」链接改调 openProcessConfig() / openProcessConfig(row, true) / openProcessConfig(row, false)
  • 脚本改动(本次完成):删除 Avue 生命周期方法 beforeOpen/rowSave/rowUpdate/submitRow/stopSubmitLoading/handleProcessConfigSave;新增 openProcessConfig(row, readonly)load 详情后 this.form=data + selectedProjectId + parseNodeConfig + 开框;新增则清空表单 + resetNodeRows)、submitProcessConfig(mode)this.$refs.processForm.validatesyncNodeFieldsnormalizeRowvalidateRowconfirmDuplicateVoucherapi.submit,成功后关框并刷新)、resetProcess()@closed 重置 dialogReadonly/submitting/submitStatus/form/selectedProjectId + resetNodeRows + clearValidate)。data() 已含 processBox/submittingcomputed.dialogTitlerowDel/handleCopy/handleAction 不变(独立 API 调用)。
  • option 改动(已完成):src/option/business/process-config.jssaveBtn/updateBtn/addBtn/viewBtn/editBtn/delBtn:false,关闭 Avue 内置弹窗按钮。
  • 样式:新增 :deep(.process-dialog .el-dialog__body){max-height:72vh;overflow:auto},对齐 customer-archive 的 .archive-dialog 滚动行为(长内容时 body 滚动、footer 固定)。
  • 验证:vite build --outDir /tmp/pc-build-check 全量编译通过(仅动态导入 chunk 警告,与本改动无关);之前 npm run build 失败仅因沙箱 safe-delete 守卫清理旧 dist/ 触发,非代码错误。

contract-manage 到期筛选标签靠右对齐

  • 需求:用户截图反馈 /business/contract-manage 搜索栏中「全部/30天内到期/90天内到期/90天以上/已到期」标签需要靠右对齐。
  • 改动:src/views/business/components/business-crud-page.vue.business-crud-page__contract-expiry-search 样式由 order: -1; margin-right: auto 改为 margin-left: auto。这样该 slot 内容会被推到 #search-menu 行的右侧,搜索/重置按钮留在左侧,与 vehicle/ship 的左侧标签方案相反,符合用户本次要求。
  • 验证:vite build --outDir /tmp/pc-build-check-2 全量编译通过。