穿梭框

```javascript

<template>
  <div :class="{ 'dialog-center': detectionShow }" class="maskstyle">
    <el-dialog
      title="库房管理员设置"
      custom-class="mt0"
      class="admin"
      :visible.sync="detectionShow"
      width="900px"
    >
      <el-row style="margin-bottom: 10px">
        <el-input
          v-model="searchTxt"
          style="width: 320px; margin-right: 10px"
          placeholder="人员选择"
        />
      </el-row>
      <el-row>
        <el-col :span="9">
          <div class="left-table">
            <el-table
              border
              ref="leftTable"
              highlight-current-row
              :data="
                leftFields.filter(
                  (data) => !searchTxt || data.user_name.includes(searchTxt)
                )
              "
              max-height="389px"
              height="389px"
              highlight-current-row
              :row-class-name="tableRowClassName"
              @row-click="(r) => onSelectionChange(r, 'left')"
              @row-dblclick="(row) => onDblclick(row, 'left')"
              v-loading="loading"
              element-loading-text="Loading"
              element-loading-spinner="el-icon-loading"
              element-loading-background="hsla(0,0%,100%,.6)"
            >
              <el-table-column label="用户列表" prop="user_name" />
              <el-table-column label="部门" prop="dept_name" />
              <el-table-column label="职务" prop="position" />
            </el-table>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="btn-row" style="margin-top: 150px">
            <el-button
              type="primary"
              size="mini"
              style="width: 100%"
              @click="moveToRight"
            >
              右移
            </el-button>
          </div>
          <div class="btn-row">
            <el-button size="mini" style="width: 100%" @click="moveToLeft">
              左移
            </el-button>
          </div>
        </el-col>

        <el-col :span="9">
          <div>
            <el-table
              border
              ref="rightTable"
              :data="rightFields"
              max-height="389px"
              height="389px"
              highlight-current-row
              :row-class-name="tableRowClassName"
              @row-click="(r) => onSelectionChange(r, 'right')"
              v-loading="loading"
              element-loading-text="Loading"
              element-loading-spinner="el-icon-loading"
              element-loading-background="hsla(0,0%,100%,.6)"
              @row-dblclick="(row) => onDblclick(row, 'right')"
            >
              <el-table-column
                label="序号"
                type="index"
                align="right"
                width="70px"
              />
              <el-table-column label="用户名" align="center" prop="user_name" />
            </el-table>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="btn-row" style="margin-top: 100px">
            <el-button
              size="mini"
              style="width: 100%"
              @click="onClickMoveButton('top')"
            >
              置顶
            </el-button>
          </div>

          <div class="btn-row">
            <el-button
              size="mini"
              style="width: 100%"
              @click="onClickMoveButton('up')"
            >
              上移
            </el-button>
          </div>
          <div class="btn-row">
            <el-button
              size="mini"
              style="width: 100%"
              @click="onClickMoveButton('down')"
            >
              下移
            </el-button>
          </div>
          <div class="btn-row">
            <el-button
              size="mini"
              style="width: 100%"
              @click="onClickMoveButton('bottom')"
            >
              置底
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row style="text-align: right; margin-top: 20px">
        <el-button size="mini" type="primary" @click="detectionClick"
          >确定</el-button
        >
        <el-button size="mini" @click="detectionShow = false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStoreAdminByIdApi,
  addStoreAdminApi,
} from "@/api/warehouseManagement";

export default {
  data() {
    return {
      tableRadio: "",
      store_id: "",
      leftFields: [],
      detectionShow: false,
      rightFields: [],
      leftTableSelection: [],
      rightTableSelection: [],
      connector: "",
      searchTxt: "",
      tabRowIndex: null,
      tabColumnIndex: null,
      loading: false,
      store_id:[],
    };
  },
  mounted() {
    // this.getLeftFields()
    //this.getMainTableData()
  },
  methods: {
    showDialog(store_id) {
      this.loading = true;
      this.detectionShow = true;
      this.store_id = store_id;
      getStoreAdminByIdApi(" ", store_id).then((res) => {
        if (res && res.status) {
          this.loading = false;
          this.leftFields = res.content.allUser;
          this.rightFields = res.content.adminUser;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //双击
    onDblclick(row, direction) {
      if (direction == "left") {
        this.leftTableSelection = row;
        this.$nextTick(() => {
          this.moveToRight();
        });
      } else {
        this.rightTableSelection = row;
        this.$nextTick(() => {
          this.moveToLeft();
        });
      }
    },
    //行点击事件
    onSelectionChange(selection, direction) {
      const data = [];
      if (direction === "left") {
        this.leftTableSelection = selection;
      } else {
        this.rightTableSelection = selection;
      }
    },

    moveToLeft() {
      if (this.rightTableSelection === null) {
        this.$message({
          message: "请选择右侧用户",
        });
        return;
      }
      this.rightFields.splice(this.rightTableSelection.$index, 1);
      this.leftFields.push(this.rightTableSelection);
      this.rightTableSelection = null;
      this.$refs.rightTable.clearSelection();
    },
    moveToRight() {
      if (this.leftTableSelection === null) {
        this.$message({
          message: "请选择左侧用户",
        });
        return;
      }
      this.leftFields.splice(this.leftTableSelection.$index, 1);
      this.rightFields.push(this.leftTableSelection);
      this.leftTableSelection = null;
      this.$refs.leftTable.clearSelection();
    },
    onClickMoveButton(type) {
      console.log(this.rightTableSelection, "222");
      if (this.rightTableSelection === null) {
        this.$message({
          message: "请选择一条条目",
        });
        return;
      }
      const row = this.rightTableSelection;
      const index = this.rightTableSelection.$index;
      const rightTableData = this.rightFields;

      if (type === "down") {
        // 下移
        if (index === rightTableData.length - 1) {
          this.$message({
            message: "已经是最后一级，无法下移",
          });
          return;
        }
        const next = this.rightFields[index + 1];
        this.rightFields[index + 1] = this.rightFields.splice(
          index,
          1,
          next
        )[0];
      } else if (type === "up") {
        // 上移
        if (index === 0) {
          this.$message({
            message: "已经是顶级，无法上移",
          });
          return;
        }
        const pre = this.rightFields[index - 1];
        this.rightFields[index - 1] = this.rightFields.splice(index, 1, pre)[0];
      } else if (type === "top") {
        // 置顶
        if (index === 0) {
          this.$message({
            message: "已经是顶部，无法上移",
          });
          return;
        }
        this.rightFields.splice(0, 0, { ...row });
        this.rightFields.splice(index + 1, 1);
      } else if (type === "bottom") {
        // 置底
        if (index >= rightTableData.length - 1) {
          this.$message({
            message: "已经是底部，无法下移",
          });
          return;
        }
        this.rightFields.splice(rightTableData.length, 0, { ...row });
        this.rightFields.splice(index, 1);
      }
    },
    // 行类名
    tableRowClassName({ row, rowIndex }) {
      row.$index = rowIndex;
    },
    detectionClick() {
      //const content = this.rightFields;
     // console.log(content);
      // this.rightFields.forEach((i) => {
      //   console.log(i.store)
      //   i.store_id = this.store_id;
      // });
      const content ={
          rightFields:this.rightFields,
          store_id:this.store_id
      }
      addStoreAdminApi({...content}).then((res) => {
       if (res && res.status) {
          this.$message({
            message: res.message,
          });
          this.onClose();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 关闭弹框
    onClose() {
      this.rightFields = [];
      this.leftFields = [];
      this.detectionShow = false;
    },
  },
};
</script>
<style>
.append-to-body {
  height: 700px;
  overflow: hidden;
}
.merge-box .el-dialog__body {
  overflow-y: auto;
  max-height: 630px;
}

.el-dialog__body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  display: none;
}
.el-dialog__body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(193, 193, 193, 0.8);
  background: #cccccc;
}
</style>
<style lang="scss" scoped>
.el-dialog__body .fields-title {
  font-size: 15px;
}

.btn-row {
  width: 90%;
  margin: auto;
  margin-top: 8px;
}

.left-fields {
  list-style: none;
  margin: 0;
  padding: 8px;
  width: 100%;
  height: 420px;
  font-size: 14px;
  border: 1px solid #ccc;

  li {
    transition: all 0.3s ease-in-out;
    line-height: 26px;
  }

  li:hover {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    background-color: rgba($color: #ae1311, $alpha: 0.2);
  }
}

.right-table,
.left-table {
  height: 380px;
  // border: 1px solid #ccc;
}

.selected-left-field {
  background-color: rgba($color: #ae1311, $alpha: 0.2);
}

.code-example {
  display: block;
  padding-top: 10px;
  font-size: 14px;
}

.el-table__body-wrapper {
  height: auto !important;
}
.btn-table {
  margin-top: 15px;
}
</style>