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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<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='scss'>
@import './app-nav-pos.scss';
</style>