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

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

src/views/settlement/components/transport-reconciliation-table-panel.vue

@@ -10,22 +10,26 @@
         >
         <el-button type="primary" plain @click="$emit('export')">导出</el-button>
       </div>
-      <div class="tr-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
       v-loading="loading"
       :data="rows"
+      :size="tableSize"
       border
       @selection-change="handleSelectionChange"
     >
       <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 columns"
+        v-for="column in visibleColumns"
         :key="column.prop"
         v-bind="column"
         align="center"
@@ -73,24 +77,68 @@
 </template>
 
 <script>
-import { Refresh } from '@element-plus/icons-vue';
+import SettlementTableTools from './settlement-table-tools.vue';
 
 export default {
   name: 'TransportReconciliationTablePanel',
+  components: { SettlementTableTools },
   props: {
     rows: { type: Array, default: () => [] },
     columns: { type: Array, default: () => [] },
     loading: { type: Boolean, default: false },
     page: { type: Object, required: true },
     hasPermission: { type: Function, required: true },
+    searchVisible: { type: Boolean, default: true },
   },
-  emits: ['create', 'export', 'refresh', 'page-change', 'update:selection', 'action'],
+  emits: [
+    'create',
+    'export',
+    'refresh',
+    'page-change',
+    'update:selection',
+    'action',
+    '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));
+      },
+    },
+  },
   methods: {
     handleSelectionChange(value) {
       this.selection = value;
@@ -127,11 +175,6 @@ export default {
   align-items: center;
   padding: 12px 0;
 }
-.tr-table-panel__toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 .tr-table-panel__links {
   display: flex;
   flex-wrap: wrap;