组织学习报表修改及添加弹框，学员学习报表修改及添加弹框

src/components/common/TableColSet.vue

@@ -0,0 +1,117 @@
+<template>
+    <a-tooltip title="列设置">
+      <a-dropdown :placement="props.placement" v-model:visible="visible" :trigger="['click']">
+        <a-button type="primary">列设置</a-button>
+        <template #overlay>
+            <div style="z-index: 9999;background: #fff;padding: 10px;">
+                <div style="display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <a-checkbox 
+                           v-model:checked="state.checkAll"
+                           :indeterminate="state.indeterminate"
+                           @change="onCheckAllChange"
+                        />
+                    </div>
+                    <div>
+                        <a-button type="link" @click="colReset">重置</a-button>
+                    </div>
+                </div>
+                <a-divider style="margin-top: 5px;margin-bottom: 10px;"/>
+                <div>
+                    <a-checkbox-group v-model:value="state.checkedList" style="width: 100%">
+                        <draggable
+                            :list="props.columns"
+                            ghost-class="ghost"
+                            chosen-class="chosenClass"
+                            animation="300"
+                            @start="onStart"
+                            @end="onEnd"
+                        >
+                            <template #item="{ element }">
+                            <div class="item">
+                                <a-checkbox :value="element.key"> {{ element.title }}</a-checkbox>
+                            </div>
+                            </template>
+                        </draggable>
+                    </a-checkbox-group>
+                </div>
+                
+            </div>            
+        </template>
+      </a-dropdown>
+    </a-tooltip>  
+</template>
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import draggable from 'vuedraggable';
+const visible = ref(false);
+const props =  defineProps({
+    columns: {
+      type: Array,
+      default: [],
+    },
+    placement: {
+        type: String,
+        default: 'bottom'
+    }
+})
+const state = reactive({
+    indeterminate: false,
+    checkAll: false,
+    checkedList: [],
+});
+onMounted(() => {
+    let keys = props.columns.map(function(item){
+        if(item.visible){
+            return item.key
+        }
+    });
+    state.checkedList = keys;
+    if(keys.length>0){
+        state.indeterminate = true;
+    }
+    if(keys.length===props.columns.length){
+        state.indeterminate = false;
+        state.checkAll = true;
+    }
+})
+watch(() => state.checkedList, val => {
+    state.indeterminate = !!val.length && val.length < props.columns.length;
+    state.checkAll = val.length === props.columns.length;
+    props.columns.map(function(item){
+        if(state.checkedList.includes(item.key)){
+            item.visible = true;
+        }else{
+            item.visible = false;
+        }
+    })
+});
+const colReset = () => {
+    props.columns.sort((a, b) => a.colSortNo - b.colSortNo);
+    props.columns.map(function(item){
+        item.visible = true;
+    })
+    let keys = props.columns.map(function(item){
+        return item.key
+    })
+    state.checkedList = keys;
+    state.indeterminate = false;
+    state.checkAll = true;
+}
+//拖拽开始的事件
+const onStart = () => {
+  console.log("开始拖拽");
+};
+
+//拖拽结束的事件
+const onEnd = () => {
+  console.log("结束拖拽");
+}
+
+const onCheckAllChange = (e) => {
+    Object.assign(state, {
+        checkedList: e.target.checked ? props.columns.map(function(item) {return item.key}) : [],
+        indeterminate: false,
+    });
+};
+</script>