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

<template>
  <div>
    <slot name="header">
      <el-row class="radio">
        <el-radio-group v-model="region">
          <el-radio label="0">全部经销商</el-radio>
          <el-radio label="1">地区</el-radio>
          <el-radio label="2">指定</el-radio>
        </el-radio-group>
      </el-row>
      <el-row type="flex">
        <el-col>
          <el-input
            v-model="keyword"
            placeholder="查找经销商"
            size="small"
          ></el-input>
        </el-col>
        <el-col
          ><el-button size="small" @click="getcList">确定</el-button></el-col
        >
      </el-row>
    </slot>
    <div>
      <el-row type="flex" align="moddle" class="transfer">
        <el-col class="left_box" :span="9">
          <div>
            <h4 class="transfer_title">可选经销商</h4>
            <el-checkbox-group
              v-model="leftData"
              class="left_box_flex"
              @change="handleLeft"
            >
              <el-checkbox
                v-for="(item, index) in dataL"
                :key="index"
                :label="item.id"
              >
                {{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <!-- 分页 -->
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"
            >
            </el-pagination>
          </div>
        </el-col>
        <el-col class="middle_box" :span="6">
          <el-row>
            <el-col>
              <el-button
                size="small"
                @click="handleAllAdd"
                :disabled="type == 2 || !dataL.length"
                >全部添加</el-button
              ></el-col
            >
            <el-col>
              <el-button
                size="small"
                @click="handleAdd"
                :disabled="type == 2 || !dataL.length"
                >增加</el-button
              ></el-col
            >
            <el-col>
              <el-button
                size="small"
                :disabled="type == 1 || !dataR.length"
                @click="handleDelete"
                >删除</el-button
              ></el-col
            >
            <el-col>
              <el-button
                size="small"
                :disabled="type == 1 || !dataR.length"
                @click="handleAllDelete"
                >全部删除</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"
            @change="handleRight"
          >
            <el-checkbox
              v-for="(item, index) in dataR"
              :key="index"
              :label="item.id"
            >
              {{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-col>
      </el-row>
    </div>
    <slot name="footer">
      <el-row>
        <el-button type="primary" size="small" @click="handleSubmit"
          >提交审核</el-button
        >
        <el-button type="primary" size="small" @click="">重置</el-button>
      </el-row>
    </slot>
  </div>
</template>

<script>
import Minxin from "@/mixin";
import { getCrList } from "@/api/supply/sales";
export default {
  mixins: [Minxin],
  data() {
    return {
      type: "",
      radio: "0",
      leftData: [],
      dataL: [],
      dataR: [],
      rightData: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      value: "",
      region: "0",
      keyword: "",
    };
  },
  methods: {
    getList() {
      this.getcList();
    },
    getcList() {
      const customerParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
        region: this.region,
      };
      console.log(555);
      // 获取经销商列表
      getCrList(customerParams).then((res) => {
        this.dataL = res.data.records;
        this.listTotal = res.data.total;
      });
    },
    handleLeft(e) {
      this.type = 1;
    },
    handleRight(e) {
      this.type = 2;
    },
    handleAllAdd() {
      this.dataR = this.dataL;
    },
    handleAllDelete() {
      this.dataR = [];
    },
    handleAdd() {
      if (this.type == 1) {
        for (let i = 0; i < this.dataL.length; i++) {
          for (let k = 0; k < this.leftData.length; k++) {
            if (this.dataL[i].id == this.leftData[k]) {
              this.dataR = [...new Set([this.dataL[i], ...this.dataR])];
            }
          }
        }
        this.leftData = [];
      }
    },
    handleDelete() {
      if (this.type == 2) {
        for (let i = 0; i < this.dataR.length; i++) {
          for (let k = 0; k < this.rightData.length; k++) {
            if (this.dataR[i].id == this.rightData[k]) {
              this.dataR.splice(i, 1);
            }
          }
        }
      }
    },
    handleSubmit() {
      this.$emit("handleAddPolicy", this.dataR);
    },
  },
};
</script>

<style lang="scss" scoped>
// 穿梭框
.transfer {
  margin: 20px 0;
  &_title {
    margin: 20px 20px 0 20px;
  }
  .left_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 440px;
    height: 450px;
    border: 1px solid #eee;
    &_flex {
      display: flex;
      flex-direction: column;
      margin: 20px;
      .el-checkbox {
        padding: 10px 0;
      }
    }
  }
  .right_box {
    width: 440px;
    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>