supply-front/src/views/sales_policy/components/Transfer.vue

<template>
  <div>
    <slot name="header">
      <el-row type="flex">
        <el-col>
          <el-select v-model="value" class="select_height" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col><el-button>确定</el-button></el-col>
      </el-row>
    </slot>
    <div>
      <el-row type="flex" align="moddle" class="transfer">
        <el-col class="left_box" :span="9">
          <h4 class="transfer_title">可选经销商</h4>
          <el-checkbox-group
            v-model="leftData"
            class="left_box_flex"
            @change="handelLeftCheck"
          >
            <el-checkbox
              v-for="(item, index) in dataL"
              :key="index"
              :label="item"
              :disabled="rightDisabled"
            ></el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col class="middle_box" :span="6">
          <el-row>
            <el-col>
              <el-button :disabled="isDisabled" @click="handleJudge('AddAll')"
                >全部添加</el-button
              ></el-col
            >
            <el-col>
              <el-button :disabled="isDisabled" @click="handleJudge('AddPart')"
                >增加</el-button
              ></el-col
            >
            <el-col>
              <el-button
                :disabled="isDisabled"
                @click="handleJudge('DeletePart')"
                >删除</el-button
              ></el-col
            >
            <el-col>
              <el-button
                :disabled="isDisabled"
                @click="handleJudge('DeleteAll')"
                >全部删除</el-button
              ></el-col
            >
          </el-row>
        </el-col>
        <el-col class="right_box" :span="9">
          <h4 class="transfer_title">已选经销商</h4>
          <el-checkbox-group v-model="rightData" class="right_box_flex">
            <el-checkbox
              v-for="(item, index) in dataR"
              :key="index"
              :label="item"
              :disabled="leftDisabled"
            ></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </div>

    <slot name="footer">
      <el-row>
        <el-button type="primary" size="default" @click="">保存</el-button>
        <el-button type="primary" size="default" @click="">提交审核</el-button>
        <el-button type="primary" size="default" @click="">重置</el-button>
      </el-row>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftData: [],
      dataL: [1, 3, 2],
      dataR: [],
      rightData: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  computed: {
    /**
     * @return(bool)  isDisabled
     *  禁用功能按钮
     */
    isDisabled() {
      return !(this.leftData.length || this.rightData.length);
    },
    /**
     * @return(bool)  leftDisabled
     *  禁用左边框选择
     */
    leftDisabled() {
      return this.leftData.some((i) => i !== "");
    },
    /**
     * @return(bool)  rightDisabled
     *  禁用右边框选择
     */
    rightDisabled() {
      return this.rightData.some((i) => i !== "");
    },
  },
  methods: {
    handelLeftCheck(direction) {},
    //添加全部数据
    handleAllData(direction) {
      if (direction === "left") {
        if (!this.dataL.length) return;
        this.dataR = [...this.dataR, ...this.dataL];
        this.dataL = [];
        this.leftData = [];
      } else {
        if (!this.dataR.length) return;
        this.dataL = [...this.dataL, ...this.dataR];
        this.dataR = [];
        this.rightData = [];
      }
    },
    //添加部分或单个数据
    handlePartData(direction) {
      if (direction === "left") {
        if (!this.dataL.length) return;
        this.dataR = [...this.dataR, ...this.leftData];
        this.dataL.forEach((k, d) => {
          this.leftData.forEach((e) => {
            if (e == k) {
              this.dataL.splice(d, 1);
              this.leftData = [];
              return;
            }
          });
        });
      } else {
        if (!this.dataL.length) return;
        this.dataL = [...this.dataL, ...this.rightData];
        this.dataR.forEach((k, d) => {
          this.rightData.forEach((e) => {
            if (e == k) {
              this.dataR.splice(d, 1);
              this.rightData = [];
              return;
            }
          });
        });
      }
    },
    //删除全部数据
    handleAllDelete(direction) {
      if (direction === "left") {
        if (!this.dataL.length) return;
        this.dataL = [];
        this.leftData = [];
      } else {
        if (!this.dataR.length) return;
        this.dataR = [];
        this.rightData = [];
      }
    },
    //删除部分或单个数据
    handlePartDelete(direction) {
      if (direction === "left") {
        this.dataL.forEach((k, d) => {
          this.leftData.forEach((e) => {
            if (e == k) {
              this.dataL.splice(d, 1);
              this.leftData = [];
              return;
            }
          });
        });
      } else {
        this.dataR.forEach((k, d) => {
          this.rightData.forEach((e) => {
            if (e == k) {
              this.dataR.splice(d, 1);
              this.rightData = [];
              return;
            }
          });
        });
      }
    },
    // 判断能操作那边框
    handleJudge(type) {
      if (this.leftDisabled) {
        // 左边框功能操作
        this.hanleType(type, "left");
      } else {
        // 右边框功能操作
        this.hanleType(type, "right");
      }
    },
    // 获取事件类型
    hanleType(type, direction) {
      switch (type) {
        case "AddAll":
          this.handleAllData(direction);
          break;
        case "AddPart":
          this.handlePartData(direction);
          break;
        case "DeleteAll":
          this.handleAllDelete(direction);
          break;
        case "DeletePart":
          this.handlePartDelete(direction);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 穿梭框
.transfer {
  margin: 20px 0;
  &_title {
    margin: 20px 20px 0 20px;
  }
  .left_box {
    width: 430px;
    height: 450px;
    border: 1px solid #eee;
    &_flex {
      display: flex;
      flex-direction: column;
      margin: 20px;
      .el-checkbox {
        padding: 10px 0;
      }
    }
  }
  .right_box {
    width: 430px;
    height: 450px;
    border: 1px solid #eee;
    &_flex {
      display: flex;
      flex-direction: column;
      margin: 20px;
      .el-checkbox {
        padding: 10px 0;
      }
    }
  }
}
.middle_box {
  text-align: center;
  height: 430px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.el-row .el-col {
  margin: 20px 0;
}
.select_height {
  width: 100%;
}
</style>