2fae0772fe
- contract-manage 页面到期筛选标签由靠左改为靠右对齐,满足用户需求 - 修改 .business-crud-page__contract-expiry-search 样式,移除 order 并应用 margin-left: auto - 增加 waybill-summary-grid 网格最后一列宽度,提升布局视觉效果 - transportCapacity 下 transport-ship 和 transport-vehicle 配置中调整 searchIndex 值以优化搜索栏顺序 - 确认 vite build 全量编译通过,无新增构建错误或警告
6.8 KiB
6.8 KiB
2026-08-14 工作记录
temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行
- 需求:用户反馈
/business/temporary-credit-limit新增弹窗中 label「已使用项目资金使用额度(万元)」过宽(227px),希望超过 6 个汉字就换行。 - 宽度来源:
src/option/business/common.js的createCrudOption中labelWidth: 'auto';- Avue 会按当前弹窗内最长 label 自动计算宽度,故出现 227px。
src/styles/element-ui.scss第 164 行.el-dialog .el-form-item__label { white-space: nowrap }阻止换行。
- 改动:
src/option/business/temporary-credit-limit.js:option 增加dialogCustomClass: 'temporary-credit-limit-dialog'。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 自动换行。- 同时给
.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.js中searchIndex: 4,默认只展示前 4 个搜索条件,而expireStatus的searchOrder: 0(Avue 越大越靠前)排在第 6 位,因此被折叠到第二行。 - 改动:
src/option/transportCapacity/transport-ship.js:searchIndex: 4 → 6,让全部 6 个搜索条件默认展开,标签无需再点展开即可看到。- 由于
expireStatus排在最后,展开后它自然位于第二行末尾、搜索按钮之前,满足"移到搜索按钮前面"的要求。
transportCapacity/vehicle 与 ship 到期筛选标签重构(对齐 driver 的 #search-menu 方案)
- 需求:用户希望
/transportCapacity/vehicle和/transportCapacity/ship的「全部/30天内到期/已到期」标签与 driver 页一致:① 不展开就直接显示;② 移到搜索按钮前面并保留间距。 - 关键差异(排查发现):driver 用
#search-menu插槽把标签渲染在按钮所在行;而 vehicle/ship 之前用#expireStatus-search列插槽,标签被渲染进搜索条件网格(位置不对)。 - 改动(两页同样处理):
.vue:<template #expireStatus-search>→<template #search-menu>,标签 div 内容不变。.vue样式__expiry-tags:去掉width: 100%,改为order: -1; margin-right: 12px; min-width: 0;(与 driver 完全一致,使标签左移并落在搜索按钮前)。- option:将
expireStatus列的search: true → search: false(否则会在搜索网格里多渲染一个空输入框);searchIndex设为 ≥ 真实搜索列数(vehicle:4 → 6;ship 已是6),使columnLen ≤ searchIndex,Avue 不再显示「展开」按钮。
- 原理: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-crud 的
- 脚本改动(本次完成):删除 Avue 生命周期方法
beforeOpen/rowSave/rowUpdate/submitRow/stopSubmitLoading/handleProcessConfigSave;新增openProcessConfig(row, readonly)(load 详情后this.form=data+selectedProjectId+parseNodeConfig+ 开框;新增则清空表单 +resetNodeRows)、submitProcessConfig(mode)(this.$refs.processForm.validate→syncNodeFields→normalizeRow→validateRow→confirmDuplicateVoucher→api.submit,成功后关框并刷新)、resetProcess()(@closed重置dialogReadonly/submitting/submitStatus/form/selectedProjectId+resetNodeRows+clearValidate)。data()已含processBox/submitting、computed.dialogTitle;rowDel/handleCopy/handleAction不变(独立 API 调用)。 - option 改动(已完成):
src/option/business/process-config.js置saveBtn/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全量编译通过。