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

<template>
    <div class="home">
        <header class="header">
            <div class="left">
                产品管理系统
                <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--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) in menuData " :key="item.index">
                            <el-submenu
                                v-if="item.childList && item.childList.length > 0"
                                :index="item.index"
                            >
                                <template slot="title">
                                    <i :class="item.iconClassName"></i>
                                    <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
                                    <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
                                </template>
                                <el-menu-item
                                    v-for="(item1) in item.childList"
                                    :key="item1.index"
                                    :index="item1.index"
                                    :routerName="item1.routerName"
                                    @click="onClickMenu(item1)"
                                >{{ item1.optionName }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="item.index"
                                :disabled="item.disabled"
                                :routerName="item.routerName"
                                @click="onClickMenu(item)"
                            >
                                <i :class="item.iconClassName"></i>
                                <span slot="title">{{ !menuCollapse? item.optionName : '' }}</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";

export default {
    data() {
        return {
            // 菜单配置
            menuData,
            menuCollapse: false, //是否水平折叠收起菜单
            defaultUnfoldedMenu: [menuData[0].index] // 默认展开第一项
        };
    },
    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");
        }
        this.filterMenu(target);
    },
    watch: {
        "$route.query.target"(v) {
            if (v) {
                localStorage.setItem("target", v);
                this.filterMenu(v);
            }
        }
    },
    methods: {
        /* 
        http://hzsheep.ifarmcloud.com/butcher/#/home?target=定点屠宰智能管控
        http://hzsheep.ifarmcloud.com/butcher/#/home?target=产品制作智能监控
        http://hzsheep.ifarmcloud.com/butcher/#/home?target=鲜肉储运智能管控
        http://hzsheep.ifarmcloud.com/yield
        */
        /* 筛选菜单 */
        /*  
            http://localhost:8080/#/home?target=定点屠宰智能管控
            http://localhost:8080/#/home?target=产品制作智能监控
            http://localhost:8080/#/home?target=鲜肉储运智能管控
        */
        filterMenu(target) {
            console.log(target);
            let path;
            switch (target) {
                case "定点屠宰智能管控":
                    var func = item => item.index == 1 || item.index == 2;
                    path = "firmBuy";
                    break;
                case "产品制作智能监控":
                    var func = item => item.index == 3;
                    path = "productInfo";
                    break;
                case "鲜肉储运智能管控":
                    var func = item => item.index == 4;
                    path = "dispatching";
                    break;
            }
            this.menuData = menuData.filter(func);
            if (path && path != this.$route.name) {
                this.$router.push({ name: path });
            }
        },
        // 收取菜单按钮
        onMenuCollapse() {
            this.menuCollapse = !this.menuCollapse;
            localStorage.setItem("menuCollapse", this.menuCollapse);
            this.defaultUnfoldedMenu = [
                localStorage.getItem("defaultUnfoldedMenu")
            ];
        },
        // 菜单展开
        handleOpen(key, keyPath) {
            localStorage.setItem("defaultUnfoldedMenu", "" + key);
        },
        // 菜单收取
        handleClose(key, keyPath) {},
        // 点击菜单项
        onClickMenu(item) {
            // 如果要跳转的路由和当前路由一致就 return
            if (this.$router.history.current.name == item.routerName) return;
            this.$router.push({
                name: item.routerName
            });
        },
        onLogOut() {
            this.$router.replace("login");
        }
    }
};
</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>