b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(settlement): 优化表格列居中及单据号列固定，调整审批状态展示

Browse Source 
- payable-detail 单据号列新增固定左侧配置，保障滚动时可见
- receivable-payable-detail 组件表格动态列透传 fixed 属性
- project-apply 列表所有列单元格及表头居中显示，审批状态列改为纯文字
- 全站表格列（含操作列按钮）全局居中，样式统一覆盖 el-table 组件
- 修复 AVUE 依赖表单 label 冒号默认显示，pnpm patch 修改 es 与 lib 版本同步
- 解决 Vite optimizeDeps 缓存问题，patch 依赖后需删除 vite 缓存并重启 dev server
- railway-station 弹窗表单全局 labelSuffix 设为空，去除 label 后冒号
This commit is contained in:
赵忠林
2026-08-21 18:04:59 +08:00
parent 5cf688bf06
commit 4edaa8486d
9 changed files with 104 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.workbuddy/memory/2026-08-21.md
+54
View File
@@ -190,3 +190,57 @@
## ⚠️ option.labelWidth 必须放在 createCrudOption 展开之后
- 第一次给 transport-plan.js、waybill-manage.js 加 `labelWidth: 100` 时写在 `...createCrudOption(...)` **之前**，被 createCrudOption 自带 `labelWidth: 'auto'` 覆盖，label 仍是 auto（按内容参差，看着像"150 不统一"）。shipping-template 当时写在 createCrudOption 之后才生效。
- 教训：业务 option 文件顶层 `export const option = { labelWidth: 100, ...createCrudOption([...]) }` 写法**无效**，必须 `export const option = { ...createCrudOption([...]), labelWidth: 100, dialogWidth, ... }` 后写覆盖前写。
## payable-detail 主表格单据号列固定左侧
- 需求：`/settlement/payable-detail` 主表格除序号外，「单据号」列也固定左侧（横向滚动时始终可见）。
- 改动（2 处）：
1. `src/option/settlement/receivable-payable-detail.js`：`documentNo` 列加 `fixed: 'left'`。
2. `src/views/settlement/receivable-payable-detail.vue`：主表格 v-for 动态列加 `:fixed="column.fixed"`（模板需显式透传才生效）。
- 注意：payable-detail 与 receivable-detail 共用同一组件，应收明细页同步生效（两侧一致）。左侧固定区 = 选择框52 + 序号64 + 单据号180。
## project-apply 列表列全部居中
- 需求：`/business/project-apply` avue-crud 列表所有列居中看效果。
- 改动（单文件 `src/views/business/project-apply.vue` `buildTableOption()`）：column map 展开时加 `align:'center'` + `headerAlign:'center'`。avue 中 align 只管单元格内容，表头需 headerAlign 单独设。
- 弹窗内子表格（客户/承运商/材料/变更记录/选人）本就 align="center"，无需动。Vite 2889 已 HMR。
## project-apply 审批状态列改纯文字
- 需求：审批状态列从 el-tag 改为纯文字。
- 改动（单文件 `src/views/business/project-apply.vue`）：`#approvalStatus` 插槽去掉 `<el-tag>` 包裹，直接输出 `displayStatus(row,'approvalStatus')`；删除已无引用的 `statusTagType()` 方法。Vite 2889 编译 200。
## 全站表格列居中（含操作列）
- 需求：project-apply 居中效果被确认后，要求操作列按钮也居中，并应用到全站表格。
- 改动（`src/styles/element-ui.scss`，2 处全局规则）：
1. `.avue-crud .avue-crud__menu.avue-crud__menu`：`justify-content: start` → `center`，`text-align: left` → `center`（Avue 操作列按钮居中，含下拉更多按钮）。
2. 表头背景规则后新增全站规则：`.el-table th.el-table__cell .cell, .el-table td.el-table__cell .cell { text-align: center }`（所有 el-table 表头+单元格内容居中，命中固定列；.cell 直接设置覆盖 el-table-column align 的继承值）。
- project-apply.vue 页面级 `align:'center'` 保留（双保险，无害）；手写表格操作列 `.cell:has(> .el-link)` 本就 `justify-content:center`。
- 注意：全站居中会覆盖个别页面金额列 `align: right` 等显式右对齐，后续若某页要右对齐需页面级更高特异性覆盖。
## ⚠️ Vite optimizeDeps 缓存坑（patch node_modules 后必须重启 dev server）
- 修改 `node_modules/@smallwei/avue/lib/...` 这种深度依赖后，HMR **不会重新打包**：Vite 首次启动时已把整个 Avue ES module 预打包到 `node_modules/.vite/deps/@smallwei_avue.js`，缓存的 chunk 持续被 dev server 返回，导致代码修改"看起来没生效"。
- 解法（任选其一）：
1. 重启 dev server（Vite 会重新 optimizeDeps）。
2. 手动删 `node_modules/.vite/deps/@smallwei_avue.js` + `_metadata.json`，再让 server 收到请求时触发重新打包（最干净，连同 `_metadata.json` 一起删，否则 fileHash 缓存会让它误以为已最新）。
- 经验：以后再 patch 任何被 Vite optimizeDeps 预打包的依赖（如 element-plus / avue / wangeditor 等），都要重启 server 才能生效。
## 全站弹窗/表单 label 去掉冒号（pnpm patch 修复 Avue 默认值）
- 需求：全站所有 el-form / avue-form 的字段 label（车站名称:、所属省份: 等）后冒号要去掉。
- 关键事实（重要，避免重复踩坑）：
- Element Plus 的 label-suffix 不是用 `::after` 渲染，而是把后缀直接拼接到 label 文本节点：
```js
// node_modules/element-plus/es/components/form/src/form-item.vue...mjs:115
const currentLabel = computed(() => `${props.label || ""}${formContext?.labelSuffix || ""}`);
```
- EP el-form 的 labelSuffix prop 默认 `''`（空），不产生冒号；冒号来自 Avue。
- Avue 默认 `labelSuffix: ":"`，逻辑 `this.tableOption.labelSuffix || ":"`（空串 falsy 回落 `":"`），透传给 el-form 的 `label-suffix` prop。
- **踩坑**：Avue package.json 有 `"module": "es/index.mjs"` 和 `"main": "lib/index.js"`。Vite 用 ES 模块版（`es/`），不是 CommonJS 版（`lib/`）。**pnpm patch 必须同时覆盖 `es/` 和 `lib/` 两个文件**，否则 Vite 加载的 `es/` 版本未被 patch，冒号照旧！
- 另一个坑：Vite 把 Avue 预打包到 `node_modules/.vite/deps/@smallwei_avue.js`。patch 后必须删整个 `.vite` 目录 + 重启 dev server，否则预打包缓存仍是旧代码。
- 实施（pnpm patch + 手动补 es/ 版本）：
1. `pnpm patch @smallwei/avue` → 临时目录，编辑 `lib/.../index2.js`。
2. `pnpm patch-commit <临时目录>` → 生成 `patches/@smallwei__avue.patch`（仅含 lib/ 改动）。
3. **手动更新 patch 文件**：追加 `es/packages/element-plus/form/index2.mjs` 的 diff（同样 `|| ":"` → `|| ""`）。
4. **手动编辑 node_modules** 中 `es/.../index2.mjs`（pnpm patch 只生成了 lib/ 的改动，es/ 版本需手动改）。
5. 删 `node_modules/.vite` 整个目录 → 重启 `pnpm dev` → Vite 重新预打包（含 es/ patch）→ 浏览器强刷。
- patch 文件：`patches/@smallwei__avue.patch`（含 es/ + lib/ 两处 diff）。
- pnpm 配置：`pnpm-workspace.yaml` 内 `patchedDependencies: { '@smallwei/avue': patches/@smallwei__avue.patch }`。
- ⚠️ 提交时务必带上：`patches/`、`pnpm-workspace.yaml`、`pnpm-lock.yaml`，缺一不可。
- ⚠️ `pnpm install` 会从 patch 文件重新应用补丁——如果 patch 文件没有 es/ 的 diff，es/ 版本会被还原为原始代码（冒号回来）。已手动补上 es/ diff 到 patch 文件。
patches/@smallwei__avue.patch
+23
View File
@@ -0,0 +1,23 @@
diff --git a/es/packages/element-plus/form/index2.mjs b/es/packages/element-plus/form/index2.mjs
--- a/es/packages/element-plus/form/index2.mjs
+++ b/es/packages/element-plus/form/index2.mjs
@@ -100,7 +100,7 @@
},
labelSuffix() {
- return this.tableOption.labelSuffix || ":";
+ return this.tableOption.labelSuffix || "";
},
isMenu() {
return this.columnOption.length != 1;
diff --git a/lib/packages/element-plus/form/index2.js b/lib/packages/element-plus/form/index2.js
--- a/lib/packages/element-plus/form/index2.js
+++ b/lib/packages/element-plus/form/index2.js
@@ -103,7 +103,7 @@ var script = src_core_create.default({
);
},
labelSuffix() {
- return this.tableOption.labelSuffix || ":";
+ return this.tableOption.labelSuffix || "";
},
isMenu() {
return this.columnOption.length != 1;
pnpm-lock.yaml
Generated
+7 -2
View File
@@ -4,6 +4,11 @@ settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
patchedDependencies:
'@smallwei/avue':
hash: 4a6fd67ef4dfb390dba7eddaec02dd278bc066e4a5f65f93535b640498907d58
path: patches/@smallwei__avue.patch
importers:
.:
@@ -28,7 +33,7 @@ importers:
version: 1.7.0
'@smallwei/avue':
specifier: ~3.9.2
version: 3.9.2(@element-plus/icons-vue@2.3.2(vue@3.5.34))(element-plus@2.14.2(vue@3.5.34))(vue@3.5.34)
version: 3.9.2(patch_hash=4a6fd67ef4dfb390dba7eddaec02dd278bc066e4a5f65f93535b640498907d58)(@element-plus/icons-vue@2.3.2(vue@3.5.34))(element-plus@2.14.2(vue@3.5.34))(vue@3.5.34)
animate.css:
specifier: ^4.1.1
version: 4.1.1
@@ -2636,7 +2641,7 @@ snapshots:
countup.js: 2.10.0
signature_pad: 5.1.3
'@smallwei/avue@3.9.2(@element-plus/icons-vue@2.3.2(vue@3.5.34))(element-plus@2.14.2(vue@3.5.34))(vue@3.5.34)':
'@smallwei/avue@3.9.2(patch_hash=4a6fd67ef4dfb390dba7eddaec02dd278bc066e4a5f65f93535b640498907d58)(@element-plus/icons-vue@2.3.2(vue@3.5.34))(element-plus@2.14.2(vue@3.5.34))(vue@3.5.34)':
dependencies:
'@element-plus/icons-vue': 2.3.2(vue@3.5.34)
axios: 0.21.4
pnpm-workspace.yaml
+2
View File
@@ -0,0 +1,2 @@
patchedDependencies:
'@smallwei/avue': patches/@smallwei__avue.patch
src/option/settlement/receivable-payable-detail.js
+1 -1
View File
@@ -27,7 +27,7 @@ export const searchFields = [
];
export const tableColumns = [
{ label: '单据号', prop: 'documentNo', minWidth: 180, link: true },
{ label: '单据号', prop: 'documentNo', minWidth: 180, link: true, fixed: 'left' },
{ label: '项目名称', prop: 'projectName', minWidth: 120 },
{ label: '所属组织', prop: 'deptName', minWidth: 120 },
{ label: '费用日期', prop: 'feeDate', minWidth: 120 },
src/styles/element-ui.scss
+8 -2
View File
@@ -651,6 +651,12 @@
background-color: #fafafa !important;
}
// 全站统一：表格列内容（表头 + 单元格）居中展示
.el-table th.el-table__cell .cell,
.el-table td.el-table__cell .cell {
text-align: center;
}
// 统一 avue-crud 偶数行背景色
.avue-crud .el-table__body-wrapper tr.el-table__row:nth-child(even) td.el-table__cell,
.avue-crud .el-table__body-wrapper tr.el-table__row:nth-child(even) td.el-table-fixed-column--left,
@@ -866,9 +872,9 @@
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: start;
justify-content: center;
width: 100% !important;
text-align: left;
text-align: center;
}
// 全站统一：手写表格操作列中的文字链接保持间距并支持自动换行
src/views/base/railway-station.vue
+1
View File
@@ -205,6 +205,7 @@ export default {
dialogCustomClass: 'railway-station-edit-dialog',
labelPosition: 'right',
labelWidth: '140px',
labelSuffix: '',
tip: false,
searchShow: true,
searchMenuSpan: 24,
src/views/business/project-apply.vue
+6 -22
View File
@@ -55,9 +55,7 @@
</template>
<template #approvalStatus="{ row }">
<el-tag :type="statusTagType(row.approvalStatus)">
{{ displayStatus(row, 'approvalStatus') }}
</el-tag>
</template>
<template #menu="{ row, index }">
@@ -1074,7 +1072,12 @@ export default {
delBtn: false,
// 操作列收窄：本项目操作按钮较少，320px 过宽，调整为 220px（链接会自动换行兜底）
menuWidth: 180,
column: (option.column || []).map(column => ({ ...column, display: false })),
column: (option.column || []).map(column => ({
...column,
display: false,
align: 'center',
headerAlign: 'center',
})),
};
},
hasPermission(code) {
@@ -1140,25 +1143,6 @@ export default {
const item = column && (column.dicData || []).find(dic => dic.value === row[prop]);
return item ? item.label : row[prop] || '未知';
},
statusTagType(status) {
if (
[
1,
'pending',
'waiting_dispatch',
'processing',
'dispatching',
'approved',
'change_approved',
].includes(status)
) {
return 'success';
}
if ([2, 'cancelled', 'withdrawn', 'draft'].includes(status)) return 'info';
if (['rejected', 'change_rejected'].includes(status)) return 'danger';
if (status === 'completed') return 'primary';
return 'warning';
},
onLoad(page, params = {}) {
this.loading = true;
this.api
src/views/settlement/receivable-payable-detail.vue
+1
View File
@@ -63,6 +63,7 @@
:label="column.label"
:min-width="column.minWidth"
:align="column.align || 'center'"
:fixed="column.fixed"
show-overflow-tooltip
>
<template #default="{ row }">