rt-sim-training-client/src/views/scriptManage/scriptRecord/addRole.vue
joylink_cuiweidong fab4e149c8 代码调整
2020-05-14 19:42:49 +08:00

208 lines
7.8 KiB
Vue

<template>
<el-card class="scriptTop">
<el-transfer v-model="selectRoleData" :data="allRoleData" class="script-player-choose" :titles="[$t('scriptRecord.allRoles'), $t('scriptRecord.actors')]" @change="handleChange">
<span slot-scope="{option}">
<span>{{ option.name }}</span>
<el-radio-group v-model="option.gender" size="mini" class="sexGroup" @change="changeSex($event,option.key)">
<el-radio-button label="Male">{{ $t('scriptRecord.roleSexMale') }}</el-radio-button>
<el-radio-button label="Female">{{ $t('scriptRecord.roleSexFemale') }}</el-radio-button>
</el-radio-group>
</span>
</el-transfer>
</el-card>
</template>
<script>
import Cookies from 'js-cookie';
import ConstConfig from '@/scripts/ConstConfig';
import {getScriptPlayMember, getScriptPlayMemberNew, getScriptMemberData, getScriptMemberDataNew, cancleScriptMembers, cancleScriptMembersNew, selectScriptMembers, selectScriptMembersNew, modifyScriptMemberSex} from '@/api/simulation';
export default {
name: 'AddRole',
props: {
group: {
type: String,
required: true
}
},
data() {
return {
allRoleData: [],
selectRoleData: [],
sexGroup: this.$t('scriptRecord.roleSexMale')
};
},
computed:{
drawWay() {
const drawWay = this.$route.query.drawWay;
return drawWay && JSON.parse(drawWay);
}
},
watch: {
'$store.state.socket.simulationStart': function (val) {
if (val) {
this.initData();
}
}
},
mounted() {
this.initData();
},
methods: {
initData() {
const group = this.$props.group;
if (this.drawWay) {
getScriptMemberDataNew(group).then(response=>{
const lastData = JSON.stringify(response.data);
this.allRoleData = this.coverData(lastData, ConstConfig.ConstSelect.roleTypeNew);
// lastData = lastData.replace(new RegExp('id', 'g'), 'key');
// lastData = JSON.parse(lastData);
// this.allRoleData = lastData;
getScriptPlayMemberNew(group).then(response=>{
const last = response.data;
// let userdata=JSON.stringify(response.data)
// let reg=new RegExp('\"id\":\"(.*?)\\\"','g');
// let datalist=userdata.match(reg);
const data = [];
last.forEach(function(element) { data.push(element.id); });
this.selectRoleData = data;
});
});
} else {
getScriptMemberData(group).then(response=>{
const lastData = JSON.stringify(response.data);
this.allRoleData = this.coverData(lastData, ConstConfig.ConstSelect.roleType);
getScriptPlayMember(group).then(response=>{
const last = response.data;
// let userdata=JSON.stringify(response.data)
// let reg=new RegExp('\"id\":\"(.*?)\\\"','g');
// let datalist=userdata.match(reg);
const data = [];
last.forEach(function(element) { data.push(element.id); });
this.selectRoleData = data;
});
});
}
},
coverData(data, roleTypeList) {
let lastData = data.replace(new RegExp('id', 'g'), 'key');
roleTypeList.forEach(function(element) {
const rolename = element.value;
if (Cookies.get('user_lang') == 'en') {
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
} else {
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
}
});
lastData = JSON.parse(lastData);
lastData.forEach(each=>{
const name = each.name == undefined ? '' : '-' + each.name;
const deviceName = each.deviceName == undefined ? '' : '-' + each.deviceName;
each.name = each.role + deviceName + name;
});
return lastData;
},
handleChange(value, direction, movedKeys) {
switch (direction) {
case 'right': {
const group = this.$props.group;
const data = movedKeys;
if (this.drawWay) {
selectScriptMembersNew(group, data).then(response=>{
this.$message.success(this.$t('scriptRecord.selectScriptActorSuccess'));
this.$emit('refresh');
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.selectScriptActorFail')}: ${error.message}`);
return false;
});
} else {
selectScriptMembers(group, data).then(response=>{
this.$message.success(this.$t('scriptRecord.selectScriptActorSuccess'));
this.$emit('refresh');
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.selectScriptActorFail')}: ${error.message}`);
return false;
});
}
break;
}
case 'left': {
const group = this.$props.group;
const data = movedKeys;
if (this.drawWay) {
cancleScriptMembersNew(group, data).then(response=>{
this.$emit('refresh');
this.$message.success(this.$t('scriptRecord.cancleScriptActorSuccess'));
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.cancleScriptActorFail')}: ${error.message}`);
this.initData();
});
} else {
cancleScriptMembers(group, data).then(response=>{
this.$emit('refresh');
this.$message.success(this.$t('scriptRecord.cancleScriptActorSuccess'));
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.cancleScriptActorFail')}: ${error.message}`);
this.initData();
});
}
}
}
},
changeSex(event, id) {
const group = this.$props.group;
const data = {'gender': event};
modifyScriptMemberSex(group, id, data).then(response=>{
this.$message.success(this.$t('scriptRecord.modifyScriptActorSexSuccess'));
}).catch(error => {
this.$messageBox(`${this.$t('scriptRecord.modifyScriptActorSexFail')}: ${error.message}`);
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.elTransfer{
margin-left:20px;
width:700px;
}
.scriptTop{
padding: 10px 10px;
width: 100%;
/deep/ {
.script-player-choose .el-transfer-panel__body{
height: 120px;
}
.script-player-choose .el-transfer-panel__list{
height: 120px;
}
.script-player-choose .el-transfer-panel{
width: 44%;
}
.el-transfer-panel__item{
margin-right:0px;
}
.el-transfer__buttons{
padding: 0;
width: 12%;
.el-button{
margin: 14px auto;
margin-left: 50%;
padding: 10px;
transform: translateX(-50%);
}
}
}
}
</style>
<style>
.sexGroup{
margin-left: 10px;
}
</style>