vue+iview-admin 利用适配器模式改造eova(伊娃管理后台)菜单及路由

本文转载于:猿2048网站➨

vue+iview-admin 利用适配器模式改造eova(伊娃管理后台)菜单及路由(1)

简单效果展示

改造完后效果

eova 及 iview的部署

略(日后再补充)

菜单功能核心改造

1. 优化 iview/src/router/router.js

import Main from '@/views/Main.vue';
...
import jquery from 'jquery';//引入jquery用于同步请求菜单栏
import Kit from '../libs/kit.js';//引入自定义适配器类
...

// 通过请求/menu接口获取eova菜单结构
let raw = jquery.ajax({
    url: '/menu',
    type: 'GET', //GET
    async: false, //或false,是否异步
    dataType: 'json',
}).responseJSON;

// 通过适配器将eova菜单变为适合vue-router的结构
const menu = Kit.adaptMenu(raw, Main);
// 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里
export const appRouter = [...menu];

// 所有上面定义的路由都要写在下面的routers里
export const routers = [
    loginRouter,
    otherRouter,
    preview,
    locking,
    ...appRouter,//引入路由
    page500,
    page403,
    page404
];

1. 添加iview/src/libs/kit.js 用于适配菜单

let Kit = {};
...
import webComponent from '@/views/main-components/web.vue';//引入用于读取页面iframe的组件

Kit.adaptMenu = (raw, Main) => {

    let menu = [];
    const rawMenu = raw;
    raw.forEach((item, index) => {
        //主菜单
        if (item.parent_id == 0 && item.type == 'dir') {//判断是否根目录及父目录
            let m = {};
            m.id = item.id;
            m.path = "/" + item.code;
            m.meta = {
                type: 'dir'
            }
            m.name = item.code;
            m.title = item.name;
            m.component = Main;//使用父菜单组件
            m.icon = 'folder';

            function addChildren(parent) {//通过递归调用添加子菜单在每个菜单的children属性内
                parent.children = [];
                // 直接打开链接
                let children = rawMenu.filter(child => child.parent_id == parent.id && (child.link || child.type == 'dir'));
                if (children.length > 0) {
                    children.forEach((child, index) => {
                        let c = {};
                        c.id = child.id;
                        c.path = "/" + child.code;
                        c.name = child.code;
                        c.title = child.name;
                        c.meta = {//利用meta将链接信息传给路由
                            type: child.type,
                            link: "" + child.link
                        };
                        c.component = webComponent;
                        parent.children.push(c);
                        addChildren(c);
                    })
                }
            }
            addChildren(m);

            menu.push(m);
        } else if (item.parent_id == 0 && item.type == 'diy') {//如果是自定义菜单,直接跳转
            let m = {};
            m.id = item.id;
            m.path = "/" + item.code;
            m.meta = {
                type: item.type,
                link: item.link
            }
            m.name = item.code;
            m.title = item.name;
            m.component = Main;
            m.icon = 'folder';
            m.children = [];
            menu.push(m);
        }
    })
    return menu;
}

export default Kit;

1. 添加 iview/src/views/main-components/web.vue用于打开iframe页面

<template>
    <!-- 配置界面 -->
    <Card>
        <div ref="div" style="height:600px">
            <iframe :src="src" allowtransparency="true" style="border:0;width:100%;height:99.3%;" frameborder="0" @load="onload"></iframe>
        </div>
    </Card>
</template>
<script>
export default {
    props: ["url", "height", "modal"],
    created() {},
    mounted() {
        if (this.height) {//自定义适配高度
            this.$refs.div.style.height = this.height + 'px';
        } else if (this.modal) {
            this.$refs.div.style.height = (this.$parent.$el.offsetHeight - 500) + "px";
        } else {
            this.$refs.div.style.height = (this.$parent.$el.offsetHeight - 160) + "px";
        }
    },
    methods:{
        onload(){
            this.$refs.div.style.opacity = 1;//读取成功后显示内容
        }
    },
    computed: {
        src: function() {
            if (this.modal) {
                return this.modal.url;
            }
            if (this.$route) {
                return this.$route.meta.link;//自动读取路由的meta.link属性
            } else if (this.url) {
                return this.url;
            }
        }
    },
    watch:{
        "src":function(value){
            this.$refs.div.style.opacity = 0;//路由切换时隐藏内容
        }
    }
};
</script>

改造完成

源码请参考 https://gitee.com/lhbxxx/eova