vue+iview-admin 利用介面卡模式改造eova(伊娃管理後臺)選單及路由

Kid_Lueng發表於2018-08-14
VueView模式路由

vue+iview-admin 利用介面卡模式改造eova(伊娃管理後臺)選單及路由(1)

簡單效果展示

改造完後效果

vue+iview-admin 利用介面卡模式改造eova(伊娃管理後臺)選單及路由

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>

複製程式碼

改造完成

原始碼請參考 gitee.com/lhbxxx/eova

相關文章