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 命名，支持多页容量选择
- 调整部分接口调用及事件回调，保障新组件兼容已有业务流程及权限控制
- 移除废弃的内部变量与混入，针对权限控制和字段渲染进行明确封装和暴露
- 保持功能行为不变的前提下提升代码可维护性和复用性，增强组件封装与状态同步能力

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

@@ -1,155 +1,100 @@
 <template>
-  <div class="fs-table-panel">
-    <div class="fs-table-panel__toolbar">
-      <div>
-        <el-button
-          v-if="hasPermission('add')"
-          type="primary"
-          @click="$emit('create')"
-          >新增</el-button
-        >
-        <el-button
-          v-if="showPaymentAction && hasPermission('payment')"
-          type="primary"
-          plain
-          :disabled="!selection.length"
-          @click="$emit('payment')"
-          >付款申请</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
+  <avue-crud
+    ref="crud"
+    :option="option"
+    :table-loading="loading"
+    :data="rows"
+    v-model:page="crudPage"
+    @search-change="(params, done) => $emit('search-change', params, done)"
+    @search-reset="$emit('search-reset')"
+    @selection-change="handleSelectionChange"
+    @refresh-change="$emit('refresh')"
+    @on-load="page => $emit('load', page)"
+  >
+    <template #menu-left>
+      <el-button v-if="hasPermission('add')" type="primary" @click="$emit('create')"
+        >新增</el-button
       >
-        <template #default="{ row }">
-          <el-link
-            v-if="column.link && row[column.prop]"
-            type="primary"
-            @click="emitAction('view', row)"
-            >{{ row[column.prop] }}</el-link
-          >
-          <el-tag
-            v-else-if="column.status"
-            :type="statusType(row.approvalStatus)"
-            class="status-text"
-            >{{ displayValue(row[column.prop]) }}</el-tag
-          >
-          <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
-          <span
-            v-else-if="column.prop === 'invoiceStatusName'"
-            :class="['fs-table-panel__invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]"
-          >{{ invoiceName(row.invoiceStatus, row.settlementType) }}</span>
-          <span v-else-if="column.prop === 'paymentStatusName'">{{
-            paymentName(row.paymentStatus)
-          }}</span>
-          <span v-else-if="column.prop === 'kingdeeSyncStatus'">{{
-            kingdeeSyncName(row.kingdeeSyncStatus)
-          }}</span>
-          <span v-else-if="column.prop === 'adjustFlag'">{{ adjustFlag(row) }}</span>
-          <template v-else-if="column.prop === 'kingdeeLockStatus'">
-            <el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
-              <el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
-            </el-tooltip>
-            <span v-else>-</span>
-          </template>
-          <span v-else>{{ displayValue(row[column.prop]) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="320" fixed="right" align="center">
-        <template #default="{ row }"
-          ><div class="fs-table-panel__links">
-            <el-link
-              v-for="action in rowActions(row)"
-              :key="action.type"
-              :type="action.danger ? 'danger' : 'primary'"
-              @click="emitAction(action.type, row)"
-              >{{ action.label }}</el-link
-            >
-          </div></template
-        >
-      </el-table-column>
-    </el-table>
-    <div class="fs-table-panel__pagination">
-      <el-pagination
-        :current-page="page.current"
-        :page-size="page.size"
-        :total="page.total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="current => $emit('page-change', { current, size: page.size })"
-        @size-change="size => $emit('page-change', { current: 1, size })"
-      />
-    </div>
-  </div>
+      <el-button
+        v-if="showPaymentAction && hasPermission('payment')"
+        type="primary"
+        plain
+        :disabled="!selection.length"
+        @click="$emit('payment')"
+        >付款申请</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
+      >
+    </template>
+
+    <template #formalSettlementNo="{ row }">
+      <el-link type="primary" @click="emitAction('view', row)">{{
+        row.formalSettlementNo || '-'
+      }}</el-link>
+    </template>
+
+    <template #invoiceStatusName="{ row }">
+      <span :class="['fs-invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]">{{
+        invoiceName(row.invoiceStatus, row.settlementType)
+      }}</span>
+    </template>
+
+    <template #paymentStatusName="{ row }">{{ paymentName(row.paymentStatus) }}</template>
+
+    <template #approvalStatusName="{ row }">
+      <el-tag :type="statusType(row.approvalStatus)" class="status-text">{{
+        row.approvalStatusName || '-'
+      }}</el-tag>
+    </template>
+
+    <template #kingdeeSyncStatus="{ row }">{{ kingdeeSyncName(row.kingdeeSyncStatus) }}</template>
+
+    <template #kingdeeLockStatus="{ row }">
+      <el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
+        <el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
+      </el-tooltip>
+      <span v-else>-</span>
+    </template>
+
+    <template #menu="{ row }">
+      <el-link
+        v-for="action in rowActions(row)"
+        :key="action.type"
+        :type="action.danger ? 'danger' : 'primary'"
+        @click="emitAction(action.type, row)"
+        >{{ action.label }}</el-link
+      >
+    </template>
+  </avue-crud>
 </template>
 
 <script>
-import {
-  invoiceStatusName,
-  kingdeeSyncStatusOptions,
-  paymentStatusOptions,
-} from '@/option/settlement/formalSettlementSearch';
-import SettlementTableTools from './settlement-table-tools.vue';
+import { invoiceStatusName } from '@/option/settlement/formalSettlementSearch';
+import { kingdeeSyncName, paymentStatusName } from '@/option/settlement/formalSettlement';
 
 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() {
-      return this.columns.map(column => ({
-        prop: column.prop,
-        label: column.label,
-      }));
-    },
-    visibleColumns() {
-      if (!this.visibleColumnKeys.length) return this.columns;
-      return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
+    // 分页对象由父级持有，avue 内部翻页时同步回写同一个对象
+    crudPage: {
+      get() {
+        return this.page;
+      },
+      set(value) {
+        Object.assign(this.page, value || {});
+      },
     },
   },
   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 || '-';
-    },
-    adjustFlag(row) {
-      // 原单已调整 / 重推生成的新单（显示来源原单号）
-      if (row.adjustStatusName) return row.adjustStatusName;
-      if (row.originFormalSettlementNo) return '调整后单';
-      return '-';
+      return kingdeeSyncName(value);
     },
     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 {
-  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 {
+.fs-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>