|
|
1
|
<template>
|
|
|
2
|
<global-layout @dynamicRouterShow="dynamicRouterShow">
|
|
|
3
|
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect"/>
|
|
|
4
5
6
7
|
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multipage"
:active-key="activePage"
|
|
|
8
9
|
class="tab-layout-tabs"
style="height:52px"
|
|
|
10
11
12
13
14
15
16
17
|
:hide-add="true"
type="editable-card"
@change="changePage"
@edit="editPage">
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
</a-tab-pane>
</a-tabs>
|
|
|
18
|
<div style="margin: 12px 12px 0;">
|
|
|
19
20
21
22
23
24
25
|
<transition name="page-toggle">
<keep-alive v-if="multipage">
<router-view/>
</keep-alive>
<router-view v-else/>
</transition>
</div>
|
|
|
26
27
28
29
30
31
|
</global-layout>
</template>
<script>
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
|
|
|
32
33
34
35
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
const indexKey = '/dashboard/analysis'
|
|
|
36
|
export default {
|
|
|
37
|
name: 'TabLayout',
|
|
|
38
39
40
41
|
components: {
GlobalLayout,
Contextmenu
},
|
|
|
42
43
|
mixins: [mixin, mixinDevice],
data() {
|
|
|
44
45
46
47
48
49
50
51
52
53
54
55
56
|
return {
pageList: [],
linkList: [],
activePage: '',
menuVisible: false,
menuItemList: [
{ key: '1', icon: 'arrow-left', text: '关闭左侧' },
{ key: '2', icon: 'arrow-right', text: '关闭右侧' },
{ key: '3', icon: 'close', text: '关闭其它' }
]
}
},
computed: {
|
|
|
57
58
59
60
61
62
63
|
multipage() {
//判断如果是手机模式，自动切换为单页面模式
if (this.isMobile()) {
return false
} else {
return this.$store.state.app.multipage
}
|
|
|
64
65
|
}
},
|
|
|
66
67
68
69
70
71
72
73
74
75
76
77
78
|
created() {
if (this.$route.path != indexKey) {
this.pageList.push({
name: 'dashboard-analysis',
path: indexKey,
fullPath: indexKey,
meta: {
icon: 'dashboard',
title: '首页'
}
})
this.linkList.push(indexKey)
}
|
|
|
79
80
81
82
83
|
this.pageList.push(this.$route)
this.linkList.push(this.$route.fullPath)
this.activePage = this.$route.fullPath
},
watch: {
|
|
|
84
|
'$route': function(newRoute) {
|
|
|
85
86
87
|
this.activePage = newRoute.fullPath
if (!this.multipage) {
this.linkList = [newRoute.fullPath]
|
|
|
88
|
this.pageList = [Object.assign({},newRoute)]
|
|
|
89
90
|
} else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
this.linkList.push(newRoute.fullPath)
|
|
|
91
|
this.pageList.push(Object.assign({},newRoute))
|
|
|
92
93
|
} else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
let oldIndex = this.linkList.indexOf(newRoute.fullPath)
|
|
|
94
95
|
let oldPositionRoute = this.pageList[oldIndex]
this.pageList.splice(oldIndex, 1, Object.assign({},newRoute,{meta:oldPositionRoute.meta}))
|
|
|
96
97
|
}
},
|
|
|
98
99
|
'activePage': function(key) {
let index = this.linkList.lastIndexOf(key)
|
|
|
100
101
|
let waitRouter = this.pageList[index]
this.$router.push(Object.assign({},waitRouter));
|
|
|
102
|
},
|
|
|
103
|
'multipage': function(newVal) {
|
|
|
104
105
106
107
108
109
110
|
if (!newVal) {
this.linkList = [this.$route.fullPath]
this.pageList = [this.$route]
}
}
},
methods: {
|
|
|
111
|
changePage(key) {
|
|
|
112
113
|
this.activePage = key
},
|
|
|
114
|
editPage(key, action) {
|
|
|
115
116
|
this[action](key)
},
|
|
|
117
118
|
remove(key) {
if (key == indexKey) {
|
|
|
119
120
121
122
123
124
125
126
127
128
129
130
131
|
this.$message.warning('首页不能关闭!')
return
}
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页，不能再关闭了啦')
return
}
this.pageList = this.pageList.filter(item => item.fullPath !== key)
let index = this.linkList.indexOf(key)
this.linkList = this.linkList.filter(item => item !== key)
index = index >= this.linkList.length ? this.linkList.length - 1 : index
this.activePage = this.linkList[index]
},
|
|
|
132
|
onContextmenu(e) {
|
|
|
133
134
135
136
137
138
|
const pagekey = this.getPageKey(e.target)
if (pagekey !== null) {
e.preventDefault()
this.menuVisible = true
}
},
|
|
|
139
|
getPageKey(target, depth) {
|
|
|
140
141
142
143
144
145
146
147
|
depth = depth || 0
if (depth > 2) {
return null
}
let pageKey = target.getAttribute('pagekey')
pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
},
|
|
|
148
|
onMenuSelect(key, target) {
|
|
|
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
let pageKey = this.getPageKey(target)
switch (key) {
case '1':
this.closeLeft(pageKey)
break
case '2':
this.closeRight(pageKey)
break
case '3':
this.closeOthers(pageKey)
break
default:
break
}
},
|
|
|
164
|
closeOthers(pageKey) {
|
|
|
165
|
let index = this.linkList.indexOf(pageKey)
|
|
|
166
|
if (pageKey == indexKey) {
|
|
|
167
168
169
|
this.linkList = this.linkList.slice(index, index + 1)
this.pageList = this.pageList.slice(index, index + 1)
this.activePage = this.linkList[0]
|
|
|
170
171
|
} else {
let indexContent = this.pageList.slice(0, 1)[0]
|
|
|
172
173
174
175
176
177
178
|
this.linkList = this.linkList.slice(index, index + 1)
this.pageList = this.pageList.slice(index, index + 1)
this.linkList.unshift(indexKey)
this.pageList.unshift(indexContent)
this.activePage = this.linkList[1]
}
},
|
|
|
179
180
|
closeLeft(pageKey) {
if (pageKey == indexKey) {
|
|
|
181
182
|
return
}
|
|
|
183
184
|
let tempList = [...this.pageList]
let indexContent = tempList.slice(0, 1)[0]
|
|
|
185
186
187
188
189
190
191
192
193
|
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(index)
this.pageList = this.pageList.slice(index)
this.linkList.unshift(indexKey)
this.pageList.unshift(indexContent)
if (this.linkList.indexOf(this.activePage) < 0) {
this.activePage = this.linkList[0]
}
},
|
|
|
194
|
closeRight(pageKey) {
|
|
|
195
196
197
198
199
200
|
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(0, index + 1)
this.pageList = this.pageList.slice(0, index + 1)
if (this.linkList.indexOf(this.activePage < 0)) {
this.activePage = this.linkList[this.linkList.length - 1]
}
|
|
|
201
202
203
204
205
206
207
208
209
|
},
//update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
dynamicRouterShow(key,title){
let keyIndex = this.linkList.indexOf(key)
if(keyIndex>=0){
let currRouter = this.pageList[keyIndex]
let meta = Object.assign({},currRouter.meta,{title:title})
this.pageList.splice(keyIndex, 1, Object.assign({},currRouter,{meta:meta}))
}
|
|
|
210
|
}
|
|
|
211
|
//update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
|
|
|
212
|
}
|
|
|
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
}
</script>
<style lang="scss">
/*
* The following styles are auto-applied to elements with
* transition="page-transition" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the page transition by editing
* these styles.
*/
.page-transition-enter {
opacity: 0;
}
.page-transition-leave-active {
opacity: 0;
}
.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
|
|
|
240
|
|
|
|
241
242
243
244
|
/*美化弹出Tab样式*/
.ant-tabs-nav-container {
margin-top: 4px;
}
|
|
|
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
|
/* 修改 ant-tabs 样式 */
.tab-layout-tabs.ant-tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: white;
padding: 0 20px;
.ant-tabs-bar {
margin: 4px 0 0;
border: none;
}
}
.ant-tabs {
&.ant-tabs-card .ant-tabs-tab {
padding: 0 24px !important;
background-color: white !important;
margin-right: 10px !important;
.ant-tabs-close-x {
width: 12px !important;
height: 12px !important;
opacity: 0 !important;
cursor: pointer !important;
font-size: 12px !important;
margin: 0 !important;
position: absolute;
top: 36%;
right: 6px;
}
&:hover .ant-tabs-close-x {
opacity: 1 !important;
}
}
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar {
.ant-tabs-tab {
border: none !important;
border-bottom: 1px solid transparent !important;
}
.ant-tabs-tab-active {
border-color: #1890ff !important;
}
}
|
|
|
299
|
</style>
|
