Skip to content

F
founder_vue
Commit 2333924e by chenqiang
Options

初始化 路由、导航、以及布局

parent a4484f34
Showing with 244 additions and 108 deletions
src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import store from "../store";
import { getToken } from "../utils/auth";
import { Message } from "element-ui";
// import store from "../store";
// import { getToken } from "../utils/auth";
// import { Message } from "element-ui";
import indexRoutes from "./modules/index";
const originalPush = VueRouter.prototype.push;
......
src/router/modules/index.js
export default [
{
path: '/',
redirect: '/login'
redirect: '/home'
},
{
path: "/login",
name: "Login",
path: '/login',
name: 'Login',
meta: {
title: "登录",
auth: "5"
title: '登录',
auth: '5'
},
component: () => import("@/views/login.vue")
component: () => import('@/views/login.vue')
},
{
path: "/Home",
name: "Home",
path: '/home',
name: 'home',
meta: {
title: "工作桌面",
auth: "5"
title: '首页',
auth: '5'
},
component: () => import("@/views/Home.vue")
component: () => import('@/views/Home.vue'),
redirect: { name: 'spjkyjzzyy' }, //输入路由会重定向到dlrz页面
children: [
{
path: '/spjkyjzzyy',
name: 'spjkyjzzyy',
meta: {
title: '视频监控预警综治应用',
auth: '5'
},
component: () => import('@/views/spjkyjzzyy/index.vue')
},{
path: '/spjkyjshyy',
name: 'spjkyjshyy',
meta: {
title: '视频监控预警社会应用',
auth: '5'
},
component: () => import('@/views/spjkyjshyy/index.vue')
},{
path: '/ywxtddzxt',
name: 'ywxtddzxt',
meta: {
title: '业务协同调度子系统',
auth: '5'
},
component: () => import('@/views/ywxtddzxt/index.vue')
}, {
path: '/tjstzxt',
name: 'tjstzxt',
meta: {
title: '统计视图子系统',
auth: '5'
},
component: () => import('@/views/tjstzxt/index.vue')
}, {
path: '/gckhzxt',
name: 'gckhzxt',
meta: {
title: '过程考核子系统',
auth: '5'
},
component: () => import('@/views/gckhzxt/index.vue')
}, {
path: '/wssqzxt',
name: 'wssqzxt',
meta: {
title: '网上社区子系统',
auth: '5'
},
component: () => import('@/views/wssqzxt/index.vue')
}]
}
]
src/views/Home.vue
<template>
<div class="home">
<img :src="captcha.img ? 'captcha.img' : defaultGoodsImage" />
<div class="demo" @click="toBar">跳转</div>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div class="demo" @click="toLogin">跳转</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first" v-if="userAuth < 2"
>用户管理</el-tab-pane
>
<el-tab-pane label="配置管理" name="second" v-if="userAuth < 1"
>配置管理</el-tab-pane
>
<el-tab-pane label="角色管理" name="third" v-if="userAuth < 5"
>角色管理</el-tab-pane
>
<el-tab-pane label="定时任务补偿" name="fourth" v-if="userAuth < 6"
>定时任务补偿</el-tab-pane
>
</el-tabs>
<el-container>
<el-header>
<div class="home_head">
<img class="home_head_img" src="@/assets/img/logo_zjw.png" alt="">
<span class="home_head_title">山南市社会治安综合治理平台</span>
</div>
</el-header>
<el-container>
<el-aside width="220px">
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="/spjkyjzzyy"
router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
:collapse="isCollapse">
<el-menu-item index="/spjkyjzzyy">
<i class="el-icon-location"></i>
<span slot="title">视频监控预警综治应用</span>
</el-menu-item>
<el-menu-item index="/spjkyjshyy">
<i class="el-icon-menu"></i>
<span slot="title">视频监控预警社会应用</span>
</el-menu-item>
<el-menu-item index="/ywxtddzxt">
<i class="el-icon-document"></i>
<span slot="title">业务协同调度子系统</span>
</el-menu-item>
<el-menu-item index="/tjstzxt">
<i class="el-icon-setting"></i>
<span slot="title">统计视图子系统</span>
</el-menu-item>
<el-menu-item index="/gckhzxt">
<i class="el-icon-setting"></i>
<span slot="title">过程考核子系统</span>
</el-menu-item>
<el-menu-item index="/wssqzxt">
<i class="el-icon-setting"></i>
<span slot="title">网上社区子系统</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { Home, test, test1 } from "@/api/home.js";
import { mapGetters } from "vuex";
import { mapGetters } from 'vuex'
export default {
name: "Home",
name: 'home',
data() {
return {
tokeb: "",
captcha: {
id: "",
img: ""
},
options: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
isCollapse: true
}
],
value: "",
activeName: ""
};
},
created() {
this.getHome();
this.getH();
this.getT();
},
computed: {
...mapGetters(["defaultGoodsImage", "userAuth"])
...mapGetters(['defaultGoodsImage', 'userAuth'])
},
methods: {
getHome() {
Home({
objectValue: "粤sty989"
}).then(res => {
console.log(res);
});
},
getH() {
test({
objectValue: "粤sty989"
}).then(res => {
console.log(res);
});
},
getT() {
test1({
zjhm: 412721197608203413
}).then(res => {
console.log(res);
});
handleOpen(key, keyPath) {
debugger
console.log(key, keyPath)
},
toBar() {
this.$router.push("/asdw");
handleClose(key, keyPath) {
console.log(key, keyPath)
},
toLogin() {
this.$router.push("/Login");
},
handleClick(tab, event) {
console.log(tab, event);
this.$router.push('/Login')
}
}
};
}
</script>
<style lang="scss">
.demo {
width: 100px;
height: 100px;
background: $base-color;
}
.home {
.el-header {
padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
}
</style>
<style lang="scss" scoped>
.home {
.home_head {
background-color: #fff;
.home_head_img {
width: 36px;
height: 40px;
margin: 8px;
}
.home_head_title {
vertical-align: middle;
margin-left: 5px;
height: 55px;
line-height: 55px;
font-weight: bold;
color: #23355e;
/*float: left;*/
cursor: pointer;
font-size: 30px;
}
}
}
</style>
src/views/gckhzxt/index.vue 0 → 100644
<template>
<!--过程考核子系统-->
<div>127</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped>
</style>
src/views/spjkyjshyy/index.vue 0 → 100644
<template>
<!--视频监控预警社会应用-->
<div>126</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped>
</style>
src/views/spjkyjzzyy/index.vue 0 → 100644
<template>
<!--视频监控预警综治应用-->
<div>125</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped>
</style>
src/views/tjstzxt/index.vue 0 → 100644
<template>
<!--统计视图子系统-->
<div id="tjstzxt">
<div>124</div>
</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped>
</style>
src/views/wssqzxt/index.vue 0 → 100644
<template>
<!--网上社区子系统-->
<div>123</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped>
</style>
src/views/ywxtddzxt/index.vue 0 → 100644
<template>
<!--业务协同调度子系统-->
<div>121</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped>
</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