进入子页面重新加载数据
This commit is contained in:
dragon
@@ -1,177 +1,260 @@
|
||||
<template>
|
||||
<!-- Left side column. contains the logo and sidebar -->
|
||||
<aside class="main-sidebar" style="height: 100%; overflow: hidden; overflow: scroll;">
|
||||
<!-- sidebar: style can be found in sidebar.less -->
|
||||
<section class="sidebar">
|
||||
<!-- Sidebar user panel (optional) -->
|
||||
<div class="user-panel">
|
||||
<div class="pull-left image">
|
||||
<img :src="avatar" class="img-circle" :alt="username">
|
||||
</div>
|
||||
<div class="pull-left info">
|
||||
<p>{{ username }}</p>
|
||||
<!-- 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>
|
||||
<!-- Left side column. contains the logo and sidebar -->
|
||||
<aside
|
||||
class="main-sidebar"
|
||||
style="height: 100%; overflow: hidden; overflow: scroll"
|
||||
>
|
||||
<!-- sidebar: style can be found in sidebar.less -->
|
||||
<section class="sidebar">
|
||||
<!-- Sidebar user panel (optional) -->
|
||||
<div class="user-panel">
|
||||
<div class="pull-left image">
|
||||
<img :src="avatar" class="img-circle" :alt="username" />
|
||||
</div>
|
||||
</div>
|
||||
<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 class="pull-left info">
|
||||
<p>{{ username }}</p>
|
||||
<!-- 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 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>
|
||||
<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
|
||||
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>
|
||||
|
||||
<script>
|
||||
import store from '@/store';
|
||||
import { getStore } from '@/utils/store';
|
||||
import store from "@/store";
|
||||
import Vue from "vue";
|
||||
import { getStore } from "@/utils/store";
|
||||
|
||||
export default {
|
||||
name: 'MaintainerView',
|
||||
data() {
|
||||
return {
|
||||
componentName: "",
|
||||
username: "",
|
||||
avatar: "",
|
||||
parentMenus: [],
|
||||
childMenus: [],
|
||||
childMenu: {
|
||||
name: "",
|
||||
parentName: "",
|
||||
description: "",
|
||||
}
|
||||
};
|
||||
name: "MaintainerView",
|
||||
data() {
|
||||
return {
|
||||
componentName: "",
|
||||
username: "",
|
||||
avatar: "",
|
||||
parentMenus: [],
|
||||
childMenus: [],
|
||||
childMenu: {
|
||||
name: "",
|
||||
parentName: "",
|
||||
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() {
|
||||
this.getMenu();
|
||||
this.username = store.getters.username;
|
||||
this.avatar = store.getters.avatar;
|
||||
getChilds(parentId) {
|
||||
return this.childMenus.filter((v) => v.parentid == parentId);
|
||||
},
|
||||
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;
|
||||
});
|
||||
},
|
||||
getChilds(parentId) {
|
||||
return this.childMenus.filter(v => v.parentid == parentId);
|
||||
},
|
||||
getChildLength(parentId) {
|
||||
return this.childMenus.filter(v => v.parentid == parentId).length;
|
||||
},
|
||||
handleClick(menu) {
|
||||
this.childMenu.name = menu.name;
|
||||
this.childMenu.parentName = menu.parentstr;
|
||||
this.childMenu.description = menu.description;
|
||||
store.dispatch('getViewComponent', menu.path).then(componentName => {
|
||||
console.log(componentName);
|
||||
this.componentName = componentName;
|
||||
});
|
||||
},
|
||||
search() {
|
||||
let text = $("input[type='text']").val();
|
||||
this.childMenus = store.getters.childMenus.filter(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);
|
||||
} else {
|
||||
let parentIds = this.childMenus.map(v => v.parentid);
|
||||
let parentMenus = store.getters.parentMenus.filter(v => v.name.indexOf(text) >= 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);
|
||||
}
|
||||
getChildLength(parentId) {
|
||||
return this.childMenus.filter((v) => v.parentid == parentId).length;
|
||||
},
|
||||
handleClick(menu) {
|
||||
this.childMenu.name = menu.name;
|
||||
this.childMenu.parentName = menu.parentstr;
|
||||
this.childMenu.description = menu.description;
|
||||
store.dispatch("getViewComponent", menu.path).then((componentName) => {
|
||||
console.log(componentName);
|
||||
this.componentName = componentName;
|
||||
const files = require.context("@/views", true, /\.vue$/);
|
||||
let components = {};
|
||||
files.keys().forEach((key) => {
|
||||
components[key.replace(/(\.\/|\.vue)/g, "")] = files(key).default;
|
||||
});
|
||||
Object.keys(components).forEach((item) => {
|
||||
if (components[item].name == componentName) {
|
||||
Vue.component(components[item].name, components[item]);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
search() {
|
||||
let text = $("input[type='text']").val();
|
||||
this.childMenus = store.getters.childMenus.filter(
|
||||
(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
|
||||
);
|
||||
} else {
|
||||
let parentIds = this.childMenus.map((v) => v.parentid);
|
||||
let parentMenus = store.getters.parentMenus.filter(
|
||||
(v) => v.name.indexOf(text) >= 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>
|
||||
|
||||
<style scoped>
|
||||
@import '@/css/main.css';
|
||||
@import "@/css/main.css";
|
||||
</style>
|
||||
Reference in New Issue
Block a user