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

<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="show"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div style="height: 80px; line-height: 80px; font-size: 16px; padding-left: 10px;">{{ 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
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return this.$t('global.synthesisTrainingTitle');
        }
    },
    mounted() {
    },
    methods: {
        doShow(data) {
            this.roomName = data.creator.nickname;
            this.group = data.group;
            this.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" scoped>
    /deep/ {
        .el-dialog__body {
            padding: 0px 30px !important;
        }

        .el-tree-node.is-current>.el-tree-node__content {
            background-color: #e4e3e3 !important;
        }
    }
</style>