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
- To optimize the
iview/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
- add
iview/src/libs/kit.js
Used 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
- add
iview/src/views/main-components/web.vue
Open 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