diff --git a/.workbuddy/memory/2026-10-20.md b/.workbuddy/memory/2026-10-20.md new file mode 100644 index 0000000..cd8d847 --- /dev/null +++ b/.workbuddy/memory/2026-10-20.md @@ -0,0 +1,31 @@ +# 2026-10-20 + +## settlement-import 列表页工具栏对齐 receipt-settlement + +- `src/views/settlement/settlement-import.vue`： + - 左侧只保留「新增」（`type="primary"`），删掉原来的 `plain` 文字「刷新」按钮（刷新统一收进右侧图标组，与 receipt-settlement / settlement-adjustment 一致）。 + - 右侧接入 ``（`./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 的搜索自定义控件要用 `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。 diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md index 0784184..647e2d9 100644 --- a/.workbuddy/memory/MEMORY.md +++ b/.workbuddy/memory/MEMORY.md @@ -69,6 +69,18 @@ - 自检：`curl "localhost:2888/src/xxx.vue"` 与 `"...?vue&type=style&index=0&scoped=true&lang.scss"`（200 / 500）。`vite build` 在 `facelogin.vue` 被沙箱中断，不能作唯一校验。dev `VITE_APP_API=/api` 代理 `172.16.203.228:8000`。 - 导出：前端 `exportColumns` 后端未用，以 `XxxExportExcel.java` 为准；BladeX `BeanUtil` 类型不兼容静默跳过（`Date` → `LocalDateTime` 丢值，用 `DateUtil.fromDate`）。 +## avue-crud 才是「右侧 4 键」的唯一来源（2026-10-20 定论） +用户要的右侧工具栏是 **avue-crud 原生**：刷新 / **列显隐**（el-drawer，含 隐藏/冻结/过滤/排序 + 行拖拽）/ 搜索显隐 / **显示方式**（表格↔卡片）。 +- 源码：`node_modules/@smallwei/avue/lib/packages/element-plus/crud/menu/header-menu3.js`（refreshBtn/columnBtn/searchBtn/gridBtn），`gridBtn` → `handleGridShow()` 切 `gridShow`；图标默认在同目录 `config.js`。「列显隐」文案来自 avue 语言包 `crud.showTitle`（项目 `src/lang/zh.js` 已覆盖）。 +- **列显隐抽屉依赖 `inject: ['crud']`，脱离 avue-crud 拿不出来**；`components/table-header-tools` 的「列设置勾选弹窗 + 表格尺寸循环」是仿制件，**做不到这两点**。所以「要和 avue 一致」= 整页改用 avue-crud，没有中间方案。 +- ⚠️ 搜索自定义控件用 `column.renderSearch = scope => h(...)`（`scope.row` 可用，同 `mixins/organization-search.js`）。**不要用 `searchslot`**：avue 3.9.2 全库无此字段，且 `header-search2.js` 的 `searchXxx → xxx` 映射会把 `searchslot` 变成 `slot: true`。 +- avue-crud 上的 `${prop}-search` 插槽确实存在（`index2.js` 的 `getSlotList(["-search"])`），但**作用域没有 `row`**（只有 value/column/label/size/readonly/disabled/dic）——`mileage-record.vue` 里 `{ row }` 是错的写法，别照抄。 +- `formatter` 签名：`detail.js` → `column.formatter(row, row[column.prop], result, column)`。 +- `on-load` 由 `table-page2.js` 在 created / 翻页 / 改页容量时触发，参数是内部 `defaultPage`（已合并外部 page）。分页若由父组件持有、子组件包一层 avue-crud，用 computed `crudPage{get/set}` + setter 里 `Object.assign(this.page, value)` 原地回写。 +- 已改：settlement-import.vue、formal-settlement.vue + components/formal-settlement-table-panel.vue（receipt/payment 共用）。未改：pre-settlement、settlement-adjustment、receivable-payable-detail、transport-reconciliation-table-panel、business 与 payment 的手写页。 +- ⚠️ `src/option/settlement/formalSettlementTable.js` 别删：`formal-settlement-editor.vue` 还依赖它的 candidate/detail/source/summary 列。 +- 沙箱里 curl 打不通本地 dev server（一律 502）。改用 `vite.createServer({middlewareMode:true})` + `server.transformRequest(path)` 就地转换校验，还能暴露依赖解析失败。 + ## Element Plus 图标两种用法的机制差异（易误判） `main.js` 里 `for (...ElementPlusIconsVue) app.component(key, component)` 全局注册了全部图标，因此模板里可以写标签形式 ``（靠全局注册解析）。 但 `:icon="OfficeBuilding"` 是**表达式**，编译成 `_ctx.OfficeBuilding`，只会从 data / props / computed / setup 返回值里取 —— **组件对象必须放进 `data()`**；放进 `components: {}` 注册里模板取不到，会静默渲染不出图标（不报错，只是空白）。 diff --git a/src/option/settlement/formalSettlement.js b/src/option/settlement/formalSettlement.js new file mode 100644 index 0000000..e9523be --- /dev/null +++ b/src/option/settlement/formalSettlement.js @@ -0,0 +1,173 @@ +/** + * 正式结算单列表（avue-crud）配置 + * ------------------------------------------------------------------ + * 列表页与其它模块统一使用 avue-crud，头部 4 个按钮（刷新 / 列显隐 / 搜索显隐 / + * 显示方式）由 avue-crud 自带，不做二次封装。 + * + * 表格列复用 formalSettlementTable.js 的 formalSettlementTableColumns（与弹窗内 + * 明细表共用同一份列定义），此处只补充 avue 需要的展示/搜索属性，避免两处维护。 + * + * ⚠️ searchOrder 为降序排序，值越大越靠前。 + * ⚠️ 仅用于搜索的列必须 hide + showColumn: false，否则会混进「列显隐」抽屉。 + * ⚠️ column 数组顺序 = 表格列顺序，搜索专用列统一放在数组最前面。 + */ + +import { + approvalStatusOptions, + invoiceStatusOptions, + kingdeeSyncStatusOptions, + paymentStatusOptions, +} from './formalSettlementSearch'; +import { formalSettlementTableColumns } from './formalSettlementTable'; + +const textFormatter = (row, value) => + value === null || value === undefined || value === '' ? '-' : value; + +/** 金额统一展示：两位小数 + 币种 */ +const moneyFormatter = (row, value) => + `${Number(value || 0).toFixed(2)} ${row?.currency || 'RMB'}`; + +const pickLabel = (options, value) => + options.find(item => item.value === value)?.label || value || '-'; + +const searchOnlyColumn = ({ label, prop, searchOrder, type = 'input', dicData }) => { + const column = { + label, + prop, + search: true, + searchOrder, + searchSpan: 5, + hide: true, + showColumn: false, + addDisplay: false, + editDisplay: false, + viewDisplay: false, + }; + if (type === 'select') { + column.type = 'select'; + column.searchPlaceholder = '请选择'; + column.dicData = dicData || []; + } else if (type === 'daterange') { + column.type = 'daterange'; + column.searchType = 'daterange'; + column.searchPlaceholder = '请选择'; + } else { + column.searchPlaceholder = '请输入'; + } + return column; +}; + +/** 表格列的 avue 增量配置：搜索项、插槽、覆盖宽度等 */ +const COLUMN_EXTRA = { + formalSettlementNo: { + slot: true, + search: true, + searchSpan: 5, + searchOrder: 12, + searchPlaceholder: '请输入', + }, + payerName: { search: true, searchSpan: 5, searchOrder: 7, searchPlaceholder: '请输入' }, + payeeName: { search: true, searchSpan: 5, searchOrder: 6, searchPlaceholder: '请输入' }, + projectName: { search: true, searchSpan: 5, searchOrder: 11, searchPlaceholder: '请输入' }, + deptName: { search: true, searchslot: true, searchSpan: 5, searchOrder: 10 }, + contractNo: { search: true, searchSpan: 5, searchOrder: 9, searchPlaceholder: '请输入' }, + invoiceStatusName: { slot: true }, + paymentStatusName: { slot: true }, + approvalStatusName: { slot: true }, + adjustFlag: { + formatter: row => row.adjustStatusName || (row.originFormalSettlementNo ? '调整后单' : '-'), + }, + kingdeeSyncStatus: { + slot: true, + search: true, + type: 'select', + dicData: kingdeeSyncStatusOptions, + searchSpan: 5, + searchOrder: 2, + searchPlaceholder: '请选择', + }, + kingdeeLockStatus: { slot: true }, + createTime: { width: 180 }, +}; + +const buildTableColumns = () => + formalSettlementTableColumns.map(column => { + const extra = { ...(COLUMN_EXTRA[column.prop] || {}) }; + if (column.money) { + extra.formatter = moneyFormatter; + extra.align = 'right'; + } + // link / status 标记的列统一走单元格插槽 + if (column.link || column.status) extra.slot = true; + if (!extra.formatter) extra.formatter = textFormatter; + return { ...column, ...extra }; + }); + +export const formalSettlementOption = () => ({ + height: 'auto', + calcHeight: 32, + tip: false, + searchBtnText: '查询', + emptyBtnText: '重置', + searchShow: true, + searchIcon: true, + searchLabelWidth: 88, + // 查询/重置紧跟首行 4 个条件（4×5 + 菜单 4 = 24），不再独占下一整行 + searchMenuSpan: 4, + searchIndex: 4, + searchMenuPosition: 'right', + border: true, + index: true, + indexLabel: '序号', + indexWidth: 64, + indexFixed: 'left', + selection: true, + selectionWidth: 52, + selectionFixed: 'left', + addBtn: false, + viewBtn: false, + delBtn: false, + editBtn: false, + menuWidth: 320, + menuFixed: 'right', + column: [ + // ---------- 仅搜索列 ---------- + searchOnlyColumn({ + label: '预付结算单号', + prop: 'preSettlementNo', + searchOrder: 8, + }), + searchOnlyColumn({ + label: '发票状态', + prop: 'invoiceStatus', + searchOrder: 5, + type: 'select', + dicData: invoiceStatusOptions, + }), + searchOnlyColumn({ + label: '收付款状态', + prop: 'paymentStatus', + searchOrder: 4, + type: 'select', + dicData: paymentStatusOptions, + }), + searchOnlyColumn({ + label: '审核状态', + prop: 'approvalStatus', + searchOrder: 3, + type: 'select', + dicData: approvalStatusOptions, + }), + searchOnlyColumn({ + label: '生成日期', + prop: 'createDateRange', + searchOrder: 1, + type: 'daterange', + }), + // ---------- 表格列（部分兼搜索项） ---------- + ...buildTableColumns(), + ], +}); + +export const kingdeeSyncName = value => pickLabel(kingdeeSyncStatusOptions, value); +export const paymentStatusName = value => pickLabel(paymentStatusOptions, value); diff --git a/src/option/settlement/settlementImport.js b/src/option/settlement/settlementImport.js new file mode 100644 index 0000000..49f4dce --- /dev/null +++ b/src/option/settlement/settlementImport.js @@ -0,0 +1,157 @@ +/** + * 导入结算单列表（avue-crud）配置 + * ------------------------------------------------------------------ + * 列表页与其它模块统一使用 avue-crud，头部 4 个按钮（刷新 / 列显隐 / 搜索显隐 / + * 显示方式）由 avue-crud 自带，不做二次封装。 + * + * ⚠️ searchOrder 为降序排序，值越大越靠前。 + * ⚠️ 仅用于搜索的列必须 hide + showColumn: false，否则会混进「列显隐」抽屉。 + */ + +const IMPORT_STATUS_OPTIONS = [ + { label: '草稿', value: 'draft' }, + { label: '已完成', value: 'completed' }, + { label: '已作废', value: 'voided' }, +]; + +const SETTLEMENT_TYPE_OPTIONS = [ + { label: '应收', value: 'receivable' }, + { label: '应付', value: 'payable' }, +]; + +const textFormatter = (row, value) => + value === null || value === undefined || value === '' ? '-' : value; + +const pickLabel = (options, value) => + options.find(item => item.value === value)?.label || value || '-'; + +const settlementTypeLabel = value => pickLabel(SETTLEMENT_TYPE_OPTIONS, value); + +const billTypeLabel = value => (value === 'pre' ? '预结算单' : value ? '正式结算单' : '-'); + +export const importStatusLabel = value => pickLabel(IMPORT_STATUS_OPTIONS, value); + +export const settlementImportOption = () => ({ + height: 'auto', + calcHeight: 32, + tip: false, + searchBtnText: '查询', + emptyBtnText: '重置', + searchShow: true, + searchIcon: true, + searchLabelWidth: 88, + // 查询/重置紧跟首行 4 个条件（4×5 + 菜单 4 = 24），不再独占下一整行 + searchMenuSpan: 4, + searchIndex: 4, + searchMenuPosition: 'right', + border: true, + index: true, + indexLabel: '序号', + indexWidth: 64, + indexFixed: 'left', + selection: false, + addBtn: false, + viewBtn: false, + delBtn: false, + editBtn: false, + menuWidth: 220, + menuFixed: 'right', + column: [ + // ---------- 搜索项（前 4 项默认展示，其余折叠；searchOrder 越大越靠前） ---------- + { + label: '状态', + prop: 'importStatus', + type: 'select', + search: true, + searchSpan: 5, + searchOrder: 6, + searchPlaceholder: '请选择', + dicData: IMPORT_STATUS_OPTIONS, + hide: true, + showColumn: false, + addDisplay: false, + editDisplay: false, + viewDisplay: false, + }, + { + label: '导入类型', + prop: 'settlementType', + type: 'select', + search: true, + searchSpan: 5, + searchOrder: 5, + searchPlaceholder: '请选择', + dicData: SETTLEMENT_TYPE_OPTIONS, + hide: true, + showColumn: false, + addDisplay: false, + editDisplay: false, + viewDisplay: false, + }, + // ---------- 表格列 ---------- + { + label: '导入批次号', + prop: 'batchNo', + slot: true, + search: true, + searchSpan: 5, + searchOrder: 7, + searchPlaceholder: '请选择', + minWidth: 160, + }, + { label: '状态', prop: 'importStatusName', slot: true, width: 100, align: 'center' }, + { + label: '导入类型', + prop: 'settlementTypeName', + minWidth: 100, + align: 'center', + formatter: (row, value) => value || settlementTypeLabel(row.settlementType), + }, + { + label: '结算单', + prop: 'settlementBillTypeName', + minWidth: 110, + align: 'center', + formatter: (row, value) => value || billTypeLabel(row.settlementBillType), + }, + { + label: '项目', + prop: 'projectName', + search: true, + searchSpan: 5, + searchOrder: 4, + searchPlaceholder: '请输入', + minWidth: 140, + formatter: textFormatter, + }, + { + label: '客户', + prop: 'customerName', + search: true, + searchSpan: 5, + searchOrder: 3, + searchPlaceholder: '请输入', + minWidth: 140, + formatter: textFormatter, + }, + { + label: '承运商', + prop: 'carrierName', + search: true, + searchSpan: 5, + searchOrder: 2, + searchPlaceholder: '请输入', + minWidth: 140, + formatter: textFormatter, + }, + { + label: '明细行数', + prop: 'detailCount', + width: 100, + align: 'center', + formatter: row => row.detailCount ?? row.waybillCount ?? 0, + }, + { label: '创建时间', prop: 'createTime', width: 180, align: 'center', formatter: textFormatter }, + { label: '创建人', prop: 'createUserName', minWidth: 110, formatter: textFormatter }, + ], +}); diff --git a/src/views/settlement/components/formal-settlement-table-panel.vue b/src/views/settlement/components/formal-settlement-table-panel.vue index 816b985..7654dfd 100644 --- a/src/views/settlement/components/formal-settlement-table-panel.vue +++ b/src/views/settlement/components/formal-settlement-table-panel.vue @@ -1,155 +1,100 @@ diff --git a/src/views/settlement/formal-settlement.vue b/src/views/settlement/formal-settlement.vue index 1033caa..742cdb7 100644 --- a/src/views/settlement/formal-settlement.vue +++ b/src/views/settlement/formal-settlement.vue @@ -1,89 +1,39 @@