HY.butcher.client/src/views/Home/Home.vue

<template>
    <div class="home">
        <header class="header">
            <div class="left">
                <!-- {{ mainTitle }} -->
                湖羊屠宰管理
                <el-button
                    @click="onMenuCollapse"
                    circle
                    style="font-size: 20px"
                    :icon="menuCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                ></el-button>
            </div>
            <div class="right">
                <span class="warp">
                    <el-dropdown @command="onLogOut">
                        <span class="el-dropdown-link">
                            账号管理
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>退出登录</el-dropdown-item>
                            <el-dropdown-item>切换账号</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
<!--                <span>-->
<!--                    <el-dropdown @command="onLogOut">-->
<!--                        <span class="el-dropdown-link">-->
<!--                            权限切换-->
<!--                            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                        </span>-->
<!--                        <el-dropdown-menu slot="dropdown">-->
<!--                            <el-dropdown-item disabled>权限一</el-dropdown-item>-->
<!--                            <el-dropdown-item divided>权限二</el-dropdown-item>-->
<!--                        </el-dropdown-menu>-->
<!--                    </el-dropdown>-->
<!--                </span>-->
            </div>
        </header>
        <section class="section">
            <div class="tac">
                <div class="col1">
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        :collapse="menuCollapse"
                        :unique-opened="true"
                        :default-openeds="defaultUnfoldedMenu"
                        select="1-1"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                    >
                        <div v-for="(item, index1) in menu " :key="index1">
                            <el-submenu
                                v-if="item.children && item.children.length > 0"
                                :index="`${index1}`"
                            >
                                <template slot="title">
<!--                                    <i :class="item.iconClassName"></i>-->
                                    <span slot="title">{{ !menuCollapse? item.menuName : '' }}</span>
                                </template>
                                <el-menu-item
                                    v-for="(item1, index2) in item.children"
                                    :key="`${index1}-${index2}`"
                                    :index="`${index1}-${index2}`"
                                    :routerName="item1.url"
                                    @click="onClickMenu(item1)"
                                >{{ item1.menuName }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="`${index1}`"
                                :disabled="item.disabled"
                                :routerName="item.url"
                                @click="onClickMenu(item)"
                            >
<!--                                <i :class="item.iconClassName"></i>-->
                                <span slot="title">{{ !menuCollapse? item.menuName : '' }}</span>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </div>

                <div class="col2">
                    <div class="warp">
                        <router-view />
                    </div>
                </div>

            </div>
        </section>
    </div>
</template>

<script>
// import { menuData } from "./mencCofig.js";
import { mapState } from 'vuex';

export default {
    data() {
        return {
            // 菜单配置
            menuData: [],
            menuCollapse: false, //是否水平折叠收起菜单
            defaultUnfoldedMenu: '', // 默认展开第一项
            mainTitle: ''
        };
    },
    activated() {},
    deactivated(){},
    created() {
        // 获取屠宰批次 给后面下拉选择器使用
        this.$store.dispatch("getSlaughterBatchIdList");

        this.defaultUnfoldedMenu = [
            localStorage.getItem("defaultUnfoldedMenu")
        ];
        this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
        /* 筛选菜单 */
        var target = this.$route.query.target;
        if (target) {
            localStorage.setItem("target", target);
        } else {
            target = localStorage.getItem("target");
        }
    },
    computed: {
        ...mapState(['typeCode',]),
        menu() {
            return this.menuData;
        }
    },
    methods: {
        // 收取菜单按钮
        onMenuCollapse() {
            this.menuCollapse = !this.menuCollapse;
            localStorage.setItem("menuCollapse", this.menuCollapse);
            this.defaultUnfoldedMenu = [
                localStorage.getItem("defaultUnfoldedMenu")
            ];
        },
        // 菜单展开
        handleOpen(key, keyPath) {
            console.log(key)
            localStorage.setItem("defaultUnfoldedMenu", "" + key);
        },
        // 菜单收取
        handleClose(key, keyPath) {},
        // 点击菜单项
        onClickMenu(item) {
            // 如果要跳转的路由和当前路由一致就 return
            if (this.$router.history.current.name == item.menuName) return;
            this.$router.push({
                name: item.url
            });
        },
        onLogOut() {
            this.$router.replace("login");
        },
        init() {
            let accountName = localStorage.getItem('accountName');
            let that = this;
            this.$axios.post(`http://121.37.169.186:8081/auth/getMyMenu?accountName=${accountName}`)
                    .then(res => {
                        if(res.data.code === 10000) {
                            res.data.data.forEach(item => {
                                if(item.menuName === that.typeCode) {
                                    that.menuData  = item.children;
                                }
                            });
                        }
                    });
        }
    },
    mounted() {
        this.init();
    }
};
</script>

<style lang="scss" scoped>
.home {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    > .header {
        background-color: #4b545e;
        height: 40px;
        padding: 10px 20px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            font-size: 25px;
            color: #fff;
            /deep/ .is-circle {
                margin-left: 40px;
            }
        }
        .right {
            .warp {
                margin-right: 20px;
            }
        }
    }
    .section {
        flex: 1;
        box-sizing: border-box;
        overflow: auto;
        .tac {
            flex: 1;
            display: flex;
            height: 96%;
            box-sizing: border-box;
            .col1 {
                margin-right: 5px;
                background-color: #545c64;
                // background-image: linear-gradient(to bottom, rgb(85, 70, 148) , rgb(41, 33, 85), rgb(41, 33, 85));
            }
            .col2 {
                flex: 1;
                background-color: #fff;
                padding: 0 15px 15px 15px;
                border-radius: 5px;
                margin-right: 5px;
                height: 100%;
                overflow: auto;

                .warp {
                    margin: 15px;
                }
            }
        }
    }
    // border: 1px solid #f00;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
// 下拉菜单
.el-dropdown-link {
    cursor: pointer;
    color: #fff;
}
.el-icon-arrow-down {
    font-size: 12px;
}
</style>