Skip to content

B
bigsys
Commit 99b21daa authored by fangzhipeng's avatar fangzhipeng
Browse files
Options

提交vue管理平台代码

parent b02cbf29
Hide whitespace changes
Inline Side-by-side
Showing with 698 additions and 2 deletions
bigsys-auth/bigsys-auth-project/vue/index.html
View file @ 99b21daa
......@@ -8,6 +8,9 @@
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
......
bigsys-auth/bigsys-auth-project/vue/src/api/Sidebar.js 0 → 100644
View file @ 99b21daa
import menus from '../mock/menus'
export function getMenus () {
return new Promise(function (resolve, reject) {
var data = menus
resolve(data)
})
}
bigsys-auth/bigsys-auth-project/vue/src/mock/menus.js 0 → 100644
View file @ 99b21daa
export default [
{
name: 'aa',
hasSub: true,
menus: [
{
name: 'bb',
link: '/index',
hasSub: false
}
]
},
{
name: 'aa',
link: '/',
hasSub: false
},
{
name: 'aa',
link: '/',
hasSub: false
},
{
name: '系统管理',
link: '/',
hasSub: true,
menus: [
{
name: '权限管理',
link: '/auth/index',
hasSub: false
},
{
name: '用户管理',
link: '/user/index',
hasSub: false
}
]
}
]
bigsys-auth/bigsys-auth-project/vue/src/mock/table.js 0 → 100644
View file @ 99b21daa
export var thead = [{
prop: 'date',
label: '日期',
width: '180'
}, {
prop: 'name',
label: '名称',
width: '180'
}, {
prop: 'address',
label: '地址'
}]
export var inittdata = [{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
bigsys-auth/bigsys-auth-project/vue/src/router/index.js
View file @ 99b21daa
......@@ -7,6 +7,8 @@ Vue.use(Router)
/* layout */
import Layout from '../views/layout/Layout'
import Login from '../views/Login'
import MyTable from '../views/components/MyTable'
import MyTableWithFilter from '../views/components/MyTableWithFilter'
/**
* icon : the icon show in the sidebar
......@@ -17,11 +19,28 @@ import Login from '../views/Login'
**/
export const constantRouterMap = [
{
path: '/main',
path: '/auth',
component: Layout,
name: '主页'
name: '用户管理',
children: [
{path: 'index', component: MyTableWithFilter, name: '主页1'}
]
}, {
path: '/user',
component: Layout,
name: '权限',
children: [
{path: 'index', component: MyTable, name: '主页2'}
]
}, {
path: '/',
component: Layout,
name: '主页',
children: [
{path: 'index', component: MyTable, name: '主页3'}
]
}, {
path: '/login',
component: Login,
name: '登录'
}
......
bigsys-auth/bigsys-auth-project/vue/src/store/getter.js 0 → 100644
View file @ 99b21daa
const getters = {
menus: state => state.sidebar.menus
}
export default getters
bigsys-auth/bigsys-auth-project/vue/src/store/index.js 0 → 100644
View file @ 99b21daa
import Vue from 'vue'
import Vuex from 'vuex'
import sidebar from './modules/sidebar'
import getters from './getter'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
sidebar
},
getters
})
export default store
bigsys-auth/bigsys-auth-project/vue/src/store/modules/sidebar.js 0 → 100644
View file @ 99b21daa
import {getMenus} from '../../api/Sidebar'
const sidebar = {
state: {
menus: []
},
mutations: {
SET_MENUS (state, data) {
state.menus = data
}
},
actions: {
GET_MENUS ({ commit }) {
getMenus().then((res) => {
commit('SET_MENUS', res)
})
},
TEST ({ commit }, data) {
debugger
console.log(data)
return new Promise(function (resolve, reject) {
// resolve()
reject()
})
}
}
}
export default sidebar
bigsys-auth/bigsys-auth-project/vue/src/views/Login.vue 0 → 100644
View file @ 99b21daa
<template>
<div class="login-container">
<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
</el-form-item>
<el-form-item prop="password">
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码" />
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
<div class='tips'>账号:admin 密码随便填</div>
<div class='tips'>账号:editor 密码随便填</div>
<el-button class='thirdparty-button' type="primary" @click='showDialog=true'>打开第三方登录</el-button>
</el-form>
<el-dialog title="第三方验证" :visible.sync="showDialog">
本地不能模拟，请结合自己业务进行模拟！！！<br/><br/><br/>
邮箱登录成功,请选择第三方验证<br/>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
name: 'login',
data () {
return {
loginForm: {
username: 'admin',
password: '1111111'
},
loginRules: {
},
pwdType: 'password',
loading: false,
showDialog: false
}
},
methods: {
showPwd () {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
handleLogin () {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
// this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
// this.loading = false
// this.$router.push({ path: '/' })
// // this.showDialog = true
// }).catch(() => {
// this.loading = false
// })
this.$router.push({ path: '/' })
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style>
.login-container {
background: #2d3a4b;
height: 100vh;
}
input {
background: transparent !important;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: #eee !important;
height: 47px !important;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-webkit-text-fill-color: #fff !important;
}
.el-input {
display: inline-block;
height: 47px;
width: 100%;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
}
.login-form {
position: absolute;
left: 0;
right: 0;
width: 400px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
box-sizing: border-box;
}
.title {
font-size: 26px;
font-weight: 400;
color: #eee;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: #889aa4;
cursor: pointer;
}
.thirdparty-button{
position: absolute;
right: 35px;
bottom: 28px;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: #889aa4;
vertical-align: middle;
width: 30px;
display: inline-block;
}
</style>
bigsys-auth/bigsys-auth-project/vue/src/views/components/MyTable.vue 0 → 100644
View file @ 99b21daa
<template>
<el-table
:data="tdata"
stripe
style="width: 100%">
<el-table-column v-for="(item, index) in thead"
:prop="item.prop"
:label="item.label"
:width="item.width"
:key="index">
</el-table-column>
</el-table>
</template>
<script>
export default {
props: [
'thead',
'tdata'
]
}
</script>
bigsys-auth/bigsys-auth-project/vue/src/views/components/MyTableWithFilter.vue 0 → 100644
View file @ 99b21daa
<template>
<div>
<div>
<div class="tb-filter">
<el-input placeholder="用户名" class="my-input" v-model="username">
<template slot="prepend">用户名:</template>
</el-input>
<el-input placeholder="电话" class="my-input" v-model="username">
<template slot="prepend">电话:</template>
</el-input>
<el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
</div>
</div>
<my-table :thead="thead" :tdata="tdata"></my-table>
<el-dialog title="新增用户" :visible.sync="dialogFormVisible">
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
<el-form-item label="用户名">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="formLabelAlign.phone"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="formLabelAlign.password" type="password"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<style>
.tb-filter {
margin-bottom: 20px;
}
.my-input {
width: 200px;
}
</style>
<script>
import MyTable from './MyTable'
import {thead, inittdata} from '../../mock/table'
export default {
components: {
MyTable
},
data () {
return {
username: 'fds',
tdata: inittdata,
dialogFormVisible: false,
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
}
}
},
computed: {
thead () {
return thead
}
},
watch: {
username () {
var filterdata = []
if (!this.username) {
this.tdata = inittdata
return
}
inittdata.forEach((data, index) => {
if (data.name.indexOf(this.username) !== -1) {
filterdata.push(data)
}
})
this.tdata = filterdata
}
},
methods: {
addUser: function () {
this.dialogFormVisible = false
this.$store.dispatch('TEST', this.formLabelAlign).then(() => {
alert('新增成功')
}).catch(() => {
alert('新增失败')
})
}
}
}
</script>
bigsys-auth/bigsys-auth-project/vue/src/views/components/User.vue 0 → 100644
View file @ 99b21daa
<template>
<div>
<div>
<div class="tb-filter">
<el-input placeholder="用户名" class="my-input" v-model="username">
<template slot="prepend">用户名:</template>
</el-input>
<el-input placeholder="电话" class="my-input" v-model="username">
<template slot="prepend">电话:</template>
</el-input>
<el-button type="primary" @click="addUser()">新增</el-button>
</div>
</div>
<my-table :thead="thead" :tdata="tdata"></my-table>
</div>
</template>
<style>
.tb-filter {
margin-bottom: 20px;
}
.my-input {
width: 200px;
}
</style>
<script>
import MyTable from './MyTable'
export default {
components: {
MyTable
},
data () {
return {
username: '测试',
thead: [
{
prop: 'date',
label: '日期',
width: '180'
}, {
prop: 'name',
label: '名称',
width: '180'
}, {
prop: 'address',
label: '地址'
}
],
tdata: [{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
addUser: function () {
alert('添加一个用户')
}
}
}
</script>
bigsys-auth/bigsys-auth-project/vue/src/views/layout/AppMain.vue 0 → 100644
View file @ 99b21daa
<template>
<section class="app-main" style="min-height: 100%; padding: 70px 10px 0 10px;">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
}
}
</script>
bigsys-auth/bigsys-auth-project/vue/src/views/layout/Layout.vue 0 → 100644
View file @ 99b21daa
<template>
<div class="app-wrapper">
<sidebar class="sidebar-container"></sidebar>
<div class="main-container" style="background: deepskyblue; width: 100%; height: 1000px;">
<navbar></navbar>
<app-main></app-main>
</div>
</div>
</template>
<style>
</style>
<script>
import Sidebar from './Sidebar'
import Navbar from './Navbar'
import AppMain from './AppMain'
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
computed: {
sidebar () {
return this.$store.state.app.sidebar
}
}
}
</script>
<style>
.main-container {
padding-left: 180px;
box-sizing: border-box;
}
</style>
bigsys-auth/bigsys-auth-project/vue/src/views/layout/Levelbar.vue 0 → 100644
View file @ 99b21daa
<template>
<el-breadcrumb class="app-levelbar" separator="/">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.name}}</span>
<router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
created() {
this.getBreadcrumb()
},
data() {
return {
levelList: null
}
},
methods: {
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name)
const first = matched[0]
if (first && (first.name !== '首页' || first.path !== '')) {
matched = [{ name: '首页', path: '/' }].concat(matched)
}
this.levelList = matched
}
},
watch: {
$route() {
this.getBreadcrumb()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-levelbar.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 10px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
</style>
bigsys-auth/bigsys-auth-project/vue/src/views/layout/Navbar.vue 0 → 100644
View file @ 99b21daa
<template>
<el-menu :default-active="activeIndex2" class="el-menu-demo navbar" style="position: fixed; left: 180px; right: 0px; z-index: 10000;" mode="horizontal" @select="handleSelect">
<el-submenu index="1" style="float: right;">
<template slot="title">方志鹏</template>
<router-link to="/login"><el-menu-item index="2-1">退出</el-menu-item></router-link>
<el-menu-item index="2-2" @click="editPwd">修改密码</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data () {
return {
activeIndex2: '1'
}
},
methods: {
handleSelect (key, keyPath) {
console.log(key, keyPath)
},
editPwd () {
// this.$store.dispatch('GET_MENUS')
}
}
}
</script>
bigsys-auth/bigsys-auth-project/vue/src/views/layout/Sidebar.vue 0 → 100644
View file @ 99b21daa
<template>
<el-menu default-active="2" style="" class="el-menu-vertical-demo nav-wrapper" @open="handleOpen" @close="handleClose" theme="dark">
<sidebar-item :menus="menus" :parentIndex="''"></sidebar-item>
</el-menu>
</template>
<style>
.nav-wrapper {
transition: width 0.28s ease-out;
width: 180px;height: 100%;
position: fixed;top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow-y: auto;
}
.nav-wrapper::-webkit-scrollbar{
display: none;
}
</style>
<script>
import SidebarItem from './SidebarItem'
import { mapGetters } from 'vuex'
export default {
components: {
SidebarItem
},
created () {
this.$store.dispatch('GET_MENUS')
},
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
}
},
computed: {
...mapGetters(['menus'])
}
}
</script>
bigsys-auth/bigsys-auth-project/vue/src/views/layout/SidebarItem.vue 0 → 100644
View file @ 99b21daa
<template>
<div>
<template v-for="(item, index) in menus">
<el-submenu v-if="item.hasSub" :index="index.toString()">
<template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
<sidebar-item :menus="item.menus" :parentIndex="parentIndex? parentString + '-' + index.toString() : index.toString()"></sidebar-item>
</el-submenu>
<router-link v-if="!item.hasSub" class="pan-btn yellow-btn" :to="item.link"><el-menu-item :index="parentIndex? parentIndex + '-' + index.toString() : index.toString()"><i class="el-icon-menu"></i>{{item.name}}</el-menu-item></router-link>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
menus: {
type: Array
},
parentIndex: {
type: String
}
}
}
</script>
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