树状拖拽功能 基于element封装

//树状可拖拽
<template>
  <div class="custom-tree-container">
    <div class="block"
      style="width:300px">
      <el-tree :data="filtrdata"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="nodeclick"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag">
        <span class="custom-tree-node"
          slot-scope="{ node, data }">
          <!-- 如果是编辑状态 -->
          <!-- <template v-if="data.isEdit==1">
            <el-input ref="input"
              @blur="() => submitEdit(node,data)"
              v-model="newname"
              style="height:20px line-height:20px"></el-input> -->
            <!--改为失去焦点自动提交 -->
          <!-- </template> -->
          <!-- 如果不是编辑状态 -->
          <!-- <span v-else
            v-text="data.name "></span> -->
          <span v-text="data.name "></span>
          <span>
            <!-- <el-button v-if="data.id!=1"
              type="text"
              size="mini"
              @click="() => edit(node,data)">
              修改
            </el-button> -->
            <!-- <el-button type="text"
              size="mini"
              @click="() => append(node,data)">
              添加
            </el-button> -->
            <el-button
            v-if="data.id!=1"
             type="text" size="small"  
             @click="() => remove(node, data)">
                <svg-icon type="del"></svg-icon>
             </el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {request,requestGet, requestDel} from "../utils/request";//请求接口
import treechange from "../Views/Three/commentjs/tree";//列表转树状
import menuparame from '../Views/Three/commentjs/menuparame';//获取拖拽参数
import SvgIcon from '../../src/Coms/SvgIcon';
import eventBus from '../Views/Three/comments/evenBus'
// let id = 1000
export default {
  name: 'appiumTree1',
  components:{
    SvgIcon,
  },
  data() {
    return {
        // props: {
        //     data: Object
        // },
      data: [],
      newname: '',
      defaultProps: {
        children: 'children',
        name: 'name'
      },
      filtrdata:[]
    }
  },
  created() {
    this.getApiGroupData()
  },
  methods: {
      // 调api获取接口分组数据
      getApiGroupData(){
        // 获取菜单列表
        requestGet('/md/sys/menu/getMenuTree', {}, (flag, data, res) => {
          if (!flag) return console.log(res.message);
          this.data=JSON.parse(JSON.stringify(data))
          this.filtrdata=JSON.parse(JSON.stringify(data))
          }, () => {
          });
      },
      //拖拽目标  
    handleDragStart(node, ev) {
      // console.log('拖拽目标', node.data.name,ev)
    },
    //移动到哪个对象
    //draggingNode数据 dropNode目标code ,ev坐标
    handleDragEnter(draggingNode, dropNode, ev) {
      // console.log('移动到哪个对象: ',draggingNode, dropNode.data.name,ev)
    },
    //离开了哪个对象
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log('t离开了哪个对象: ',draggingNode, dropNode.data.name,ev)
    },
    //经过哪个对象
    handleDragOver(draggingNode, dropNode, ev) {
      // console.log('经过哪个对象: ', dropNode.data.name,ev)
    },
    //获取拖动结果
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      let pames;
      // console.log(draggingNode, dropNode, dropType,)
     // draggingNode 拖动对象  dropNode 目标对象  dropType状态  inner拖进 after before交换  none取消
      pames=   menuparame.formmenuData(this.filtrdata,{
        draggingNode, dropNode, dropType
      })
      if(!pames) return
      let {currentCode,newParentCode,preBrotherCode}=pames
      // 调取接口
        request('/md/sys/menu/dragNode', {currentCode,newParentCode,preBrotherCode}, (flag, data, res) => {
            this.getApiGroupData()
            eventBus.$emit('setMenu',true)
            if (!flag) return this.$message.error(res.message);
            }, () => {
            });
      // 调后端更新
    //   this.updateApiGroup(this.data)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log('tree drop: ', dropNode.data.name, dropType)
    },
    //顶层分组是否允许降级
    allowDrop(draggingNode, dropNode, type) {
      if (type === 'prev'&&dropNode.level===1) {
        return false
      } else {
        if(dropNode.data.leaf&&type==='inner') {
          return false
          }else{
            return true
          }
      }
    },
    // 顶层默认分组是否允许拖拽
    allowDrag(draggingNode) {
      if (draggingNode.data.id === 1) {
        return false
      } else {
        return true
      }
      return draggingNode.data.name.indexOf('三级 3-2-2') === -1
    },
    //自定义添加方法
    // append(node, data) {
    //   // var pid = data.parentApiGroupId + ':' + data.id
    //   var timestamp = new Date().getTime()
    //   const newChild = {
    //     id: timestamp,
    //     isEdit: 0,
    //     name: 'T' + timestamp,
    //     children: []
    //   }
    //   if (!data.children) {
    //     this.$set(data, 'children', [])
    //   }
    //   data.children.push(newChild)
    // //   this.updateApiGroup(this.data)
    // },

    remove(node, data) {
       this.$confirm('确认删除？')
          .then(_ => {
             this.removeByCode(data.code)
          })
          .catch(_ => {});
    //   this.updateApiGroup(this.data)
    },
    removeByCode(code){
        //删除菜单
        requestDel('/md/sys/menu/removeByCode',{
          code:code,//菜单编码
        }, (flag, data, res) => {
          if (!flag) return this.$message.error(res.message);
            this.getApiGroupData()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            eventBus.$emit('setMenu',true)
          }, () => {
          })
      },
    //自定义修改方法
    // edit(node, data) {
    //   console.log(node,data,'s')
    //   console.log(
    //     'before:',
    //     data.id,
    //     // data.parentApiGroupId,
    //     data.name,
    //     data.isEdit
    //   )
    //   this.$set(data, 'isEdit', 1)
    //   this.newname = data.name
    //   console.log('after:', data.id, data.name, data.isEdit)
    // },

    submitEdit(node, data) {
      // console.log('点击了保存按钮')
      if (data.name == this.newname) {
        this.newname = ''
        this.$set(data, 'isEdit', 0)
      } else {
        this.$set(data, 'name', this.newname)
        this.newname = ''
        this.$set(data, 'isEdit', 0)
        // console.log('after:', data.id, data.name)
        // console.log(this.data)
        // this.updateApiGroup(this.data)
      }
    },

    cancelEdit(node, data) {
      // console.log('放弃编辑')
      // console.log(data.id, data.name)
      this.newname = ''
      this.$set(data, 'isEdit', 0)
    },

    updateApiGroup(data) {
      updateApiGroup(1, data)
        .then(response => {
        })
        .catch(err => {
          console.log(err)
        })
    },

    nodeclick(node, data, obj) {
      // console.log('点击了：', node)
      this.$emit('setmenu',node)
    //   this.$store.dispatch('appium/changeApiGroupId', node.id)
    //   console.log(this.$store.getters.apiGroupId)
    },
    //搜索过滤
    filtration(show,val){
      console.log(this.data)
      this.filtrdata=[]  
      if(show.length>1){  
        if(!val){
          this.getApiGroupData()
        } else{
           this.dataFor(this.data,val)
        }
      }else if(show[0]==='0'){
        this.dataFor(this.data,val,0)
      }else{
        this.dataFor(this.data,val,1)
      }
    },
    dataFor(list,val,num){
      list.forEach((item,index)=>{
          if(num===undefined?true:num===item.status&&item.name.indexOf(val)!==-1){
            this.filtrdata.push(item)
            this.statusFor(this.filtrdata,num)
          }else if(item.children){
            this.dataFor(item.children,val,num)
          }
        }
      )
    },
    //条件过滤
    statusFor(val,num){
      if(num===undefined) return
      for(let i=val.length-1;i>=0;i--)
          if(val[i].status!==num){
           val.splice(i,1) 
          }else if(val[i].children){
            this.statusFor(val[i].children,num)
          }
        
    }
  }
}
</script>
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 20px;
}
/* 修改el-input高度，方案一： */
/* 某些预处理器(sass)无法识别>>>，建议使用方案二 */
/* >>> .el-input__inner {
  height: 20px;
} */
/* 修改el-input高度，方案二： */
/deep/ .el-input__inner {
  height: 20px;
}
</style>

