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.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>