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>