Home.vue 4.45 KB
<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: 10px;">
                    <a-tabs type="card" :tabBarGutter="10" v-if="systemType" v-model="$store.state.activeKeyInfo"
                            @change="onChange">
                        <a-tab-pane v-for="(item, index) in menuList" :key="item.frontActionUrl">
                        <span slot="tab">
                                 <span>{{ item.name }}<span>(0)</span></span>
                            </span>
                        </a-tab-pane>
                        <a-tab-pane :key="111">
                              <span slot="tab">
                                     <span>{{ unitInfo.unitName }}</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";

export default {
    data() {
        return {
            // 菜单
            menuList: [],
            // 选中的菜单
            activeItem: [],
            // tabs标签
            tabs: [],
            // 选中的tabs标签
            activeKey: '',
            showChildren: false,
            menuTest,
            unitInfo: {},
            systemType: sessionStorage.getItem("systemType")
        }
    },
    created() {
        //获取妇幼权限和登录基本信息
        let cookieToken = "29cc399b-af98-4fbd-8984-ecbd97f125b7";
        if (process.env.NODE_ENV != "dev") {
            cookieToken = getCookie('bGNnd3lwdF9hdA');
        }
        if (cookieToken) {
            window.sessionStorage.setItem('token', 'bearer' + ' ' + cookieToken);
            let query = this.$route.query;
            let par = {menuId: query.menuId};
            this.$api.fyManage.fetchFYLoginUser(par).then(({data}) => {
                this.unitInfo = data.unitInfo;
                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 {
            window.top.postMessage({messageType: "LOGOUT"}, '*')//给最顶层窗口发送token失效通知
        }
    },
    methods: {
        setInitMenuInfo() {//设置默认菜单和菜单缓存
            this.menuList = this.menuTest;
        },
        // 点击tabs标签
        onChange(activeKey) {
            this.activeKey = activeKey;
            window.sessionStorage.setItem('activeKey', this.activeKey);
            this.$store.commit('changeActKey', this.activeKey)
            console.log(this.$store.state.tabsInfo);
            this.menuList.forEach((item, i) => {
                console.log(item.frontActionUrl, item)
                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>