拖拽的穿梭框 （未实现）

<template>
  <div class="out">
    <el-row :gutter="20">
      <el-col :span="11">
        <div class="left">
          <div class="table-transfer">
            <span class="stuChoose">未选人员</span>
          </div>
        </div>
        <div style="height: 400px;">
          <el-table
            border
            size="mini"
            :data="leftData"
            height="100%"
            @selection-change="handleLeftSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
              fixed="left"
            />
            <div v-for="(item, index) in columns" :key="index">
              <el-table-column
                v-if="item.visible"
                :label="item.label"
                align="center"
                :prop="item.key"
              />
            </div>
          </el-table>
        </div>
      </el-col>
      <el-col :span="2" class="btns">
        <el-button
          class="btn"
          :disabled="leftMultiple"
          type="primary"
          icon="el-icon-right"
          @click="moveToRight"
          circle
        ></el-button>
        <el-button
          class="btn"
          :disabled="rightMultiple"
          type="primary"
          @click="moveToLeft"
          icon="el-icon-back"
          circle
        ></el-button>
      </el-col>
      <el-col :span="11">
        <div class="right">
          <div class="table-transfer">
            <span class="stuChoose">已选人员</span>
          </div>
          <div style="height: 400px;">
            <el-table
              border
              height="100%"
              size="mini"
              :data="rightData"
              ref="dragTable"
              @selection-change="handleRightSelectionChange"
              highlight-current-row
            >
              <el-table-column
                type="selection"
                width="40"
                align="center"
                fixed="left"
              />
              <div v-for="(item, index) in columns" :key="index">
                <el-table-column
                  :label="item.label"
                  align="center"
                  :prop="item.key"
                />
              </div>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  props: {
    // 绑定数据
    value: {
      type: Array,
      default: () => [],
    },
    // 主键key值
    keyName: {
      type: String,
      default: "label",
    },
    // 表格数据
    columns: {
      type: Array,
      default: () => [],
    },
    /**
     * 是否显示搜索框
     */
    showSearch: {
      type: Boolean,
      default: true,
    },
    allNumber: {
      type: Array, //这是所有部门人员的数据
      default: () => [],
    },
    leftDataRemain: {
      type: Array, //左边的数据，由于这里是每个部门的数据
      default: () => [],
    },
  },
  data() {
    return {
        sortable: null,
      dataList: [],
      // 左边的
      searchLeft: "",
      leftIds: [],
      leftMultiple: true,
      leftDataList: [],
      leftData: [],
      //   右边的
      leftRemainArr: [],
      rightData: [],
      rightDataList: [],
      rightMultiple: true,
      rightIds: [],
      rightRemainArr: [],
      Arr: [],
      oldList:[],
      newList:[],
    };
  },
  created() {
    this.init();
     this.$nextTick(() => {
        this.setSort()
      })
  },
  mounted() {},
  watch: {
    allNumber(old, newVal) {
      this.init();
    },
  },
  methods: {
    init() {
      this.rightIds = this.value;
      for (let i = 0; i < this.allNumber.length; i++) {
        // this.optionsTeam.push(obj)
        if (
          this.value.some((item) => item === this.allNumber[i][this.keyName])
        ) {
          //   console.log(this.allNumber[i][this.keyName], 'item')
          this.rightDataList.push(this.allNumber[i]);
        }
      }
      this.leftDataList = this.leftDataRemain;
      this.leftRemainArr = [...this.leftDataList];
      this.leftData = [...this.leftDataList];
      this.rightData = [...this.rightDataList];
      this.rightRemainArr = [...this.rightDataList];
    },
    // 这是我们选的要添加到右边的值
    handleLeftSelectionChange(selection) {
      this.leftIds = selection.map((item) => item[this.keyName]);
      this.leftMultiple = !selection.length;
    },
    // right多选框选中数据
    handleRightSelectionChange(selection) {
      this.rightIds = selection.map((item) => item[this.keyName]);
      this.rightMultiple = !selection.length;
    },
    // 举个例子，当右移数据的时候，此时处理左边的数组
    arrJson(arr, attr, value) {
      if (arr) {
        let leftArr = arr.filter((item, index) => {
          return item[attr] !== value;
        });
        return leftArr;
      }
    },
    moveToLeft() {
      // 先把没选择的留下来，
      for (const rightIndex of this.rightIds) {
        this.rightRemainArr = this.arrJson(
          this.rightRemainArr,
          this.keyName,
          rightIndex
        );
      }
      this.rightDataList.forEach((rightItem, index) => {
        for (const rightIndex of this.rightIds) {
          if (rightItem.userId === rightIndex) {
            this.leftRemainArr.push(rightItem);
          }
        }
      });
      this.leftData = this.leftRemainArr;
      this.leftDataList = this.leftData;
      this.rightData = this.rightRemainArr;
      this.rightDataList = this.rightRemainArr;
      this.$emit("change", this.rightDataList);
    },

    // 向右移动
    moveToRight() {
      //   console.log('leftItem')
      for (const leftIndex of this.leftIds) {
        this.leftRemainArr = this.arrJson(
          this.leftRemainArr,
          this.keyName,
          leftIndex
        );
      }
      this.leftDataList.forEach((leftItem, index) => {
        // console.log(leftItem, 'leftItem')
        let leftIndex = this.leftIds.findIndex(
          (item) => item === leftItem[this.keyName]
        );

        if (leftIndex !== -1) {
          this.rightDataList.push(leftItem);
        }
      });
      this.rightRemainArr = this.rightDataList;
      this.leftData = this.setData(this.leftRemainArr, this.searchLeft);
      this.rightData = this.rightDataList;
      // let team = []
      // team = this.rightDataList

      this.$emit("change", this.rightDataList);
    },

    // 左边的查询
    handleQueryLeft() {
      this.leftData = this.setData(this.leftDataList, this.searchLeft);
    },
    // 查询datalist  查询这块还没写完，
    setData(dataList, search) {
      return dataList;
    },
    resetData() {
      this.dataList = [];
      this.leftDataList = [];
      this.rightDataList = [];
      this.leftData = [];
      this.rightData = [];
      this.searchLeft = "";
      this.leftIds = [];
      //   右边的
      this.leftRemainArr = [];
      this.groupId = 0;
      this.groupArr = [];
      this.Arr = [];
    },
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.rightData.splice(evt.oldIndex, 1)[0]
          this.rightData.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    }
  },
};
</script>
  
<style lang="scss" scoped>
.table-transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .stuChoose {
    display: inline-block;
    width: auto;
    font-size: 18px;
    font-weight: 500;
  }
}

.btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: -50px;
  .btn {
    margin: 20px 0;
  }
}

</style>