TabLayout.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. <template>
  2. <global-layout @dynamicRouterShow="dynamicRouterShow">
  3. <!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
  4. <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
  5. <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
  6. <a-tabs
  7. @contextmenu.native="e => onContextmenu(e)"
  8. v-if="multipage"
  9. :active-key="activePage"
  10. class="tab-layout-tabs"
  11. style="height:52px"
  12. :hide-add="true"
  13. type="editable-card"
  14. @change="changePage"
  15. @tabClick="tabCallBack"
  16. @edit="editPage">
  17. <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
  18. <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
  19. </a-tab-pane>
  20. </a-tabs>
  21. <div style="margin: 12px 12px 0;">
  22. <transition name="page-toggle">
  23. <keep-alive v-if="multipage">
  24. <router-view v-if="reloadFlag"/>
  25. </keep-alive>
  26. <template v-else>
  27. <router-view v-if="reloadFlag"/>
  28. </template>
  29. </transition>
  30. </div>
  31. </global-layout>
  32. </template>
  33. <script>
  34. import GlobalLayout from '@/components/page/GlobalLayout'
  35. import Contextmenu from '@/components/menu/Contextmenu'
  36. import { mixin, mixinDevice } from '@/utils/mixin.js'
  37. import { triggerWindowResizeEvent } from '@/utils/util'
  38. const indexKey = '/dashboard/analysis'
  39. export default {
  40. name: 'TabLayout',
  41. components: {
  42. GlobalLayout,
  43. Contextmenu
  44. },
  45. mixins: [mixin, mixinDevice],
  46. data() {
  47. return {
  48. pageList: [],
  49. linkList: [],
  50. activePage: '',
  51. menuVisible: false,
  52. menuItemList: [
  53. { key: '4', icon: 'reload', text: '刷 新' },
  54. { key: '1', icon: 'arrow-left', text: '关闭左侧' },
  55. { key: '2', icon: 'arrow-right', text: '关闭右侧' },
  56. { key: '3', icon: 'close', text: '关闭其它' }
  57. ],
  58. reloadFlag:true
  59. }
  60. },
  61. /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页,供子页面调用 ->望菜单能配置外链,直接弹出新页面而不是嵌入iframe #428 */
  62. provide(){
  63. return{
  64. closeCurrent:this.closeCurrent
  65. }
  66. },
  67. /* update_end author:wuxianquan date:20190828 for: 关闭当前tab页,供子页面调用->望菜单能配置外链,直接弹出新页面而不是嵌入iframe #428 */
  68. computed: {
  69. multipage() {
  70. //判断如果是手机模式,自动切换为单页面模式
  71. if (this.isMobile()) {
  72. return false
  73. } else {
  74. return this.$store.state.app.multipage
  75. }
  76. }
  77. },
  78. created() {
  79. if (this.$route.path != indexKey) {
  80. this.addIndexToFirst()
  81. }
  82. // update-begin-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
  83. let storeKey = 'route:title:' + this.$route.fullPath
  84. let routeTitle = this.$ls.get(storeKey)
  85. if (routeTitle) {
  86. this.$route.meta.title = routeTitle
  87. }
  88. // update-end-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
  89. this.pageList.push(this.$route)
  90. this.linkList.push(this.$route.fullPath)
  91. this.activePage = this.$route.fullPath
  92. if(!this.linkList.includes("/account/stepForm")){
  93. localStorage.removeItem("step")
  94. localStorage.removeItem("campaignId")
  95. localStorage.removeItem("pans")
  96. localStorage.removeItem("pansKey")
  97. localStorage.removeItem("appId")
  98. }
  99. if(!this.linkList.includes("/account/advertisingGroup")&&!this.linkList.includes("/account/stepForm")){
  100. localStorage.removeItem("advertisingGroup")
  101. localStorage.removeItem("advertisingGroupKey")
  102. }
  103. },
  104. watch: {
  105. '$route': function(newRoute) {
  106. //console.log("新的路由",newRoute)
  107. this.activePage = newRoute.fullPath
  108. if (!this.multipage) {
  109. this.linkList = [newRoute.fullPath]
  110. this.pageList = [Object.assign({},newRoute)]
  111. // update-begin-author:taoyan date:20200211 for: TASK #3368 【路由缓存】首页的缓存设置有问题,需要根据后台的路由配置来实现是否缓存
  112. } else if(indexKey==newRoute.fullPath) {
  113. //首页时 判断是否缓存 没有缓存 刷新之
  114. if (newRoute.meta.keepAlive === false) {
  115. this.routeReload()
  116. }
  117. // update-end-author:taoyan date:20200211 for: TASK #3368 【路由缓存】首页的缓存设置有问题,需要根据后台的路由配置来实现是否缓存
  118. }else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
  119. this.linkList.push(newRoute.fullPath)
  120. this.pageList.push(Object.assign({},newRoute))
  121. // update-begin-author:sunjianlei date:20200103 for: 如果新增的页面配置了缓存路由,那么就强制刷新一遍
  122. if (newRoute.meta.keepAlive) {
  123. this.routeReload()
  124. }
  125. // update-end-author:sunjianlei date:20200103 for: 如果新增的页面配置了缓存路由,那么就强制刷新一遍
  126. } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
  127. let oldIndex = this.linkList.indexOf(newRoute.fullPath)
  128. let oldPositionRoute = this.pageList[oldIndex]
  129. this.pageList.splice(oldIndex, 1, Object.assign({}, newRoute, {meta: oldPositionRoute.meta}))
  130. }
  131. if(!this.linkList.includes("/account/stepForm")){
  132. localStorage.removeItem("step")
  133. localStorage.removeItem("campaignId")
  134. localStorage.removeItem("pans")
  135. localStorage.removeItem("pansKey")
  136. localStorage.removeItem("appId")
  137. }
  138. if(!this.linkList.includes("/account/advertisingGroup")&&!this.linkList.includes("/account/stepForm")){
  139. localStorage.removeItem("advertisingGroup")
  140. localStorage.removeItem("advertisingGroupKey")
  141. }
  142. if(!this.linkList.includes("/account/originality")&&!this.linkList.includes("/account/stepForm")){
  143. localStorage.removeItem("originality")
  144. localStorage.removeItem("originalityKey")
  145. }
  146. },
  147. 'activePage': function(key) {
  148. let index = this.linkList.lastIndexOf(key)
  149. let waitRouter = this.pageList[index]
  150. this.$router.push(Object.assign({},waitRouter));
  151. this.changeTitle(waitRouter.meta.title)
  152. },
  153. 'multipage': function(newVal) {
  154. if(this.reloadFlag){
  155. if (!newVal) {
  156. this.linkList = [this.$route.fullPath]
  157. this.pageList = [this.$route]
  158. }
  159. }
  160. },
  161. // update-begin-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
  162. device() {
  163. if (this.multipage && this.linkList.indexOf(indexKey) === -1) {
  164. this.addIndexToFirst()
  165. }
  166. },
  167. // update-end-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
  168. },
  169. methods: {
  170. // update-begin-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
  171. // 将首页添加到第一位
  172. addIndexToFirst() {
  173. this.pageList.splice(0, 0, {
  174. name: 'dashboard-analysis',
  175. path: indexKey,
  176. fullPath: indexKey,
  177. meta: {
  178. icon: 'dashboard',
  179. title: '首页'
  180. }
  181. })
  182. this.linkList.splice(0, 0, indexKey)
  183. },
  184. // update-end-author:sunjianlei date:20191223 for: 修复从单页模式切换回多页模式后首页不居第一位的 BUG
  185. // update-begin-author:sunjianlei date:20200120 for: 动态更改页面标题
  186. changeTitle(title) {
  187. let projectTitle = "Jeecg-Boot 企业级快速开发平台"
  188. // 首页特殊处理
  189. if (this.$route.path === indexKey) {
  190. document.title = projectTitle
  191. } else {
  192. document.title = title + ' · ' + projectTitle
  193. }
  194. },
  195. // update-end-author:sunjianlei date:20200120 for: 动态更改页面标题
  196. changePage(key) {
  197. this.activePage = key
  198. },
  199. tabCallBack() {
  200. this.$nextTick(() => {
  201. triggerWindowResizeEvent()
  202. })
  203. },
  204. editPage(key, action) {
  205. this[action](key)
  206. },
  207. remove(key) {
  208. if (key == indexKey) {
  209. this.$message.warning('首页不能关闭!')
  210. return
  211. }
  212. if (this.pageList.length === 1) {
  213. this.$message.warning('这是最后一页,不能再关闭了啦')
  214. return
  215. }
  216. console.log("this.pageList ",this.pageList );
  217. this.pageList = this.pageList.filter(item => item.fullPath !== key)
  218. let index = this.linkList.indexOf(key)
  219. this.linkList = this.linkList.filter(item => item !== key)
  220. index = index >= this.linkList.length ? this.linkList.length - 1 : index
  221. this.activePage = this.linkList[index]
  222. },
  223. onContextmenu(e) {
  224. const pagekey = this.getPageKey(e.target)
  225. if (pagekey !== null) {
  226. e.preventDefault()
  227. this.menuVisible = true
  228. }
  229. },
  230. getPageKey(target, depth) {
  231. depth = depth || 0
  232. if (depth > 2) {
  233. return null
  234. }
  235. let pageKey = target.getAttribute('pagekey')
  236. pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
  237. return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
  238. },
  239. onMenuSelect(key, target) {
  240. let pageKey = this.getPageKey(target)
  241. switch (key) {
  242. case '1':
  243. this.closeLeft(pageKey)
  244. break
  245. case '2':
  246. this.closeRight(pageKey)
  247. break
  248. case '3':
  249. this.closeOthers(pageKey)
  250. break
  251. case '4':
  252. this.routeReload()
  253. break
  254. default:
  255. break
  256. }
  257. },
  258. /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页,供子页面调用->望菜单能配置外链,直接弹出新页面而不是嵌入iframe #428 */
  259. closeCurrent(){
  260. this.remove(this.activePage);
  261. },
  262. /* update_end author:wuxianquan date:20190828 for: 关闭当前tab页,供子页面调用->望菜单能配置外链,直接弹出新页面而不是嵌入iframe #428 */
  263. closeOthers(pageKey) {
  264. let index = this.linkList.indexOf(pageKey)
  265. if (pageKey == indexKey || pageKey.indexOf('?ticke=')>=0) {
  266. this.linkList = this.linkList.slice(index, index + 1)
  267. this.pageList = this.pageList.slice(index, index + 1)
  268. this.activePage = this.linkList[0]
  269. } else {
  270. let indexContent = this.pageList.slice(0, 1)[0]
  271. this.linkList = this.linkList.slice(index, index + 1)
  272. this.pageList = this.pageList.slice(index, index + 1)
  273. this.linkList.unshift(indexContent.fullPath)
  274. this.pageList.unshift(indexContent)
  275. this.activePage = this.linkList[1]
  276. }
  277. },
  278. closeLeft(pageKey) {
  279. if (pageKey == indexKey) {
  280. return
  281. }
  282. let tempList = [...this.pageList]
  283. let indexContent = tempList.slice(0, 1)[0]
  284. let index = this.linkList.indexOf(pageKey)
  285. this.linkList = this.linkList.slice(index)
  286. this.pageList = this.pageList.slice(index)
  287. this.linkList.unshift(indexContent.fullPath)
  288. this.pageList.unshift(indexContent)
  289. if (this.linkList.indexOf(this.activePage) < 0) {
  290. this.activePage = this.linkList[0]
  291. }
  292. },
  293. closeRight(pageKey) {
  294. let index = this.linkList.indexOf(pageKey)
  295. this.linkList = this.linkList.slice(0, index + 1)
  296. this.pageList = this.pageList.slice(0, index + 1)
  297. if (this.linkList.indexOf(this.activePage < 0)) {
  298. this.activePage = this.linkList[this.linkList.length - 1]
  299. }
  300. },
  301. //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
  302. dynamicRouterShow(key,title){
  303. let keyIndex = this.linkList.indexOf(key)
  304. if(keyIndex>=0){
  305. let currRouter = this.pageList[keyIndex]
  306. let meta = Object.assign({},currRouter.meta,{title:title})
  307. this.pageList.splice(keyIndex, 1, Object.assign({},currRouter,{meta:meta}))
  308. if (key === this.activePage) {
  309. this.changeTitle(title)
  310. }
  311. }
  312. },
  313. //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
  314. //update-begin-author:taoyan date:20191008 for:路由刷新
  315. routeReload(){
  316. this.reloadFlag = false
  317. let ToggleMultipage = "ToggleMultipage"
  318. this.$store.dispatch(ToggleMultipage,false)
  319. this.$nextTick(()=>{
  320. this.$store.dispatch(ToggleMultipage,true)
  321. this.reloadFlag = true
  322. })
  323. }
  324. //update-end-author:taoyan date:20191008 for:路由刷新
  325. }
  326. }
  327. </script>
  328. <style lang="less">
  329. /*
  330. * The following styles are auto-applied to elements with
  331. * transition="page-transition" when their visibility is toggled
  332. * by Vue.js.
  333. *
  334. * You can easily play with the page transition by editing
  335. * these styles.
  336. */
  337. .page-transition-enter {
  338. opacity: 0;
  339. }
  340. .page-transition-leave-active {
  341. opacity: 0;
  342. }
  343. .page-transition-enter .page-transition-container,
  344. .page-transition-leave-active .page-transition-container {
  345. -webkit-transform: scale(1.1);
  346. transform: scale(1.1);
  347. }
  348. /*美化弹出Tab样式*/
  349. .ant-tabs-nav-container {
  350. margin-top: 4px;
  351. }
  352. /* 修改 ant-tabs 样式 */
  353. .tab-layout-tabs.ant-tabs {
  354. border-bottom: 1px solid #ccc;
  355. border-left: 1px solid #ccc;
  356. background-color: white;
  357. padding: 0 20px;
  358. .ant-tabs-bar {
  359. margin: 4px 0 0;
  360. border: none;
  361. }
  362. }
  363. .ant-tabs {
  364. &.ant-tabs-card .ant-tabs-tab {
  365. padding: 0 24px !important;
  366. background-color: white !important;
  367. margin-right: 10px !important;
  368. .ant-tabs-close-x {
  369. width: 12px !important;
  370. height: 12px !important;
  371. opacity: 0 !important;
  372. cursor: pointer !important;
  373. font-size: 12px !important;
  374. margin: 0 !important;
  375. position: absolute;
  376. top: 36%;
  377. right: 6px;
  378. }
  379. &:hover .ant-tabs-close-x {
  380. opacity: 1 !important;
  381. }
  382. }
  383. }
  384. .ant-tabs.ant-tabs-card > .ant-tabs-bar {
  385. .ant-tabs-tab {
  386. border: none !important;
  387. border-bottom: 1px solid transparent !important;
  388. }
  389. .ant-tabs-tab-active {
  390. border-color: @primary-color!important;
  391. }
  392. }
  393. </style>