vue 拖拽draggable

<template>
  <div class="regionalMenu">
    <div>
      <template slot="header">
        微信访客导航菜单
        <el-popover
          placement="bottom-start"
          width="300"
          trigger="hover"
          content="发大发">
          <span class="el-icon-question" slot="reference"></span>
        </el-popover>
      </template>
      <template slot="body">
        <el-form ref="form" :model="form" label-width="60px">
          <el-form-item>
            <p class="line">引导语设置</p>
          </el-form-item>
          <el-form-item label="引导语">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.guide"
              maxlength="100"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <p class="line">导航设置<span>员工组接入时，靠前的员工组优先级更高</span></p>
          </el-form-item>
          <el-form-item>
            <draggable element="ul" v-model="form.menus" :options="options">
              <transition-group>
                <el-row v-for="(item,index) in form.menus" :key="index">
                  <el-col :span="1"><span class="circular">{{ index+1 }}</span></el-col>
                  <el-col :span="7"><el-input v-model="item.menu" placeholder="请输入菜单名称"></el-input></el-col>
                  <el-col :span="16">
                    <el-select v-model="item.groups" multiple placeholder="请选择">
                      <el-option
                        v-for="item in employeeGroups"
                        :key="item.id"
                        :label="item.groupName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="1" class="removeRight"><span class="el-icon-delete" @click="handerRemove(item,index)" v-if="showbtn == index ? false:true"></span></el-col>
                </el-row>
              </transition-group>
            </draggable>
            <div><span class="el-icon-plus" @click="addMenu">添加菜单</span></div>
          </el-form-item>
          <el-form-item>
            <xyy-button>保存</xyy-button>
          </el-form-item>
        </el-form>
      </template>
    </div>
  </div>
</template>

<script>
import { regionalMenuTo, EmployeeGroups } from '@/api/configuration/RegionalMenu';
import draggable from 'vuedraggable'
export default {
  name: 'regionalMenu',
  components: { draggable },
  data() {
    return {
      form: {},
      employeeGroups: [],
      options: {
        animation: 150,
        handle: '.el-row',
        filter: ''
      },
      showbtn: 0
    }
  },
  created() {
    this.AccessInformation()
    this.getGroups()
  },
  methods: {
    // 添加菜单
    addMenu() {
     if (this.form.menus.length <= 14) {
       this.form.menus.push({ menu: '', groups: '' })
     } else {
       this.$message({
         message: '最多添加15个导航菜单',
         type: 'success'
       });
     }
    },
    // 删除菜单;
    handerRemove(item, index) {
      console.log(item)
      console.log(index)
      if (index !== 0) {
        this.form.menus.splice(index, 1)
      }
    },
    // 获取区域菜单所有数据
    AccessInformation() {
      var params
      regionalMenuTo(params).then(response => {
        this.form = response.data
        console.log(response.data.menus)
      }).catch(function(error) {
        console.log(error);
      });


    },
  //  获取员工组数据
    getGroups() {
      var paramsL
      EmployeeGroups(paramsL).then(response => {
        this.employeeGroups = response.data
      }).catch(function(error) {
        console.log(error);
      });
    }

  }
}
</script>

<style lang="scss">
  .regionalMenu{
    ul{
      padding-left: 0 !important;
      cursor: move;
    }
    .el-icon-plus{
      cursor: pointer;
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(59,149,168,1);
    }
    .el-form-item__label{
      text-align: left;
    }
    .el-form{
      width: 85%;
      .el-textarea__inner{
        height: 80px;
      }
      .el-col-1{
        /*width: 3.16667%;*/
      }
      .el-col-7{
        padding-right: 1%;
      }
      .el-select{
        width: 100%;
      }
      .el-row{
        margin-bottom: 10px;
        position: relative;
        .el-col-8{
          padding-right: 12px;
        }
        .removeRight{
          position: absolute;
          top: 0;
          right: -5%;
          cursor: pointer;
        }
      }
      .line{
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(41,41,51,1);
        margin-left: -35px;
        span{
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(174,174,191,1);
          margin-left: 8px;
        }
      }
    }
    .circular{
      width: 20px;
      height: 20px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border: 1px solid rgba(228,228,235,1);
      display: inline-block;
      text-align: center;
      line-height: 20px;
      background: rgba(228,228,235,1);
      color: rgba(144,147,153,1);;
    }
  }

</style>