gxwebsoft
09ce6472b0
- formal-settlement.vue 中移除旧搜索区，移除多余样式，实现结算表格面板按激活标签条件渲染 - 替换 formal-settlement-table-panel.vue 为基于 avue-crud，简化表格和操作，优化分页和搜索事件处理 - 新版 formal-settlement 中统一使用 onLoad 替代 loadTable 方法，简化数据加载逻辑 - 删除不必要的样式代码，统一表格奇偶行背景颜色，调整整体样式提升视觉一致性 - 结算导入页面 settlement-import.vue 同样迁移至 avue-crud 组件实现，实现搜索、分页、刷新等功能事件解耦 - 优化分页数据结构，统一使用 currentPage 和 pageSize 命名，支持多页容量选择 - 调整部分接口调用及事件回调，保障新组件兼容已有业务流程及权限控制 - 移除废弃的内部变量与混入，针对权限控制和字段渲染进行明确封装和暴露 - 保持功能行为不变的前提下提升代码可维护性和复用性，增强组件封装与状态同步能力
4.7 KiB
4.7 KiB
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.jsgetSlotList(["-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。