saber/src/components/WbsTree/ManualSorting.vue

<template>
  <div
    class="ManualSorting"
    style="border: 1px solid #E8E8E8;border-radius: 3px;"
  >
    <draggable :list="sort" @change="listChange">
      <div
        v-for="(item,key) in sort"
        :key="key"
        class="flexBetween flexItemsC"
        style="width:100%;font-size:16px;height:30px;padding:3px 0px;border-top: 1px solid  #E8E8E8;"
      >
        <div>
          <span class="marleft10 marright20">{{key+1}}</span>
          <span
            style="color:black;"
          >{{item.deptName}}</span>
          <span class="marleft20">{{item.tableName}}</span>
        </div>
        <div class="flexItemsC marright20">
          <i
            @click="shangshen(key)"
            class="el-icon-top"
            :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
          ></i>
          <i
            @click="xiajiang(key)"
            class="el-icon-bottom marleft5"
            :style="{'font-size':'20px','color':key==sort.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=sort.length-1?'pointer':'default'}"
          ></i>
        </div>
      </div>
    </draggable>
  </div>
</template>
<script>

import draggable from 'vuedraggable'

export default {
  components: {
      draggable,
  },
  props: ['sort'],
  methods: {
    xiajiang (key) {
      if (key != this.sort.length - 1) {
        let da = this.sort[key]
        this.sort[key] = this.sort[key + 1]
        this.sort[key + 1] = da
        this.$emit('bianhua')
      }
      console.log(this.sort);
    },
    shangshen (key) {
      if (key != 0) {
        let da = this.sort[key]
        this.sort[key] = this.sort[key - 1]
        this.sort[key - 1] = da
        this.$emit('bianhua')
      }
    },

    listChange(){
      
    }
  }
}
</script>
<style lang="scss" scoped>
.ManualSorting {
  width: 100%;
  height: 100%;
}
</style>