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

<template>
    <el-card v-loading="loading">
        <div slot="header" style="text-align: center;">
            <span v-if="hasProduct"><b>仿真名称： {{ courseModel.name }}</b></span>
            <span v-else>无仿真产品</span>
        </div>
        <el-tabs type="border-card" @tab-click="handleLeave" :value="currentPrdCode"
            :style="{ height: height-50 +'px' }">
            <el-tab-pane v-for="item in productList" :key="item.code" :name="item.code" :label="item.name"
                style="padding: 5px" :style="{ height: height-160 +'px' }">
                <el-scrollbar wrapClass="scrollbar-wrapper" :style="{ height: height-170 +'px' }">
                    <p class="list-item">
                        <span class="list-label">产品说明：</span>
                        <span class="list-elem">{{ courseModel.remarks }}</span>
                    </p>
                    <p class="list-item">
                        <span class="list-label">权限列表：</span>
                    </p>
                    <limit-list :ref="`limit_${item.code}`" :courseModel="courseModel" @initLoadPage="initLoadPage">
                    </limit-list>
                </el-scrollbar>
            </el-tab-pane>
            <div class="btn-buy" v-if="hasProduct">
                <el-button type="success" @click="buy">购买</el-button>
                <el-button type="primary" @click="distribute" v-if="hasPermssion">权限分发</el-button>
                <el-button type="primary" @click="transfer" v-if="hasPermssion">权限转赠</el-button>
                <el-button type="primary" @click="start" v-show="isStartDemon">开始仿真</el-button>
                <el-button type="primary" @click="start" v-show="isCreateRoom">创建房间</el-button>
                <el-button type="primary" @click="joinRoom" v-show="isInRoom">进入房间</el-button>
            </div>
        </el-tabs>
    </el-card>
</template>
<script>
    import { getCourseLessonTree } from '@/api/management/exam';
    import { getProductList, getPublishMapInfo } from '@/api/jmap/map';
    import { getGoodsTryUse } from '@/api/management/goods';
    import { getCommodityMapProduct, getMapProductDetail } from '@/api/management/mapprd';
    import { mapGetters } from 'vuex';
    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 } from '@/api/simulation';
    import localStore from 'storejs';
    import LimitList from "@/views/components/limits/index";
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';

    export default {
        name: 'ExamDetailList',
        mixins: [
            WindowResizeHandler
        ],
        components: {
            LimitList
        },
        data() {
            return {
                height: '',
                tryTime: 0,
                goodsId: '',
                tryUser: 0,
                loading: true,
                currentLessonId: '',
                currentPrdCode: '',
                productList: [],
                courseModel: {
                    id: '',
                    name: '',
                    mapId: '',
                    skinCode: '',
                    remarks: '',
                    prdType: '',
                    prdCode: '',
                    pmsList: [],
                },
                EffectiveTypeList: [],
                jointShow: false,
                jointGroup: '',
            }
        },
        filters: {
            setTime(val) {
                if (val <= 1) {
                    return `0分钟`;
                } else if (1 < val && val <= 60) {
                    return '1分钟';
                } else if (val > 60) {
                    let time = parseInt(val / 60);
                    return `${time}分钟`;
                }
            }
        },
        computed: {
            hasProduct() {
                return this.productList.length;
            },
            hasPermssion() {
                let isShow = false;
                if (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;
            }
        },
        watch: {
            '$route': function (val) {
                this.loadInitData();
            },
            'currentPrdCode': function (code) {
                this.initLoadPage({ id: this.mapId, code: code });
            }
        },
        async mounted() {
            this.loadInitData();
        },
        methods: {
            async loadInitData() {
                this.$Dictionary.effectiveType().then(list => {
                    this.EffectiveTypeList = list;
                });

                this.currentPrdCode = '';
                this.productList = [];
                try {
                    if (parseInt(this.mapId)) {
                        this.getJointTrainingList();
                        let rest = await getPublishMapInfo(this.mapId);
                        if (rest && rest.code == 200) {
                            let resp = await getCommodityMapProduct(rest.data.skinCode);
                            if (resp.data && resp.data.length) {
                                this.productList = resp.data.sort((a, b) => {
                                    return Number(b.prdType) - Number(a.prdType);
                                })

                                this.currentPrdCode = localStore.get(this.$route.path) || this.productList[0].code;
                            }
                        }
                    }
                    this.loading = false;
                } catch (e) {
                    this.$messageBox('获取产品列表失败');
                }
            },
            resizeHandler: function () {
                this.height = this._clientHeight;
            },
            async getJointTrainingList() {
                try {
                    if (this.mapId) {
                        let res = await checkRoomExist({ mapId: this.mapId });
                        this.jointGroup = res.data;
                        this.jointShow = false;
                        if (res.data) {
                            this.jointShow = true;
                        }
                    }
                } catch (error) {
                    console.error(error, '获取是否拥有综合演练房间');
                }
            },
            async handleLeave(tab) {
                this.currentPrdCode = tab.name;
                localStore.set(this.$route.path, this.currentPrdCode);
            },
            async initLoadPage(data) {
                this.loading = true
                if (data && parseInt(data.id) && data.code) {
                    try {
                        let 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
                        };

                        let rest = await queryPermissionSimulation({ mapId: this.courseModel.mapId, prdCode: this.courseModel.prdCode });
                        this.courseModel.pmsList = rest.data;
                        if (!this.courseModel.pmsList.length) {
                            this.tryUser = 1;
                            let paras = {
                                mapId: data.id,
                                mapProductCode: data.code,
                                productType: PermissionType.SIMULATION
                            };

                            try {
                                let 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('刷新失败');
                    }
                } else {
                    this.loading = false;
                }
            },
            async joinRoom() {
                await getjointTraining(this.jointGroup);
                let query = { skinCode: this.courseModel.skinCode, group: this.jointGroup };
                this.$router.push({ path: `/trainroom`, query: query });
            },
            async start() {
                if (this.courseModel.prdType == '03') {
                    try {
                        let param = {
                            mapId: Number(this.mapId),
                            prdCode: this.courseModel.prdCode,
                        }
                        let res = await postCreateRoom(param);
                        if (res && res.code == 200) {
                            let query = { skinCode: this.courseModel.skinCode, group: res.data };
                            this.$router.push({ path: `/trainroom`, query: query });
                        }
                    } catch (error) {
                        if (error.code == 20001) {
                            this.$confirm(`每个用户只能创建一个综合演练房间, 是否进入房间`, '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => { }).catch(() => { })
                        }
                        if (error.code == 500009) {
                            this.$messageBox(error.message);
                        }
                    };
                } else {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    if (this.courseModel.pmsList.length) {
                        this.jump();
                    } else {
                        if (this.tryTime <= 1) {
                            this.loading.close();
                            this.$confirm('您没有权限，请前往购买产品', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.buy();
                            }).catch(() => { })
                        } else {
                            this.jump();
                        }
                    }
                }
            },
            jump() {
                let data = { mapId: this.courseModel.mapId, code: this.currentPrdCode }
                simulationNotify(data).then(resp => {
                    // try 0 有权限不走试用
                    let 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(`创建仿真失败: ${error.message}`);
                })
            },
            buy() {
                this.$router.push({
                    path: `${UrlConfig.demonstration.pay}/${this.courseModel.id}`,
                    query: { permissionType: PermissionType.SIMULATION, prdCode: this.courseModel.prdCode, mapId: this.courseModel.mapId }
                });
            },
            transfer() {
                if (this.$refs) {
                    this.$refs[`limit_${this.currentPrdCode}`][0].transfer(this.courseModel);
                }
            },
            distribute() {
                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);
    }

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