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

<template>
  <el-card v-loading="loading">
    <div slot="header" style="text-align: center;">
      <span><b>{{ $t('demonstration.simulationName') + courseModel.name }}</b></span>
    </div>
        <div>
          <p class="list-item">
            <span class="list-label">{{ $t('demonstration.productDescription') }}</span>
            <span class="list-elem">{{ courseModel.remarks }}</span>
          </p>
          <p class="list-item">
            <span class="list-label">{{ $t('global.permissionList') }}</span>
          </p>
          <limit-list :ref="`limit_${this.prodId}`" :course-model="courseModel" @initLoadPage="initLoadPage" />
        </div>
      <div class="btn-buy">
        <el-button type="success" @click="buy">{{ $t('global.buy') }}</el-button>
        <el-button v-if="hasPermssion" type="primary" @click="distribute">{{ $t('global.distributePermission') }}</el-button>
        <el-button v-if="hasPermssion" type="primary" @click="transfer">{{ $t('global.transferQRCode') }}</el-button>
        <el-button v-show="isStartDemon" :loading="buttonLoading" type="primary" @click="start">{{ $t('demonstration.startSimulation') }}</el-button>
        <el-button v-show="isCreateRoom" :loading="buttonLoading" type="primary" @click="start">{{ $t('demonstration.createRoom') }}</el-button>
        <el-button v-show="isInRoom" :loading="buttonLoading" type="primary" @click="joinRoom">{{ $t('demonstration.enterRoom') }}</el-button>
      </div>
  </el-card>
</template>
<script>
import { getPublishMapInfo } from '@/api/jmap/map';
import { getGoodsTryUse } from '@/api/management/goods';
import { getCommodityMapProduct, getMapProductDetail } from '@/api/management/mapprd';
import { PermissionType } from '@/scripts/ConstDic';
import { launchFullscreen } from '@/utils/screen';
import { queryPermissionSimulation } from '@/api/management/author';
import { postCreateRoom, getjointTraining, checkRoomExist } from '@/api/chat';
import { UrlConfig } from '@/router/index';
import { simulationNotify, schedulingNotify } from '@/api/simulation';
import LimitList from '@/views/components/limits/index';

