refactor(settlement): 全面重构结算相关页面为 avue-crud 组件

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

.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 一致）。
+  - 右侧接入 `<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。

.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)` 全局注册了全部图标，因此模板里可以写标签形式 `<Location />`（靠全局注册解析）。
 但 `:icon="OfficeBuilding"` 是**表达式**，编译成 `_ctx.OfficeBuilding`，只会从 data / props / computed / setup 返回值里取 —— **组件对象必须放进 `data()`**；放进 `components: {}` 注册里模板取不到，会静默渲染不出图标（不报错，只是空白）。

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);

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 },
+  ],
+});

src/views/settlement/components/formal-settlement-table-panel.vue

@@ -1,155 +1,100 @@
 <template>
-  <div class="fs-table-panel">
+  <avue-crud
-    <div class="fs-table-panel__toolbar">
+    ref="crud"
-      <div>
+    :option="option"
-        <el-button
+    :table-loading="loading"
-          v-if="hasPermission('add')"
+    :data="rows"
-          type="primary"
+    v-model:page="crudPage"
-          @click="$emit('create')"
+    @search-change="(params, done) => $emit('search-change', params, done)"
-          >新增</el-button
+    @search-reset="$emit('search-reset')"
-        >
+    @selection-change="handleSelectionChange"
-        <el-button
+    @refresh-change="$emit('refresh')"
-          v-if="showPaymentAction && hasPermission('payment')"
+    @on-load="page => $emit('load', page)"
-          type="primary"
+  >
-          plain
+    <template #menu-left>
-          :disabled="!selection.length"
+      <el-button v-if="hasPermission('add')" type="primary" @click="$emit('create')"
-          @click="$emit('payment')"
+        >新增</el-button
-          >付款申请</el-button
-        >
-        <el-button
-          v-if="hasPermission('sync')"
-          type="primary"
-          plain
-          :disabled="!selection.length"
-          :loading="syncLoading"
-          @click="$emit('sync')"
-          >同步金蝶</el-button
-        >
-        <el-button
-          v-if="hasPermission('print')"
-          type="primary"
-          plain
-          @click="emitSingle('print')"
-          >打印结算单</el-button
-        >
-        <el-button
-          v-if="hasPermission('export')"
-          type="primary"
-          plain
-          @click="$emit('export')"
-          >导出</el-button
-        >
-      </div>
-      <settlement-table-tools
-        :columns="columnSettingOptions"
-        v-model:visible-column-keys="visibleColumnKeys"
-        v-model:table-size="tableSize"
-        :search-visible="searchVisible"
-        @update:search-visible="$emit('update:searchVisible', $event)"
-        @refresh="$emit('refresh')"
-      />
-    </div>
-    <el-table
-      ref="tableRef"
-      v-loading="loading"
-      :data="rows"
-      :size="tableSize"
-      border
-      highlight-current-row
-      @current-change="handleCurrentChange"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
-      <el-table-column type="selection" width="52" fixed="left" align="center" />
-      <el-table-column
-        v-for="column in visibleColumns"
-        :key="column.prop"
-        v-bind="column"
-        align="center"
-        show-overflow-tooltip
       >
-        <template #default="{ row }">
+      <el-button
-          <el-link
+        v-if="showPaymentAction && hasPermission('payment')"
-            v-if="column.link && row[column.prop]"
+        type="primary"
-            type="primary"
+        plain
-            @click="emitAction('view', row)"
+        :disabled="!selection.length"
-            >{{ row[column.prop] }}</el-link
+        @click="$emit('payment')"
-          >
+        >付款申请</el-button
-          <el-tag
+      >
-            v-else-if="column.status"
+      <el-button
-            :type="statusType(row.approvalStatus)"
+        v-if="hasPermission('sync')"
-            class="status-text"
+        type="primary"
-            >{{ displayValue(row[column.prop]) }}</el-tag
+        plain
-          >
+        :disabled="!selection.length"
-          <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
+        :loading="syncLoading"
-          <span
+        @click="$emit('sync')"
-            v-else-if="column.prop === 'invoiceStatusName'"
+        >同步金蝶</el-button
-            :class="['fs-table-panel__invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]"
+      >
-          >{{ invoiceName(row.invoiceStatus, row.settlementType) }}</span>
+      <el-button v-if="hasPermission('print')" type="primary" plain @click="emitSingle('print')"
-          <span v-else-if="column.prop === 'paymentStatusName'">{{
+        >打印结算单</el-button
-            paymentName(row.paymentStatus)
+      >
-          }}</span>
+      <el-button v-if="hasPermission('export')" type="primary" plain @click="$emit('export')"
-          <span v-else-if="column.prop === 'kingdeeSyncStatus'">{{
+        >导出</el-button
-            kingdeeSyncName(row.kingdeeSyncStatus)
+      >
-          }}</span>
+    </template>
-          <span v-else-if="column.prop === 'adjustFlag'">{{ adjustFlag(row) }}</span>
+
-          <template v-else-if="column.prop === 'kingdeeLockStatus'">
+    <template #formalSettlementNo="{ row }">
-            <el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
+      <el-link type="primary" @click="emitAction('view', row)">{{
-              <el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
+        row.formalSettlementNo || '-'
-            </el-tooltip>
+      }}</el-link>
-            <span v-else>-</span>
+    </template>
-          </template>
+
-          <span v-else>{{ displayValue(row[column.prop]) }}</span>
+    <template #invoiceStatusName="{ row }">
-        </template>
+      <span :class="['fs-invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]">{{
-      </el-table-column>
+        invoiceName(row.invoiceStatus, row.settlementType)
-      <el-table-column label="操作" width="320" fixed="right" align="center">
+      }}</span>
-        <template #default="{ row }"
+    </template>
-          ><div class="fs-table-panel__links">
+
-            <el-link
+    <template #paymentStatusName="{ row }">{{ paymentName(row.paymentStatus) }}</template>
-              v-for="action in rowActions(row)"
+
-              :key="action.type"
+    <template #approvalStatusName="{ row }">
-              :type="action.danger ? 'danger' : 'primary'"
+      <el-tag :type="statusType(row.approvalStatus)" class="status-text">{{
-              @click="emitAction(action.type, row)"
+        row.approvalStatusName || '-'
-              >{{ action.label }}</el-link
+      }}</el-tag>
-            >
+    </template>
-          </div></template
+
-        >
+    <template #kingdeeSyncStatus="{ row }">{{ kingdeeSyncName(row.kingdeeSyncStatus) }}</template>
-      </el-table-column>
+
-    </el-table>
+    <template #kingdeeLockStatus="{ row }">
-    <div class="fs-table-panel__pagination">
+      <el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
-      <el-pagination
+        <el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
-        :current-page="page.current"
+      </el-tooltip>
-        :page-size="page.size"
+      <span v-else>-</span>
-        :total="page.total"
+    </template>
-        :page-sizes="[10, 20, 50, 100]"
+
-        layout="total, sizes, prev, pager, next, jumper"
+    <template #menu="{ row }">
-        @current-change="current => $emit('page-change', { current, size: page.size })"
+      <el-link
-        @size-change="size => $emit('page-change', { current: 1, size })"
+        v-for="action in rowActions(row)"
-      />
+        :key="action.type"
-    </div>
+        :type="action.danger ? 'danger' : 'primary'"
-  </div>
+        @click="emitAction(action.type, row)"
+        >{{ action.label }}</el-link
+      >
+    </template>
+  </avue-crud>
 </template>
 
 <script>
