QRAPI/Web/src/components/setColumsPop/index.vue

<template>
  <el-dropdown :hide-on-click="false">
    <el-button :icon="'Setting'" plain :type="hasChange ? 'primary' : null">字段设置</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <el-checkbox 
            v-model="checkAll" 
            @change="handleCheckAllChange"
            :indeterminate="isIndeterminate"
          ><span style="color:#333">全选</span></el-checkbox>
        </el-dropdown-item>
        <el-checkbox-group
          class="columsList"
          v-model="checkedItems"
        >
          <el-dropdown-item 
            v-for="(colum,index) in columsList" 
            :key="index"
            :draggable="true"
            @dragstart="dragstart(colum)"
            @dragenter="dragenter(colum,$event)"
            @dragend="dragend(colum,$event)"
            @dragover="dragover($event)"
          >
            <el-checkbox @change="(data)=>{handleCheckedItemChange(data,colum)}" :label="colum.title" :value="colum.prop"></el-checkbox>
          </el-dropdown-item>
        </el-checkbox-group>
      </el-dropdown-menu>
      <el-button class="restBtn" @click="reset">重置</el-button>
    </template>
  </el-dropdown>
</template>

<script setup>
  defineOptions({ name: 'setColumsPop' })
  import { reactive, ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'

  const props = defineProps({
    // table表头
    tableColumns: {
      type: Object,
      default: null
    },
    //初始化表头，未从缓存获取之前
    initTableColums: {
      type: Object,
      default: null
    },
    localTableColumnsName: {
      type: String,
      default: null
    },
  })

  const checkAll = ref(false)//是否全选
  const isIndeterminate = ref(false)//半选样式
  const checkedItems = ref([])
  const columsList = ref([])
  const hasChange = ref(false)//是否有变化

  // 判断是否有变化
  const getHasChange = () => {
    hasChange.value =  false
    let _noShow = columsList.value.filter(item=>item.setNoShow == true)
    // 显示发生变化
    if(_noShow && _noShow.length > 0){
      hasChange.value =  true
    }
    // 顺序发生变化
    else{
      let _initIndex = []
      props.initTableColums.forEach(item=>{_initIndex.push(item.prop)})
      let _nowIndex = []
      columsList.value.forEach(item=>{ _nowIndex.push(item.prop)})
      hasChange.value = _initIndex.join(",") != _nowIndex.join(",")
    }
  }

  // 初始化数据
  const getLocalColumsList = () => {
    // 设置字段列表
    columsList.value = props.tableColumns
    checkedItems.value = []
    // 设置已选字段
    columsList.value.forEach(item=>{ if(!item.setNoShow)checkedItems.value.push(item.prop) })
    // 设置全选是否全选
    setCheckAllSta()
    // 判断是否有变化
    getHasChange()
  }

  // 配置全选状态
  const setCheckAllSta = () => {
    checkAll.value = checkedItems.value.length === columsList.value.length
    isIndeterminate.value = (checkedItems.value.length < columsList.value.length) && checkedItems.value.length != 0
  }

  // 全选/全不选
  const handleCheckAllChange = (val) => {
    // 全选
    if(val){
      hasChange.value = false
      checkedItems.value = []
      columsList.value.forEach(item=>{ 
        checkedItems.value.push(item.prop)
        item.setNoShow = false
      })
      save()
    }
    // 全不选
    else{
      hasChange.value = true
      checkedItems.value =  []
      columsList.value.forEach(item=>{ item.setNoShow = true})
      save()
    }
  }

  // 更改
  const handleCheckedItemChange = (isCheck,colum) => {
    let _prop = colum.prop
    checkedItems.value =  []
    columsList.value.forEach(item=>{ 
      if(item.prop == _prop){item.setNoShow = !isCheck} 
      if(!item.setNoShow)checkedItems.value.push(item.prop)
    })
    setCheckAllSta()
    getHasChange()
    save()
  }

  // 重置
  const reset = () => {
    hasChange.value = false
    checkedItems.value = []
    columsList.value = JSON.parse(JSON.stringify(props.initTableColums))
    columsList.value.forEach(item=>{ checkedItems.value.push(item.prop) })
    setCheckAllSta()
    save()
  }

  // 存入缓存
  const save = () => {
    localStorage.setItem(props.localTableColumnsName,JSON.stringify(columsList.value))
    //判断是否有变化
    getHasChange()
    // 判断全选按钮状态
    setCheckAllSta()
  }

  const dragOldData = ref(null)
  const dragNewData = ref(null)
  // 拖拽相关功能
  const dragstart = (value) => {
    dragOldData.value = value
  }
  // 记录移动过程中信息
  const dragenter = (value, e) => {
    dragNewData.value = value
    e.preventDefault()
  }
  const dragend = (value, e) => {
  // 拖拽最终操作
    if (dragOldData.value !== dragNewData.value) {
      let oldIndex = columsList.value.indexOf(dragOldData.value)
      let newIndex = columsList.value.indexOf(dragNewData.value)
      let newItems = [...columsList.value]
      // 删除老的节点
      newItems.splice(oldIndex, 1)
      // 在列表中目标位置增加新的节点
      newItems.splice(newIndex, 0, dragOldData.value)
      columsList.value = [...newItems]
      save()
    }
  }
  const dragover = (e) => {
  // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    e.preventDefault()
  }

  onMounted(() => {
    getLocalColumsList()
  })

</script>
  
<style scoped lang="scss">
.columsList{
  height:calc(100vh - 400px) !important;
  overflow:auto !important;
  padding:10 20px !important;
}
::v-deep .el-checkbox{
  min-width:200px !important;
}
.restBtn{
  width:calc(100% - 20px);
  margin:10px;
  text-align:center
}
::-webkit-scrollbar{
  width:6px;
  height:6px;
}
::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background-color:#ddd;
}
</style>