Commit 5df596d1 by 黄志甲

修改导航方式

parent 3eaf08fb
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "admin",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "1510017964@qq.com",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.19.2",
"echarts": "^4.6.0",
"view-design": "^4.1.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
{
"name": "admin",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "1510017964@qq.com",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.19.2",
"echarts": "^4.6.0",
"view-design": "^4.1.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.1.3"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' //初始页
import Main from '@/view/Main.vue' //导航页面
import login from "@/view/login/login.vue" //登录页
import userList from "@/view/user/list.vue" //列表
Vue.use(Router)
export default new Router({
mode: 'hash',
//mode: 'history',
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: "login",
component: login,
}, {
path: '/',
name: 'main',
component: Main,
meta: {
requireAuth: true
},
children: [
/* 综合门户 */
{
path: '/gateway/handle',
name: "gateway-handle",
component: () => import('@/view/gateway/handle/index.vue') //任务处理
},
{
path: '/gateway/map',
name: "gateway-map",
component: () => import('@/view/gateway/map/index.vue') //任务地图
},
{
path: '/gateway/theDisabled/list',
name: "gateway-theDisabled-list",
component: () => import('@/view/gateway/theDisabled/list.vue') //残疾人数据实时统计
},
{
path: '/gateway/theDisabled/progress',
name: "gateway-theDisabled-progress",
component: () => import('@/view/gateway/theDisabled/progress.vue') //残疾人小康进程实现程度
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' //初始页
import Main from '@/view/Main.vue' //导航页面
import login from "@/view/login/login.vue" //登录页
import userList from "@/view/user/list.vue" //列表
Vue.use(Router)
export default new Router({
mode: 'hash',
//mode: 'history',
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: "login",
component: login,
}, {
path: '/',
name: 'main',
component: Main,
meta: {
requireAuth: true
},
children: [
/* 综合门户 */
{
path: '/gateway/handle',
name: "gateway-handle",
component: () => import('@/view/gateway/handle/index.vue') //任务处理
},
{
path: '/gateway/map',
name: "gateway-map",
component: () => import('@/view/gateway/map/index.vue') //任务地图
},
{
path: '/gateway/theDisabled/list',
name: "gateway-theDisabled-list",
component: () => import('@/view/gateway/theDisabled/list.vue') //残疾人数据实时统计
},
{
path: '/gateway/theDisabled/progress',
name: "gateway-theDisabled-progress",
component: () => import('@/view/gateway/theDisabled/progress.vue') //残疾人小康进程实现程度
},
{
path: '/gateway/dbNum/index',
name: "gateway-dbNum",
component: () => import('@/view/gateway/dbNum/index.vue') //残疾人小康进程实现程度
},
/* 党员扶残 */
{
path: '/auxiliaryDisability/information/index',
name: "auxiliaryDisability-information",
component: () => import('@/view/auxiliaryDisability/information/index.vue') //信息查询
},
{
path: '/auxiliaryDisability/tasks/taskNums',
name: "auxiliaryDisability-taskNums",
component: () => import('@/view/auxiliaryDisability/tasks/taskNums.vue') //任务指数管理
},
{
path: '/admin/administrators/subsystem',
name: "administrators-subsystem",
component: () => import('@/view/admin/administrators/subsystem.vue') //子系统管理
},
{
path: '/admin/administrators/adminList',
name: "administrators-adminList",
component: () => import('@/view/admin/administrators/adminList.vue') //用户列表
},
{
path: '/admin/administrators/roleList',
name: "administrators-roleList",
component: () => import('@/view/admin/administrators/roleList.vue') //角色管理
},
{
path: '/admin/administrators/dictionary',
name: "administrators-dictionary",
component: () => import('@/view/admin/administrators/dictionary.vue') //数据字典
},
{
path: '/admin/administrators/config',
name: "administrators-config",
component: () => import('@/view/admin/administrators/config.vue') //日志查询
},
{
path: '/admin/administrators/powerList',
name: "administrators-powerList",
component: () => import('@/view/admin/administrators/powerList.vue') //权限管理
},
{
path: '/admin/administrators/adminInfor',
name: "administrators-adminInfor",
component: () => import('@/view/admin/administrators/adminInfor.vue') //个人资料
},
{
path: '/gateway/dbNum/index',
name: "gateway-dbNum",
component: () => import('@/view/gateway/dbNum/index.vue') //残疾人小康进程实现程度
},
/* 党员扶残 */
{
path: '/auxiliaryDisability/information/index',
name: "auxiliaryDisability-information",
component: () => import('@/view/auxiliaryDisability/information/index.vue') //信息查询
},
{
path: '/auxiliaryDisability/tasks/taskNums',
name: "auxiliaryDisability-taskNums",
component: () => import('@/view/auxiliaryDisability/tasks/taskNums.vue') //任务指数管理
},
{
path: '/admin/administrators/subsystem',
name: "administrators-subsystem",
component: () => import('@/view/admin/administrators/subsystem.vue') //子系统管理
},
{
path: '/admin/administrators/adminList',
name: "administrators-adminList",
component: () => import('@/view/admin/administrators/adminList.vue') //用户列表
},
{
path: '/admin/administrators/roleList',
name: "administrators-roleList",
component: () => import('@/view/admin/administrators/roleList.vue') //角色管理
},
{
path: '/admin/administrators/dictionary',
name: "administrators-dictionary",
component: () => import('@/view/admin/administrators/dictionary.vue') //数据字典
},
{
path: '/admin/administrators/config',
name: "administrators-config",
component: () => import('@/view/admin/administrators/config.vue') //日志查询
path: '/admin/administrators/adminPwd',
name: "administrators-adminPwd",
component: () => import('@/view/admin/administrators/adminPwd.vue') //修改密码
},
{
path: '/admin/administrators/powerList',
name: "administrators-powerList",
component: () => import('@/view/admin/administrators/powerList.vue') //权限管理
path: '/admin/administrators/information/list',
name: "administrators-information-list",
component: () => import('@/view/admin/administrators/information/list.vue') //资讯管理
},
{
path: '/admin/administrators/adminInfor',
name: "administrators-adminInfor",
component: () => import('@/view/admin/administrators/adminInfor.vue') //个人资料
path: '/admin/administrators/information/directory',
name: "目录管理",
component: () => import('@/view/admin/administrators/information/directory.vue') //目录管理
},
{
path: '/admin/administrators/adminPwd',
name: "administrators-adminPwd",
component: () => import('@/view/admin/administrators/adminPwd.vue') //修改密码
}
]
}
]
path: '/welcome',
name: "欢迎页",
component: () => import('@/view/welcome.vue') //欢迎页
}
]
}
]
})
const menu = [
// {
// title: "综合门户",
// children: [{
// title: "任务处理",
// icon: 'ios-people',
// children: [{
// title: '任务处理',
// path: '/gateway/handle',
// action: 'member-page'
// }]
// },{
// title: "任务地图",
// icon: 'ios-people',
// children: [{
// title: '任务地图',
// path: '/gateway/map',
// action: 'member-page'
// }]
// {
// title: "综合门户",
// children: [{
// title: "任务处理",
// icon: 'ios-people',
// children: [{
// title: '任务处理',
// path: '/gateway/handle',
// action: 'member-page'
// }]
// },{
// title: "任务地图",
// icon: 'ios-people',
// children: [{
// title: '任务地图',
// path: '/gateway/map',
// action: 'member-page'
// }]
// },
// {
// title: "残疾人统计",
......@@ -40,20 +40,20 @@
// path: '/gateway/dbNum/index',
// action: 'gateway-dbNum'
// }]
// }]
// },
{
// }]
// },
{
title: "党员扶残",
path:"/auxiliaryDisability",
children: [{
title: "信息查询",
path:"/auxiliaryDisability",
children: [{
title: "信息查询",
icon: 'ios-people',
path:'/auxiliaryDisability/information',
children: [{
title: '信息查询',
path: '/auxiliaryDisability/information/index',
action: 'auxiliaryDisability-information-index'
}]
path:'/auxiliaryDisability/information',
children: [{
title: '信息查询',
path: '/auxiliaryDisability/information/index',
action: 'auxiliaryDisability-information-index'
}]
},
{
title: "事前把关",
......@@ -65,19 +65,19 @@
action: 'auxiliaryDisability-tasks-taskNums'
},
]
}]
},
{
}]
},
{
title: "系统管理",
path:'/admin',
children: [{
title: "系统管理",
icon: 'ios-people',
path:'/admin/administrators',
children: [{
title: '子系统管理',
path: '/admin/administrators/subsystem',
action: 'admin-administrators-subsystem'
path:'/admin',
children: [{
title: "系统管理",
icon: 'md-settings',
path:'/admin/administrators',
children: [{
title: '子系统管理',
path: '/admin/administrators/subsystem',
action: 'admin-administrators-subsystem'
},
{
title: '用户管理',
......@@ -113,10 +113,26 @@
title: '修改密码',
path: '/admin/administrators/adminPwd',
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',
}]
}]
}]
}
]
]
export default menu
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
/* 权限 */
export default {
state: {
},
actions: {
},
getters: {
},
mutations: {
},
namespaced: true
}
<template>
<div class="layout">
<Layout>
<Sider breakpoint="md" collapsible :collapsed-width="100" v-model="isCollapsed">
<div class="title">
<h4>后台管理系统</h4>
</div>
<template>
<div class="layout">
<Layout>
<Sider breakpoint="md" collapsible :collapsed-width="100" v-model="isCollapsed">
<div class="title" @click="onIndexFun">
<h4>后台管理系统</h4>
</div>
<div class="menuCalss" :style="{height:menuHeight+'px'}">
<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> -->
<!-- <Submenu :name="index+1" v-for="(item,index) in menu[headerIndex].children" :key="index">
<template slot="title">
<Icon :type="item.icon"></Icon>
{{item.title}}
</template>
<MenuItem ref="menuOpen" :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 :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>
<Menu theme="dark" ref="side_menu" width="auto" :active-name="activeName" :open-names="openNames" 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">
<template slot="title">
<Icon :type="item.icon"></Icon>
{{item.title}}
</template>
<MenuItem
ref="menuOpen"
: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>
</Menu>
<div slot="trigger"></div>
</Sider>
<Layout>
<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">
<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)">
{{item.title}}
</div>
</Col>
<Col span="3">
<Row type="flex" justify="end" align="middle">
<div class="name know-flex konw-center know-align-center" >
<Icon type="md-person" class="font-30" style="padding-right:10px;" />
name
</div>
<Button size="small" @click="loginOut">退出</Button>
</Row>
</Col>
</Row>
</Header>
<!-- 三层 -->
<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>
</MenuGroup>
</Menu>
</div>
<div slot="trigger"></div>
</Sider>
<Layout>
<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">
<!-- <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)">
{{item.title}}
</div>
</Col> -->
<Col span="3">
<Row type="flex" justify="end" align="middle">
<div class="name know-flex konw-center know-align-center">
<Icon type="md-person" class="font-30" style="padding-right:10px;" />
name
</div>
<Button size="small" @click="modelType = true">退出</Button>
</Row>
</Col>
</Row>
</Header>
<Content :style="{padding: '0 16px 16px'}">
<Breadcrumb :style="{margin: '8px 0'}">
<BreadcrumbItem>{{menu[headerIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[headerIndex].children[menuIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[headerIndex].children[menuIndex].children[menuChildren].title}}</BreadcrumbItem>
</Breadcrumb>
<div class="content" :style="{height:height+'px'}">
<router-view />
</div>
</Content>
</Layout>
</Layout>
</div>
</template>
<script>
import menus from "../router/menu.js"
export default {
data() {
return {
menu: menus,
menuIndex: 0,
<BreadcrumbItem>{{menu[headerIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[headerIndex].children[menuIndex].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>
<div class="content" :style="{height:height+'px'}">
<router-view />
</div>
</Content>
</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>
</template>
<script>
import menus from "../router/menu.js"
export default {
data() {
return {
menu: menus,
menuIndex: 0,
menuChildren: 0,
type: 0,
isCollapsed: false,
headerIndex: 0,
openNames: [1], //第几个模块
activeName: '1-2'
}
},
computed: {
menuitemClasses: function() {
return [
'menu-item',
this.isCollapsed ? 'collapsed-menu' : ''
]
}
},
watch: {
//当前路由
$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()
},
//选中
openNames() {
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
})
}
},
created() {
this.height = document.documentElement.clientHeight - 100
console.log(localStorage.getItem('power'))
menuDeepest:0,
type: 0,
isCollapsed: false,
headerIndex: 0,
openNames: [1], //第几个模块
activeName: '1-2',
modelType: false,
menuHeight: 0
}
},
computed: {
menuitemClasses: function() {
return [
'menu-item',
this.isCollapsed ? 'collapsed-menu' : ''
]
}
},
watch: {
//监听当前路由
$route(to, from) {
this.onSelectFun()
},
openNames() {
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
})
}
},
created() {
this.height = document.documentElement.clientHeight - 100
this.menuHeight = document.documentElement.clientHeight - 50
},
methods: {
currentShow(array) {
let success = false
array.children.map(v => {
if (this.utils.hasRole(v.action)) {
success = true
}
})
return success
},
onSelect(index, i) {
this.menuIndex = index
this.menuChildren = i
},
loginOut() {
localStorage.removeItem('token')
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)
// },
},
methods: {
currentShow (array) {
let success = false
array.children.map(v => {
if (this.utils.hasRole(v.action)) {
success = true
}
})
return success
},
onSelect(index, i) {
this.menuIndex = index
this.menuChildren = i
},
loginOut() {
localStorage.removeItem('token')
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)
onIndexFun(){
this.openNames= []
this.activeName= ''
this.$router.push('/welcome')
},
//选中高亮操作
onSelectFun() {
let paths = this.$route.path
let arr = paths.split('/')
this.menu.forEach((item, index) => {
if (`/${arr[1]}` == item.path) {
this.headerIndex = index
item.children.forEach((v, i) => {
if (`/${arr[1]}/${arr[2]}` == v.path) {
this.openNames = []
this.openNames.push(`${index+1}-${i+1}`)
v.children.forEach((content, key) => {
if (paths == content.path) {
this.menuChildren = key
this.activeName = `${index+1}-${i+1}-${key+1}`
//选中高亮操作
onSelectFun() {
let paths = this.$route.path
let arr = paths.split('/')
//console.log(arr)
this.menu.forEach((item, index) => {
if (`/${arr[1]}` == item.path) {
// console.log(index) //当前子系统
// this.onHeaderFun(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)
// console.log(this.openNames)
v.children.forEach((content, key) => {
if (paths == content.path) {
this.menuChildren = key
// console.log(key+1) //当前模块选项
this.activeName = `${i+1}-${key+1}`
//console.log(`${i+1}-${key+1}`)
}
})
}
})
}
})
//展开
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
})
}
},
mounted() {
this.onSelectFun()
}
}
</script>
<style>
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-header-bar {
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.menu-item span {
display: inline-block;
overflow: hidden;
width: 69px;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
transition: width .2s ease .2s;
}
.menu-item i {
transform: translateX(0px);
transition: font-size .2s ease, transform .2s ease;
vertical-align: middle;
font-size: 16px;
}
.collapsed-menu span {
width: 0px;
transition: width .2s ease;
}
.collapsed-menu i {
transform: translateX(5px);
transition: font-size .2s ease .2s, transform .2s ease .2s;
vertical-align: middle;
font-size: 22px;
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}`
}
})
}
})
}
})
}
})
//展开
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
})
}
},
mounted() {
this.onSelectFun()
}
}
</script>
<style>
.menuCalss {
overflow: auto
}
.ivu-layout>.ivu-layout-sider>.ivu-layout-sider-zero-width-trigger {
top: 4px !important;
background: none;
color: #000000;
}
.name {
margin-right: 30px;
}
.title {
height: 50px;
text-align: center;
line-height: 50px;
color: #EEEEEE;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.content {
overflow: auto;
height: 750px;
}
.content::-webkit-scrollbar {
width: 4px;
background-color: #d8d8d8;
}
/* 滚动槽 */
.content::-webkit-scrollbar-track {
border-radius: 10px;
}
.content::-webkit-scrollbar-thumb {
background-color: #bfc1c4;
}
.ivu-layout {
background-color: #f5f5f5;
}
.herText {
text-align: center;
}
.onHeaderClass {
background-color: #515a6e;
color: #FFFFFF;
}
/*
.ivu-layout-sider {
transition: all .2s ease-in-out;
position: absolute !important;
background: #515a6e;
min-width: 0;
z-index: 999 !important;
height: 100vh !important;
} */
.menuCalss::-webkit-scrollbar {
width: 2px;
background-color: #d8d8d8;
}
/* 滚动槽 */
.menuCalss::-webkit-scrollbar-track {
border-radius: 2px;
}
.menuCalss::-webkit-scrollbar-thumb {
background-color: #bfc1c4;
}
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-header-bar {
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.menu-item span {
display: inline-block;
overflow: hidden;
width: 69px;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
transition: width .2s ease .2s;
}
.menu-item i {
transform: translateX(0px);
transition: font-size .2s ease, transform .2s ease;
vertical-align: middle;
font-size: 16px;
}
.collapsed-menu span {
width: 0px;
transition: width .2s ease;
}
.collapsed-menu i {
transform: translateX(5px);
transition: font-size .2s ease .2s, transform .2s ease .2s;
vertical-align: middle;
font-size: 22px;
}
.ivu-layout>.ivu-layout-sider>.ivu-layout-sider-zero-width-trigger {
top: 4px !important;
background: none;
color: #000000;
}
.name {
margin-right: 30px;
}
.title {
height: 50px;
text-align: center;
line-height: 50px;
color: #EEEEEE;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.content {
overflow: auto;
height: 750px;
}
.content::-webkit-scrollbar {
width: 4px;
background-color: #d8d8d8;
}
/* 滚动槽 */
.content::-webkit-scrollbar-track {
border-radius: 10px;
}
.content::-webkit-scrollbar-thumb {
background-color: #bfc1c4;
}
.ivu-layout {
background-color: #f5f5f5;
}
.herText {
text-align: center;
}
.onHeaderClass {
background-color: #515a6e;
color: #FFFFFF;
}
/*
.ivu-layout-sider {
transition: all .2s ease-in-out;
position: absolute !important;
background: #515a6e;
min-width: 0;
z-index: 999 !important;
height: 100vh !important;
} */
</style>
<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>
<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>
<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