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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-13 12:44:40 +08:00
parent bc7755a160
commit 6955784e93
31 changed files with 967 additions and 344 deletions
@@ -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>