vue Transfer 穿梭框
阿新 • • 發佈:2018-03-02
vue mit 校驗 rabl scope scrip ont console acc
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>
vue Transfer 穿梭框