style(settlement): 优化表格列居中及单据号列固定，调整审批状态展示
- 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:
@@ -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 文件。
|
||||
|
||||
Reference in New Issue
Block a user