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

<template>
  <el-dialog
    v-dialogDrag
    v-dialogLoading="pageLoading"
    :title="title"
    :visible.sync="show"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height+'px'}">
      <el-tree
        ref="tree"
        node-key="group"
        class="filter-tree"
        default-expand-all
        :data="trainingList"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :style="{height: height+'px'}"
      >
        <div slot-scope="{ node, data }" class="list-elem custom-tree-node">
          <span v-if="data.state=='01'">{{ '['+data.map.name+']'+($t('global.trainingNotStart').replace('{name}', data.creator.nickname)) }}</span>
          <span v-else>{{ '['+data.map.name+']'+($t('global.trainingHasStart').replace('{name}', data.creator.nickname)) }}</span>
          <el-button
            type="text"
            size="mini"
            @click="handleJoinRoom(data)"
          >进入</el-button>
        </div>
      </el-tree>
    </el-scrollbar>
    <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';
import { getToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, roomTopic} from '@/utils/stomp';

export default {
    name: 'DeomonList',
    data() {
        return {
            dialogShow: false,
            height: 120,
            trainingList: [],
            defaultProps: {
                label: 'roomName'
            },
            group: '',
            loading: false,
            pageLoading: false
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return this.$t('global.synthesisTrainingTitle');
        },
        isWatch() {
            return true;
        },
        isjoin() {
            return true;
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        async subscribe(group) {
            if (!this.$store.state.socket.roomIsSubscribe) {
                this.clearSubscribe(group);
                const header = { group: group || '', 'X-Token': getToken() };
                creatSubscribe(`${roomTopic}\/${group}`, header);
                await this.$store.dispatch('socket/setRoomSubscribe', true);
            }
        },
        async clearSubscribe(group) {
            clearSubscribe(`${roomTopic}\/${group}`);
            await this.$store.dispatch('socket/setRoomSubscribe', false);
        },
        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" scoped>
	/deep/ {
		.el-dialog__body {
			padding: 0px 30px !important;
		}

		.el-tree {
			overflow: auto !important;
			.list-elem {
				height: 30px;
				line-height: 30px;
			}
		}

		.el-tree-node.is-current>.el-tree-node__content {
			background-color: #e4e3e3 !important;
		}
	}
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
</style>