//封装组件  功能：获取拖动的目标的父级，兄，和自己
let menu = {
    parm:{
        currentCode :'',//当前code
        newParentCode :'',//父节点code
        preBrotherCode:''//兄弟节点
    },
    // 格式化树状数据 isFixedExt 是否只展开前三级
    formmenuData(list,val) {
        // console.log(list,val)    
        if(!val.draggingNode.data||!val.dropNode.data) return false
        let draggingNode =val.draggingNode.data,// draggingNode 拖动对象
            dropNode=val.dropNode.data,//dropNode 目标对象
            dropType=val.dropType;//dropType状态  inner拖进 after before交换  none取消
       if(dropType==='none'){
           return false
       }else{
        list.forEach((item,index)=>{
            this.getpam(draggingNode,item,item,index)
            })
       }
      return this.parm
    },
    getpam(draggingNode,list,fulist,index){
        if(draggingNode.code===list.code){
            this.parm= {
                currentCode:list.code,
                newParentCode:fulist.code===list.code?'':fulist.code,
                preBrotherCode:index===0&&fulist.code!==list.code?'':fulist.children[index-1].code
            }
        }else if(list.children){
            list.children.forEach((item,index)=>{
                this.getpam(draggingNode,item,list,index)
            })
        }
    }
  };
  
  export default menu;