export default {
	name: 'ExamDetailList',
	components: {
		LimitList
	},
	data() {
		return {
			tryTime: 0,
			goodsId: '',
			tryUser: 0,
			loading: true,
			buttonLoading: false,
			currentLessonId: '',
			currentPrdCode: '',
			productList: [],
			courseModel: {
				id: '',
				name: '',
				mapId: '',
				skinCode: '',
				remarks: '',
				prdType: '',
				prdCode: '',
				pmsList: []
			},
			jointShow: false,
			jointGroup: ''
		};
	},
	computed: {
		hasPermssion() {
			let isShow = false;
			if (this.courseModel.pmsList && this.courseModel.pmsList.length) {
				isShow = true;
			}
			return isShow;
		},
		isStartDemon() {
			return this.courseModel.prdType !== '03' && (this.hasPermssion || this.tryTime > 0);
		},
		isCreateRoom() {
			return this.courseModel.prdType === '03' && this.hasPermssion && !this.jointShow;
		},
		isInRoom() {
			return this.courseModel.prdType == '03' && this.hasPermssion && this.jointShow;
		},
		mapId() {
			return this.$route.params.mapId;
		},
        prodId() {
		    return this.$route.params.prodId;
        },
		height() {
			return this.$store.state.app.height - 50;
		}
	},
	watch: {
		'$route': function (val) {
			this.loadInitData();
		},
		// 'currentPrdCode': function (code) {
		// 	this.initLoadPage({ id: this.mapId, code: code });
		// }
	},
	async mounted() {
		this.loadInitData();
	},
	methods: {
		async loadInitData() {
            this.loading = true;
			this.currentPrdCode = this.prodId;
            try {
                const resp = await getMapProductDetail(this.prodId);
                this.tryUser = 0;
                this.loading = false;
                this.courseModel = {
                    id: resp.data.id,
                    name: resp.data.name,
                    mapId: this.mapId,
                    skinCode: resp.data.skinCode,
                    remarks: resp.data.remarks,
                    prdType: resp.data.prdType,
                    prdCode: resp.data.code,
                    pmsList: resp.data.pmsList || [],
                    PermissionType: PermissionType.SIMULATION
                };
                const rest = await queryPermissionSimulation({ mapId: this.courseModel.mapId, prdCode: this.courseModel.prdCode });
                this.courseModel.pmsList = rest.data;
                if (!this.courseModel.pmsList) {
                    this.tryUser = 1;
                    const paras = {
                        mapId: this.mapId,
                        prdCode: this.prodId,
                        permissionType: PermissionType.SIMULATION
                    };

                    try {
                        const resr = await getGoodsTryUse(paras);
                        if (resr.data.tryTime <= 0) {
                            this.tryTime = 0;
                        } else {
                            this.tryTime = resr.data.tryTime;
                            this.goodsId = resr.data.goodsId;
                        }
                    } catch (error) {
                        this.tryTime = 0;
                    }
                }
            } catch (error) {
                this.loading = false;
                this.$messageBox(this.$t('error.refreshFailed'));
            }
		},
		async initLoadPage(data) {
			this.loading = true;
			if (data && parseInt(data.id) && data.code) {
				try {
					const resp = await getMapProductDetail(data.code);
					this.tryUser = 0;
					this.loading = false;
					this.courseModel = {
						id: resp.data.id,
						name: resp.data.name,
						mapId: data.id,
						skinCode: resp.data.skinCode,
						remarks: resp.data.remarks,
						prdType: resp.data.prdType,
						prdCode: resp.data.code,
						pmsList: resp.data.pmsList || [],
						PermissionType: PermissionType.SIMULATION
					};
					const rest = await queryPermissionSimulation({ mapId: this.courseModel.mapId, prdCode: this.courseModel.prdCode });
					this.courseModel.pmsList = rest.data;
					if (!this.courseModel.pmsList) {
						this.tryUser = 1;
						const paras = {
							mapId: data.id,
							prdCode: data.code,
							permissionType: PermissionType.SIMULATION
						};

						try {
							const resr = await getGoodsTryUse(paras);
							if (resr.data.tryTime <= 0) {
								this.tryTime = 0;
							} else {
								this.tryTime = resr.data.tryTime;
								this.goodsId = resr.data.goodsId;
							}
						} catch (error) {
							this.tryTime = 0;
						}
					}
				} catch (error) {
                    this.loading = false;
					this.$messageBox(this.$t('error.refreshFailed'));
				}
			} else {
				this.loading = false;
			}
		},
		async joinRoom() {
			await getjointTraining(this.jointGroup);
			const query = { skinCode: this.courseModel.skinCode, group: this.jointGroup };
			this.$router.push({ path: `/trainroom`, query: query });
		},
		async createRoom() {
			try {
				this.buttonLoading = true;
				const param = {
					mapId: Number(this.mapId),
					prdCode: this.courseModel.prdCode
				};
				const res = await postCreateRoom(param);
				if (res && res.code == 200) {
					const query = { skinCode: this.courseModel.skinCode, group: res.data };
					this.$router.push({ path: `/trainroom`, query: query });
				}
			} catch (error) {
				this.buttonLoading = false;
				if (error.code == 20001) {
					this.$confirm(this.$t('tip.createRoomFailedHint'), this.$t('global.tips'), {
						confirmButtonText: this.$t('global.confirm'),
						cancelButtonText: this.$t('global.cancel'),
						type: 'warning'
					}).then(() => {}).catch(() => {});
				}
				if (error.code == 500009) {
					this.$messageBox(error.message);
				}
			}
		},
		async start() {
			if (this.courseModel.prdType == '05') {
				this.jumpScheduling();
			} else if (this.courseModel.prdType == '03') {
				this.createRoom();
			} else {
				if (this.courseModel.pmsList && this.courseModel.pmsList.length) {
					this.jump();
				} else {
					if (this.tryTime <= 1) {
						this.$confirm(this.$t('tip.noPermissionHint'), this.$t('global.tips'), {
							confirmButtonText: this.$t('global.confirm'),
							cancelButtonText: this.$t('global.cancel'),
							type: 'warning'
						}).then(() => {
							this.buy();
						}).catch(() => { this.buttonLoading = false; });
					} else {
						this.jump();
					}
				}
			}
		},
		jumpScheduling() {
			this.buttonLoading = true;
			const data = { mapId: this.courseModel.mapId, code: this.currentPrdCode };
			schedulingNotify(data).then(resp => {
				const query = { skinCode: this.courseModel.skinCode, group: resp.data, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, code: this.currentPrdCode, goodsId: this.goodsId, try: this.tryUser };
				this.$router.push({ path: `${UrlConfig.display}/demon`, query: query });
				launchFullscreen();
			}).catch(error => {
				this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
				this.buttonLoading = false;
			});
		},
		jump() {
			const data = { mapId: this.courseModel.mapId, code: this.currentPrdCode };
			this.buttonLoading = true;
			simulationNotify(data).then(resp => {
				const query = { skinCode: this.courseModel.skinCode, group: resp.data, prdType: this.courseModel.prdType, mapId: this.courseModel.mapId, code: this.currentPrdCode, goodsId: this.goodsId, try: this.tryUser };
				this.$router.push({ path: `${UrlConfig.display}/demon`, query: query });
				launchFullscreen();
			}).catch(error => {
				this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
				this.buttonLoading = false;
			});
		},
		buy() {
			this.buttonLoading = true;
			this.$router.push({
				path: `${UrlConfig.demonstration.pay}/${this.courseModel.id}`,
				query: { permissionType: PermissionType.SIMULATION, prdCode: this.courseModel.prdCode, mapId: this.courseModel.mapId }
			});
		},
		transfer() {
			this.buttonLoading = false;
			if (this.$refs) {
				this.$refs[`limit_${this.currentPrdCode}`][0].transfer(this.courseModel);
			}
		},
		distribute() {
			this.buttonLoading = false;
			if (this.$refs) {
				this.$refs[`limit_${this.currentPrdCode}`][0].distribute(this.courseModel);
			}
		}
	}
};
</script>
<style scoped>
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
</style>
<style>
    .title {
        font-weight: bold
    }

    .time-item {
        font-size: 24px;
        color: black !important;
    }

    .time-label {
        display: -moz-inline-box;
        display: inline-block;
        text-align: right;
        margin-left: 14px;
    }

    .time-elem {
        color: rgb(90, 89, 89) !important;
    }

    .list-item {
        font-size: 16px;
        margin-bottom: 20px;
        padding: 0px;
    }

    .list-label {
        display: -moz-inline-box;
        display: inline-block;
        text-align: left;
    }

    .list-elem {
        color: #808080 !important;
    }

    .btn-buy {
        position: relative;
        text-align: center;
        justify-content: center;
        transform: translateY(-20px);
        margin-top: 30px;
    }

    .el-tabs--border-card>.el-tabs__header .el-tabs__item {
        font-weight: bold !important;
    }
</style>