Merge branch 'master' into feature/bfi-api-rate

# Conflicts:
#	src/components/vehicle-attachment-table/main.vue
#	src/option/payment/paymentApplication.js
#	src/views/payment/payment-application.vue
#	src/views/payment/receipt-claim-record.vue
#	src/views/vehicle/customer-archive.vue

src/views/payment/receipt-flow.vue

@@ -1,6 +1,6 @@
 <template>
   <basic-container class="receipt-flow-page">
-    <section class="receipt-flow-page__search">
+    <section v-if="searchVisible" class="receipt-flow-page__search">
       <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
         <div class="receipt-flow-page__search-grid">
           <el-form-item label="认领通知单">
@@ -97,33 +97,43 @@
 
     <section class="receipt-flow-page__table-panel">
       <div class="receipt-flow-page__toolbar">
-        <el-button
-          v-if="hasPermission('receipt_flow_sync')"
-          type="primary"
-          :loading="syncing"
-          @click="handleSync"
-        >
-          手动同步流水
-        </el-button>
-        <el-button
-          v-if="hasPermission('receipt_flow_claim')"
-          type="primary"
-          :disabled="!selectedRows.length"
-          @click="openBatchClaim"
-        >
-          批量认领
-        </el-button>
+        <div class="receipt-flow-page__toolbar-left">
+          <el-button
+            v-if="hasPermission('receipt_flow_sync')"
+            type="primary"
+            :loading="syncing"
+            @click="handleSync"
+          >
+            手动同步流水
+          </el-button>
+          <el-button
+            v-if="hasPermission('receipt_flow_claim')"
+            type="primary"
+            :disabled="!selectedRows.length"
+            @click="openBatchClaim"
+          >
+            批量认领
+          </el-button>
+        </div>
+        <table-header-tools
+          :columns="columns"
+          v-model:visible-column-keys="visibleColumnKeys"
+          v-model:table-size="tableSize"
+          v-model:search-visible="searchVisible"
+          @refresh="loadTable"
+        />
       </div>
       <el-table
         v-loading="loading"
         :data="rows"
+        :size="tableSize"
         border
         @selection-change="selectedRows = $event"
       >
         <el-table-column type="selection" width="52" align="center" />
         <el-table-column type="index" label="序号" width="64" align="center" />
         <el-table-column
-          v-for="column in columns"
+          v-for="column in visibleColumns"
           :key="column.prop"
           v-bind="column"
           align="center"
@@ -271,6 +281,7 @@ import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/payment/receiptFlow';
 import { receiptFlowTableColumns } from '@/option/payment/receiptFlow';
+import TableHeaderTools from '@/components/table-header-tools/main.vue';
 import { isAdministrator } from '@/utils/auth';
 
 const emptyQuery = () => ({
@@ -291,6 +302,7 @@ const emptyQuery = () => ({
 
 export default {
   name: 'ReceiptFlow',
+  components: { TableHeaderTools },
   data() {
     return {
       ArrowDown,
@@ -300,6 +312,9 @@ export default {
       pushStatusOptions: api.pushStatusOptions,
       kingdeeBillStatusOptions: api.kingdeeBillStatusOptions,
       columns: receiptFlowTableColumns,
+      visibleColumnKeys: receiptFlowTableColumns.map(column => column.prop),
+      searchVisible: true,
+      tableSize: 'default',
       rows: [],
       selectedRows: [],
       loading: false,
@@ -312,6 +327,9 @@ export default {
   },
   computed: {
     ...mapGetters(['permission', 'userInfo']),
+    visibleColumns() {
+      return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
+    },
     isAdmin() {
       return isAdministrator(this.userInfo);
     },
@@ -507,11 +525,15 @@ export default {
 }
 .receipt-flow-page__toolbar {
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   gap: 8px;
   padding: 12px 0;
 }
+.receipt-flow-page__toolbar-left {
+  display: flex;
+  gap: 8px;
+}
 .receipt-flow-page__pagination {
   display: flex;
   justify-content: flex-end;