app-nav-pos.tsx 2.9 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
import { LogUtil, Util } from 'ibiz-core';
import { Vue, Prop, Component } from 'vue-property-decorator';
import './app-nav-pos.less';
/**
 * 导航占位
 *
 * @export
 * @class AppNavPos
 * @extends {Vue}
 */
@Component({})
export class AppNavPos extends Vue {

    /**
     * 动态导航模式(DYNAMICCOMP:动态组件 ROUTEVIEW:路由出口)
     *
     * @public
     * @type {'DYNAMICCOMP' | 'ROUTEVIEW'}
     * @memberof AppNavPos
     */
    @Prop({ default: 'ROUTEVIEW' }) public dynaNavMode?: 'DYNAMICCOMP' | 'ROUTEVIEW';

    /**
     * 是否启用动态缓存
     *
     * @type {boolean}
     * @memberof AppNavPos
     */
    @Prop({ default: false }) public enableCache?: boolean;

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

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

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

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

    /**
     * 绘制内容
     *
     * @memberof AppNavPos
     */
    public render(): any {
        return (
            <div class="app-nav-pos">
                {
                    // 路由出口
                    Object.is(this.dynaNavMode, 'ROUTEVIEW') ?
                        this.enableCache ?
                            <app-keep-alive routerList={this.routerList}>
                                <router-view key={this.routerViewKey}></router-view>
                            </app-keep-alive> :
                            <router-view key={this.routerViewKey}></router-view> :
                        // 动态组件
                        this.navData ? this.$createElement('app-view-shell', {
                            key: Util.createUUID(),
                            props: {
                                staticProps: {
                                    viewDefaultUsage: false
                                },
                                dynamicProps: {
                                    viewdata: JSON.stringify(this.navData.context),
                                    viewparam: JSON.stringify(this.navData.viewparams)
                                }
                            },
                            class: "viewcontainer2",
                            on: {
                                viewdataschange: this.handleViewEvent.bind(this),
                                viewLoaded: this.handleViewEvent.bind(this),
                                viewstatechange: this.handleViewEvent.bind(this)
                            }
                        }) : null
                }
            </div>
        )
    }
}