shuiwu/src/components/tableConfiguration/settingColumns.vue

<template>
  <div>
    <a-popover trigger="click" placement="left" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
      <template #title>
        <div class="title-panel">
          <span>筛选列</span>
          <a-button class="fl-r" type="link" @click="reloadConfig">重置</a-button>
        </div>
      </template>
      <template #content>
        <div style="width:150px">
          <a-checkbox-group v-model:value="checkedColumns" name="checkboxgroup" @change="onChange">
            <a-row>
              <a-col class="mt-10" v-for="(box,index) in columnsData" :key="box.index" :span="24" :draggable="true" @dragstart="dragStart(index)" @dragover="dragOver(index)" @drop="drop(index)" @dragend="dragEnd">
                <div class="flex">
                  <a-checkbox :value="box.value">{{box.label}}</a-checkbox>
                  <drag-outlined />
                </div>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
      </template>
      <setting-outlined />
    </a-popover>
    
  </div>
</template>

<script setup>
  import { SettingOutlined,DragOutlined  } from '@ant-design/icons-vue';
  import {defineProps,ref,computed,defineEmits,defineExpose,onMounted,onActivated, nextTick} from 'vue'
  import utils from '@/utils/utils'
  import { storeToRefs } from 'pinia'
  import { useColumnsStore } from '@/stores/modules/columns'
  import { useAuthStore } from '@/stores/modules/auth'
  const colStore = useColumnsStore()
  const store = useAuthStore()
  let { app } = storeToRefs(store)
  let { checkedColumns,columnsIndex } = storeToRefs(colStore)
  const props = defineProps(['tableName','columns'])
  const emit = defineEmits(['change'])
  const columnsData = ref([]) // checkboxGroup数据
  const reloadConfig = ()=>{
    columnsIndex.value = checkedColumns.value = utils.TBLayout(props.tableName).map(e=>e.dataIndex)
    colStore.userSetting(props.tableName)
  }
  /**
   * 根据选中的数据过滤出表格列数据集
   * @param {Array} selectedColumns 当前选中的表格列
   */
  const onChange = (val)=>{
    colStore.userSetting(props.tableName)
  }
  const draggedIndex = ref(0)
  const dragStart = (index)=> {
    draggedIndex.value = index;
  }
  const dragOver = (index)=> {
    event.preventDefault();
    const movedIndex = draggedIndex.value;
    if (movedIndex !== index) {
      const list = [...columnsData.value];
      const movedItem = list[movedIndex];
      list.splice(movedIndex, 1);
      list.splice(index, 0, movedItem);
      columnsData.value = list;
      draggedIndex.value = index;
      columnsIndex.value = columnsData.value.map(e=>e.value)
    }
  }
  const drop = (index)=> {
    event.preventDefault();
  }
  const dragEnd = ()=> {
    colStore.userSetting(props.tableName)
    draggedIndex.value = null;
    
  }
  const initData = () => {
    columnsData.value = colStore.getUserSetting(props.tableName)
  }
  onMounted(()=>{
   initData()
  })
  onActivated (()=>{
    initData()
  })
  defineExpose({
  })
</script>
<style scoped>
.flex{
  padding: 2px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title-panel{
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.fl-r{
  float: right;
}
</style>