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

<template>
  <el-dialog
    v-dialogDrag
    v-dialogLoading="pageLoading"
    :title="$t('global.synthesisTrainingTitle')"
    :visible.sync="dialogShow"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    class="synthesisTrain"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div class="synthesisTrainTree">
      <div v-for="(training,index) in trainingList" :key="index" class="synthesisTrainBody">
        <span>{{ '['+training.map.name+']'+($t('global.trainingHasStart').replace('{name}', training.creator.nickname)) }}</span>
        <el-button
          type="text"
          size="mini"
          class="synthesisTrainBtn"
          @click="handleJoinRoom(training)"
        >进入</el-button>
      </div>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button v-loading="loading" type="primary" @click="handleJoin">{{ $t('global.joinNewRoom') }}</el-button>
      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getSimulationListCantainUser } from '@/api/jointSimulation';
import { launchFullscreen } from '@/utils/screen';

export default {
    name: 'DeomonList',
    data() {
        return {
            dialogShow: false,
            trainingList: [],
            loading: false,
            pageLoading: false
        };
    },
    methods: {
        async doShow() {
            try {
                this.pageLoading = true;
                this.dialogShow = true;
                this.loading = false;
                this.trainingList = [];
                const resp = await getSimulationListCantainUser();
                if (resp.data) {
                    this.trainingList = resp.data;
                }
            } catch (e) {
                console.error(e);
            } finally {
                this.pageLoading = false;
            }
        },
        async doClose() {
            this.dialogShow = false;
        },
        async handleJoinRoom(data) {
            try {
                launchFullscreen();
                const query = { lineCode: data.map.lineCode, mapId: data.map.id, group: data.group};
                this.$router.push({path:'/jointTrainingNew', query:query});
            } catch (e) {
                console.error(e);
            } finally {
                this.loading = false;
            }
        },
        handleJoin() {
            this.$emit('enterQcode');
            this.dialogShow = false;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .synthesisTrainTree{height:120px;overflow:auto;}
  .synthesisTrainBody{height: 30px;line-height: 30px;cursor: pointer;padding:0px 10px;font-size: 14px;}
  .synthesisTrainBody:hover{background-color: #e4e3e3}
  .synthesisTrain .el-dialog__body{padding: 0px 30px}
  .synthesisTrainBtn{float:right}
</style>