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 Vue from 'vue';
    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'),
            }
        },
        mounted(){
            this.initData();
        },
        watch:{
            '$store.state.socket.simulationStart': function (val) {
                if(val)
                {
                    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 last=response.data;
                        // let userdata=JSON.stringify(response.data)
                        // let reg=new RegExp('\"id\":\"(.*?)\\\"','g');
                        // let datalist=userdata.match(reg);
                        let data=[];
                        last.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;
                    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':{
                        let group=this.$props.group;
                        let 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':{
                        let group=this.$props.group;
                        let 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();
                        });
                    }
                }
            },
            // resetData(data){
            //     debugger;
            //     let allRoleData=this.allRoleData;
            //     // debugger;
            //     data.forEach(function(element){
            //         allRoleData.forEach(function(select){
            //                 if(select.key==element)
            //                 {
            //                     debugger;
            //                     select.disabled="disabled";
            //                 }
            //         });
            //     });
            // },
            changeSex(event,id)
            {
                let group=this.$props.group;
                let 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: 730px;
    }
    /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: 310px;
        }
        .el-transfer-panel__item{
            margin-right:0px;
        }
        .el-transfer__buttons{
            padding: 0 20px;
        }
    }
</style>
<style>
    .sexGroup{
        margin-left: 10px;
    }
</style>