进入子页面重新加载数据
This commit is contained in:
dragon
@@ -1,177 +1,260 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- Left side column. contains the logo and sidebar -->
|
<!-- Left side column. contains the logo and sidebar -->
|
||||||
<aside class="main-sidebar" style="height: 100%; overflow: hidden; overflow: scroll;">
|
<aside
|
||||||
<!-- sidebar: style can be found in sidebar.less -->
|
class="main-sidebar"
|
||||||
<section class="sidebar">
|
style="height: 100%; overflow: hidden; overflow: scroll"
|
||||||
<!-- Sidebar user panel (optional) -->
|
>
|
||||||
<div class="user-panel">
|
<!-- sidebar: style can be found in sidebar.less -->
|
||||||
<div class="pull-left image">
|
<section class="sidebar">
|
||||||
<img :src="avatar" class="img-circle" :alt="username">
|
<!-- Sidebar user panel (optional) -->
|
||||||
</div>
|
<div class="user-panel">
|
||||||
<div class="pull-left info">
|
<div class="pull-left image">
|
||||||
<p>{{ username }}</p>
|
<img :src="avatar" class="img-circle" :alt="username" />
|
||||||
<!-- Status -->
|
|
||||||
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- search form (Optional) -->
|
|
||||||
<form method="get" class="sidebar-form" onsubmit="return false;">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" name="q" class="form-control" placeholder="Search..." @input="search">
|
|
||||||
<span class="input-group-btn">
|
|
||||||
<button name="search" id="search-btn" class="btn btn-flat" @click="search">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<!-- /.search form -->
|
|
||||||
<!-- Sidebar Menu -->
|
|
||||||
<ul class="sidebar-menu">
|
|
||||||
<li class="header">主导航</li>
|
|
||||||
<!-- Optionally, you can add icons to the links -->
|
|
||||||
<li v-for="(parent, parentIndex) in parentMenus" :key="parent" :data-index="parentIndex" class="treeview">
|
|
||||||
<a>
|
|
||||||
<i :class="[parent.icon ? parent.icon : 'fa fa-link']"></i>
|
|
||||||
<span>{{ parent.name }}</span>
|
|
||||||
<span class="label pull-right bg-yellow" :id="['ic' + parent.id]">
|
|
||||||
{{ getChildLength(parent.id) }}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<ul class="treeview-menu" :id="['menu' + parent.id]">
|
|
||||||
<li v-for="(child, childIndex) in getChilds(parent.id)" :key="child" :data-index="childIndex">
|
|
||||||
<a :data-url="child.path" @click="handleClick(child)">
|
|
||||||
<i
|
|
||||||
:class="[child.icon && child.icon != '' ? child.icon : 'fa fa-circle-o text-yellow']"></i>
|
|
||||||
<span>{{ child.name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<!-- /.sidebar-menu -->
|
|
||||||
</section>
|
|
||||||
<!-- /.sidebar -->
|
|
||||||
</aside>
|
|
||||||
<!-- Content Wrapper. Contains page content -->
|
|
||||||
<div class="content-wrapper" style="height: 100%;">
|
|
||||||
<!-- Content Header (Page header) -->
|
|
||||||
<section class="content-header"
|
|
||||||
:style="[childMenu.name && childMenu.name != '' ? 'display:block;' : 'display:none;']">
|
|
||||||
<h1>
|
|
||||||
{{ childMenu.name }}
|
|
||||||
<small>{{ childMenu.description }}</small>
|
|
||||||
</h1>
|
|
||||||
<ol class="breadcrumb">
|
|
||||||
<li><a href="#"><i class="fa fa-dashboard"></i> {{ childMenu.parentName }}</a></li>
|
|
||||||
<li class="active">{{ childMenu.name }}</li>
|
|
||||||
</ol>
|
|
||||||
</section>
|
|
||||||
<!-- Main content -->
|
|
||||||
<section class="content">
|
|
||||||
<!-- <section class="content" style="height: 100%; overflow: hidden; overflow: scroll;"> -->
|
|
||||||
<!-- Your Page Content Here -->
|
|
||||||
<component :is="componentName"></component>
|
|
||||||
</section>
|
|
||||||
<!-- /.content -->
|
|
||||||
</div>
|
|
||||||
<!-- /.content-wrapper -->
|
|
||||||
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
|
||||||
<div class="modal-dialog" role="document">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h4 class="modal-title">提示信息</h4>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body" id="tipMsg"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="pull-left info">
|
||||||
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
|
<p>{{ username }}</p>
|
||||||
data-backdrop="static">
|
<!-- Status -->
|
||||||
<div class="modal-dialog" role="document">
|
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h4 class="modal-title">确认信息</h4>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body" id="confirmMsg"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- search form (Optional) -->
|
||||||
|
<form method="get" class="sidebar-form" onsubmit="return false;">
|
||||||
|
<div class="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="q"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Search..."
|
||||||
|
@input="search"
|
||||||
|
/>
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button
|
||||||
|
name="search"
|
||||||
|
id="search-btn"
|
||||||
|
class="btn btn-flat"
|
||||||
|
@click="search"
|
||||||
|
>
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- /.search form -->
|
||||||
|
<!-- Sidebar Menu -->
|
||||||
|
<ul class="sidebar-menu">
|
||||||
|
<li class="header">主导航</li>
|
||||||
|
<!-- Optionally, you can add icons to the links -->
|
||||||
|
<li
|
||||||
|
v-for="(parent, parentIndex) in parentMenus"
|
||||||
|
:key="parent"
|
||||||
|
:data-index="parentIndex"
|
||||||
|
class="treeview"
|
||||||
|
>
|
||||||
|
<a>
|
||||||
|
<i :class="[parent.icon ? parent.icon : 'fa fa-link']"></i>
|
||||||
|
<span>{{ parent.name }}</span>
|
||||||
|
<span class="label pull-right bg-yellow" :id="['ic' + parent.id]">
|
||||||
|
{{ getChildLength(parent.id) }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<ul class="treeview-menu" :id="['menu' + parent.id]">
|
||||||
|
<li
|
||||||
|
v-for="(child, childIndex) in getChilds(parent.id)"
|
||||||
|
:key="child"
|
||||||
|
:data-index="childIndex"
|
||||||
|
>
|
||||||
|
<a :data-url="child.path" @click="handleClick(child)">
|
||||||
|
<i
|
||||||
|
:class="[
|
||||||
|
child.icon && child.icon != ''
|
||||||
|
? child.icon
|
||||||
|
: 'fa fa-circle-o text-yellow',
|
||||||
|
]"
|
||||||
|
></i>
|
||||||
|
<span>{{ child.name }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- /.sidebar-menu -->
|
||||||
|
</section>
|
||||||
|
<!-- /.sidebar -->
|
||||||
|
</aside>
|
||||||
|
<!-- Content Wrapper. Contains page content -->
|
||||||
|
<div class="content-wrapper" style="height: 100%">
|
||||||
|
<!-- Content Header (Page header) -->
|
||||||
|
<section
|
||||||
|
class="content-header"
|
||||||
|
:style="[
|
||||||
|
childMenu.name && childMenu.name != ''
|
||||||
|
? 'display:block;'
|
||||||
|
: 'display:none;',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<h1>
|
||||||
|
{{ childMenu.name }}
|
||||||
|
<small>{{ childMenu.description }}</small>
|
||||||
|
</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li>
|
||||||
|
<a href="#"
|
||||||
|
><i class="fa fa-dashboard"></i> {{ childMenu.parentName }}</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="active">{{ childMenu.name }}</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<!-- Main content -->
|
||||||
|
<section class="content">
|
||||||
|
<!-- <section class="content" style="height: 100%; overflow: hidden; overflow: scroll;"> -->
|
||||||
|
<!-- Your Page Content Here -->
|
||||||
|
<component :is="componentName"></component>
|
||||||
|
</section>
|
||||||
|
<!-- /.content -->
|
||||||
|
</div>
|
||||||
|
<!-- /.content-wrapper -->
|
||||||
|
<div
|
||||||
|
class="modal fade"
|
||||||
|
id="tipModal"
|
||||||
|
tabindex="-1"
|
||||||
|
role="dialog"
|
||||||
|
aria-labelledby="modalLabel"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title">提示信息</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="tipMsg"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal fade loading" style="background: #00000040;" tabindex="-1" role="dialog"
|
</div>
|
||||||
aria-labelledby="loadingModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
<div
|
||||||
<div class="loadingGif" style="position: fixed; left:50%; top:50%;"><img src="https://img.zcool.cn/community/0111345d94b0b8a801211d53cbd04d.gif" style="width: 10%;"></div>
|
class="modal fade"
|
||||||
|
id="confirmModal"
|
||||||
|
tabindex="-1"
|
||||||
|
role="dialog"
|
||||||
|
aria-labelledby="modalLabel"
|
||||||
|
data-backdrop="static"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title">确认信息</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="confirmMsg"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="modal fade loading"
|
||||||
|
style="background: #00000040"
|
||||||
|
tabindex="-1"
|
||||||
|
role="dialog"
|
||||||
|
aria-labelledby="loadingModalLabel"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-backdrop="static"
|
||||||
|
data-keyboard="false"
|
||||||
|
>
|
||||||
|
<div class="loadingGif" style="position: fixed; left: 50%; top: 50%">
|
||||||
|
<img
|
||||||
|
src="https://img.zcool.cn/community/0111345d94b0b8a801211d53cbd04d.gif"
|
||||||
|
style="width: 10%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import store from '@/store';
|
import store from "@/store";
|
||||||
import { getStore } from '@/utils/store';
|
import Vue from "vue";
|
||||||
|
import { getStore } from "@/utils/store";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MaintainerView',
|
name: "MaintainerView",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
componentName: "",
|
componentName: "",
|
||||||
username: "",
|
username: "",
|
||||||
avatar: "",
|
avatar: "",
|
||||||
parentMenus: [],
|
parentMenus: [],
|
||||||
childMenus: [],
|
childMenus: [],
|
||||||
childMenu: {
|
childMenu: {
|
||||||
name: "",
|
name: "",
|
||||||
parentName: "",
|
parentName: "",
|
||||||
description: "",
|
description: "",
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getMenu();
|
||||||
|
this.username = store.getters.username;
|
||||||
|
this.avatar = store.getters.avatar;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getMenu() {
|
||||||
|
this.parentMenus = getStore({ name: "parent_menus" });
|
||||||
|
this.childMenus = getStore({ name: "child_menus" });
|
||||||
|
store.dispatch("getMenu").then((res) => {
|
||||||
|
this.parentMenus = res.parents;
|
||||||
|
this.childMenus = res.childs;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
created() {
|
getChilds(parentId) {
|
||||||
this.getMenu();
|
return this.childMenus.filter((v) => v.parentid == parentId);
|
||||||
this.username = store.getters.username;
|
|
||||||
this.avatar = store.getters.avatar;
|
|
||||||
},
|
},
|
||||||
methods: {
|
getChildLength(parentId) {
|
||||||
getMenu() {
|
return this.childMenus.filter((v) => v.parentid == parentId).length;
|
||||||
this.parentMenus = getStore({ name: 'parent_menus' });
|
},
|
||||||
this.childMenus = getStore({ name: 'child_menus' });
|
handleClick(menu) {
|
||||||
store.dispatch('getMenu').then(res => {
|
this.childMenu.name = menu.name;
|
||||||
this.parentMenus = res.parents;
|
this.childMenu.parentName = menu.parentstr;
|
||||||
this.childMenus = res.childs;
|
this.childMenu.description = menu.description;
|
||||||
});
|
store.dispatch("getViewComponent", menu.path).then((componentName) => {
|
||||||
},
|
console.log(componentName);
|
||||||
getChilds(parentId) {
|
this.componentName = componentName;
|
||||||
return this.childMenus.filter(v => v.parentid == parentId);
|
const files = require.context("@/views", true, /\.vue$/);
|
||||||
},
|
let components = {};
|
||||||
getChildLength(parentId) {
|
files.keys().forEach((key) => {
|
||||||
return this.childMenus.filter(v => v.parentid == parentId).length;
|
components[key.replace(/(\.\/|\.vue)/g, "")] = files(key).default;
|
||||||
},
|
});
|
||||||
handleClick(menu) {
|
Object.keys(components).forEach((item) => {
|
||||||
this.childMenu.name = menu.name;
|
if (components[item].name == componentName) {
|
||||||
this.childMenu.parentName = menu.parentstr;
|
Vue.component(components[item].name, components[item]);
|
||||||
this.childMenu.description = menu.description;
|
return;
|
||||||
store.dispatch('getViewComponent', menu.path).then(componentName => {
|
}
|
||||||
console.log(componentName);
|
});
|
||||||
this.componentName = componentName;
|
});
|
||||||
});
|
},
|
||||||
},
|
search() {
|
||||||
search() {
|
let text = $("input[type='text']").val();
|
||||||
let text = $("input[type='text']").val();
|
this.childMenus = store.getters.childMenus.filter(
|
||||||
this.childMenus = store.getters.childMenus.filter(v => v.name.indexOf(text) >= 0);
|
(v) => v.name.indexOf(text) >= 0
|
||||||
if (!this.childMenus.length || this.childMenus.length == 0) {
|
);
|
||||||
this.parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 0);
|
if (!this.childMenus.length || this.childMenus.length == 0) {
|
||||||
} else {
|
this.parentMenus = store.getters.parentMenus.filter(
|
||||||
let parentIds = this.childMenus.map(v => v.parentid);
|
(v) => v.name.indexOf(text) >= 0
|
||||||
let parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 0);
|
);
|
||||||
if (parentMenus && parentMenus.length > 0) {
|
} else {
|
||||||
parentMenus.forEach(v => {
|
let parentIds = this.childMenus.map((v) => v.parentid);
|
||||||
parentIds.push(v.id);
|
let parentMenus = store.getters.parentMenus.filter(
|
||||||
});
|
(v) => v.name.indexOf(text) >= 0
|
||||||
}
|
);
|
||||||
this.parentMenus = store.getters.parentMenus.filter(v1 => parentIds.filter(v2 => v1.id == v2).length > 0);
|
if (parentMenus && parentMenus.length > 0) {
|
||||||
}
|
parentMenus.forEach((v) => {
|
||||||
|
parentIds.push(v.id);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
this.parentMenus = store.getters.parentMenus.filter(
|
||||||
|
(v1) => parentIds.filter((v2) => v1.id == v2).length > 0
|
||||||
|
);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import '@/css/main.css';
|
@import "@/css/main.css";
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user