<template>
<el-card style="margin: 10px">
<div class="detailBox">
<el-transfer v-model="value" :data="peopleNum" :button-texts="['到左边', '到右边']" @change="handleChange"></el-transfer>
<el-button type="primary" class="btn" @click="submitData">任务分配</el-button>
</div>
</el-card>
</template>
<script>
import {
queryPeopleData,
submitPeopleData
} from '@/api/classifyWords' //请求后台的接口
export default {
data() {
return {
peopleNum:[],
value: [],
leftValue:[],
rightValue:[],
}
},
created() {
this.getPeopleData()
},
methods: {
getPeopleData(){
queryPeopleData().then(res=>{
let allData = res.data
allData.forEach(e=>{
this.peopleNum.push({
key:e.id,
label:e.name
})
})
})
},
handleChange(value,direction,movedKeys){
if(direction === 'right'){
movedKeys.forEach(key=>{
let index = this.leftValue.findIndex(item => item === key)
this.leftValue.splice(index,1)
})
movedKeys.forEach(key =>{
this.rightValue.push(key)
})
}else{
movedKeys.forEach(key=>{
let index = this.rightValue.findIndex(item => item === key)
this.rightValue.splice(index,1)
})
movedKeys.forEach(key =>{
this.leftValue.push(key)
})
}
},
submitData(){
if(this.rightValue == null || this.rightValue.length == 0){
this.$alert("请先选择用户","提示",{
confirmButtonText:"确定"
})
}else{
submitPeopleData(this.rightValue).then(res=>{
this.$message({
message: '任务分配成功',
type: 'success'
});
})
}
}
}
}
</script>
<style scoped>
.infoText {
font-size: 14px;
margin-top: 10px;
}
.detailBox {
border: 1px solid #000;
800px;
height: 600px;
margin-left: 30px;
padding: 30px;
}
.btn {
margin: 30px auto;
display: block;
}
</style>