gxwebsoft
09ce6472b0
- formal-settlement.vue 中移除旧搜索区，移除多余样式，实现结算表格面板按激活标签条件渲染 - 替换 formal-settlement-table-panel.vue 为基于 avue-crud，简化表格和操作，优化分页和搜索事件处理 - 新版 formal-settlement 中统一使用 onLoad 替代 loadTable 方法，简化数据加载逻辑 - 删除不必要的样式代码，统一表格奇偶行背景颜色，调整整体样式提升视觉一致性 - 结算导入页面 settlement-import.vue 同样迁移至 avue-crud 组件实现，实现搜索、分页、刷新等功能事件解耦 - 优化分页数据结构，统一使用 currentPage 和 pageSize 命名，支持多页容量选择 - 调整部分接口调用及事件回调，保障新组件兼容已有业务流程及权限控制 - 移除废弃的内部变量与混入，针对权限控制和字段渲染进行明确封装和暴露 - 保持功能行为不变的前提下提升代码可维护性和复用性，增强组件封装与状态同步能力
32 lines
4.7 KiB
Markdown
32 lines
4.7 KiB
Markdown
# 2026-10-20
|
||
|
||
## settlement-import 列表页工具栏对齐 receipt-settlement
|
||
|
||
- `src/views/settlement/settlement-import.vue`：
|
||
- 左侧只保留「新增」（`type="primary"`），删掉原来的 `plain` 文字「刷新」按钮（刷新统一收进右侧图标组，与 receipt-settlement / settlement-adjustment 一致）。
|
||
- 右侧接入 `<settlement-table-tools>`（`./components/settlement-table-tools.vue`，即 `table-header-tools` 包装）：刷新 / 列设置 / 搜索显隐 / 表格尺寸 4 键，`@refresh="refreshTable"`。
|
||
- 表格列改为配置化，新增 `src/option/settlement/settlementImportTable.js`（`settlementImportTableColumns`），页面加 `tableColumns / visibleColumnKeys / tableSize / columnSettingOptions / visibleTableColumns`，`el-table` 加 `:size="tableSize"`。
|
||
- 列渲染标志：`link / status / enum / billType / count`（注意**不能用 `type` 作 key**，`type` 是 el-table-column 真实 prop，会把列变成 selection/index 列）。
|
||
- 新增 `displayValue()`；`settlementBillTypeLabel('')` 返回 `-`。
|
||
- 序号列改 `fixed="left"`；数据列与操作列统一 `align: 'center'`，操作链接 `justify-content: center`。
|
||
- 校验方式（无 dev server 时）：项目根目录临时 `sfc-check.mjs` 用 `vue/compiler-sfc` 的 `parse + compileTemplate + compileScript`；SCSS 用 `sass.compileString`。用完即删。
|
||
|
||
## 追加：用户要求「列显隐 + 显示方式」→ 两个页面改 avue-crud
|
||
|
||
用户反馈上面那版不对：右侧工具按钮必须是 **avue-crud 原生**的 4 键，第 2 键是「列显隐」抽屉（不是「列设置」勾选弹窗），第 4 键是「显示方式」（表格↔卡片），不是表格尺寸循环。确认后范围：`settlement-import` + `formal-settlement`（receipt/payment 共用）都改 avue-crud。
|
||
|
||
- 关键结论：**「列显隐 + 显示方式」只有 avue-crud 原生才有**，avue 的 `dialog-column` 依赖 `inject: ['crud']`，脱离 avue-crud 拿不出来；`table-header-tools` 只是仿制件，做不到。所以目标页只能整页改 avue-crud。
|
||
- avue 右侧按钮源码：`node_modules/@smallwei/avue/lib/packages/element-plus/crud/menu/header-menu3.js`（refreshBtn/columnBtn/searchBtn/gridBtn，`gridBtn` → `handleGridShow()` 切 `gridShow` 表格↔卡片）；图标默认配置在同目录 `config.js`。
|
||
- 新增 `src/option/settlement/settlementImport.js`（`settlementImportOption`）、`src/option/settlement/formalSettlement.js`（`formalSettlementOption`，表格列复用 `formalSettlementTable.js` 的 `formalSettlementTableColumns` + `COLUMN_EXTRA` 增量配置，避免两处维护）。
|
||
- `settlement-import.vue` 整页改 avue-crud（删除手写的搜索区/表格/分页）；`formal-settlement-table-panel.vue` 由 el-table 改成包一层 `<avue-crud>`，父页面保留数据加载与全部业务动作。
|
||
- ⚠️ **avue 的搜索自定义控件要用 `column.renderSearch`（`h()` 渲染），不能用 `searchslot`** —— avue 3.9.2 根本不读 `searchslot`（全库无此字段），而 `searchslot: true` 还会被 `header-search2.js` 的 `searchXxx → xxx` 映射成 `slot: true`。真正的搜索插槽是 avue-crud 上 `${prop}-search`（`crud.searchSlot`，见 `index2.js` `getSlotList(["-search"])`），但其作用域**没有 `row`**（只有 value/column/label/size/readonly/disabled/dic），`mileage-record.vue` 用 `{ row }` 是错的。已用于批次号下拉（filterable + allowCreate）。
|
||
- avue `formatter` 签名确认：`detail.js` → `column.formatter(row, row[column.prop], result, column)`。
|
||
- `on-load` 由 `table-page2.js` 在 created / 翻页 / 改页容量时触发，参数是内部 `defaultPage`（已 `Object.assign` 合并外部 page）。
|
||
- 分页透传写法（父持 page、子包 avue-crud）：子组件用 computed `crudPage{get/set}`，setter 里 `Object.assign(this.page, value)` 原地回写，避免 prop 直接赋值告警。
|
||
- ⚠️ `src/option/settlement/formalSettlementTable.js` **不能删** —— `formal-settlement-editor.vue` 还从它导入 `candidateColumns/candidateDetailColumns/detailColumns/sourceColumns/summaryColumns`（我一度删掉，Vite 转换报错后从 HEAD 恢复）。
|
||
- 校验方式升级：沙箱里 curl 不通 dev server（502），改用 `vite.createServer({ middlewareMode:true })` + `server.transformRequest(path)` 就地转换，能同时暴露依赖解析失败（如上面误删文件）。脚本用完即删。
|
||
|
||
## 遗留未改（仍用 table-header-tools 仿制件）
|
||
|
||
pre-settlement、settlement-adjustment、receivable-payable-detail、transport-reconciliation-table-panel、business/{master-order,loading-manage,voucher-manage}、payment/* 手写页。若用户要全站一致，需逐页改 avue-crud。
|