-import {
+import { invoiceStatusName } from '@/option/settlement/formalSettlementSearch';
-  invoiceStatusName,
+import { kingdeeSyncName, paymentStatusName } from '@/option/settlement/formalSettlement';
-  kingdeeSyncStatusOptions,
-  paymentStatusOptions,
-} from '@/option/settlement/formalSettlementSearch';
-import SettlementTableTools from './settlement-table-tools.vue';
 
 export default {
   name: 'FormalSettlementTablePanel',
-  components: { SettlementTableTools },
   props: {
+    option: { type: Object, required: true },
     rows: { type: Array, default: () => [] },
-    columns: { type: Array, default: () => [] },
     loading: { type: Boolean, default: false },
     syncLoading: { type: Boolean, default: false },
     page: { type: Object, required: true },
     hasPermission: { type: Function, required: true },
     mkEnabled: { type: Boolean, default: false },
-    searchVisible: { type: Boolean, default: true },
     /** 是否展示付款申请按钮（仅付款结算单） */
     showPaymentAction: { type: Boolean, default: true },
     billLabel: { type: String, default: '结算单' },
@@ -158,66 +103,38 @@ export default {
     'create',
     'payment',
     'sync',
-    'print',
     'export',
     'refresh',
-    'page-change',
+    'load',
     'action',
     'update:selection',
-    'update:searchVisible',
+    'search-change',
+    'search-reset',
   ],
   data() {
     return {
       selection: [],
-      tableSize: 'default',
-      visibleColumnKeys: [],
-      knownColumnProps: [],
     };
   },
   computed: {
-    columnSettingOptions() {
+    // 分页对象由父级持有，avue 内部翻页时同步回写同一个对象
-      return this.columns.map(column => ({
+    crudPage: {
-        prop: column.prop,
+      get() {
-        label: column.label,
+        return this.page;
-      }));
+      },
-    },
+      set(value) {
-    visibleColumns() {
+        Object.assign(this.page, value || {});
-      if (!this.visibleColumnKeys.length) return this.columns;
+      },
-      return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
     },
   },
   watch: {
-    columns: {
-      immediate: true,
-      handler(columns) {
-        const props = columns.map(column => column.prop);
-        if (!this.visibleColumnKeys.length) {
-          this.visibleColumnKeys = props;
-          this.knownColumnProps = props;
-          return;
-        }
-        const visible = new Set(this.visibleColumnKeys);
-        const known = new Set(this.knownColumnProps || []);
-        props.forEach(prop => {
-          if (!known.has(prop)) visible.add(prop);
-        });
-        this.knownColumnProps = props;
-        this.visibleColumnKeys = props.filter(prop => visible.has(prop));
-      },
-    },
     rows() {
       this.selection = [];
-      this.$refs.tableRef?.clearSelection();
+      this.$refs.crud?.toggleSelection?.();
       this.$emit('update:selection', this.selection);
     },
   },
   methods: {
-    handleCurrentChange(row) {
-      if (!row && this.selection.length === 1) {
-        this.selection = [];
-        this.$emit('update:selection', this.selection);
-      }
-    },
     handleSelectionChange(selection) {
       this.selection = selection;
       this.$emit('update:selection', selection);
@@ -273,20 +190,19 @@ export default {
       return invoiceStatusName(value, settlementType);
     },
     paymentName(value) {
-      return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
+      return paymentStatusName(value);
     },
     kingdeeSyncName(value) {
-      return kingdeeSyncStatusOptions.find(item => item.value === value)?.label || value || '-';
+      return kingdeeSyncName(value);
-    },
-    adjustFlag(row) {
-      // 原单已调整 / 重推生成的新单（显示来源原单号）
-      if (row.adjustStatusName) return row.adjustStatusName;
-      if (row.originFormalSettlementNo) return '调整后单';
-      return '-';
     },
     lockTag(row) {
       if (row.kingdeeLockStatus === 'locked') {
-        return { show: true, type: 'danger', label: '金蝶锁定中', tip: '该单据已被金蝶锁定，不可编辑/作废' };
+        return {
+          show: true,
+          type: 'danger',
+          label: '金蝶锁定中',
+          tip: '该单据已被金蝶锁定，不可编辑/作废',
+        };
       }
       if (row.kingdeeLockStatus === 'failed') {
         if ((row.kingdeeTryCount || 0) >= 5) {
@@ -316,30 +232,12 @@ export default {
       }
       return { show: false };
     },
-    displayValue(value) {
-      return value === null || value === undefined || value === '' ? '-' : value;
-    },
-    formatMoney(value, currency = 'RMB') {
-      return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
-    },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.fs-table-panel__toolbar {
+.fs-invoice-status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-.fs-table-panel__links {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-.fs-table-panel__invoice-status {
   &.is-unreceived {
     color: #f56c6c;
   }
@@ -347,12 +245,7 @@ export default {
     color: #e6a23c;
   }
   &.is-completed {
-    color: #67c23a;
+    color: #67c23c;
   }
 }
-.fs-table-panel__pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
 </style>

src/views/settlement/formal-settlement.vue

@@ -1,89 +1,39 @@
 <template>
   <basic-container class="formal-page">
-    <section v-show="searchVisible" class="formal-page__search">
+    <el-tabs
-      <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
+      v-if="!lockedSettlementType"
-        <div class="formal-page__search-grid">
+      type="border-card"
-          <el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
+      v-model="activeSettlementType"
-            <el-date-picker
+      @tab-change="handleSettlementTypeChange"
-              v-if="field.type === 'daterange'"
+    >
-              v-model="query[field.prop]"
+      <el-tab-pane label="应付" name="payable">
-              type="daterange"
+        <formal-settlement-table-panel
-              value-format="YYYY-MM-DD"
+          v-if="activeSettlementType === 'payable'"
-              format="YYYY-MM-DD"
+          key="payable"
-              range-separator="~"
+          v-bind="tablePanelProps"
-              start-placeholder="开始日期"
+          v-on="tablePanelListeners"
-              end-placeholder="结束日期"
+        />
-            />
+      </el-tab-pane>
-            <el-select
+      <el-tab-pane label="应收" name="receivable">
-              v-else-if="field.type === 'select'"
+        <formal-settlement-table-panel
-              v-model="query[field.prop]"
+          v-if="activeSettlementType === 'receivable'"
-              clearable
+          key="receivable"
-              placeholder="请选择"
+          v-bind="tablePanelProps"
-            >
+          v-on="tablePanelListeners"
-              <el-option
+        />
-                v-for="item in field.options"
+      </el-tab-pane>
-                :key="item.value"
+    </el-tabs>
-                :label="item.label"
+    <formal-settlement-table-panel
-                :value="item.value"
+      v-else
-              />
+      key="locked"
-            </el-select>
+      v-bind="tablePanelProps"
-            <el-cascader
+      v-on="tablePanelListeners"
-              v-else-if="field.type === 'cascader'"
+    />
-              v-model="query[field.prop]"
-              :options="organizationTreeOptions"
-              :props="organizationCascaderProps"
-              clearable
-              filterable
-              style="width: 100%"
-              placeholder="请选择"
-            />
-            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
-          </el-form-item>
-          <div class="formal-page__search-actions">
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-            <el-button @click="resetSearch">重置</el-button>
-            <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
-              {{ searchExpanded ? '收起' : '展开' }}
-            </el-button>
-          </div>
-        </div>
-      </el-form>
-    </section>
-
-    <section class="formal-page__table-panel">
-      <el-tabs
-        v-if="!lockedSettlementType"
-        type="border-card"
-        v-model="activeSettlementType"
-        @tab-change="handleSettlementTypeChange"
-      >
-        <el-tab-pane label="应付" name="payable">
-          <formal-settlement-table-panel
-            :key="'payable'"
-            v-bind="tablePanelProps"
-            v-on="tablePanelListeners"
-          />
-        </el-tab-pane>
-        <el-tab-pane label="应收" name="receivable">
-          <formal-settlement-table-panel
-            :key="'receivable'"
-            v-bind="tablePanelProps"
-            v-on="tablePanelListeners"
-          />
-        </el-tab-pane>
-      </el-tabs>
-      <formal-settlement-table-panel
-        v-else
-        :key="activeSettlementType"
-        v-bind="tablePanelProps"
-        v-on="tablePanelListeners"
-      />
-    </section>
     <formal-settlement-editor
       v-model="editor.visible"
       :record-id="editor.id"
       :readonly="editor.readonly"
-      @success="loadTable"
+      @success="onLoad(page)"
     />
     <el-dialog
       v-model="paymentDialog.visible"
@@ -152,7 +102,6 @@
 </template>
 
 <script>
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import { createSettlementTransfer } from '@/utils/settlement-transfer';
 import {
@@ -164,33 +113,13 @@ import { isAdministrator } from '@/utils/auth';
 import { downloadFile } from '@/utils/util';
 import * as api from '@/api/settlement/formalSettlement';
 import * as paymentApi from '@/api/payment/paymentApplication';
-import {
+import { formalSettlementOption } from '@/option/settlement/formalSettlement';
-  invoiceStatusName,
-  formalSettlementSearchFields,
-  paymentStatusOptions,
-} from '@/option/settlement/formalSettlementSearch';
 import organizationSearch from '@/mixins/organization-search';
-import { formalSettlementTableColumns } from '@/option/settlement/formalSettlementTable';
 import FormalSettlementEditor from './components/formal-settlement-editor.vue';
 import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
 import { submitMkApprovalFlow, loadMkEnabled } from '@/utils/mk-approval';
 import { getMKApprovalUrl } from '@/api/system/business-process';
 
-const emptyQuery = () => ({
-  formalSettlementNo: '',
-  preSettlementNo: '',
-  projectName: '',
-  deptName: [],
-  contractNo: '',
-  payerName: '',
-  payeeName: '',
-  invoiceStatus: '',
-  paymentStatus: '',
-  approvalStatus: '',
-  kingdeeSyncStatus: '',
-  createDateRange: [],
-});
-
 export default {
   name: 'FormalSettlement',
   components: { FormalSettlementEditor, FormalSettlementTablePanel },
@@ -205,19 +134,14 @@ export default {
   },
   data() {
     return {
-      ArrowDown,
+      option: formalSettlementOption(),
-      ArrowUp,
+      query: {},
-      query: emptyQuery(),
-      searchExpanded: false,
-      searchVisible: true,
       activeSettlementType: 'payable',
-      searchFields: formalSettlementSearchFields,
-      columns: formalSettlementTableColumns,
       rows: [],
       selection: [],
       loading: false,
       syncLoading: false,
-      page: { current: 1, size: 10, total: 0 },
+      page: { currentPage: 1, pageSize: 10, pageSizes: [10, 20, 50, 100], total: 0 },
       editor: { visible: false, id: null, readonly: false },
       paymentDialog: {
         visible: false,
@@ -248,14 +172,13 @@ export default {
     },
     tablePanelProps() {
       return {
+        option: this.option,
         rows: this.rows,
-        columns: this.columns,
         loading: this.loading,
         page: this.page,
         hasPermission: this.hasPermissionFn,
         syncLoading: this.syncLoading,
         mkEnabled: this.mkEnabled,
-        searchVisible: this.searchVisible,
         showPaymentAction: this.activeSettlementType === 'payable',
         billLabel: this.billLabel,
       };
@@ -266,20 +189,16 @@ export default {
         payment: this.openPaymentDialog,
         sync: this.handleSync,
         export: this.handleExport,
-        refresh: this.loadTable,
+        refresh: () => this.onLoad(this.page),
-        'page-change': this.onPageChange,
+        load: this.onLoad,
         action: this.onAction,
+        'search-change': this.searchChange,
+        'search-reset': this.searchReset,
         'update:selection': selection => {
           this.selection = selection;
         },
-        'update:searchVisible': visible => {
-          this.searchVisible = visible;
-        },
       };
     },
-    visibleSearchFields() {
-      return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
-    },
     paymentAvailable() {
       return this.paymentRemaining(this.paymentDialog.row);
     },
@@ -293,6 +212,10 @@ export default {
         }
       },
     },
+    activeSettlementType() {
+      // 切换结算类型后由新挂载的 avue-crud 触发 on-load，此处只重置分页，避免重复请求
+      this.page.currentPage = 1;
+    },
     '$route.query.detailNo'(detailNo) {
       if (detailNo) this.openRouteDetail(detailNo);
     },
@@ -300,13 +223,9 @@ export default {
   created() {
     // 标签机制按 fullPath 缓存同页多实例：仅当前路由实例应响应 detailNo 跳转，防止缓存旧实例也弹窗
     this.ownFullPath = this.$route.fullPath;
+    this.loadOrganizationOptions();
   },
   mounted() {
-    if (this.lockedSettlementType === 'payable' || this.lockedSettlementType === 'receivable') {
-      this.activeSettlementType = this.lockedSettlementType;
-    }
-    this.loadOrganizationOptions();
-    this.loadTable();
     this.openRouteDetail();
     loadMkEnabled()
       .then(enabled => {
@@ -319,18 +238,18 @@ export default {
   activated() {
     if (sessionStorage.getItem('formal-settlement-list-refresh') === '1') {
       sessionStorage.removeItem('formal-settlement-list-refresh');
-      this.loadTable();
+      this.onLoad(this.page);
     }
   },
   methods: {
     hasPermission(actionOrCode) {
       return this.hasPermissionFn(actionOrCode);
     },
-    async loadTable() {
+    async onLoad(page) {
       this.loading = true;
       try {
         const params = this.buildQueryParams();
-        const response = await api.getList(this.page.current, this.page.size, params);
+        const response = await api.getList(page.currentPage, page.pageSize, params);
         const data = this.unwrapData(response);
         this.rows = data.records || [];
         this.page.total = data.total || 0;
@@ -338,25 +257,24 @@ export default {
         this.loading = false;
       }
     },
-    handleSearch() {
+    searchChange(params, done) {
-      this.page.current = 1;
+      // 所属组织级联返回 id 路径，转成组织名称传给后端
-      this.loadTable();
+      this.normalizeOrganizationSearch(params, 'deptName');
+      const range = params.createDateRange || [];
+      delete params.createDateRange;
+      this.query = {
+        ...params,
+        createStartDate: range[0] || '',
+        createEndDate: range[1] || '',
+      };
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+      done();
     },
-    resetSearch() {
+    searchReset() {
-      this.query = emptyQuery();
+      this.query = {};
-      this.handleSearch();
+      this.page.currentPage = 1;
-    },
+      this.onLoad(this.page);
-    toggleSearch() {
-      this.searchExpanded = !this.searchExpanded;
-    },
-    handleSizeChange() {
-      this.page.current = 1;
-      this.loadTable();
-    },
-    onPageChange({ current, size }) {
-      this.page.current = current;
-      this.page.size = size;
-      this.loadTable();
     },
     onAction({ type, row }) {
       const handlers = {
@@ -418,7 +336,7 @@ export default {
       await this.$confirm(`确认删除该${this.billLabel}草稿？`, '提示', { type: 'warning' });
       await api.remove(row.id);
       this.$message.success('删除成功');
-      this.loadTable();
+      this.onLoad(this.page);
     },
     async handleSubmit(row) {
       await this.$confirm('提交后来源预付结算单将保持锁定，确认提交？', '提示', { type: 'warning' });
@@ -432,7 +350,7 @@ export default {
         mkEnabled: this.mkEnabled,
       });
       this.$message.success('提交成功');
-      this.loadTable();
+      this.onLoad(this.page);
     },
     handleMkAudit(row) {
       if (!row?.id) {
@@ -465,7 +383,7 @@ export default {
       } else {
         this.$message.success(res.data.msg || '审批通过');
       }
-      this.loadTable();
+      this.onLoad(this.page);
     },
     async handleReturn(row) {
       const { value } = await this.$prompt('请输入驳回原因', '审批驳回', {
@@ -473,7 +391,7 @@ export default {
       });
       await api.returnBill({ id: row.id, reason: value });
       this.$message.success('已驳回');
-      this.loadTable();
+      this.onLoad(this.page);
     },
     async handleVoid(row) {
       const { value } = await this.$prompt('请输入作废原因', `作废${this.billLabel}`, {
@@ -481,7 +399,7 @@ export default {
       });
       await api.voidBill({ id: row.id, reason: value });
       this.$message.success('已作废');
-      this.loadTable();
+      this.onLoad(this.page);
     },
     selectedOne(action) {
       if (this.selection.length !== 1) {
@@ -511,7 +429,7 @@ export default {
             lastFailReason = String(error?.message || error || '未知错误').trim() || '未知错误';
           }
         }
-        await this.loadTable();
+        await this.onLoad(this.page);
         if (rows.length === 1) {
           if (failCount) {
             await this.$alert(`同步失败，${lastFailReason}`, '同步结果', {
@@ -635,7 +553,7 @@ export default {
         );
         this.paymentDialog.visible = false;
         this.selection = [];
-        this.loadTable();
+        this.onLoad(this.page);
       } finally {
         this.paymentDialog.loading = false;
       }
@@ -685,15 +603,8 @@ export default {
       );
     },
     buildQueryParams() {
-      // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
+      const params = { ...this.query };
-      const params = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
       params.settlementType = this.lockedSettlementType || this.activeSettlementType;
-      const range = params.createDateRange || [];
-      delete params.createDateRange;
-      if (range.length === 2) {
-        params.createStartDate = range[0];
-        params.createEndDate = range[1];
-      }
       return params;
     },
     unwrapData(response) {
@@ -701,8 +612,8 @@ export default {
       return body?.data || body;
     },
     handleSettlementTypeChange() {
-      this.page.current = 1;
+      // 分页重置与数据加载由 activeSettlementType watcher + 新挂载 crud 的 on-load 完成
-      this.loadTable();
+      this.selection = [];
     },
     escapeHtml(value) {
       return String(value || '-').replace(
@@ -710,24 +621,6 @@ export default {
         char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char])
       );
     },
-    isEditable(row) {
-      return ['draft', 'returned'].includes(row.approvalStatus);
-    },
-    statusType(status) {
-      return (
-        { approved: 'success', reviewing: 'warning', returned: 'danger', voided: 'info' }[status] ||
-        ''
-      );
-    },
-    invoiceName(value, settlementType) {
-      return invoiceStatusName(value, settlementType);
-    },
-    paymentName(value) {
-      return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
-    },
-    displayValue(value) {
-      return value === null || value === undefined || value === '' ? '-' : value;
-    },
     formatMoney(value, currency = 'RMB') {
       return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
     },
@@ -740,62 +633,21 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.formal-page__search {
+.formal-page {
-  padding: 12px 12px 4px;
+  :deep(.el-table) {
-  background: #fff;
+    --el-table-border-color: #eff1f7;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  }
-}
+  :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
-.formal-page__search-grid {
+  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
-  display: grid;
+  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+    background: #fafafa;
-  gap: 8px 24px;
+  }
-  align-items: start;
-}
-.formal-page__search :deep(.el-form-item) {
-  margin-bottom: 8px;
-}
-.formal-page__search :deep(.el-form-item__label) {
-  white-space: nowrap;
-}
-.formal-page__search :deep(.el-input),
-.formal-page__search :deep(.el-select),
-.formal-page__search :deep(.el-date-editor) {
-  width: 100%;
-}
-.formal-page__search-actions {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.formal-page__table-panel {
-  margin-top: 8px;
 }
 .formal-payment-dialog__batch-tip {
   margin-bottom: 12px;
   color: #606266;
 }
-.formal-page :deep(.el-table) {
-  --el-table-border-color: #eff1f7;
-}
-.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
-.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
-.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
-  background: #fafafa;
-}
 :deep(.formal-page.basic-container .basic-container__card > .el-card__body) {
   padding: 0;
 }
-@media (max-width: 1200px) {
-  .formal-page__search-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 760px) {
-  .formal-page__search-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>

src/views/settlement/settlement-import.vue

@@ -1,133 +1,56 @@
 <template>
   <basic-container class="settlement-import-page">
-    <section v-show="searchVisible" class="settlement-import-page__search">
+    <avue-crud
-      <el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
+      ref="crud"
-        <div class="settlement-import-page__search-grid">
+      :option="option"
-          <el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
+      :table-loading="loading"
-            <el-select
+      :data="rows"
-              v-if="field.type === 'select'"
+      v-model:page="page"
-              v-model="query[field.prop]"
+      @search-change="searchChange"
-              clearable
+      @search-reset="searchReset"
-              filterable
+      @current-change="currentChange"
-              allow-create
+      @size-change="sizeChange"
-              default-first-option
+      @refresh-change="refreshChange"
-              placeholder="请选择"
+      @on-load="onLoad"
-            >
+    >
-              <el-option
+      <template #menu-left>
-                v-for="item in field.options"
+        <el-button
-                :key="item.value"
+          v-if="hasPermission('settlement_import_add')"
-                :label="item.label"
+          type="primary"
-                :value="item.value"
+          @click="openCreate"
-              />
+          >新增</el-button
-            </el-select>
+        >
-            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
+      </template>
-          </el-form-item>
-          <div class="settlement-import-page__search-actions">
-            <el-button type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="resetSearch">清空</el-button>
-            <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
-              {{ searchExpanded ? '收起' : '展开' }}
-            </el-button>
-          </div>
-        </div>
-      </el-form>
-    </section>
 
-    <section class="settlement-import-page__table-panel">
+      <template #batchNo="{ row }">
-      <div class="settlement-import-page__toolbar">
+        <el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
-        <div class="settlement-import-page__toolbar-left">
+      </template>
-          <el-button
-            v-if="hasPermission('settlement_import_add')"
-            type="primary"
-            @click="openCreate"
-          >
-            新增
-          </el-button>
-          <el-button plain @click="refreshTable">刷新</el-button>
-        </div>
-      </div>
 
-      <el-table v-loading="loading" :data="rows" border class="settlement-import-page__table">
+      <template #importStatusName="{ row }">
-        <el-table-column type="index" label="序号" width="64" align="center" />
+        <el-tag :type="statusTagType(row.importStatus)" effect="plain">{{
-        <el-table-column prop="batchNo" label="导入批次号" min-width="160">
+          row.importStatusName || importStatusLabel(row.importStatus)
-          <template #default="{ row }">
+        }}</el-tag>
-            <el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
+      </template>
-          </template>
-        </el-table-column>
-        <el-table-column prop="importStatusName" label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusTagType(row.importStatus)" effect="plain">
-              {{ row.importStatusName || importStatusLabel(row.importStatus) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="settlementTypeName" label="导入类型" min-width="100">
-          <template #default="{ row }">
-            {{ row.settlementTypeName || settlementTypeLabel(row.settlementType) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="settlementBillTypeName" label="结算单" min-width="110">
-          <template #default="{ row }">
-            {{ row.settlementBillTypeName || settlementBillTypeLabel(row.settlementBillType) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="projectName" label="项目" min-width="140" show-overflow-tooltip />
-        <el-table-column prop="customerName" label="客户" min-width="140" show-overflow-tooltip />
-        <el-table-column prop="carrierName" label="承运商" min-width="140" show-overflow-tooltip />
-        <el-table-column label="明细行数" width="100" align="center">
-          <template #default="{ row }">
-            {{ row.detailCount ?? row.waybillCount ?? 0 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" min-width="170" />
-        <el-table-column prop="createUserName" label="创建人" min-width="120">
-          <template #default="{ row }">{{ row.createUserName || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right">
-          <template #default="{ row }">
-            <div class="settlement-import-page__row-actions">
-              <el-link type="primary" @click="openDetail(row)">查看</el-link>
-              <el-link
-                v-if="row.importStatus === 'draft'"
-                type="primary"
-                @click="editDraft(row)"
-              >
-                编辑
-              </el-link>
-              <el-link
-                v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
-                type="danger"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-link>
-              <el-link
-                v-if="
-                  row.importStatus === 'completed' && hasPermission('settlement_import_void')
-                "
-                type="danger"
-                @click="openVoid(row)"
-              >
-                作废
-              </el-link>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
 
-      <div class="settlement-import-page__pagination">
+      <template #menu="{ row }">
-        <el-pagination
+        <el-link type="primary" @click="openDetail(row)">查看</el-link>
-          background
+        <el-link v-if="row.importStatus === 'draft'" type="primary" @click="editDraft(row)"
-          v-model:current-page="page.current"
+          >编辑</el-link
-          v-model:page-size="page.size"
+        >
-          layout="total, sizes, prev, pager, next, jumper"
+        <el-link
-          :page-sizes="[10, 20, 50, 100]"
+          v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
-          :total="page.total"
+          type="danger"
-          @current-change="loadTable"
+          @click="handleDelete(row)"
-          @size-change="handleSizeChange"
+          >删除</el-link
-        />
+        >
-      </div>
+        <el-link
-    </section>
+          v-if="row.importStatus === 'completed' && hasPermission('settlement_import_void')"
+          type="danger"
+          @click="openVoid(row)"
+          >作废</el-link
+        >
+      </template>
+    </avue-crud>
 
     <el-dialog v-model="voidVisible" title="作废导入结算单" width="480px" append-to-body>
       <el-form
@@ -157,31 +80,11 @@
 </template>
 
 <script>
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+import { h } from 'vue';
+import { ElOption, ElSelect } from 'element-plus';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/settlement/settlementImport';
-
+import { settlementImportOption, importStatusLabel } from '@/option/settlement/settlementImport';
-const emptyQuery = () => ({
-  batchNo: '',
-  settlementType: '',
-  importStatus: '',
-  projectName: '',
-  customerName: '',
-  carrierName: '',
-});
-
-const SETTLEMENT_TYPE_OPTIONS = [
-  { label: '全部', value: '' },
-  { label: '应收', value: 'receivable' },
-  { label: '应付', value: 'payable' },
-];
-
-const IMPORT_STATUS_OPTIONS = [
-  { label: '全部', value: '' },
-  { label: '草稿', value: 'draft' },
-  { label: '已完成', value: 'completed' },
-  { label: '已作废', value: 'voided' },
-];
 
 const SETTLEMENT_IMPORT_LIST_REFRESH_KEY = 'settlement-import-list-refresh';
 
@@ -189,14 +92,16 @@ export default {
   name: 'SettlementImport',
   data() {
     return {
-      ArrowDown,
-      ArrowUp,
-      searchVisible: true,
-      searchExpanded: false,
-      loading: false,
-      query: emptyQuery(),
       rows: [],
-      page: { current: 1, size: 10, total: 0 },
+      loading: false,
+      query: {},
+      option: settlementImportOption(),
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        pageSizes: [10, 20, 50, 100],
+        total: 0,
+      },
       batchNoOptions: [],
       voidVisible: false,
       voidLoading: false,
@@ -215,38 +120,10 @@ export default {
       const authority = this.userInfo?.authority || '';
       return String(authority).includes('admin');
     },
-    searchFields() {
-      return [
-        {
-          prop: 'batchNo',
-          label: '导入批次号',
-          type: 'select',
-          options: this.batchNoOptions,
-        },
-        {
-          prop: 'importStatus',
-          label: '状态',
-          type: 'select',
-          options: IMPORT_STATUS_OPTIONS,
-        },
-        {
-          prop: 'settlementType',
-          label: '导入类型',
-          type: 'select',
-          options: SETTLEMENT_TYPE_OPTIONS,
-        },
-        { prop: 'projectName', label: '项目', type: 'input' },
-        { prop: 'customerName', label: '客户', type: 'input' },
-        { prop: 'carrierName', label: '承运商', type: 'input' },
-      ];
-    },
-    visibleSearchFields() {
-      return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
-    },
   },
   created() {
+    this.setBatchNoSearchRender();
     this.loadOptions();
-    this.loadTable();
   },
   activated() {
     this.consumeListRefresh();
@@ -267,93 +144,99 @@ export default {
         return;
       }
       sessionStorage.removeItem(SETTLEMENT_IMPORT_LIST_REFRESH_KEY);
-      this.page.current = 1;
+      this.page.currentPage = 1;
       this.loadOptions();
-      this.loadTable();
+      this.onLoad(this.page);
     },
     hasPermission(code) {
       return this.isAdmin || this.validData(this.permission?.[code], false);
     },
-    importStatusLabel(value) {
+    importStatusLabel,
-      return (
-        IMPORT_STATUS_OPTIONS.find(item => item.value === value)?.label || value || '-'
-      );
-    },
     statusTagType(status) {
       if (status === 'draft') return 'info';
       if (status === 'completed') return 'success';
       if (status === 'voided') return 'danger';
       return '';
     },
-    settlementTypeLabel(value) {
-      return (
-        SETTLEMENT_TYPE_OPTIONS.find(item => item.value === value)?.label || value || '-'
-      );
-    },
-    settlementBillTypeLabel(value) {
-      if (value === 'pre') return '预结算单';
-      return '正式结算单';
-    },
     unwrapData(response) {
       const body = response?.data || response || {};
       return body?.data !== undefined ? body.data : body;
     },
+    /** 批次号搜索控件：可搜索 + 可手输，选项来自已导入批次 */
+    setBatchNoSearchRender() {
+      const column = this.findColumn(this.option.column, 'batchNo');
+      if (!column) return;
+      column.renderSearch = scope =>
+        h(
+          ElSelect,
+          {
+            modelValue: scope.row?.batchNo ?? '',
+            'onUpdate:modelValue': value => {
+              if (scope.row) scope.row.batchNo = value ?? '';
+            },
+            clearable: true,
+            filterable: true,
+            allowCreate: true,
+            defaultFirstOption: true,
+            placeholder: '请选择',
+            style: 'width: 100%',
+          },
+          () =>
+            this.batchNoOptions.map(item =>
+              h(ElOption, { key: item.value, label: item.label, value: item.value })
+            )
+        );
+    },
     async loadOptions() {
       try {
         const response = await api.getOptions();
         const options = this.unwrapData(response) || {};
         const batchNos = Array.isArray(options.batchNos) ? options.batchNos : [];
-        this.batchNoOptions = [
+        this.batchNoOptions = batchNos.map(item => {
-          { label: '全部', value: '' },
+          if (typeof item === 'string') {
-          ...batchNos.map(item => {
+            return { label: item, value: item };
-            if (typeof item === 'string') {
+          }
-              return { label: item, value: item };
+          const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
-            }
+          const label = item.name ?? item.label ?? item.batchNo ?? value;
-            const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
+          return { label: String(label || ''), value: String(value || '') };
-            const label = item.name ?? item.label ?? item.batchNo ?? value;
-            return { label: String(label || ''), value: String(value || '') };
-          }),
-        ];
-      } catch (error) {
-        this.batchNoOptions = [{ label: '全部', value: '' }];
-      }
-    },
-    async loadTable() {
-      this.loading = true;
-      try {
-        const response = await api.getList(this.page.current, this.page.size, {
-          batchNo: this.query.batchNo || undefined,
-          settlementType: this.query.settlementType || undefined,
-          importStatus: this.query.importStatus || undefined,
-          projectName: this.query.projectName || undefined,
-          customerName: this.query.customerName || undefined,
-          carrierName: this.query.carrierName || undefined,
         });
-        const data = this.unwrapData(response) || {};
+      } catch (error) {
-        this.rows = data.records || [];
+        this.batchNoOptions = [];
-        this.page.total = Number(data.total || 0);
-      } finally {
-        this.loading = false;
       }
     },
-    refreshTable() {
+    onLoad(page) {
+      this.loading = true;
+      api
+        .getList(page.currentPage, page.pageSize, { ...this.query })
+        .then(response => {
+          const data = this.unwrapData(response) || {};
+          this.rows = data.records || [];
+          this.page.total = Number(data.total || 0);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    searchChange(params, done) {
+      this.query = { ...params };
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
       this.loadOptions();
-      this.loadTable();
+      this.onLoad(this.page);
-    },
-    handleSearch() {
-      this.page.current = 1;
-      this.loadTable();
-    },
-    resetSearch() {
-      this.query = emptyQuery();
-      this.handleSearch();
-    },
-    toggleSearch() {
-      this.searchExpanded = !this.searchExpanded;
-    },
-    handleSizeChange() {
-      this.page.current = 1;
-      this.loadTable();
     },
     openCreate() {
       this.$router.push({ path: '/settlement/settlement-import/form' });
@@ -379,8 +262,7 @@ export default {
         });
         await api.removeDraft(row.id);
         this.$message.success('删除成功');
-        this.loadTable();
+        this.refreshChange();
-        this.loadOptions();
       } catch (error) {
         if (error === 'cancel' || error === 'close') return;
         this.$message.error(error?.message || '删除失败');
@@ -401,7 +283,7 @@ export default {
         });
         this.$message.success('作废成功');
         this.voidVisible = false;
-        this.loadTable();
+        this.onLoad(this.page);
         this.loadOptions();
       } finally {
         this.voidLoading = false;
@@ -412,95 +294,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.settlement-import-page__search {
+.settlement-import-page :deep(.el-table) {
-  padding: 12px 12px 4px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.settlement-import-page__search-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px 24px;
-  align-items: start;
-}
-
-.settlement-import-page__search :deep(.el-form-item) {
-  margin-bottom: 8px;
-}
-
-.settlement-import-page__search :deep(.el-form-item__label) {
-  white-space: nowrap;
-}
-
-.settlement-import-page__search :deep(.el-input),
-.settlement-import-page__search :deep(.el-select) {
-  width: 100%;
-}
-
-.settlement-import-page__search-actions {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.settlement-import-page__table-panel {
-  margin-top: 8px;
-  background: #fff;
-}
-
-.settlement-import-page__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0 0;
-}
-
-.settlement-import-page__toolbar-left {
-  display: flex;
-  gap: 8px;
-}
-
-.settlement-import-page__table {
   --el-table-border-color: #eff1f7;
 }
 
-.settlement-import-page__table :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
+.settlement-import-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
-.settlement-import-page__table
+.settlement-import-page
   :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
-.settlement-import-page__table
+.settlement-import-page
   :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
   background: #fafafa;
 }
 
-.settlement-import-page__row-actions {
+:deep(.settlement-import-page.basic-container .basic-container__card > .el-card__body) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.settlement-import-page__pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding: 12px 0;
-}
-
-.settlement-import-page :deep(.basic-container__card > .el-card__body) {
   padding: 0;
 }
-
-@media (max-width: 1200px) {
-  .settlement-import-page__search-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 760px) {
-  .settlement-import-page__search-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>

vite.config.mjs

@@ -49,28 +49,28 @@ export default ({ mode, command }) => {
       __VUE_I18N_LEGACY_API__: true,
       __INTLIFY_PROD_DEVTOOLS__: false,
     },
-    server: {
-      port: 2888,
-      proxy: {
-        '/api': {
-          // 本地网关默认 80 端口（blade-gateway bootstrap.yml）；开发时需先启动网关及 blade-auth/blade-system 等服务
-          // 注意：本机 8080 一般是 Nacos，不是业务网关
-          target: 'http://localhost',
-          // target: 'http://172.16.203.228:8000', // 仅联调远程网关时启用（且不要 rewrite）
-          changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, ''),
-        },
-      },
-    },
     // server: {
-    //   port: 2889,
+    //   port: 2888,
     //   proxy: {
     //     '/api': {
-    //       target: 'http://172.16.203.228:8000',
+    //       // 本地网关默认 80 端口（blade-gateway bootstrap.yml）；开发时需先启动网关及 blade-auth/blade-system 等服务
+    //       // 注意：本机 8080 一般是 Nacos，不是业务网关
+    //       target: 'http://localhost',
+    //       // target: 'http://172.16.203.228:8000', // 仅联调远程网关时启用（且不要 rewrite）
     //       changeOrigin: true,
+    //       rewrite: path => path.replace(/^\/api/, ''),
     //     },
     //   },
     // },
+    server: {
+      port: 2889,
+      proxy: {
+        '/api': {
+          target: 'http://172.16.203.228:8000',
+          changeOrigin: true,
+        },
+      },
+    },
     resolve: {
       alias: {
         '~': resolve(__dirname, './'),