Vue + iView-admin modify eOVA menu and routing with adapter mode (1)

Simple effect display

Effect after transformation

Deployment of EOVA and iView

Omitted (to be added later)

Menu function core transformation

  1. To optimize theiview/src/router/router.js
import Main from '@/views/Main.vue'; . import jquery from'jquery'; // Jquery is introduced to synchronize the request menu bar import Kit from'.. /libs/kit.js'; // Introduce a custom adapter class... // Get the EOVA menu structure through the request /menu interfacelet raw = jquery.ajax({
    url: '/menu'.type: 'GET', //GET
    async: false/ / orfalse, whether asynchronous dataType:'json', }).responseJSON; Const menu = kit.adaptMenu (raw, Main); // The route displayed as a subpage of the Main component and displayed in the left menu is written in the appRouterexportconst appRouter = [...menu]; // All routes defined above should be written to the following routersexportConst routers = [loginRouter, otherRouter, preview, locking,...appRouter,// Page500, page403, page404]Copy the code
  1. addiview/src/libs/kit.jsUsed to fit menus
letKit = {}; . import webComponent from'@/views/main-components/web.vue'; AdaptMenu = (raw, Main) => {letmenu = []; const rawMenu = raw; Raw. ForEach ((item, index) => {// Main menuif (item.parent_id == 0 && item.type == 'dir') {// Check whether the root directory and the parent directorylet m = {};
            m.id = item.id;
            m.path = "/" + item.code;
            m.meta = {
                type: 'dir'} m.name = item.code; m.title = item.name; m.component = Main; // Use the parent menu component m.con ='folder';

            functionAddChildren (parent) {// Add submenus within the children property of each menu through recursive calls. // Open the link directlylet 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. eta = {// Use meta to pass link information to the routetype: 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') {// If it is a custom menu, jump to it directlylet 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;

Copy the code
  1. addiview/src/views/main-components/web.vueOpen the IFrame page
<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) {// Customize the adaptation 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; // Automatically read route meta. Link attribute}else if (this.url) {
                return this.url;
            }
        }
    },
    watch:{
        "src":function(value){
            this.$refs.div.style.opacity = 0; }}}; </script>Copy the code

The renovated

Please refer to gitee.com/lhbxxx/eova for the source code