WZC2/fe/NEV.Faster.InterFace/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>
      <!-- 全选 -->
      <div class="allSelectContent" @click="redioAllChange()">
        <i class="el-icon-success icon" v-if="allSeletType == 'allSelect'"></i>
        <i class="el-icon-remove icon" v-if="allSeletType == 'hasSelect'"></i>
        <i class="el-icon-success icon" v-if="allSeletType == 'NoSelect'" style="color:#999" ></i>
        全选
      </div>
      <transition-group class="transition-wrapper" :style="{maxHeight:innerMaxHeight}" 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].istrue}"
            @click="rediochange(index)" 
            :icon-class="dataList[index].istrue ? 'svg_show' : 'svg_hide'" 
          />
          <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";
import { getLoginName } from "@/utils/auth"
export default {
  components: {
    draggable,
    Sortable,
  },
  data() {
    return {
      historyTableColumns:null,
      name: null,
      oldData: null,
      newData: null,
      dataList: [],
      // 全选 allSelect hasSelect NoSelect
      allSeletType:'NoSelect',
      userName: getLoginName()
    }
  },
  props: {
    innerMaxHeight:{
      type:String,
      default:'calc(90vh - 280px)'
    },
    visible: {
      type: Boolean,
      default: () => {
          return false
      }
    },
    tableColumns: {
      type: Array,
      default: () => {
          return [];
      },
    },
    // list_api  detail_api  detailPage_api  list  detail  detailPage
    source:{
      type:String,
      default:'list_api'
    }
  },
  mounted() {
    this.historyTableColumns = JSON.parse(JSON.stringify(this.tableColumns))
    this.formatData(this.tableColumns)
    this.initSelectSta()
  },
  methods: {
    reset() {
      this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        cancelButtonClass:'rowDropNotHideItem'
      }).then(() => {
        // 先set是为了字段设置按钮可以监听到缓存变化，之后在移除缓存
        localStorage.setItem('file_Columns_' + this.source + '_' + this.userName + '_' + this.$route.name, JSON.stringify([]))
        localStorage.removeItem('file_Columns_' + this.source + '_' +this.userName + '_' + this.$route.name)
        // let _resetCol = this.$isTableColumns[this.$route.name]
        let _resetCol = this.historyTableColumns
        _resetCol.forEach(item => {
          item.istrue = true
        })
        this.dataList = _resetCol
        this.initSelectSta()
        this.$emit('radio',_resetCol,this.source)
        this.close()
      }).catch(() => {

      });
    },
    close() {
      this.$emit('closeRowDrop')
    },
    // 格式化表头数据
    formatData (val) {
      this.dataList = JSON.parse(JSON.stringify(val))
      this.dataList.forEach(item => {
        if (item.istrue == undefined) {
            item.istrue = true
        }
      })
    },
    save () {
      this.$forceUpdate()
      this.$emit('radio',this.dataList,this.source)
      // 本地缓存 当前用户名 + 路由名称
      localStorage.setItem('file_Columns_' + this.source + '_' + this.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
    },
    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()
    },
    // item元素点击眼睛事件
    rediochange(index){
      // this.dataList[index].istrue = !this.dataList[index].istrue
      this.$set(this.dataList[index],'istrue', !this.dataList[index].istrue)
      this.initSelectSta()
      this.$nextTick(()=>{
        this.save()
      })
    },
    // 初始化当前全选状态
    initSelectSta(){
      let _num = 0
      this.dataList.forEach(item=>{
        if(item.istrue){
          _num ++
        }
      })
      if(_num == 0){this.allSeletType = 'NoSelect'}
      if(_num == this.dataList.length){this.allSeletType = 'allSelect'}
      if(_num > 0 && _num != this.dataList.length){this.allSeletType = 'hasSelect'}
    },
    // 全选点击事件
    redioAllChange(){
      let isSelectAll = !(this.allSeletType == 'allSelect')
      this.allSeletType = isSelectAll ? 'allSelect' : 'NoSelect';
      this.dataList.forEach(item=>{
        return item.istrue = isSelectAll
      })
      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;
  }
  .allSelectContent{
    user-select: none;
    cursor: pointer;
    padding:0 0 10px $paddingSize;
    .icon{
      font-size:18px;
      vertical-align: middle;
      color: #409EFF;
      margin-right: 5px;
    }
  }
  .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>