WZC2/fe/PC/src/components/rowDrop/index.vue

<template>
  <el-popover
    placement="top"
    v-model="visible"
    class="rowDropContain rowDropNotHideItem"
    width="270"
  >
    <div class="test_wrapper" @dragover="dragover($event)">
      <div class="text" >字段设置</div>
      <el-divider></el-divider>
      <transition-group class="transition-wrapper" name="sort">
        <div 
          v-for="(item,index) in dataList" 
          :key='index+item.label' 
          class="sort-item"
          :draggable="true"
          @dragstart="dragstart(item)"
          @dragenter="dragenter(item,$event)"
          @dragend="dragend(item,$event)"
          @dragover="dragover($event)"
        >
          <svg-icon 
            class="checkbox-svg" 
            :class="{'show': dataList[index].isture}"
            @click="rediochange(index)" 
            :icon-class="dataList[index].isture ? 'show' : 'hide'" 
          />
          <!-- <svg-icon v-if="!dataList[index].isture" @change="rediochange" icon-class="hide" /> -->
          <!-- <el-checkbox 
            v-model="dataList[index].isture" 
            @change="rediochange"  
            :data="checked" 
          ></el-checkbox> -->
          <div class="lable">{{ item.label }}</div>
        </div>
      </transition-group>
    </div>
    <div class="buttonsBox">
      <el-button size="mini" @click="reset">重置</el-button>
      <el-button size="mini" @click="close">关闭</el-button>
      <!-- <el-button type="primary" size="mini" @click="save">保存</el-button> -->
    </div>
  </el-popover>
 
</template>
<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
  components: {
    draggable,
    Sortable,
  },
  data() {
    return {
      visibleclose:true,
      visibleon:false,
      name: null,
      oldData: null,
      newData: null,
      // checked: false,
      dataList: [],
    }
  },
  props: {
      visible: {
          type: Boolean,
          default: () => {
              return false
          }
      },
      tableColumns: {
          type: Array,
          default: () => {
              return [];
          },
      },
  },
  mounted() {
      this.formatData(this.tableColumns)
  },
  methods: {
    reset() {
      this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          cancelButtonClass:'rowDropNotHideItem'
        }).then(() => {
          localStorage.removeItem(this.$store.getters.name.userName + '_' + this.$route.name)
          let _resetCol = this.$isTableColumns[this.$route.name]
          _resetCol.forEach(item => {
            item.isture = true
          })
          this.dataList = _resetCol
          this.$emit('radio',_resetCol)
          this.close()
        }).catch(() => {

        });
    },
    close() {
        this.$emit('closeRowDrop')
    },
    // save () {
    //     this.$emit('closeRowDrop')
    //     this.$emit('radio',this.dataList)
    //     // 本地缓存 当前用户名 + 路由名称
    //     localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
    // },
      // 格式化表头数据
      formatData (val) {
        this.dataList = JSON.parse(JSON.stringify(val))
        this.dataList.forEach(item => {
            if (item.isture == undefined) {
                item.isture = true
            }
        })
      },
      // 拖拽事件
      handleEdit(index, row) {
          console.log(index, row);
      },
      save () {
        this.$forceUpdate()
        this.$emit('radio',this.dataList)
        // 本地缓存 当前用户名 + 路由名称
        localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
      },
      // 格式化表头数据
      formatData (val) {
        this.dataList = JSON.parse(JSON.stringify(val))
        this.dataList.forEach(item => {
            if (item.isture == undefined) {
                item.isture = true
            }
        })
      },
      // 拖拽事件
      handleEdit(index, row) {
          console.log(index, row);
      },
      handleDelete(index, row) {
          console.log(index, row);
      },
      dragstart(value) {
          this.oldData = value
      },
      // 记录移动过程中信息
      dragenter(value, e) {
          this.newData = value
          e.preventDefault()
      },
      // 拖拽最终操作
      dragend(value, e) {
        if (this.oldData !== this.newData) {
            let oldIndex = this.dataList.indexOf(this.oldData)
            let newIndex = this.dataList.indexOf(this.newData)
            let newItems = [...this.dataList]
            // 删除老的节点
            newItems.splice(oldIndex, 1)
            // 在列表中目标位置增加新的节点
            newItems.splice(newIndex, 0, this.oldData)
            this.dataList = [...newItems]
            this.save()
        }
      },
      // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
      dragover(e) {
          e.preventDefault()
      },
      // 拖拽事件结束
      // 点击展开拖拽框
      visclose(){
          this.visibleclose = false
          this.visibleon = true
      },
      // 点击关闭拖拽框
      vison(){
          this.visibleclose = true
          this.visibleon = false
      },
      rediochange(index){
        this.dataList[index].isture = !this.dataList[index].isture
        this.save()
      }
    }
  }
</script>
<style lang="scss">
$paddingSize:20px;
.rowDropContain{
  .el-popover{
    position: fixed;
    right: 30px;
    padding: 0;
  }
  .transition-wrapper {
    display: block;
    max-height: calc(90vh - 280px);
    overflow: auto;
    padding: 0 0 $paddingSize $paddingSize;

    .sort-item{
      margin-bottom: 6px;
      display: flex;
      cursor: grab;
      align-items: center;

      &:last-child{
        margin-bottom: 0;
      }

      .lable{
        padding: 0 15px 0 10px;
      }
    }
  }
  .el-divider--horizontal {
    margin: $paddingSize;
    width: calc(100% - 40px);
  }
  .text {
    color: #333;
    font-weight: bold;
    padding: $paddingSize 0 0 $paddingSize;
  }
  .buttonsBox{
    text-align: center; 
    margin: 0;
    padding: 15px;
    border-top: #eee solid 1px;
  }
  .checkbox-svg{
    width: 20px;
    flex-shrink: 0;
    fill:currentColor; 
    color:#999;
    font-size: 18px;
    cursor: pointer;

    &.show{
      color: #409EFF;
    }
  }
}
</style>