yovinchen/guigu-oa-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Pan
2017-08-30 17:42:06 +08:00
parent f6e8859916
commit b44c7384dc
57 changed files with 680 additions and 824 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/dashboard/index.vue
View File

@@ -6,19 +6,19 @@
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'dashboard',
computed: {
...mapGetters([
'name',
'roles'
])
}
}
import { mapGetters } from 'vuex'
export default {
name: 'dashboard',
computed: {
...mapGetters([
'name',
'roles'
])
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;

24
src/views/layout/AppMain.vue
View File

@@ -1,18 +1,18 @@
<template>
<section class="app-main">
<transition name="fade" mode="out-in">
<router-view :key="key"></router-view>
</transition>
</section>
<section class="app-main">
<transition name="fade" mode="out-in">
<router-view :key="key"></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
}
}
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
}
}
}
</script>

45
src/views/layout/Layout.vue
View File

@@ -1,31 +1,32 @@
<template>
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
<div class="sidebar-wrapper">
<sidebar class="sidebar-container"></sidebar>
</div>
<div class="main-container">
<navbar></navbar>
<app-main></app-main>
</div>
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
<div class="sidebar-wrapper">
<sidebar class="sidebar-container"></sidebar>
</div>
<div class="main-container">
<navbar></navbar>
<app-main></app-main>
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from '@/views/layout';
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
computed: {
sidebar() {
return this.$store.state.app.sidebar;
}
}
<script>
import { Navbar, Sidebar, AppMain } from '@/views/layout'
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
computed: {
sidebar() {
return this.$store.state.app.sidebar
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

70
src/views/layout/Levelbar.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-breadcrumb class="app-levelbar" separator="/">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
<router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
</el-breadcrumb-item>
@@ -8,42 +8,42 @@
</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();
}
}
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;
}
}
.app-levelbar.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 10px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
</style>

86
src/views/layout/Navbar.vue
View File

@@ -1,51 +1,51 @@
<template>
<el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<levelbar></levelbar>
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
<i class="el-icon-caret-bottom"></i>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class='inlineBlock' to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided><span @click="logout" style="display:block;">LogOut</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu>
<el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<levelbar></levelbar>
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
<i class="el-icon-caret-bottom"></i>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class='inlineBlock' to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided><span @click="logout" style="display:block;">LogOut</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex';
import Levelbar from './Levelbar';
import Hamburger from '@/components/Hamburger';
import { mapGetters } from 'vuex'
import Levelbar from './Levelbar'
import Hamburger from '@/components/Hamburger'
export default {
components: {
Levelbar,
Hamburger
},
computed: {
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
}
}
export default {
components: {
Levelbar,
Hamburger
},
computed: {
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@@ -95,5 +95,3 @@
}
</style>

29
src/views/layout/Sidebar.vue
View File

@@ -1,25 +1,24 @@
<template>
<el-menu mode="vertical" theme="dark" :default-active="$route.path">
<sidebar-item :routes='permission_routers'></sidebar-item>
</el-menu>
<el-menu mode="vertical" theme="dark" :default-active="$route.path">
<sidebar-item :routes='permission_routers'></sidebar-item>
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex';
import SidebarItem from './SidebarItem';
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers'
])
}
}
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers'
])
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-menu {
min-height: 100%;
min-height: 100%;
}
</style>

70
src/views/layout/SidebarItem.vue
View File

@@ -1,46 +1,46 @@
<template>
<div>
<template v-for="item in routes">
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
<el-menu-item :index="item.path+'/'+item.children[0].path">
<icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
</el-menu-item>
</router-link>
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
<template slot="title">
<icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
</template>
<template v-for="child in item.children" v-if='!child.hidden'>
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
<router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
<el-menu-item :index="item.path+'/'+child.path">
{{child.name}}
</el-menu-item>
</router-link>
</template>
</el-submenu>
<div>
<template v-for="item in routes">
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
<el-menu-item :index="item.path+'/'+item.children[0].path">
<icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
</el-menu-item>
</router-link>
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
<template slot="title">
<icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
</template>
</div>
<template v-for="child in item.children" v-if='!child.hidden'>
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
<router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
<el-menu-item :index="item.path+'/'+child.path">
{{child.name}}
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
}
}
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.svg-icon {
margin-right: 10px;
}
.hideSidebar .menu-indent{
display: block;
text-indent: 10px;
}
.svg-icon {
margin-right: 10px;
}
.hideSidebar .menu-indent{
display: block;
text-indent: 10px;
}
</style>

8
src/views/layout/index.js
View File

@@ -1,7 +1,7 @@
export { default as Navbar } from './Navbar';
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar';
export { default as Sidebar } from './Sidebar'
export { default as Levelbar } from './Levelbar';
export { default as Levelbar } from './Levelbar'
export { default as AppMain } from './AppMain';
export { default as AppMain } from './AppMain'

110
src/views/login/index.vue
View File

@@ -5,14 +5,14 @@
<h3 class="title">系统登录</h3>
<el-form-item prop="email">
<span class="svg-container">
<icon-svg icon-class="jiedianyoujian"></icon-svg>
</span>
<icon-svg icon-class="email"></icon-svg>
</span>
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<icon-svg icon-class="mima" ></icon-svg>
</span>
<icon-svg icon-class="mima" ></icon-svg>
</span>
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码"></el-input>
</el-form-item>
@@ -28,60 +28,60 @@
</template>
<script>
import { isWscnEmail } from '@/utils/validate';
import { isWscnEmail } from '@/utils/validate'
export default {
name: 'login',
data() {
const validateEmail = (rule, value, callback) => {
if (!isWscnEmail(value)) {
callback(new Error('请输入正确的合法邮箱'));
} else {
callback();
}
};
const validatePass = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能小于6位'));
} else {
callback();
}
};
return {
loginForm: {
email: 'admin@wallstreetcn.com',
password: '111111'
},
loginRules: {
email: [
{ required: true, trigger: 'blur', validator: validateEmail }
],
password: [
{ required: true, trigger: 'blur', validator: validatePass }
]
},
loading: false
}
},
methods: {
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false;
this.$router.push({ path: '/' });
}).catch(() => {
this.loading = false;
});
} else {
console.log('error submit!!');
return false;
}
});
}
export default {
name: 'login',
data() {
const validateEmail = (rule, value, callback) => {
if (!isWscnEmail(value)) {
callback(new Error('请输入正确的合法邮箱'))
} else {
callback()
}
}
const validatePass = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能小于6位'))
} else {
callback()
}
}
return {
loginForm: {
email: 'admin@wallstreetcn.com',
password: '111111'
},
loginRules: {
email: [
{ required: true, trigger: 'blur', validator: validateEmail }
],
password: [
{ required: true, trigger: 'blur', validator: validatePass }
]
},
loading: false
}
},
methods: {
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">

128
src/views/page/form.vue
View File

@@ -1,72 +1,72 @@
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<div class="app-container">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!')
}
}
}
</script>

40
src/views/table/index.vue
View File

@@ -33,26 +33,26 @@
</template>
<script>
import { getList } from '@/api/table';
import { getList } from '@/api/table'
export default {
data() {
return {
list: null,
listLoading: true
}
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.listLoading = true;
getList(this.listQuery).then(response => {
this.list = response.data.items;
this.listLoading = false;
})
}
export default {
data() {
return {
list: null,
listLoading: true
}
};
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList(this.listQuery).then(response => {
this.list = response.data.items
this.listLoading = false
})
}
}
}
</script>