<template> <a-layout class="home_layout index_body" style="width: 100%"> <a-layout> <a-layout-content class="layout_container" style="background: #fff"> <div style="padding: 24px;"> <!-- <a-tabs type="card" :tabBarGutter="10" v-model="$store.state.activeKeyInfo" @change="onChange"> <a-tab-pane v-for="(item, index) in $store.state.tabsInfo" :key="item.frontActionUrl" > <span slot="tab"> <span v-if="item.frontActionUrl != '/Home/distributionWarehousing' && item.frontActionUrl != '/Home/folviteApply'" >{{item.name}}</span> <span v-else> <span v-if="item.frontActionUrl == '/Home/distributionWarehousing'">{{item.name}}<span>(0)</span></span> <span v-if="item.frontActionUrl == '/Home/folviteApply'">{{item.name}}<span>(0)</span></span> </span> <!–<span>{{item.name}}</span>–> </span> </a-tab-pane> </a-tabs>--> <router-view></router-view> </div> </a-layout-content> <div style="clear: both"></div> </a-layout> </a-layout> </template> <script> import {getCookie} from "./utils/common"; import {menuTest} from "./utils/testDate"; const unitTabs = [ { name: '在库管理', key: '/Home/inStock', path: '/Home/inStock', parent: null, } ] export default { data() { return { // 菜单 menuList:[], // 选中的菜单 activeItem: [], // tabs标签 tabs: [], // 选中的tabs标签 activeKey: '', showChildren: false, menuTest, } }, created() { //获取妇幼权限和登录基本信息 // document.cookie = 'bGNnd3lwdF9hdA=c64fae79-c4a9-485d-8828-38779bb3b5d2;'//昆明市 // document.cookie = 'bGNnd3lwdF9hdA=' + sessionStorage.getItem("loginToken") + ';'//云南省 let cookieToken = getCookie('bGNnd3lwdF9hdA'); console.log('tokenInfo',cookieToken) if (cookieToken) {//根据cookie获取token并调用接口获取菜单并设置初始选中菜单 window.sessionStorage.setItem('token', 'bearer' + ' ' + cookieToken); let par = {} this.$api.fyManage.fetchFYLoginUser(par).then(({data}) => { // window.sessionStorage.setItem('menuList', JSON.stringify(data.menuList)); window.sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo)); window.sessionStorage.setItem('allEnum', JSON.stringify(data.enumValueList)); window.sessionStorage.setItem('unitInfo', JSON.stringify(data.unitInfo)); this.setInitMenuInfo() this.showChildren = true }) } else { console.log('没有token') window.top.postMessage({messageType:"LOGOUT"}, '*')//给最顶层窗口发送token失效通知 return } }, methods: { setInitMenuInfo() {//设置默认菜单和菜单缓存 // this.menuList = JSON.parse(window.sessionStorage.getItem('menuList')); this.menuList = this.menuTest /* if (!window.sessionStorage.getItem("tabs")) { window.sessionStorage.setItem('tabs', JSON.stringify(this.menuTest)); this.$store.commit('changeTabs', this.menuTest) this.tabs = this.$store.state.tabsInfo }*/ /* if (!window.sessionStorage.getItem('activeItem')) { window.sessionStorage.setItem('activeItem', '/Home/inStock') }*/ /* if (!window.sessionStorage.getItem('activeKey')) { let nowUrl = window.location.href this.$router.push({path:nowUrl, query:{}}) this.$store.commit('changeActKey', '/Home/inStock') }*/ /* const tabs = JSON.parse(window.sessionStorage.getItem('tabs')); if (tabs) { this.tabs = tabs; this.$store.commit('changeTabs', tabs) } const activeKey = window.sessionStorage.getItem('activeItem'); if (activeKey) { this.activeKey = activeKey; this.$store.commit('changeActKey', activeKey) }*/ }, // 点击tabs标签 // onChange(activeKey) { // this.activeKey = activeKey; // window.sessionStorage.setItem('activeKey', this.activeKey); // this.$store.commit('changeActKey', this.activeKey) // this.$store.state.tabsInfo.forEach((item, i) => { // if (item.frontActionUrl === activeKey) { // this.activeItem = [item.frontActionUrl]; // window.sessionStorage.setItem('activeItem', this.activeItem); // this.$router.push(item.frontActionUrl); // } // }); // }, }, } </script> <style lang="less"> .index_body { .ant-tabs-bar { border-bottom: 1px solid rgba(255,77,128,.2)!important; } .ant-tabs-nav-scroll { margin-left: 0px!important; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container { height: 35px!important; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab { height: 35px!important; color: #F8F8FF!important; line-height: 35px!important; background: rgba(255,77,128, .5); border-bottom: 0px solid #FF4D80; border-top-left-radius: 10px; border-top-right-radius: 10px; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active { height: 35px!important; color: #fff; background: #FF4D80; border-color: #FF4D80; border-bottom: 0px solid #FF4D80; border-top-left-radius: 10px; border-top-right-radius: 10px; } } </style>