rt-sim-training-client/src/views/demonstration/deomonList/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"
  >
    <!-- <el-input v-model="filterText" placeholder="输入关键字进行过滤" /> -->
    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height+'px'}">
      <el-tree
        ref="tree"
        class="filter-tree"
        :data="trainingList"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        :style="{height: height+'px'}"
        @node-click="clickEvent"
      >
        <span slot-scope="{ node, data }">
          <span>{{ data.creator.nickName }}的房间({{ data.state == '01' ? '未开始' : '已开始' }})</span>
        </span>
      </el-tree>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="handleWatch">观看</el-button> -->
      <el-button type="primary" @click="handleJoin">加入房间</el-button>
      <el-button @click="dialogShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getjointTrainList, getjointTraining, putJointTrainingSimulationEntrance } from '@/api/chat';
import { getPublishMapInfo } from '@/api/jmap/map';
import { launchFullscreen } from '@/utils/screen';

export default {
	name: 'DeomonList',
	data() {
		return {
			dialogShow: false,
			loading: false,
			height: 120,
			// filterText: '',
			trainingList: [],
			defaultProps: {
				label: 'roomName'
			},
			group: '',
			state: '',
			mapId: ''
		};
	},
	computed: {
		show() {
			return this.dialogShow;
		},
		title() {
			return '综合演练快速入口';
		},
		isWatch() {
			return true;
		},
		isjoin() {
			return true;
		}
	},
	watch: {
	},
	methods: {
		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		clickEvent(obj, node, data) {
			this.state = obj.state;
			this.group = obj.group;
			this.mapId = obj.mapId;
		},
		async getList() {
			try {
				const res = await getjointTrainList();
				this.trainingList = res.data;
			} catch (error) {
				console.error(error);
			}
		},
		doShow() {
			this.getList();
			this.loading = false;
			this.dialogShow = true;
		},
		doClose() {
			this.loading = false;
			this.dialogShow = false;
		},
		handleWatch() {

		},
		async handleJoin() {
			await getjointTraining(this.group);
			if (this.state == '02') {
				launchFullscreen();
				await putJointTrainingSimulationEntrance(this.group);
				const rest = await getPublishMapInfo(this.mapId);
				const query = { skinStyle: rest.data.skinStyle, mapId: this.mapId, group: this.group };
				this.$router.push({ path: `/jointTraining`, query: query });
			} else if (this.state == '01') {
				const query = { group: this.group };
				this.$router.push({ path: `/trainroom`, query: query });
			}
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ {
        .el-dialog__body {
            padding: 0px 30px !important;
        }

        .el-tree {
            overflow: hidden !important;
        }

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