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

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

src/components/table-header-tools/main.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="avue-crud__right table-header-tools">
+    <el-button v-if="showRefresh" icon="el-icon-refresh" circle @click="$emit('refresh')" />
+    <el-button
+      v-if="showColumn"
+      icon="el-icon-operation"
+      circle
+      @click="columnSettingVisible = true"
+    />
+    <el-button
+      v-if="showSearch"
+      icon="el-icon-search"
+      circle
+      @click="$emit('update:searchVisible', !searchVisible)"
+    />
+    <el-button v-if="showGrid" icon="el-icon-grid" circle @click="toggleTableSize" />
+
+    <el-dialog
+      v-if="showColumn"
+      v-model="columnSettingVisible"
+      title="列设置"
+      width="360px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-checkbox-group
+        class="table-header-tools__column-setting"
+        :model-value="visibleColumnKeys"
+        @update:model-value="$emit('update:visibleColumnKeys', $event)"
+      >
+        <el-checkbox v-for="item in columns" :key="item.prop" :label="item.prop">
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+      <template #footer>
+        <el-button @click="columnSettingVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const TABLE_SIZE_OPTIONS = ['default', 'large', 'small'];
+
+export default {
+  name: 'TableHeaderTools',
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    visibleColumnKeys: {
+      type: Array,
+      default: () => [],
+    },
+    tableSize: {
+      type: String,
+      default: 'default',
+    },
+    searchVisible: {
+      type: Boolean,
+      default: true,
+    },
+    showRefresh: {
+      type: Boolean,
+      default: true,
+    },
+    showColumn: {
+      type: Boolean,
+      default: true,
+    },
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    showGrid: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['refresh', 'update:visibleColumnKeys', 'update:tableSize', 'update:searchVisible'],
+  data() {
+    return {
+      columnSettingVisible: false,
+    };
+  },
+  methods: {
+    toggleTableSize() {
+      const index = TABLE_SIZE_OPTIONS.indexOf(this.tableSize);
+      const next = TABLE_SIZE_OPTIONS[(index + 1) % TABLE_SIZE_OPTIONS.length];
+      this.$emit('update:tableSize', next);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.table-header-tools.avue-crud__right {
+  width: auto;
+  margin: 0 0 0 auto;
+  flex: none;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.table-header-tools__column-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 360px;
+  overflow: auto;
+}
+</style>

src/components/vehicle-attachment-table/main.vue

@@ -9,18 +9,21 @@
     <el-table :data="rows" border @selection-change="selectedRows = $event">
       <el-table-column v-if="!readonly" type="selection" width="55" align="center" />
       <el-table-column type="index" label="序号" width="70" align="center" />
-      <el-table-column label="文件名" min-width="240" show-overflow-tooltip>
+      <el-table-column
+        label="文件名"
+        min-width="240"
+        show-overflow-tooltip
+        class-name="is-ellipsis-link"
+      >
         <template #default="{ row }">
           <span
-            class="vehicle-attachment-table__file-name"
+            class="attachment-file-name"
             role="button"
             tabindex="0"
             @click="previewAttachment(row)"
             @keydown.enter="previewAttachment(row)"
             @keydown.space.prevent="previewAttachment(row)"
-          >
-            {{ attachmentName(row) }}
-          </span>
+          >{{ attachmentName(row) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="附件描述" min-width="220">
@@ -308,16 +311,6 @@ export default {
     margin-bottom: 16px;
   }
 
-  &__file-name {
-    color: #409eff;
-    cursor: pointer;
-  }
-
-  &__file-name:hover,
-  &__file-name:focus-visible {
-    text-decoration: underline;
-  }
-
   &__upload {
     display: flex;
     justify-content: flex-start;