rt-sim-training-client/src/views/demonstration/deomonTopic/index.vue

<template>
  <el-dialog
    v-dialogDrag
    :title="$t('global.synthesisTrainingTitle')"
    :visible.sync="dialogShow"
    width="600px"
    class="inviteRoom"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div class="inviteJoinRoom">{{ roomName }}{{ $t('global.inviteJoinRoom') }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button v-loading="loading" type="primary" @click="handleJoin">{{ $t('global.confirm') }}</el-button>
      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { launchFullscreen } from '@/utils/screen';
// 仿真邀请消息
export default {
    name: 'DeomonList',
    data() {
        return {
            dialogShow: false,
            group: '',
            roomName: '',
            mapId: '',
            lineCode: '',
            loading: false
        };
    },
    methods: {
        doShow(data) {
            this.roomName = data.creator.nickname;
            this.group = data.group;
            this.mapId = data.mapId || data.map.id;
            this.lineCode = (data.map || {}).lineCode;
            this.dialogShow = true;
            this.loading = false;
        },
        doClose() {
            this.dialogShow = false;
        },
        async handleJoin() {
            try {
                this.loading = true;
                launchFullscreen();
                const query = { lineCode: this.lineCode, mapId: this.mapId, group: this.group};
                this.$router.push({path: `/jointTrainingNew`, query: query});
                this.dialogShow = false;
            } catch (e) {
                this.$messageBox(this.$t('tip.enterTrainingRoomFailed'));
                console.error(e);
            } finally {
                this.loading = false;
                this.dialogShow = false;
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
    .inviteRoom .inviteJoinRoom{height: 80px;line-height: 80px;font-size: 16px;padding-left: 10px;}
    .inviteRoom .el-dialog__body {padding: 0px 30px;}
</style>