修改调整

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
   }
 }