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="">全部经销商</el-radio>
          <!--          <el-radio label="1">地区</el-radio>-->
          <!--          <el-radio label="2">指定</el-radio>-->
        </el-radio-group>
        <el-upload
          class="import-btn"
          :action="baseURL + 'student/import'"
          :http-request="handleImport"
          :file-list="importFileList"
          :show-file-list="false"
        >
          <el-button type="primary" size="small">导入经销商</el-button>
        </el-upload>
        <el-button type="primary" size="small" @click="hanleDownloadFiles">下载模板</el-button>
      </el-row>
      <el-row type="flex">
        <el-col>
          <el-input v-model="keyword" placeholder="查找经销商" size="small" />
        </el-col>
        <el-col style="margin-left: 10px"><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" :disabled="item.disabled">
                {{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <!-- 分页 -->
          <div>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
        <el-col class="middle_box" :span="6">
          <el-row>
            <el-col>
              <el-button size="small" :disabled="type === 2 || !dataL.length" @click="handleAllAdd"
                >全部添加</el-button
              ></el-col
            >
            <el-col>
              <el-button size="small" :disabled="type === 2 || !dataL.length" @click="handleAdd"
                >增加</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" @mouseover="type = 1" @mouseleave="type = 2">
          <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 style="margin: 50px 0 0 0">
        <el-button type="primary" size="small" @click="handleSubmit">提交审核</el-button>
        <el-button type="primary" size="small" @click="handleReset">重置</el-button>
      </el-row>
    </slot>
  </div>
</template>

<script>
import Minxin from '@/mixin'
import { getCrList } from '@/api/policy_list'
import { downloadFiles, handleImport } from '@/utils/util'

export default {
  mixins: [Minxin],
  data() {
    return {
      baseURL: '',
      type: '',
      radio: '',
      leftData: [],
      dataL: [],
      dataR: [],
      rightData: [],
      options: [],
      value: '',
      region: '',
      keyword: '',
      importFileList: []
    }
  },
  methods: {
    // 初始话数据
    getList() {
      this.getcList()
    },
    // 获取经销商列表
    getcList: function () {
      const customerParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
        region: ''
      }
      // 获取经销商列表
      getCrList(customerParams).then(res => {
        for (let i = 0; i < res.data.records.length; i++) {
          res.data.records[i].disabled = false
        }
        this.dataL = res.data.records
        console.log(res, '获取经销商列表')
        this.listTotal = res.data.total
      })
    },
    // 左边框
    handleLeft(e) {
      console.log(e)
      this.type = 1
    },
    // 右边框
    handleRight(e) {
      this.type = 2
    },
    // 全部添加
    handleAllAdd() {
      this.dataR = [...new Set([...this.dataR, ...this.dataL])]
    },
    // 全部删除
    handleAllDelete() {
      this.dataR = []
      this.rightData = []
    },
    // 单个删除或者多个删除
    handleAdd() {
      if (this.type == 1) {
        // console.log(this.leftData,44545);
        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.dataR, this.dataL[i]])]
              // this.rightData =[...this.rightData,this.leftData[k]]
              // this.dataL[i].disabled = true
            }
          }
        }
        this.leftData = []
      }
    },
    // 单个删除或者多个删除
    handleDelete() {
      if (this.type === 2) {
        const dataArr = JSON.parse(JSON.stringify(this.dataR))
        for (let k = dataArr.length - 1; k >= 0; k--) {
          for (let i = 0; i < this.rightData.length; i++) {
            if (this.rightData[i] === this.dataR[k].id) {
              dataArr.splice(k, 1)
            }
          }
        }
        this.dataR = dataArr
        this.rightData = []
      }
    },
    // 提交数据
    handleSubmit() {
      this.$emit('handleAddPolicy', this.dataR)
    },
    // 去掉相同数据
    resArr(arr1, arr2) {
      return arr1.filter(v => arr2.every(val => val.id !== v.id))
    },
    // 导入经销商模板
    async handleImport(param) {
      this.importLoading = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      // formData.append('policyId', this.searchForm.code)
      // formData.append("mainId", this.searchForm.mainId);
      const result = await handleImport('/policy/importCustomer', formData)
      console.log(result)
      this.importLoading = false
      this.importFileList = []
      if (result.code === 200) {
        await this.$alert(result.message, '导入成功', {
          confirmButtonText: '确定'
        })
        if (this.dataR.length) {
          this.dataR = [...this.dataR, ...this.resArr(this.dataR, result.data)]
          console.log(this.dataR)
        } else {
          this.dataR = result.data
        }
      } else {
        await this.$alert(result.message, '导入失败', {
          confirmButtonText: '确定'
        })
      }
    },
    // 下载经销商模板
    hanleDownloadFiles() {
      downloadFiles('policy/downloadCustomer')
    },
    handleReset() {
      this.dataR = this.rightData = []
      this.keyword = ''
      this.$emit('handleReset')
    }
  }
}
</script>

<style lang="scss" scoped>
// 穿梭框
.radio {
  display: flex;
  align-items: center;
}
.import-btn {
  margin: 0 10px;
}
.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;
    overflow-y: auto;
    &_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>