Skip to content

C
common-templete
Commit 5b4d8932 by tangqy
Options

修改调整

parent 4605a133
Showing with 302 additions and 54 deletions
src/App.vue
......@@ -10,9 +10,11 @@ export default {
}
</script>
<style>
</style>
<style lang="scss">
@import "~@/assets/font-awesome/scss/font-awesome.scss";
/** 重置element-ui theme **/
$--color-primary: #337ab7 !default;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
</style>
src/assets/styles/common.css
......@@ -53,3 +53,12 @@
a,button {
cursor: pointer;
}
.left-l {
left: 70px;
}
.left-ll {
left: 240px;
}
src/components/Header/index.vue
<template lang="pug">
el-container.header-container
el-container.header-container(:class="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}")
nav.header-nav.clear
ul.clearfix
li.nav-item.fl('@click'="handleShowMenus('show',$event)")
......@@ -9,12 +9,31 @@
a.link
i.fa.fa-th-large
li.nav-item.fl
a.link
el-popover(
placement="bottom-end",
:offset="100",
:width="300",
popper-class="historys-popper",
trigger="click")
.historys-body
.history-list--item.clearfix(v-for='historyItem in historys ')
.name.fl {{historyItem.name}}
.time.fr {{historyItem.time}}
a.link(slot="reference")
i.fa.fa-clock-o
.history-links-preview.fl
.history-item.fl('v-for'="(history,index) in historysLimit",':key'="index") {{history.name}}
li.nav-item.fr
a.link
el-popover(
placement="bottom-end",
:offset="100",
:width="150",
popper-class="helpers-popper",
trigger="click")
.opration-body
.opration-list--item.clearfix(v-for='opration in oprations ')
.name.fl(@click="gotoPage(opration.link)") {{opration.name}}
a.link(slot="reference")
img.user-img(':src'="user.headerImage")
span.user-name {{user.name}}
i.fa.fa-angle-down
......@@ -22,7 +41,17 @@
a.link
i.fa.fa-envelope-o
li.nav-item.fr
a.link
el-popover(
placement="bottom-end",
:offset="100",
:width="150",
popper-class="helpers-popper",
trigger="click")
.helpers-body
.helper-list--item.clearfix(v-for='help in helpers ')
i.fa.fl.helper-item--icon(:class="help.icon",:style="help.style",style={width:'22px',height:'22px'})
.name.fl {{help.name}}
a.link(slot="reference")
i.fa.fa-comments
el-row.meuns-nav(v-show="showMenusPanel")
el-menu(@click="toggleMenus($event)")&attributes({
......@@ -60,7 +89,6 @@
position fixed
right 0
top 0
left 70px
z-index 99
box-shadow 0 1px 1px rgba(0,0,0,.2)
.nav-item
......@@ -188,15 +216,52 @@
&:hover,
&:focus
background none
.history-list--item,
.helper-list--item,
.opration-list--item
display flex
justify-content flex-start
align-items center
box-sizing border-box
font-size: 12px
color: #5A738E
width: 100%
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
white-space: nowrap;
cursor pointer
.helper-list--item
padding 5px 0
.helper-item--icon
display: flex;
justify-content center
align-items center
padding: 5px;
border-radius: 5px;
margin-right: 5px;
</style>
<script>
import { mapGetters } from 'vuex'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'headerNav',
data () {
return {
showMenusPanel: false,
showEditMenusPanel: false,
currentSelectIndex: -1,
oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
helpers: [{
name: '点击联系客服',
icon: 'fa-qq',
style: {background: '#ff9293', color: '#fff'}
}, {name: '使用帮助',
style: {background: '#40b0ff', color: '#fff'},
icon: 'fa-info'},
{name: '舞象客服',
style: {background: '#e0e0e0', color: '#000'},
icon: 'fa-user-circle-o'}],
user: {
headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
name: '测试商户组'
......@@ -225,9 +290,17 @@ export default {
return [...historys]
}
},
...mapGetters({menus: 'getMenus'})
...mapGetters({
menus: 'getMenus',
editMenus: 'getEditMenus',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo'
})
},
methods: {
...mapActions([
'showEditMenus',
'hideEditMenus'
]),
clickItem () {
console.log(this)
},
......@@ -239,13 +312,24 @@ export default {
toggleMenus (...args) {
console.log(args)
},
handleEditMenus () {},
handleEditMenus () {
if (!this.editMenus) {
this.showEditMenus()
} else {
this.hideEditMenus()
}
},
setActiveStyle (item, ev) {
this.currentSelectIndex = ev.index
console.log(item)
},
formatPathString (...args) {
return args.join('-')
},
gotoPage (link) {
if (link) {
location.href = link
}
}
}
}
......
src/components/Sidebar/index.vue
......@@ -37,7 +37,7 @@
img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters, mapActions } from 'vuex'
import sidebarItem from '../sidebarItem'
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
......@@ -103,6 +103,7 @@ export default {
} else {
this.unfold = args[0]
}
this.setSidebarUnfold(this.unfold)
},
hiddenUnfoldBtn () {
this.unfoldBtn = false
......@@ -115,7 +116,8 @@ export default {
},
getCurrentMenus (index) {
return this.menus[index]
}
},
...mapActions(['setSidebarUnfold'])
}
}
</script>
......
src/components/menus/edit.vue
<template>
<div class="menus-edit--control">
<div class="content">
<div class="dropdown-menu quick-links-panel in">
<div class="menus-edit--control" v-show="editMenus">
<div class="content" >
<div class="dropdown-menu quick-links-panel" >
<!-- 快捷入口 -->
<div class="clearfix quick-links-container">
<a class="fl"><i class="fa fa-thumb-tack"></i></a>
<div class="quick-links inline"></div>
<div class="quick-items fl">
<a class="quick-item" v-for="(item, index) in quickItems" :key="index"> {{item.name}} </a>
</div>
<span class="tips inline">Tips:快速触达，最多10个</span>
<a class="fr" @cilck="showEditMenus()" ><i class="fa fa-times"></i></a>
<a class="fr" @cilck="hideEditMenus()" ><i class="fa fa-ellipsis-h"></i></a>
<a class="fr" @click="hideContentBox()" ><i class="fa fa-times"></i></a>
<a class="fr" @click="showEditMenus()" ><i class="fa fa-ellipsis-h"></i></a>
</div>
</div>
</div>
<div class="warpper">
<el-dialog :visible.sync="dialogFormVisible" width="100%" center :show-close="false" :top="'4vh'">
<menusTemplete :select-list="selectMenus" @choose="chooseMenus" />
<div slot="footer" class="dialog-footer">
<el-button @click="hideEditMenus()">取 消</el-button>
<el-button type="primary" @click="sure()">确 定</el-button>
<span class="tip">已选：{{selectList.length}}个快捷菜单，最多可选10个。</span>
</div>
<div class="warpper" v-show="false">
<menusTemplete />
</el-dialog>
</div>
</div>
</template>
......@@ -47,31 +56,127 @@
opacity: 1;
}
.menus-edit--control .warpper {
position: fixed;
top: 58px;
bottom: 0;
width: 100%;
z-index: 9;
background: rgba(0,0,0,.5);
.menus-edit--control .el-dialog__header {
display: none;
}
.menus-edit--control .quick-item {
margin: 0 15px 0 0;
font-size: 14px;
line-height: 42px
}
.warpper .el-dialog--center .el-dialog__body {
height: 600px;
overflow: auto;
}
.menus-edit--control .btns {
bottom: 20px;
.warpper .el-dialog__body .menus-templete {
padding-bottom: 0;
}
</style>
<style scoped>
.tip {
margin-left: 10px;
font-size: 12px;
color: #aaa;
}
</style>
<script>
import { mapActions, mapGetters } from 'vuex'
import menusTemplete from './menusTemplete'
export default {
components: {
menusTemplete
},
data () {
return {
dialogFormVisible: false,
selectList: [],
tempSelectList: [],
quickItems: [],
tempQuickItems: [],
limitLength: 10,
isSure: false
}
},
created () {
let quickItemsInfo = localStorage.getItem('_quickItemsInfo')
if (quickItemsInfo) {
quickItemsInfo = JSON.parse(quickItemsInfo)
this.quickItems = quickItemsInfo.quickItems
this.selectList = quickItemsInfo.selectList
}
},
props: ['showControl'],
computed: {
selectMenus () {
return [...this.tempSelectList, ...this.selectList]
},
...mapGetters({editMenus: 'getEditMenus'})
},
methods: {
...mapActions({
hideMenus: 'hideEditMenus'
}),
hideEditMenus () {
this.dialogFormVisible = false
this.tempSelectList = []
this.tempQuickItems = []
},
showEditMenus () {
this.isSure = false
this.dialogFormVisible = true
},
hideContentBox () {
this.hideMenus()
},
sure () {
this.quickItems = [...this.quickItems, ...this.tempQuickItems]
this.selectList = [...this.selectList, ...this.tempSelectList]
const quicksInfo = {quickItems: this.quickItems, selectList: this.selectList}
localStorage.setItem('_quickItemsInfo', JSON.stringify(quicksInfo))
this.hideEditMenus()
this.$message({
message: '快捷菜单设置成功',
type: 'success'
})
},
chooseMenus ({item, vNode}) {
const totalLength = this.tempQuickItems.length + this.quickItems.length
if (this.limitLength < totalLength) {
this.$message({
message: '最多选择十个快捷菜单',
type: 'warning'
})
return false
}
const index = vNode.index
const canAdd = this.tempSelectList.indexOf(index) === -1 && this.selectList.indexOf(index) === -1
if (canAdd) {
this.tempSelectList.push(index)
this.tempQuickItems.push(item)
} else {
let idx = this.tempSelectList.indexOf(index)
if (idx === -1) {
this.selectList.splice(idx, 1)
this.quickItems.slice(idx, 1)
} else {
idx = this.selectList.indexOf(index)
this.tempSelectList.splice(idx, 1)
this.tempQuickItems.slice(idx, 1)
}
}
},
handlerLength (length) {
if (this.limitLength < length) {
this.$message({
message: '最多选择十个快捷菜单',
type: 'warning'
})
return false
}
}
}
}
......
src/components/menus/menusTemplete.vue
......@@ -27,19 +27,16 @@
'v-for':'(i,inx) in it.children',
':index':"formatPathString(index,idx,inx)",
':key':"inx",
'@click':'setActiveStyle(i,$event)',
':class':"{ active:formatPathString(index,idx,inx) === currentSelectIndex}"
'@click':'selectHandle(i,$event)',
':class':"{ active: selectList.indexOf(formatPathString(index,idx,inx)) > -1 }"
}) {{i.name}}
el-row.fixed-footer
el-button(round) 取消
el-button(type="primary", round) 确定
span(style={'margin-left':'10px'}) 已选：{{num}}个快捷菜单，最多可选10个
</template>
<style lang="stylus">
.menus-templete
overflow auto
padding-bottom 80px
height 700px
min-width 1280px
.el-menu--inline
display block
.menus-body
......@@ -51,6 +48,8 @@
&:before,
&:after
display none
.el-menu
margin-bottom 0
.menus-tags
.el-menu-item
background #f5f5f5
......@@ -139,13 +138,21 @@
</style>
<script>
export default {
name: 'headerNav',
name: 'menusTemplete',
data () {
return {
currentSelectIndex: -1,
num: 3
}
},
props: {
selectList: {
type: Array,
default () {
return []
}
}
},
filters: {
limit (array, num) {
if (num) {
......@@ -159,7 +166,7 @@ export default {
},
computed: {
menus () {
const names = ['会员中心', '营销中心', '销售中心', '渠道中心', '系统设置', '平台管理', '智能营销', '分析师']
const names = ['会员中心', '营销中心', '销售中心', '渠道中心', '系统设置', '平台管理'] // '智能营销', '分析师'
return this.$store.state.global.menus.filter(item => names.indexOf(item.name) > -1)
}
},
......@@ -176,8 +183,9 @@ export default {
console.log(args)
},
handleEditMenus () {},
setActiveStyle (item, ev) {
this.currentSelectIndex = ev.index
selectHandle (item, vNode, ...args) {
this.currentSelectIndex = args.join('-')
this.$emit('choose', {item, vNode})
},
formatPathString (...args) {
return args.join('-')
......
src/main.js
......@@ -6,7 +6,7 @@ import router from './router'
import ElementUI from 'element-ui'
import './assets/styles/reset.css'
import './assets/styles/common.css'
import 'element-ui/lib/theme-chalk/index.css'
// import 'element-ui/lib/theme-chalk/index.css'
import qs from 'qs'
import store from './store'
import Axios from 'axios'
......@@ -15,6 +15,8 @@ import * as filters from './filters'
import echarts from 'echarts'
// Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm'
import * as plugins from './plugin'
Axios.interceptors.request.use(
config => {
if (config.method === 'post') {
......@@ -29,7 +31,7 @@ Axios.interceptors.request.use(
)
Vue.use(ElementUI)
// Vue.use(http)
Vue.use(plugins)
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
......@@ -44,7 +46,7 @@ Object.keys(filters).forEach(key => {
})
/* eslint-disable no-new */
new Vue({
window.project = new Vue({
el: '#app',
router,
store,
......
src/pages/home/index.vue
......@@ -22,6 +22,11 @@ import HomeSidebar from 'components/Sidebar'
import HomeHeader from 'components/Header'
import menusEdit from 'components/menus/edit'
export default {
data () {
return {
}
},
components: {
HomeSidebar,
HomeHeader,
......
src/plugin/index.js
import momentPlugin from './moment'
import utils from './underscore'
import http from '../http'
export {
momentPlugin,
utils,
http
}
import moment from './moment'
import underscore from './underscore'
export const momentPlugin = moment
export const underscorePlugin = underscore
src/store/global/index.js
......@@ -3,8 +3,19 @@ import { globalApi } from '@/api'
// 获取菜单数据
const GET_MEUMS = 'GET_MEUMS'
// 显示设置快捷菜单
const SHOW_EDIT_MENUS = 'SHOW_EDIT_MENUS'
// 隐藏设置快捷菜单
const HIDE_EDIT_MENUS = 'HIDE_EDIT_MENUS'
// 边侧菜单
const SIDEBAR_UNFOLD = 'SIDEBAR_UNFOLD'
const state = {
menus: []
menus: [],
editMenus: false,
sidebarUnfold: false // false:边侧菜单收缩, true:边侧菜单展开
}
const actions = {
......@@ -14,18 +25,42 @@ const actions = {
let res = await globalApi.getMenus(parmas)
let menus = res.data.data
commit(GET_MEUMS, menus)
},
showEditMenus ({commit}) {
commit(SHOW_EDIT_MENUS, true)
},
hideEditMenus ({commit}) {
commit(HIDE_EDIT_MENUS, false)
},
setSidebarUnfold ({commit}, type) {
commit(SIDEBAR_UNFOLD, type)
}
}
const getters = {
getMenus (state) {
return state.menus
},
getEditMenus (state) {
return state.editMenus
},
getSidebarUnfoldInfo (state) {
return state.sidebarUnfold
}
}
const mutations = {
[GET_MEUMS] (state, menus) {
state.menus = menus
},
[SHOW_EDIT_MENUS] (state, status) {
state.editMenus = status
},
[HIDE_EDIT_MENUS] (state, status) {
state.editMenus = status
},
[SIDEBAR_UNFOLD] (state, type) {
state.sidebarUnfold = type
}
}
......
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