核销记录额度变化

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

@@ -1,14 +1,14 @@
 <template>
-  <el-popover :width="240" placement="bottom-end" trigger="click">
+  <el-popover :width="240" placement="bottom-end" trigger="click" popper-class="column-settings-popper">
     <template #reference>
-      <el-button circle plain icon="Operation" title="列设置" aria-label="列设置" />
+      <el-button circle plain icon="Operation" title="列设置" />
     </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-group :model-value="checkedKeys" @change="onChange" class="column-settings__body">
         <el-checkbox
           v-for="c in columns"
           :key="c.key"
@@ -23,25 +23,29 @@
 <script setup name="ColumnSettings">
 /**
  * 表格列设置弹窗（与 useColumnSettings 配合）：
- * <column-settings :columns="columnDefs" :visible-map="colVisible" @reset="resetColumns" />
+ * <column-settings :columns="columnDefs" :visible-map="colVisible" @toggle="toggleColumn" @reset="resetColumns" />
+ * 注意：reference 不要嵌套 el-tooltip——两个 popper 组件嵌套会导致引用解析异常。
  */
 const props = defineProps({
   columns: { type: Array, default: () => [] },
   visibleMap: { type: Object, required: true }
 })
-const emit = defineEmits(['reset'])
+const emit = defineEmits(['toggle', '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)
-    })
-  }
-})
+const checkedKeys = computed(() =>
+  props.columns.filter(c => props.visibleMap[c.key] !== false).map(c => c.key)
+)
+
+/** el-checkbox-group 回传当前全量勾选值，逐列 diff 后通知父级修改 */
+function onChange(keys) {
+  props.columns.forEach(c => {
+    if (c.fixed) return
+    const next = keys.includes(c.key)
+    if ((props.visibleMap[c.key] !== false) !== next) {
+      emit('toggle', c.key, next)
+    }
+  })
+}
 </script>
 
 <style scoped>