⚡ 优化表格工具栏、附件文件名展示与合同金额两位小数

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/settlement/receivable-payable-detail.vue

@@ -1,6 +1,6 @@
 <template>
   <basic-container class="settlement-detail-page">
-    <section class="settlement-detail-page__search">
+    <section v-show="searchVisible" class="settlement-detail-page__search">
       <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
         <div class="settlement-detail-page__search-grid">
           <template v-for="field in visibleSearchFields" :key="field.prop">
@@ -44,19 +44,19 @@
           </el-button>
           <el-button type="primary" plain @click="handleExport">导出</el-button>
         </div>
-        <div class="settlement-detail-page__toolbar-right">
-          <el-tooltip content="刷新" placement="top">
-            <el-button :icon="Refresh" text @click="loadTable" />
-          </el-tooltip>
-          <el-tooltip content="列设置" placement="top">
-            <el-button :icon="Setting" text @click="noop" />
-          </el-tooltip>
-        </div>
+        <settlement-table-tools
+          :columns="columnSettingOptions"
+          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
         class="settlement-detail-page__table"
         @selection-change="selectionChange"
@@ -64,7 +64,7 @@
         <el-table-column type="selection" width="52" fixed="left" align="center" />
         <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
         <el-table-column
-          v-for="column in displayTableColumns"
+          v-for="column in visibleTableColumns"
           :key="column.prop"
           :prop="column.prop"
           :label="column.label"
@@ -938,7 +938,7 @@
 </template>
 
 <script>
-import { ArrowDown, ArrowUp, Close, Refresh, Setting } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp, Close } from '@element-plus/icons-vue';
 import {
   changeRecordColumns,
   feeDetailBaseColumns,
@@ -950,6 +950,7 @@ import {
   tableColumns,
   transferSearchFields,
 } from '@/option/settlement/receivable-payable-detail';
+import SettlementTableTools from './components/settlement-table-tools.vue';
 import * as api from '@/api/settlement/receivable-payable-detail';
 import { getList as getContractList } from '@/api/business/contract-manage';
 import { getList as getCommonCargoList } from '@/api/business/common-cargo';
@@ -989,6 +990,7 @@ const ADJUST_BILLING_TYPE_MAP = {
 };
 
 export default {
+  components: { SettlementTableTools },
   props: {
     settlementType: {
       type: String,
@@ -1000,8 +1002,6 @@ export default {
       ArrowDown,
       ArrowUp,
       Close,
-      Refresh,
-      Setting,
       searchFields,
       tableColumns,
       tableFeeItemNames: [],
@@ -1010,6 +1010,10 @@ export default {
       generateWaybillColumns,
       loading: false,
       searchExpanded: false,
+      searchVisible: true,
+      tableSize: 'default',
+      visibleColumnKeys: [],
+      knownColumnProps: [],
       query: {},
       rows: [],
       selection: [],
@@ -1169,6 +1173,18 @@ export default {
       columns.splice(totalIndex, 0, ...dynamicColumns);
       return columns;
     },
+    columnSettingOptions() {
+      return this.displayTableColumns.map(column => ({
+        prop: column.prop,
+        label: column.label,
+      }));
+    },
+    visibleTableColumns() {
+      if (!this.visibleColumnKeys.length) return this.displayTableColumns;
+      return this.displayTableColumns.filter(column =>
+        this.visibleColumnKeys.includes(column.prop)
+      );
+    },
     previewColumns() {
       return [...generatePreviewColumns, ...this.dynamicFeeColumns, ...feeDetailTailColumns];
     },
@@ -1191,6 +1207,27 @@ export default {
     '$route.fullPath'() {
       this.openRouteDetail();
     },
+    displayTableColumns: {
+      immediate: true,
+      handler(columns) {
+        const props = columns.map(column => column.prop);
+        if (!this.visibleColumnKeys.length) {
+          this.visibleColumnKeys = props;
+          this.knownColumnProps = [...props];
+          return;
+        }
+        const known = new Set(this.knownColumnProps);
+        const visible = new Set(this.visibleColumnKeys);
+        props.forEach(prop => {
+          if (!known.has(prop)) {
+            known.add(prop);
+            visible.add(prop);
+          }
+        });
+        this.knownColumnProps = [...known];
+        this.visibleColumnKeys = props.filter(prop => visible.has(prop));
+      },
+    },
   },
   async mounted() {
     this.loadTransportTypeOptions();
@@ -2664,7 +2701,6 @@ export default {
       if (Array.isArray(data?.data?.records)) return data.data.records;
       return [];
     },
-    noop() {},
   },
 };
 </script>
@@ -2718,8 +2754,7 @@ export default {
   background: transparent;
 }
 
-.settlement-detail-page__toolbar-left,
-.settlement-detail-page__toolbar-right {
+.settlement-detail-page__toolbar-left {
   display: flex;
   align-items: center;
   gap: 8px;