app-nav-pos.vue

<template>
    <div :class="curClassName" :style="curStyle">
        <template v-if="dynaNavMode === 'ROUTEVIEW'">
            <template v-if="enableCache">
                <app-keep-alive :routerList="routerList">
                    <router-view :key="routerViewKey"></router-view>
                </app-keep-alive>
            </template>
            <router-view v-else :key="routerViewKey"></router-view>
        </template>
        <component class="view-container2" v-if="navData && navData.navView" :is="navData.navView"
            :viewDefaultUsage="false" :viewdata="JSON.stringify(navData.srfnavdata.context)"
            :viewparam="JSON.stringify(navData.srfnavdata.viewparmas)" @viewdataschange="handleViewEvent"
            @viewLoaded="handleViewEvent" @viewstatechange="handleViewEvent">
        </component>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class AppNavPos extends Vue {

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppNavPos
     */
    @Prop() public name!: string;

    /**
     * 布局模型详情
     *
     * @type {*}
     * @memberof AppNavPos
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppNavPos
     */
    @Prop() public index?: number;

    /**
     * 导航数据
     *
     * @type {*}
     * @memberof AppNavPos
     */
    @Prop() public navData: any;

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppNavPos
     */
    get itemName() {
        return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name;
    }

    /**
     * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
     *  
     * @type {"DYNAMICCOMP" | "ROUTEVIEW"}
     * @memberof AppNavPos
     */
    get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" {
        const currentModel = this.layoutModelDetails[this.itemName];
        if (currentModel && currentModel.dynaNavMode) {
            return currentModel.dynaNavMode;
        }
        return 'DYNAMICCOMP';
    }

    /**
     * 是否启用动态缓存
     *
     * @type {boolean}
     * @memberof AppNavPos
     */
    get enableCache(): boolean {
        const currentModel = this.layoutModelDetails[this.itemName];
        if (currentModel) {
            return currentModel.enableCache;
        }
        return false;
    }

    /**
     * 路由列表
     *
     * @memberof AppNavPos
     */
    get routerList() {
        return this.$store.state.historyPathList;
    }

    /**
     * 路由键值
     *
     * @memberof AppNavPos
     */
    get routerViewKey() {
        let _this: any = this;
        return _this.$route.fullPath;
    }

    /**
     * 当前容器类名
     *
     * @memberof AppNavPos
     */
    get curClassName() {
        const currentModel = this.layoutModelDetails[this.itemName];
        if (currentModel) {
            return `app-nav-pos ${this.itemName} ${currentModel.sysCss}`;
        }

    }

    /**
     * 当前容器样式
     *
     * @memberof AppNavPos
     */
    get curStyle() {
        const currentModel = this.layoutModelDetails[this.itemName];
        if (currentModel) {
            const containerStyle = currentModel.getElementStyle();
            if (Object.is(currentModel.viewType, 'APPINDEXVIEW')) {
                Object.assign(containerStyle, { 'background-color': '#f0f2f5' });
            }
            if (!containerStyle.height) {
                Object.assign(containerStyle, { 'height': '0', flex: 'auto' });
            }
            return containerStyle;
        }
    }

    /**
     * 执行视图事件
     *
     * @param {*} args
     * @memberof AppNavPos
     */
    public handleViewEvent(args: any) {
        console.log(args);
    }

}
</script>
<style lang='less'>
@import './app-nav-pos.less';
</style>