余额额度流水加导出

bms-front/src/components/ColumnSettings/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-popover :width="240" placement="bottom-end" trigger="click">
+    <template #reference>
+      <el-button circle plain icon="Operation" title="列设置" aria-label="列设置" />
+    </template>
+    <div class="column-settings">
+      <div class="column-settings__header">
+        <span class="column-settings__title">列展示设置</span>
+        <el-button link type="primary" size="small" @click="emit('reset')">恢复默认</el-button>
+      </div>
+      <el-checkbox-group v-model="checkedKeys" class="column-settings__body">
+        <el-checkbox
+          v-for="c in columns"
+          :key="c.key"
+          :value="c.key"
+          :disabled="c.fixed"
+        >{{ c.label }}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </el-popover>
+</template>
+
+<script setup name="ColumnSettings">
+/**
+ * 表格列设置弹窗（与 useColumnSettings 配合）：
+ * <column-settings :columns="columnDefs" :visible-map="colVisible" @reset="resetColumns" />
+ */
+const props = defineProps({
+  columns: { type: Array, default: () => [] },
+  visibleMap: { type: Object, required: true }
+})
+const emit = defineEmits(['reset'])
+
+const checkedKeys = computed({
+  get() {
+    return props.columns.filter(c => props.visibleMap[c.key] !== false).map(c => c.key)
+  },
+  set(keys) {
+    props.columns.forEach(c => {
+      if (c.fixed) return
+      props.visibleMap[c.key] = keys.includes(c.key)
+    })
+  }
+})
+</script>
+
+<style scoped>
+.column-settings__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.column-settings__title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.column-settings__body {
+  display: flex;
+  flex-direction: column;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.column-settings__body :deep(.el-checkbox) {
+  margin-right: 0;
+  height: 28px;
+}
+</style>