Skip to content

F
founder_vue
Commit 2333924e by chenqiang
Options

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

parent a4484f34
Showing with 246 additions and 111 deletions
src/router/index.js
import Vue from "vue"; import Vue from "vue";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import store from "../store"; // import store from "../store";
import { getToken } from "../utils/auth"; // import { getToken } from "../utils/auth";
import { Message } from "element-ui"; // import { Message } from "element-ui";
import indexRoutes from "./modules/index"; import indexRoutes from "./modules/index";
const originalPush = VueRouter.prototype.push; const originalPush = VueRouter.prototype.push;
......
src/router/modules/index.js
export default [ export default [
{ {
path: '/', path: '/',
redirect: '/login' redirect: '/home'
}, },
{ {
path: "/login", path: '/login',
name: "Login", name: 'Login',
meta: { meta: {
title: "登录", title: '登录',
auth: "5" auth: '5'
}, },
component: () => import("@/views/login.vue") component: () => import('@/views/login.vue')
}, },
{ {
path: "/Home", path: '/home',
name: "Home", name: 'home',
meta: { meta: {
title: "工作桌面", title: '首页',
auth: "5" 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')
}]
} }
] ]
\ No newline at end of file
src/views/Home.vue
<template> <template>
<div class="home"> <div class="home">
<img :src="captcha.img ? 'captcha.img' : defaultGoodsImage" /> <el-container>
<div class="demo" @click="toBar">跳转</div> <el-header>
<el-select v-model="value" placeholder="请选择"> <div class="home_head">
<el-option <img class="home_head_img" src="@/assets/img/logo_zjw.png" alt="">
v-for="item in options" <span class="home_head_title">山南市社会治安综合治理平台</span>
:key="item.value" </div>
:label="item.label" </el-header>
:value="item.value" <el-container>
> <el-aside width="220px">
</el-option> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
</el-select> <el-radio-button :label="false">展开</el-radio-button>
<div class="demo" @click="toLogin">跳转</div> <el-radio-button :label="true">收起</el-radio-button>
<el-tabs v-model="activeName" @tab-click="handleClick"> </el-radio-group>
<el-tab-pane label="用户管理" name="first" v-if="userAuth < 2" <el-menu default-active="/spjkyjzzyy"
>用户管理</el-tab-pane router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
> :collapse="isCollapse">
<el-tab-pane label="配置管理" name="second" v-if="userAuth < 1" <el-menu-item index="/spjkyjzzyy">
>配置管理</el-tab-pane <i class="el-icon-location"></i>
> <span slot="title">视频监控预警综治应用</span>
<el-tab-pane label="角色管理" name="third" v-if="userAuth < 5" </el-menu-item>
>角色管理</el-tab-pane <el-menu-item index="/spjkyjshyy">
> <i class="el-icon-menu"></i>
<el-tab-pane label="定时任务补偿" name="fourth" v-if="userAuth < 6" <span slot="title">视频监控预警社会应用</span>
>定时任务补偿</el-tab-pane </el-menu-item>
> <el-menu-item index="/ywxtddzxt">
</el-tabs> <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> </div>
</template> </template>
<script> <script>
import { Home, test, test1 } from "@/api/home.js"; import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
export default { export default {
name: "Home", name: 'home',
data() { data() {
return { return {
tokeb: "", isCollapse: true
captcha: { }
id: "",
img: ""
},
options: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}
],
value: "",
activeName: ""
};
}, },
created() { created() {
this.getHome();
this.getH();
this.getT();
}, },
computed: { computed: {
...mapGetters(["defaultGoodsImage", "userAuth"]) ...mapGetters(['defaultGoodsImage', 'userAuth'])
}, },
methods: { methods: {
getHome() { handleOpen(key, keyPath) {
Home({ debugger
objectValue: "粤sty989" console.log(key, keyPath)
}).then(res => {
console.log(res);
});
},
getH() {
test({
objectValue: "粤sty989"
}).then(res => {
console.log(res);
});
},
getT() {
test1({
zjhm: 412721197608203413
}).then(res => {
console.log(res);
});
}, },
toBar() { handleClose(key, keyPath) {
this.$router.push("/asdw"); console.log(key, keyPath)
}, },
toLogin() { toLogin() {
this.$router.push("/Login"); this.$router.push('/Login')
},
handleClick(tab, event) {
console.log(tab, event);
} }
} }
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.demo { .home {
width: 100px; .el-header {
height: 100px; padding: 0;
background: $base-color; }
} .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> </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