rt-sim-training-client/src/views/scriptManage/scriptRecord/addRole.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.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">{{ $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, getScriptMemberData, cancleScriptMembers, selectScriptMembers, modifyScriptMemberSex} from '@/api/simulation';
export default {
	name: 'AddRole',
	props: {
		group: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			allRoleData: [],
			selectRoleData: [],
			sexGroup: this.$t('scriptRecord.roleSexMale')
		};
	},
	watch: {
		'$store.state.socket.simulationStart': function (val) {
			if (val) {
				this.initData();
			}
		}
	},
	mounted() {
		this.initData();
	},
	methods: {
		initData() {
			const group=this.$props.group;
			getScriptMemberData(group).then(response=>{
				const lastData=JSON.stringify(response.data);
				this.allRoleData=this.coverData(lastData);
				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) {
			const roleTypeList=ConstConfig.ConstSelect.roleType;
			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);
			return lastData;
		},
		handleChange(value, direction, movedKeys) {
			switch (direction) {
			case 'right': {
				const group=this.$props.group;
				const data=movedKeys;
				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;
				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;
				}
			}
		}
    }
</style>
<style>
    .sexGroup{
        margin-left: 10px;
    }
</style>