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

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

src/views/settlement/settlement-adjustment.vue

@@ -1,6 +1,6 @@
 <template>
   <basic-container class="settlement-adjustment-page">
-    <section class="settlement-adjustment-page__search">
+    <section v-show="searchVisible" class="settlement-adjustment-page__search">
       <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
         <div class="settlement-adjustment-page__search-grid">
           <el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
@@ -55,13 +55,22 @@
           type="primary"
           @click="openCreate"
           >新增</el-button
-        ><div class="settlement-adjustment-page__toolbar-right">
-          <el-tooltip content="刷新" placement="top">
-            <el-button :icon="Refresh" text @click="loadTable" />
-          </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" border @selection-change="selection = $event">
+      <el-table
+        v-loading="loading"
+        :data="rows"
+        :size="tableSize"
+        border
+        @selection-change="selection = $event"
+      >
         <el-table-column type="selection" width="52" fixed="left" align="center" /><el-table-column
           type="index"
           label="序号"
@@ -70,7 +79,7 @@
           align="center"
         />
         <el-table-column
-          v-for="column in tableColumns"
+          v-for="column in visibleTableColumns"
           :key="column.prop"
           v-bind="column"
           align="center"
@@ -165,13 +174,14 @@
 </template>
 
 <script>
-import { ArrowDown, ArrowUp, Refresh } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/settlement/settlementAdjustment';
 import { settlementAdjustmentSearchFields } from '@/option/settlement/settlementAdjustmentSearch';
 import organizationSearch from '@/mixins/organization-search';
 import { settlementAdjustmentTableColumns } from '@/option/settlement/settlementAdjustmentTable';
 import SettlementAdjustmentEditor from './components/settlement-adjustment-editor.vue';
+import SettlementTableTools from './components/settlement-table-tools.vue';
 import { isAdministrator } from '@/utils/auth';
 
 const emptyQuery = () => ({
@@ -186,17 +196,19 @@ const emptyQuery = () => ({
 });
 export default {
   name: 'SettlementAdjustment',
-  components: { SettlementAdjustmentEditor },
+  components: { SettlementAdjustmentEditor, SettlementTableTools },
   mixins: [organizationSearch],
   data: () => ({
     ArrowDown,
     ArrowUp,
-    Refresh,
     loading: false,
     query: emptyQuery(),
     searchFields: settlementAdjustmentSearchFields,
     searchExpanded: false,
+    searchVisible: true,
+    tableSize: 'default',
     tableColumns: settlementAdjustmentTableColumns,
+    visibleColumnKeys: settlementAdjustmentTableColumns.map(column => column.prop),
     rows: [],
     selection: [],
     page: { current: 1, size: 10, total: 0 },
@@ -207,6 +219,15 @@ export default {
     visibleSearchFields() {
       return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
     },
+    columnSettingOptions() {
+      return this.tableColumns.map(column => ({
+        prop: column.prop,
+        label: column.label,
+      }));
+    },
+    visibleTableColumns() {
+      return this.tableColumns.filter(column => this.visibleColumnKeys.includes(column.prop));
+    },
     isAdmin() {
       return isAdministrator(this.userInfo);
     },
@@ -359,11 +380,6 @@ export default {
     align-items: center;
     min-height: 56px;
   }
-  &__toolbar-right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
   &__links {
     display: flex;
     flex-wrap: wrap;