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

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

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

@@ -39,16 +39,20 @@
           >导出</el-button
         >
       </div>
-      <div class="fs-table-panel__toolbar-right">
-        <el-tooltip content="刷新" placement="top">
-          <el-button :icon="Refresh" text @click="$emit('refresh')" />
-        </el-tooltip>
-      </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"
@@ -57,7 +61,7 @@
       <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 columns"
+        v-for="column in visibleColumns"
         :key="column.prop"
         v-bind="column"
         align="center"
@@ -119,15 +123,16 @@
 </template>
 
 <script>
-import { Refresh } from '@element-plus/icons-vue';
 import {
   invoiceStatusName,
   kingdeeSyncStatusOptions,
   paymentStatusOptions,
 } from '@/option/settlement/formalSettlementSearch';
+import SettlementTableTools from './settlement-table-tools.vue';
 
 export default {
   name: 'FormalSettlementTablePanel',
+  components: { SettlementTableTools },
   props: {
     rows: { type: Array, default: () => [] },
     columns: { type: Array, default: () => [] },
@@ -135,6 +140,7 @@ export default {
     page: { type: Object, required: true },
     hasPermission: { type: Function, required: true },
     mkEnabled: { type: Boolean, default: false },
+    searchVisible: { type: Boolean, default: true },
   },
   emits: [
     'create',
@@ -146,14 +152,47 @@ export default {
     'page-change',
     'action',
     'update:selection',
+    'update:searchVisible',
   ],
   data() {
     return {
-      Refresh,
       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));
+    },
+  },
   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();
@@ -245,11 +284,6 @@ export default {
   align-items: center;
   padding: 12px 0;
 }
-.fs-table-panel__toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 .fs-table-panel__links {
   display: flex;
   flex-wrap: wrap;