124 lines
4.5 KiB
Vue
124 lines
4.5 KiB
Vue
|
<template>
|
||
|
|
<div style="height:300px;">
|
||
|
|
<!-- <div class="selectRole">选择角色</div> -->
|
||
|
|
<el-transfer v-model="selectRoleData" :data="allRoleData" class="elTransfer" :titles="['待选成员角色', '已选成员角色']" @change="handleChange">
|
||
|
|
<span slot-scope="{option}">
|
||
|
|
<span>{{option.role+(option.name==undefined?'':option.name)}}</span>
|
||
|
|
<el-radio-group v-model="option.gender" size="mini" class="sexGroup" @change="changeSex($event,option.key)">
|
||
|
|
<el-radio-button label="Male">男</el-radio-button>
|
||
|
|
<el-radio-button label="Female">女</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</span>
|
||
|
|
</el-transfer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import Vue from 'vue';
|
||
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
||
|
|
import {getScriptPlayMember,getScriptMemberData,cancleScriptMembers,selectScriptMembers,modifyScriptMemberSex} from '@/api/simulation';
|
||
|
|
export default {
|
||
|
|
name: 'addRole',
|
||
|
|
props: {
|
||
|
|
group: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
allRoleData:[],
|
||
|
|
selectRoleData:[],
|
||
|
|
sexGroup:"男",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
initData(){
|
||
|
|
let group=this.$props.group;
|
||
|
|
getScriptMemberData(group).then(response=>{
|
||
|
|
let lastData=JSON.stringify(response.data);
|
||
|
|
this.allRoleData=this.coverData(lastData);
|
||
|
|
getScriptPlayMember(group).then(response=>{
|
||
|
|
let lastData=response.data;
|
||
|
|
let data=[];
|
||
|
|
lastData.forEach(function(element){data.push(element.id)});
|
||
|
|
this.selectRoleData=data;
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
coverData(data){
|
||
|
|
let roleTypeList=ConstConfig.ConstSelect.roleType;
|
||
|
|
let lastData=data.replace(new RegExp('id','g'),'key');
|
||
|
|
roleTypeList.forEach(function(element){
|
||
|
|
let rolename=element.value;
|
||
|
|
lastData=lastData.replace(new RegExp(rolename,'g'),element.label);
|
||
|
|
});
|
||
|
|
lastData=JSON.parse(lastData);
|
||
|
|
return lastData;
|
||
|
|
},
|
||
|
|
handleChange(value, direction, movedKeys) {
|
||
|
|
switch(direction)
|
||
|
|
{
|
||
|
|
case 'right':{
|
||
|
|
let group=this.$props.group;
|
||
|
|
let data=movedKeys;
|
||
|
|
selectScriptMembers(group,data).then(response=>{
|
||
|
|
this.$message.success('选择剧本角色成功');
|
||
|
|
// this.$parent.
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.$messageBox(`选择剧本角色失败: ${error.message}`);
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 'left':{
|
||
|
|
let group=this.$props.group;
|
||
|
|
let data=movedKeys;
|
||
|
|
cancleScriptMembers(group,data).then(response=>{
|
||
|
|
this.$message.success('取消剧本角色成功');
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.$messageBox(`取消剧本角色失败: ${error.message}`);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeSex(event,id)
|
||
|
|
{
|
||
|
|
debugger;
|
||
|
|
let group=this.$props.group;
|
||
|
|
let data={"gender":event};
|
||
|
|
modifyScriptMemberSex(group,id,data).then(response=>{
|
||
|
|
this.$message.success('修改剧本成员性别成功');
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.$messageBox(`修改剧本成员性别失败: ${error.message}`);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
|
|
@import "src/styles/mixin.scss";
|
||
|
|
.selectRole{
|
||
|
|
font-size: 15px;
|
||
|
|
padding: 0px 20px 15px 15px;
|
||
|
|
}
|
||
|
|
.elTransfer{
|
||
|
|
margin-left:20px;
|
||
|
|
width:700px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.elTransfer .el-transfer-panel{
|
||
|
|
width:300px ;
|
||
|
|
}
|
||
|
|
.sexGroup{
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|