Skip to content

A
adminDemo
Commit 5df596d1 by 黄志甲
Options

修改导航方式

parent 3eaf08fb
Showing with 408 additions and 63 deletions
package-lock.json
...@@ -13195,6 +13195,11 @@ ...@@ -13195,6 +13195,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vuex": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
"integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
},
"watchpack": { "watchpack": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
package.json
...@@ -17,7 +17,8 @@ ...@@ -17,7 +17,8 @@
"echarts": "^4.6.0", "echarts": "^4.6.0",
"view-design": "^4.1.3", "view-design": "^4.1.3",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1",
"vuex": "^3.1.3"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
......
src/router/index.js
...@@ -103,6 +103,21 @@ export default new Router({ ...@@ -103,6 +103,21 @@ export default new Router({
path: '/admin/administrators/adminPwd', path: '/admin/administrators/adminPwd',
name: "administrators-adminPwd", name: "administrators-adminPwd",
component: () => import('@/view/admin/administrators/adminPwd.vue') //修改密码 component: () => import('@/view/admin/administrators/adminPwd.vue') //修改密码
},
{
path: '/admin/administrators/information/list',
name: "administrators-information-list",
component: () => import('@/view/admin/administrators/information/list.vue') //资讯管理
},
{
path: '/admin/administrators/information/directory',
name: "目录管理",
component: () => import('@/view/admin/administrators/information/directory.vue') //目录管理
},
{
path: '/welcome',
name: "欢迎页",
component: () => import('@/view/welcome.vue') //欢迎页
} }
] ]
} }
......
src/router/menu.js
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
path:'/admin', path:'/admin',
children: [{ children: [{
title: "系统管理", title: "系统管理",
icon: 'ios-people', icon: 'md-settings',
path:'/admin/administrators', path:'/admin/administrators',
children: [{ children: [{
title: '子系统管理', title: '子系统管理',
...@@ -113,9 +113,25 @@ ...@@ -113,9 +113,25 @@
title: '修改密码', title: '修改密码',
path: '/admin/administrators/adminPwd', path: '/admin/administrators/adminPwd',
action: 'admin-administrators-adminInfor' action: 'admin-administrators-adminInfor'
},
{
title: '资讯管理',
path: '/admin/administrators/information',
action: 'admin-administrators-adminInfor',
children:[{
title: '资讯信息',
path: '/admin/administrators/information/list',
action: 'admin-administrators-adminInfor',
},
{
title: '资讯目录',
path: '/admin/administrators/information/directory',
action: 'admin-administrators-adminInfor',
}]
}] }]
}] }]
} }
] ]
......
src/store/index.js 0 → 100644
import Vuex from "vuex"
import Vue from "vue"
import power from "./modules/power.js"
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
power
}
})
\ No newline at end of file
src/store/modules/power.js 0 → 100644
/* 权限 */
export default {
state: {
},
actions: {
},
getters: {
},
mutations: {
},
namespaced: true
}
src/view/Main.vue
...@@ -2,56 +2,112 @@ ...@@ -2,56 +2,112 @@
<div class="layout"> <div class="layout">
<Layout> <Layout>
<Sider breakpoint="md" collapsible :collapsed-width="100" v-model="isCollapsed"> <Sider breakpoint="md" collapsible :collapsed-width="100" v-model="isCollapsed">
<div class="title"> <div class="title" @click="onIndexFun">
<h4>后台管理系统</h4> <h4>后台管理系统</h4>
</div> </div>
<div class="menuCalss" :style="{height:menuHeight+'px'}">
<Menu theme="dark" ref="side_menu" width="auto" :active-name="activeName" :open-names="openNames" accordion> <Menu theme="dark" ref="side_menu" :active-name="activeName" :open-names="openNames" width="auto" accordion>
<!-- <Menu theme="dark" ref="side_menu" width="auto" :active-name="$route.path" accordion> --> <!-- <Menu theme="dark" ref="side_menu" width="auto" :active-name="$route.path" accordion> -->
<Submenu
:name="index+1" v-for="(item,index) in menu[headerIndex].children" :key="index"> <!-- <Submenu :name="index+1" v-for="(item,index) in menu[headerIndex].children" :key="index">
<template slot="title"> <template slot="title">
<Icon :type="item.icon"></Icon> <Icon :type="item.icon"></Icon>
{{item.title}} {{item.title}}
</template> </template>
<MenuItem <MenuItem ref="menuOpen" :name="`${index+1}-${i+1}`" v-for="(v,i) in item.children" :key="i" :to="v.path"
ref="menuOpen"
:name="`${index+1}-${i+1}`"
v-for="(v,i) in item.children"
:key="i" :to="v.path"
@click.native="onSelect(index,i)"> @click.native="onSelect(index,i)">
{{index+1+'-'+(i+1)}} {{index+1+'-'+(i+1)}}
{{v.title}} {{v.title}}
</MenuItem> </MenuItem>
</Submenu> -->
<!-- <MenuGroup :title="items.title" v-for="(items,key) in menu">
<Submenu :name="key+1" v-for="(item,index) in items.children" :key="index">
<template slot="title">
<Icon :type="item.icon"></Icon>
{{item.title}} {{key}}
</template>
<MenuItem :name="`${index+1}-${i+1}`"
v-for="(v,i) in item.children" :key="i"
:to="v.path"
@click.native="onSelect(index,i)">
{{(index+1)+'-'+(i+1)}}
{{v.title}}
</MenuItem>
</Submenu>
</MenuGroup>
-->
<MenuGroup v-for="(item,index) in menu" :title="item.title" :key="index">
<Submenu :name="`${index+1}-${key+1}`" v-for="(items,key) in item.children" :key="key">
<template slot="title">
<Icon :type="items.icon" />
{{items.title}} {{index+1}} - {{key+1}}
</template>
<MenuItem
v-for="(v,i) in items.children" :key="i"
:name="`${index+1}-${key+1}-${i+1}`"
:id="`id${index+1}-${key+1}-${i+1}`"
:to="v.path"
v-if="!v.children">
{{v.title}} {{index+1}}-{{key+1}}-{{i+1}}
</MenuItem>
<!-- 三层 -->
<Submenu
:name="`${index+1}-${key+1}-${i+1}`"
v-for="(v,i) in items.children" :key="i"
v-if="v.children"
>
<template slot="title">
{{v.title}}{{index+1}}-{{key+1}}-{{i+1}}
</template>
<MenuItem v-for="(vs,is) in v.children" :key="is"
:name="`${index+1}-${key+1}-${i+1}-${is+1}`"
:id="`id${index+1}-${key+1}-${i+1}-${is+1}`"
:to="vs.path">
{{vs.title}}{{index+1}}-{{key+1}}-{{i+1}}-{{is+1}}
</MenuItem>
</Submenu> </Submenu>
</Submenu>
</MenuGroup>
</Menu> </Menu>
</div>
<div slot="trigger"></div> <div slot="trigger"></div>
</Sider> </Sider>
<Layout> <Layout>
<Header :style="{ background: '#fff',borderBottom:'1px solid rgba(0, 0, 0, .1)',height: '50px',lineHeight:'50px'}"> <Header :style="{ background: '#fff',borderBottom:'1px solid rgba(0, 0, 0, .1)',height: '50px',lineHeight:'50px'}">
<Row type="flex" justify="end" align="middle" v-if="!isCollapsed"> <Row type="flex" justify="end" align="middle" v-if="!isCollapsed">
<Col span="2" v-for="(item,index) in menu" :key="index" :to="item.children[0].children[0].path"> <!-- <Col span="2" v-for="(item,index) in menu" :key="index" :to="item.children[0].children[0].path">
<div class="herText" :class="index==headerIndex?'onHeaderClass':''" @click="index==headerIndex?'':onHeaderFun(index)"> <div class="herText" :class="index==headerIndex?'onHeaderClass':''" @click="index==headerIndex?'':onHeaderFun(index)">
{{item.title}} {{item.title}}
</div> </div>
</Col> </Col> -->
<Col span="3"> <Col span="3">
<Row type="flex" justify="end" align="middle"> <Row type="flex" justify="end" align="middle">
<div class="name know-flex konw-center know-align-center" > <div class="name know-flex konw-center know-align-center">
<Icon type="md-person" class="font-30" style="padding-right:10px;" /> <Icon type="md-person" class="font-30" style="padding-right:10px;" />
name name
</div> </div>
<Button size="small" @click="modelType = true">退出</Button>
<Button size="small" @click="loginOut">退出</Button>
</Row> </Row>
</Col> </Col>
</Row> </Row>
</Header> </Header>
<Content :style="{padding: '0 16px 16px'}"> <Content :style="{padding: '0 16px 16px'}">
<Breadcrumb :style="{margin: '8px 0'}"> <Breadcrumb :style="{margin: '8px 0'}">
<BreadcrumbItem>{{menu[headerIndex].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[headerIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[headerIndex].children[menuIndex].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[headerIndex].children[menuIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[headerIndex].children[menuIndex].children[menuChildren].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[headerIndex].children[menuIndex].children[menuChildren].title}}</BreadcrumbItem>
<BreadcrumbItem
v-if="menu[headerIndex].children[menuIndex].children[menuChildren].children">
{{menu[headerIndex].children[menuIndex].children[menuChildren].children[menuDeepest].title}}
</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<div class="content" :style="{height:height+'px'}"> <div class="content" :style="{height:height+'px'}">
<router-view /> <router-view />
...@@ -59,6 +115,20 @@ ...@@ -59,6 +115,20 @@
</Content> </Content>
</Layout> </Layout>
</Layout> </Layout>
<Modal v-model="modelType" width="360">
<p slot="header" style="color:#f60;text-align:center">
<Icon type="ios-information-circle"></Icon>
<span>温馨提示</span>
</p>
<div style="text-align:center">
<p class="font-20">是否注销登录?</p>
</div>
<div slot="footer">
<Button type="error" size="large" long>确认</Button>
</div>
</Modal>
</div> </div>
</template> </template>
<script> <script>
...@@ -69,11 +139,14 @@ ...@@ -69,11 +139,14 @@
menu: menus, menu: menus,
menuIndex: 0, menuIndex: 0,
menuChildren: 0, menuChildren: 0,
menuDeepest:0,
type: 0, type: 0,
isCollapsed: false, isCollapsed: false,
headerIndex: 0, headerIndex: 0,
openNames: [1], //第几个模块 openNames: [1], //第几个模块
activeName: '1-2' activeName: '1-2',
modelType: false,
menuHeight: 0
} }
}, },
computed: { computed: {
...@@ -85,48 +158,24 @@ ...@@ -85,48 +158,24 @@
} }
}, },
watch: { watch: {
//当前路由 //监听当前路由
$route(to, from) { $route(to, from) {
// let paths = this.$route.path
// let arr = paths.split('/')
// this.menu.forEach((item,index)=>{
// if(`/${arr[1]}`==item.path){
// // console.log(index) //当前子系统
// this.headerIndex = index
// item.children.forEach((v,i)=>{
// if(`/${arr[1]}/${arr[2]}`==v.path){
// //console.log(i+1) //当前模块
// this.openNames = []
// this.openNames.push(i+1)
// v.children.forEach((content,key)=>{
// if(paths==content.path){
// //console.log(key+1) //当前选项
// this.menuChildren = key
// this.activeName = `${i+1}-${key+1}`
// }
// })
// }
// })
// }
// })
this.onSelectFun() this.onSelectFun()
}, },
//选中
openNames() { openNames() {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.side_menu.updateOpened(); this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName(); this.$refs.side_menu.updateActiveName();
}) })
} }
}, },
created() { created() {
this.height = document.documentElement.clientHeight - 100 this.height = document.documentElement.clientHeight - 100
console.log(localStorage.getItem('power')) this.menuHeight = document.documentElement.clientHeight - 50
}, },
methods: { methods: {
currentShow (array) { currentShow(array) {
let success = false let success = false
array.children.map(v => { array.children.map(v => {
if (this.utils.hasRole(v.action)) { if (this.utils.hasRole(v.action)) {
...@@ -142,40 +191,49 @@ ...@@ -142,40 +191,49 @@
loginOut() { loginOut() {
localStorage.removeItem('token') localStorage.removeItem('token')
this.$router.push('/login') this.$router.push('/login')
},
onHeaderFun(index) {
this.headerIndex = index
this.menuIndex = 0
this.menuChildren = 0
let indexRouter = this.menu[index].children[0].children[0].path
this.$router.push(indexRouter)
},
},
// onHeaderFun(index) {
// this.headerIndex = index
// this.menuIndex = 0
// this.menuChildren = 0
// let indexRouter = this.menu[index].children[0].children[0].path
// this.$router.push(indexRouter)
// },
onIndexFun(){
this.openNames= []
this.activeName= ''
this.$router.push('/welcome')
},
//选中高亮操作 //选中高亮操作
onSelectFun() { onSelectFun() {
let paths = this.$route.path let paths = this.$route.path
let arr = paths.split('/') let arr = paths.split('/')
//console.log(arr)
this.menu.forEach((item, index) => { this.menu.forEach((item, index) => {
if (`/${arr[1]}` == item.path) { if (`/${arr[1]}` == item.path) {
// console.log(index) //当前子系统
// this.onHeaderFun(index)
this.headerIndex = index this.headerIndex = index
item.children.forEach((v, i) => { item.children.forEach((v, i) => {
if (`/${arr[1]}/${arr[2]}` == v.path) { if (`/${arr[1]}/${arr[2]}` == v.path) {
//console.log(i+1) //当前模块
this.openNames = [] this.openNames = []
this.openNames.push(i + 1) this.openNames.push(`${index+1}-${i+1}`)
// console.log(this.openNames)
v.children.forEach((content, key) => { v.children.forEach((content, key) => {
if (paths == content.path) { if (paths == content.path) {
this.menuChildren = key this.menuChildren = key
// console.log(key+1) //当前模块选项 this.activeName = `${index+1}-${i+1}-${key+1}`
this.activeName = `${i+1}-${key+1}`
//console.log(`${i+1}-${key+1}`) console.log(this.$el.querySelector(`#id${index+1}-${i+1}-${key+1}`).offsetTop,'-------------')
} else if (`/${arr[1]}/${arr[2]}/${arr[3]}` == content.path) {
content.children.forEach((vs, is) => {
if (paths == vs.path) {
this.menuChildren = key
this.menuDeepest = is
this.openNames.push(`${index+1}-${i+1}-${key+1}`)
this.activeName = `${index+1}-${i+1}-${key+1}-${is+1}`
}
})
} }
}) })
} }
...@@ -198,6 +256,32 @@ ...@@ -198,6 +256,32 @@
<style> <style>
.menuCalss {
overflow: auto
}
.menuCalss::-webkit-scrollbar {
width: 2px;
background-color: #d8d8d8;
}
/* 滚动槽 */
.menuCalss::-webkit-scrollbar-track {
border-radius: 2px;
}
.menuCalss::-webkit-scrollbar-thumb {
background-color: #bfc1c4;
}
.layout { .layout {
border: 1px solid #d7dde4; border: 1px solid #d7dde4;
background: #f5f7f9; background: #f5f7f9;
......
src/view/admin/administrators/information/directory.vue 0 → 100644
<template>
<Row type="flex" justify="center">
<Col :xs="24" :md="24">
<Card>
<p slot="title">
<span class="font-20">目录管理</span>
</p>
<Card>
<div class="formTopClass">
<Form :model="searchForm" :label-width="80" inline>
<FormItem label="用户名" class="ivuFormItem">
<Input v-model="searchForm.name" placeholder="请输入用户名" class="newInput"></Input>
</FormItem>
<FormItem label="操作类型" class="ivuFormItem">
<Input v-model="searchForm.email" placeholder="请输入操作类型" class="newInput"></Input>
</FormItem>
<FormItem class="ivuFormItem">
<Button type="primary">
<Icon type="md-search" />
查询
</Button>
</FormItem>
</Form>
</div>
</Card>
<Table border :columns="subsystemList" :data="data5"></Table>
<Page :total="pageInfo.total" :page-size="pageInfo.size" :current="pageInfo.page" show-total
show-elevator style="margin-top: 20px;" />
</Card>
</Col>
</Row>
</template>
<script>
export default {
data() {
return {
data5:[],
pageInfo: {
total: 100,
size: 10,
page: 1
},
searchForm:{},
subsystemList: [{
title: '编号',
key: 'date',
type: 'index',
sortable: true
},
{
title: '用户',
key: 'name',
sortable: true
},
{
title: '浏览器',
key: 'name',
sortable: true
},
{
title: '操作类型',
key: 'name',
sortable: true
},
{
title: 'IP',
key: 'name',
sortable: true
},
{
title: '来源',
key: 'name',
sortable: true
},
{
title: '访问地址',
key: 'name',
sortable: true
},
{
title: '创建时间',
key: 'name',
sortable: true
},
]
}
}
}
</script>
src/view/admin/administrators/information/list.vue 0 → 100644
<template>
<Row type="flex" justify="center">
<Col :xs="24" :md="24">
<Card>
<p slot="title">
<span class="font-20">资讯管理</span>
</p>
<Card>
<div class="formTopClass">
<Form :model="searchForm" :label-width="80" inline>
<FormItem label="用户名" class="ivuFormItem">
<Input v-model="searchForm.name" placeholder="请输入用户名" class="newInput"></Input>
</FormItem>
<FormItem label="操作类型" class="ivuFormItem">
<Input v-model="searchForm.email" placeholder="请输入操作类型" class="newInput"></Input>
</FormItem>
<FormItem class="ivuFormItem">
<Button type="primary">
<Icon type="md-search" />
查询
</Button>
</FormItem>
</Form>
</div>
</Card>
<Table border :columns="subsystemList" :data="data5"></Table>
<Page :total="pageInfo.total" :page-size="pageInfo.size" :current="pageInfo.page" show-total
show-elevator style="margin-top: 20px;" />
</Card>
</Col>
</Row>
</template>
<script>
export default {
data() {
return {
data5:[],
pageInfo: {
total: 100,
size: 10,
page: 1
},
searchForm:{},
subsystemList: [{
title: '编号',
key: 'date',
type: 'index',
sortable: true
},
{
title: '用户',
key: 'name',
sortable: true
},
{
title: '浏览器',
key: 'name',
sortable: true
},
{
title: '操作类型',
key: 'name',
sortable: true
},
{
title: 'IP',
key: 'name',
sortable: true
},
{
title: '来源',
key: 'name',
sortable: true
},
{
title: '访问地址',
key: 'name',
sortable: true
},
{
title: '创建时间',
key: 'name',
sortable: true
},
]
}
}
}
</script>
src/view/welcome.vue 0 → 100644
<template>
<Row>
<div class="know-flex konw-center know-align-center">
<span class="font-30">欢迎使用管理后台</span>
</div>
</Row>
</template>
<script>
</script>
<style>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment