- 所有含时间的列表列(创建时间、更新时间、起止日期等)均增加排序功能,兼顾Avue option和手写el-table-column - 司机管理「姓名身份证号」列拆分为独立的「姓名」「身份证号」两列,分别使用插槽渲染 - 修复车辆/船舶/司机管理「所属组织」列前导空格问题,value 使用无缩进原始标签 - 调整司机管理页到期筛选标签位置,移至搜索菜单行并优化样式,删除过渡占位筛选字段 - 增加组织名称列自定义插槽,去除已入库旧数据的前导空白 - 更新相关样式,删除无用样式代码,增加表格列排序样式支持
18 KiB
18 KiB
2026-08-07 工作日志
修复车辆/船舶/司机管理「所属组织」列前导空格
- 症状:车辆管理列表截图中「所属组织」列值左侧有明显缩进空格。
- 根因:组织下拉选项构建时把带层级缩进(全角空格
' '.repeat(level))的字符串同时作为label和value,保存到后端后表格直接回显该值,导致前导空格。 - 改动:
src/views/transportCapacity/vehicle.vue、ship.vue、driver.vueflattenDeptOptions/formatDeptOptions:value改为无缩进的rawLabel,label仍保留缩进用于下拉层级展示。- 表格增加
#organizationName插槽,对row.organizationName去除前导半角/全角空白,兼容已入库的旧数据。
src/option/transportCapacity/transport-vehicle.js、transport-ship.js、driver.js- 「所属组织」列增加
slot: true,使自定义插槽生效。
- 「所属组织」列增加
- 验证:通过
git diff确认 6 个文件改动正确。
调整司机管理到期筛选标签位置
- 需求:截图反馈司机管理页「全部 / 30天内到期 / 已到期」三个筛选标签放在搜索表单右侧,占位突兀,希望与搜索/重置按钮同排或放到更合适位置。
- 方案:参考
business-crud-page.vue的#search-menu插槽,把筛选标签移到搜索菜单行(搜索/重置按钮同一排),标签居左、按钮居右。 - 改动:
src/views/transportCapacity/driver.vue#expireStatus-search插槽改为#search-menu插槽。.driver-page__expiry-tags增加order: -1、margin-right: auto、min-width: 0,移除width: 100%和不再需要的响应式媒体查询。
src/option/transportCapacity/driver.js- 删除仅作为占位用的
expireStatus隐藏搜索字段(search: true、searchSpan: 6等)。
- 删除仅作为占位用的
- 说明:筛选逻辑仍通过
query.expireStatus+handleExpireChange工作,不受字段删除影响;车辆/船舶管理页有相同布局,如需统一可复用该改法。 - 验证:通过
git diff确认改动正确。
运输计划调度弹窗恢复左右分栏布局
- 需求:客户提供「计划详情」参考截图,要求调度弹窗改回「左侧基本信息卡 + 右侧收发货路线卡」的左右分栏布局。
- 改动:
src/views/business/components/business-crud-page.vue- 模板:把基本信息与收发货路线重新包进
business-crud-page__dispatch-summary双列容器;左侧section-card内恢复 3 列网格(客户/项目/合同编号),货物信息占 2 列、计划执行时间占 1 列、附件独占一行;右侧section-card内恢复左右排列的起点/终点(徽章+名称+地址+联系人),中间用方向虚线连接。 - 样式:
- 外容器恢复
grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr),gap 16px,卡片等高拉伸。 - 基本信息网格恢复 3 列,列间距 16px、行间距 12px。
- 路线区恢复
grid-template-columns: 1fr 56px 1fr,徽章 32px,标题 16px,地址/联系人 13px,连接线 56px。 - 保留紧凑化后的字号/间距(标签 12px、值 14px),避免回到原先过松的状态。
- 外容器恢复
- 模板:把基本信息与收发货路线重新包进
- 验证:
npm run build成功。
运输计划调度弹窗基本信息改为 2 列
- 需求:客户截图反馈左侧「基本信息」还嫌松,要求改为 2 列更紧凑。
- 改动:
src/views/business/components/business-crud-page.vue- 模板:调整基本信息字段顺序为 客户/项目、合同编号/计划执行时间、货物信息(占满 2 列)、附件(占满 2 列)。
- 样式:
business-crud-page__dispatch-summary-grid从repeat(3, minmax(0, 1fr))改为repeat(2, minmax(0, 1fr)),保持 gap 12px 16px。
- 验证:
npm run build成功。
运输计划调度弹窗路线连接改为车辆图标
- 需求:客户希望把收发货路线中间的方向虚线换成车辆图标。
- 改动:
src/views/business/components/business-crud-page.vue- 模板:把
<div class="business-crud-page__dispatch-route-line" />替换为<div class="business-crud-page__dispatch-route-vehicle"><el-icon><Van /></el-icon></div>。 - 样式:删除原
&__dispatch-route-line虚线箭头样式,新增&__dispatch-route-vehicle,使用主色圆形背景、白色Van图标,尺寸 36×36px,居中与路线节点对齐。
- 模板:把
- 验证:
npm run build成功。
运输计划调度弹窗收发货路线视觉美化
- 需求:客户反馈右上角「收发货路线」卡片仍不够美观,要求继续优化。
- 改动:
src/views/business/components/business-crud-page.vue- 样式:
- 路线容器去掉
padding-top,改为align-items: center垂直居中。 - 起点/终点 item 改为
align-items: center,徽章从方角改为圆形,并加轻微阴影。 - 车辆图标改为白底 + 主色边框 + 主色
Van图标,尺寸加大到 44×44px,两侧各延伸 20px 虚线,形成「路线」流动感。 - 城市名称限制单行并溢出省略,地址/联系人间距收紧、颜色变淡。
- 路线容器去掉
- 样式:
- 验证:
npm run build成功。
通知公告 /desk/notice 操作列加宽
- 需求:客户截图反馈操作列中「查看、编辑、删除」三个文字链接被挤成两行,要求加宽。
- 改动:
src/views/desk/notice.vue- 在 Avue CRUD option 中新增
menuWidth: 220,使操作列可在一行容纳三个操作链接;符合项目样式规范「三个操作按钮时宽度不小于 220px」。
- 在 Avue CRUD option 中新增
全仓表格操作列宽度统一(≤3 按钮统一 180)
- 需求:客户提供新截图,要求所有操作按钮 ≤3 个的表格操作列统一宽度为 180;>3 个按钮保持 320。
- 核心改动:
src/utils/table-menu.js:TABLE_MENU_WIDTH的default与three都从 160/220 统一改为 180,four保持 320;resolveTableMenuWidth逻辑不变。src/main.js:全局crudOption.menuWidth从 160 改为 180,覆盖未显式设置 menuWidth 的 Avue CRUD 页面。src/views/desk/notice.vue:menuWidth从 220 改为 180。src/option/business/process-config.js:menuWidth从 200 改为 180。src/views/system/param.vue:手写 el-table 操作列宽度从 220 改为 180。- 批量替换:对 44 个显式设置
menuWidth: 160的.vue/.js/const/*.js文件统一改为 180(含部分文件内多处)。
- 验证:
npm run build成功(exit code 0)。
角色管理 /authority/role 操作列改 180
- 需求:用户明确要求把 /authority/role 页面操作列宽度设为 180(该页面此前设为 320,因含「查看/编辑/删除 + 权限设置」自定义菜单)。
- 改动:
src/views/authority/role.vue- option 内联
menuWidth: 320改为menuWidth: 180。
- option 内联
全站操作列按钮统一为链接(el-link)风格
- 需求:用户要求「操作栏里的按钮改成链接的方案,全站风格统一」,并先确认了对功能是否有影响。
- 调研结论(关键):全仓手写 el-table 操作列(10 个文件、约 28 列)与 53 个 avue-crud 自定义
#menu插槽已全部是<el-link>,全库type="text"残留为 0;真正未链接化的只剩下 Avue 内置 viewBtn/editBtn/delBtn(渲染为<el-button is-text>,包在div.avue-crud__menu内,且自带permission指令与rowView/rowEdit/rowDel事件)。 - 实施手法:采用「方案 A:纯 CSS 视觉对齐」(零功能影响、不动事件与权限,符合用户「不要影响功能」的诉求)。
- 改动:
src/styles/element-ui.scss- 新增
.avue-crud__menu > .el-button.is-text规则,把 Avue 内置行操作按钮外观对齐为 el-link:主色文字、无边框/无背景、hover 下划线 + 浅色、禁用态浅色无下划线、height:auto / padding:0(配合父级inline-flex; gap:8px与已存在的主色/间距覆盖规则)。 - 选择器仅命中行操作列
.avue-crud__menu内的is-text按钮,不误伤顶部工具栏(.avue-crud__header)与弹窗按钮(.avue-crud__dialog__menu)。
- 新增
- 注意:现有全局规则
.avue-crud__menu .el-link会强制操作列内所有 el-link(含type="danger"的删除)显示为主色蓝。如需删除按钮保留红色告警,需单独调整该覆盖规则(本次未改,保持统一蓝)。 - 验证:
npm run build成功(exit code 0);构建日志中的 CSS*告警来自第三方库压缩,与本次无关(历史既有)。
操作列文字取消加粗(统一常规字重)
- 需求:用户要求操作栏下的按钮字体都不要加粗,统一风格。
- 根因:Element Plus
el-link默认font-weight: var(--el-font-weight-primary)(500 中等粗),导致操作列里的链接(查看/编辑/删除等)显示为加粗;而 Avue 内置is-text按钮此前已被规则设为 normal。 - 改动:
src/styles/element-ui.scss- 在既有
.avue-crud__menu .el-link, .el-table ... .cell:has(.el-link) .el-link统一规则中增加font-weight: normal;((0,2,0) 优先级高于 el-link 自身 (0,1,0) 的默认字重,可覆盖)。 - 覆盖范围:Avue 行菜单内的 el-link + 任意含 el-link 的表格体单元格(手写操作列),一次统一全站操作列字重;Avue 内置
is-text按钮与顶部工具栏/弹窗按钮字重保持原样不受影响。
- 在既有
- 验证:
npm run build成功(exit code 0)。
全站表格省略文字 hover tooltip 提示统一
- 需求:用户截图反馈合同管理等页面中「所属项目」等列文字被省略,要求像
/base/common-address一样,鼠标移上去显示完整提示;全站统一加,改完列出文件。 - 参考实现:
src/option/base/common-address.js中 Avue 列配置使用showOverflowTooltip: true。 - 调研结论:全站表格可见列约 848 个(Avue)+ 424 个手写
<el-table-column>,其中 801 个 Avue 列、268 个手写列未开启 tooltip。Element Plus 支持全局table: { showOverflowTooltip: true }配置,Avue 3.9.2 完整透传,可一行代码覆盖全站。 - 改动文件清单:
src/main.js- Element Plus 全局配置新增
table: { showOverflowTooltip: true },一次性覆盖所有 Avue CRUD 与手写 el-table。 - Avue 全局
crudOption新增showOverflowTooltip: true作为双保险,避免页面级 option 被错误覆盖时失效。
- Element Plus 全局配置新增
src/styles/element-ui.scss- 新增
.el-table .cell.avue-crud__menu, .el-table .el-table__body .cell.el-tooltip:has(> .el-link)规则,豁免操作列单元格的固定宽度与溢出隐藏,防止全局 tooltip 导致操作列内 el-link 换行后被裁切,保持原有 8px gap 与自动换行。
- 新增
src/option/business/common.js- 共享工厂函数
createCrudOption新增showOverflowTooltip: true,覆盖 business 模块通过该工厂生成的所有 CRUD option。
- 共享工厂函数
- 覆盖范围:全站所有表格可见文本列(含 Avue 与手写 el-table),
type="selection"选择列由 Element Plus 自动豁免;操作列通过 CSS 豁免不被影响。 - 验证:
npm run build成功(exit code 0);构建日志中 CSS*告警来自第三方库压缩,与本次无关(历史既有)。
修复 /system/dept 操作栏错位(链接竖排)
- 现象:用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。
- 根因:Avue 自带默认样式
.avue-crud .avue-crud__menu{display:block}(特异性 0,2,0)与项目全局覆盖样式选择器完全相同;项目原规则虽带!important,但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时,.avue-crud__menu退化成 block,导致内部按钮/链接竖排。 - 修复:
src/styles/element-ui.scss:把.avue-crud .avue-crud__menu改为重复类名.avue-crud .avue-crud__menu.avue-crud__menu(特异性升到 0,3,0),并新增width: 100% !important让操作列容器占满单元格、左对齐横排更稳。src/views/system/dept.vue:scoped 样式新增:deep(.avue-crud__menu)兜底(inline-flex + gap 8px + 子元素 inline-flex),双保险确保本页操作列横排。
- 验证:dev server 已热更新,curl 确认两处编译结果均含
display: inline-flex !important;构建需用户硬刷新浏览器清旧 CSS 缓存。
客商档案 /vehicle/customer-archive 弹窗风格统一为 section-card
- 需求:用户截图反馈弹窗有「双层灰色背景」,且「工商信息」等标题没有放到卡片里面;要求改成和
/business/project-apply一致的白卡风格。 - 根因:原页面主表单使用
.archive-form__group灰色容器,内部再包一层白色.el-row卡片,标题坐在灰色背景上,形成外层 dialog body 灰 + 分组灰的「双层灰」;客商材料、变更记录、评分材料、发票/邮寄信息也沿用旧的分节标题样式。 - 改动:
src/views/vehicle/customer-archive.vue- 主表单 4 个分组改为
<section-card title="工商信息 / 联系信息 / 财务/信用信息 / 其他信息">全局白卡组件,删除外层「基本信息」大标题。 - 评分/联系人/收款/发票 4 个 Tab 内容改为
<section-card>+<template #extra>,按钮组进入卡头右侧。 - 客商材料改为
<section-card title="客商材料" #extra>,变更记录改为<section-card title="变更记录">。 - 发票信息弹窗的「发票信息 / 邮寄信息」改为两张
<section-card>。 - 评分详情弹窗的「证明材料」改为
<section-card title="证明材料" class="score-material-card">。 - 清理不再使用的样式:
.archive-form__group、.section-title、.section-head、.customer-material-section、.change-record-section、.invoice-form__section-title、.score-material-section等。
- 主表单 4 个分组改为
- 验证:
npm run build成功(exit code 0)。
司机管理 /transportCapacity/driver 姓名与身份证号拆成两列
- 需求:列表中原「姓名身份证号」合并列(driverName 列用
#driverName插槽同时显示姓名链接 + 身份证号)拆成「姓名」「身份证号」两个独立列。 - 改动:
src/option/transportCapacity/driver.js- 原
label: '姓名身份证号'列改为label: '姓名'(minWidth 120,保留 slot/search,searchOrder 7 不变)。 - 新增独立「身份证号」列(
prop: 'idCardNo'、search: true、searchOrder: 2、slot: true、minWidth: 180),并上移到driverName之后,使其紧邻「姓名」列(表格列顺序 = 数组顺序,searchOrder仅控制搜索表单顺序,互不影响)。 - 原
idCardNo隐藏搜索列(hide: true)被该新列取代后删除重复定义。
- 原
src/views/transportCapacity/driver.vue#driverName插槽只保留姓名链接(去掉原内联的身份证号<span>)。- 新增
#idCardNo插槽显示row.idCardNo || '-'(空值显示横杠)。 - 删除不再使用的
.driver-page__identity样式块。
- 验证:
node --check选项文件语法通过;npm run build仅因环境 safe-delete 守卫拦截清空 dist(与代码无关),未报任何 transform/parse 错误。
全站时间列统一加排序(参考 /base/cargo-type)
- 需求:用户截图 /business/contract-manage 页面,要求「有时间的都加一个排序」,参考 /base/cargo-type(该页面 createTime/updateTime 已设
sortable: true)。 - 方案:Avue 列加
sortable: true;手写<el-table-column>加sortable属性。精确匹配时间相关 label/prop,排除hide: true的搜索专用字段。 - 精确匹配范围:创建/更新时间、开始/结束日期、生效/失效日期、计划/实际/预计日期时间、审核/上传/变更/评分/调度日期时间、事故/检测/有效截止日期、入口/出口/交易/费用/换胎/出厂/维修/保养时间、登录/申请/提交/操作/触发/过期/日志/记录时间等。
- 改动文件(共 53 个):
- src/option(18 个):base/common-address.js、business/common.js、business/contract-manage.js、business/project-apply.js、business/transport-plan.js、business/waybill-manage.js、system/authlog.js、transportCapacity/driver.js、vehicle/accident-record.js、vehicle/annual-inspection-record.js、vehicle/etc-record.js、vehicle/equipment-ledger.js、vehicle/insurance-record.js、vehicle/mileage-record.js、vehicle/oil-electric-record.js、vehicle/other-expense-record.js、vehicle/tire-replacement-record.js、vehicle/transport-change-record.js。
- src/views 内联 Avue option(30 个):flow/follow.vue、flow/manager.vue、flow/model.vue、desk/notice.vue、desk/notice-composition.vue、report/reportlist.vue、work/done.vue、work/todo.vue、work/start.vue、work/claim.vue、work/send.vue、authority/ratelimit.vue、authority/apikey.vue、monitor/log/api.vue、monitor/log/usual.vue、monitor/log/error.vue、base/railway-station.vue、base/airport-master.vue、base/currency.vue、base/customer-type.vue、base/fee-item.vue、base/port-terminal.vue、data/record.vue、util/form.vue、util/table.vue、system/tenant.vue、vehicle/maintenance-plan.vue、vehicle/maintenance-record.vue、vehicle/credit-score-quantification.vue、vehicle/customer-archive.vue。
- src/views 手写 el-table(6 个):system/dept.vue、business/loading-manage.vue、business/components/waybill-import-dialog.vue、business/project-apply.vue、vehicle/customer-archive.vue、business/components/business-crud-page.vue。
- 注意:弹窗内子表(如合同变更记录、项目附件/变更、客商档案评分/材料/变更记录等)时间列也一并加了排序;util/form.vue、util/table.vue 为示例页同样处理。
- 验证:
npm run build成功(exit code 0);构建日志中的 CSS*告警为历史既有,与本次无关。