2025-03-JS-SDK-CLI/src/components/ConfigTable/index.vue

<template>
  <div class="config-table-header">
    <div class="table-title">配置表头</div>
    <el-checkbox-group
      id="colWrap"
      ref="colWrap"
      v-model="checkList"
      @change="getChecked"
    >
      <el-checkbox
        v-for="(item,index) in allList"
        :key="index"
        :label="item.header"
      > </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import Sortable from 'sortablejs';
import {computed, nextTick, reactive, toRefs, watch, onMounted,ref} from 'vue';

const props = defineProps({
  list: {
    type: Array as any,
  }
});
const emit = defineEmits(['updateList']);

const state = reactive({
  allList: [] as any,
  checkList: [] as any
});
const {
  allList,
  checkList
} = toRefs(state);

// watch(
//   props.list,
//   value => {
//     console.log(value);
//     nextTick(() => {
//       value.forEach((item:any)=>{
//         state.checkList.push(item.header);
//       })
//     })
//   },
//   {
//     // 初始化立即执行
//     immediate: true
//   }
// );

onMounted(() => {
  nextTick(() => {
    state.allList = JSON.parse(JSON.stringify(props.list));
    state.allList.forEach((item:any)=>{
      if(!item.hide) {
        state.checkList.push(item.header);
      }
    })
  });
  // 加载完成之后在绑定拖动事件
  createSort();
});

const createSort = ()=> {
  setTimeout(() => {
    let colWrap:HTMLElement  = document.getElementById('colWrap') as HTMLElement;
    let sortable = Sortable.create(colWrap, {
      animation: 150,
      // handle: '.el-checkbox',
      sort: true,
      onUpdate: (sortableEvent) => {
        const newIndex = sortableEvent.newIndex as number;
        const oldIndex = sortableEvent.oldIndex as number;
        //这里是拖拽后触发的时间 能拿到拖拽前的索引oldIndex 和 拖拽后的索引newIndex
        console.log(newIndex,oldIndex);
        state.allList.splice(newIndex,0,state.allList.splice(oldIndex, 1)[0]);// 获取被移除的元素
        const newArray = state.allList.slice(0)
        state.allList = [];
        nextTick(()=>{
          state.allList = newArray;
          emit('updateList',state.allList);
        })
        // 更新dom
        let $li = colWrap.children[newIndex];
        let $oldLi = colWrap.children[oldIndex];
        // 先删除移动的节点
        colWrap.removeChild($li)
        // 再插入移动的节点到原有节点，还原了移动的操作
        if (newIndex > oldIndex) {
          colWrap.insertBefore($li, $oldLi)
        } else {
          colWrap.insertBefore($li, $oldLi.nextSibling)
        }
      },
    });
  }, 500);

}

function getChecked(val:any) {
  let checkArr = [] as any;
  state.allList.forEach((item:any)=>{
    if(val.includes(item.header)) {
      item.hide = false;
    }else{
      item.hide = true;
    }
    checkArr.push(item);
  })
  emit('updateList',checkArr);
}

</script>

<style scoped lang="scss">
.config-table-header{
  width: 160px;
  .table-title{
    width: 100%;
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #323233;
    box-shadow: inset 0 -1px 0 0 #ECECEC;
  }
  .el-checkbox-group{
    display: flex;
    flex-direction: column;
    padding: 5px 0 8px;
    .el-checkbox{
      padding: 0 15px;
      &:before{
        content: '';
        width: 8px;
        height: 10px;
        background-image: url("../../assets/images/sort.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-right: 7px;
        cursor: move;
      }
    }
  }
}
</style>