vue Transfer 穿梭框

Posted 2020-10-25 翰弟

Element Transfer组件默认支持单个list的穿梭

现业务需要支持两个list，效果如下

 

实现思路：

　　1、有选中才可穿梭

　　2、已穿梭源数据减少、目标增加（双向）

　　边界条件：

　　　　存储旧List(（用于已穿梭后切换下拉框重置list等）

       　　切下拉框时重置另一个list为旧list

　　　　左边下拉框选项同右边时   清空右边下拉的选项

 代码

<template>
  <div class="page custom-MS custom-MS-ED">
    <el-button class="right-top" type="primary" @click="updateBdCompany(\'qryForm\')">保存</el-button>
    <v-pageSection title="企业分配">
      <el-row>
        <el-form :inline="true" :model="qryInput" :rules="newRules" ref="qryForm" label-position="top">
          <el-col :span="8" :offset="2">
            <el-form-item label="源销售人员" prop="sourceAccount">
              <el-select v-model="qryInput.sourceAccount" filterable placeholder="请选择" clearable @change="handleSourceChange">
                <el-option v-for="item in bdList" :key="item.account" :label="item.name" :value="item.account">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item label="目标销售人员" prop="targetAccount">
              <el-select v-model="qryInput.targetAccount" filterable placeholder="请选择" clearable @change="handleTargetChange">
                <el-option v-for="item in otherBdList" :key="item.account" :label="item.name" :value="item.account">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-table border height="450"
            ref="multipleSourceTable"
            :data="sourceCL"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSourceSelectionChange">
　　　　　　　<!-- 使用Element表格的单选多选功能 -->
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">{{scope.row.shortName}} -- {{scope.row.poi}}</template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="2" :offset="1">
          <div style="height: 260px">
            <el-button type="primary" style="margin-top: 150px" :disabled="multipleSourceSelection.length == 0" @click="addToTarget">到右边<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-arrow-left" :disabled="multipleTargetSelection.length == 0" @click="addToSource">到左边</el-button>
          </div>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-table border height="450"
            ref="multipleTargetTable"
            :data="targetCL"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleTargetSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">{{scope.row.shortName}}-{{scope.row.poi}}</template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </v-pageSection>
  </div>
</template>
<script>
　 //发ajax请求的服务
  import CMService from \'@/services/companyManagement-service\'
  export default {
    data() {
      return {
        qryInput: {
          sourceAccount: \'\'
        },
        updateParams: {},
        companyIds: [],
        bdList: [],
        sourceCL: [],
        targetCL: [],
        oldSourceCL: [],
        oldTargetCL: [],
        multipleSourceSelection: [],
        multipleTargetSelection: [],
　　　　 //Element 数据校验
        newRules: {
          sourceAccount: {
            required: true,
            message: \'请选择源销售人员\'
          },
          targetAccount: {
            required: true,
            message: \'请选择目标销售人员\'
          }
        },
      }
    },
    methods: {
      qry() {
        let vm = this
        CMService.qryUnderlingUser(this.qryInput, function(response) {
          vm.bdList = response.data.bdList
        })
      },
      // 封装的方法 start
      // 是否穿梭过
      isTransfer(curList, oldList) {
        if(curList.length != oldList.length){
          return true
        }else{
          return curList.every(function(item){
            return oldList.includes(item)
          })
        }
      },
      // 删除已选
      deleteSelected(curList, multipleSelection) {
        let resultList = []
        curList.forEach(function(itemC, indexC){
          let resultFlag =  multipleSelection.every(function(itemM, indexM){
            return itemM.id != itemC.id
          }) 
          if(resultFlag) resultList.push(itemC)
        })
        return resultList
      },
      // 获取id组成的数组
      getIdList(curList) {
        let idList = []
        curList.forEach(function(item, index){
          idList.push(item.id)
        })
        return idList
      },
      // 封装的方法 end

      qrySourceCL(account) {
        if(!account){
          this.sourceCL = [] 
          return
        }
        let vm = this
        if(this.isTransfer){
          this.targetCL = this.oldTargetCL
        }
        CMService.getBdCompanyList({account: account}, function(response) {
          debugger
          vm.sourceCL = response.data.companyList
          vm.oldSourceCL = vm._.clone(response.data.companyList)

        })
      },
      qryTargetCL(account) {
        if(!account){
          this.targetCL = [] 
          return
        }
        let vm = this
        if(this.isTransfer){
          this.sourceCL = this.oldSourceCL
        }
        CMService.getBdCompanyList({account: account}, function(response) {
          vm.targetCL = response.data.companyList
          vm.oldTargetCL = vm._.clone(response.data.companyList)
        })
      },
      addToTarget() {
        if(!this.qryInput.targetAccount){
          this.$alert(\'请先选择目标销售人员\')
          return
        }
        this.sourceCL = this.deleteSelected(this.sourceCL, this.multipleSourceSelection)
        this.targetCL = this.targetCL.concat(this.multipleSourceSelection)
      },
      addToSource() {
        if(!this.qryInput.sourceAccount){
          this.$alert(\'请先选择目标销售人员\')
          return
        }
        this.targetCL = this.deleteSelected(this.targetCL, this.multipleTargetSelection)
        this.sourceCL = this.sourceCL.concat(this.multipleTargetSelection)
      },
      updateBdCompany(formName) {
        let vm = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateParams.companyIds = this.getIdList(this.targetCL)
            CMService.updateBdCompany(this.updateParams, function(response) {
              vm.$alert(\'修改成功\').then(() => {
                vm.dialogModifyFormVisible = false
                vm.qry()
              })
            })
          } else {
            console.log(\'error submit!!\')
            return false
          }
        })
      },
      handleSourceChange(account) {
        this.qrySourceCL(account)
      },
      handleTargetChange(account) {
        this.qryTargetCL(account)
        this.updateParams.account = account
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSourceSelectionChange(val) {
        this.multipleSourceSelection = val;
      },
      handleTargetSelectionChange(val) {
        this.multipleTargetSelection = val;
      }
    },
    mounted() {
      this.qry()
    },
    computed: {
　　　 //目标销售人员由源销售人员过滤得到
      otherBdList: function(){
        let vm = this
        return this.bdList.filter(function(item, index){
          return item.account !== vm.qryInput.sourceAccount
        })
      }
    },
  }
</script>