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 命名，支持多页容量选择 - 调整部分接口调用及事件回调，保障新组件兼容已有业务流程及权限控制 - 移除废弃的内部变量与混入，针对权限控制和字段渲染进行明确封装和暴露 - 保持功能行为不变的前提下提升代码可维护性和复用性，增强组件封装与状态同步能力
2026-10-20 18:57:28 +08:00
parent 0e57de5c71
commit 09ce6472b0
8 changed files with 712 additions and 788 deletions
@@ -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 },
+  ],
+});