Skip to content

C
common-templete
Commit a07aa773 by 汤强勇
Options

调整

parent d64e62e0
Showing with 276 additions and 106 deletions
config/dev.env.js
......@@ -6,5 +6,5 @@ module.exports = merge(prodEnv, {
'NODE_ENV': "'development'",
'host': "'//localhost'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
'requestUrl': "'crm'"
})
config/prod.dev.env.js
module.exports = {
"host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
'requestUrl': "'crm'"
}
config/prod.prod.env.js
module.exports = {
"host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
'requestUrl': "'crm'"
}
config/prod.uat.env.js
module.exports = {
"host": "'//10.0.16.178:8080'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
'requestUrl': "'crm'"
}
package.json
......@@ -16,6 +16,7 @@
"dependencies": {
"animate.css": "^3.7.0",
"axios": "^0.18.0",
"cross-storage": "^1.0.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"jquery": "^3.3.1",
......
src/App.vue
<template>
<div id="app">
<div id="app" v-if="project">
<router-view />
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
name: 'App'
name: 'App',
created () {
this.getProjectInfo()
},
computed: {
...mapGetters({
menus: 'getMenus',
project: 'getProjectInfo'
})
},
methods:{
...mapActions([
'getProjectInfo'
])
}
}
</script>
......@@ -15,6 +31,6 @@ export default {
/** 重置element-ui theme **/
$--color-primary: #337ab7 !default;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
</style>
src/api/global/index.js
import { Http } from '@/http'
class Global extends Http {
getMenus (params) {
getMenus(params) {
return this.get('getMenus', params)
}
getProjectInfo() {
return this.get('securityManage/menuList!getStoreInfo.do')
}
}
export default new Global(true)
src/components/Header/index.vue
......@@ -34,8 +34,8 @@
.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}}
img.user-img(':src'="project.user_logo")
span.user-name {{project.StoreShortName}}
i.fa.fa-angle-down
li.nav-item.fr
a.link(@click="showMessage()")
......@@ -48,7 +48,7 @@
popper-class="helpers-popper",
trigger="click")
.helpers-body
.helper-list--item.clearfix(v-for='help in helpers ')
.helper-list--item.clearfix(v-for='help in helpers ',@click="handlerHelperClick(help)")
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")
......@@ -278,9 +278,12 @@
}
</style>
<script>
import {setCookie, getCookie} from '@/utils'
import { mapGetters, mapActions } from 'vuex'
import message from './message'
require('@/lib/slimscroll/slimscroll')
export default {
name: 'headerNav',
data () {
......@@ -288,22 +291,22 @@ export default {
showMenusPanel: false,
showEditMenusPanel: false,
showMessagePanelcontrol: null,
currentIndexPath: [1,2,0],
currentSelectIndex: -1,
oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
helpers: [{
name: '点击联系客服',
link:'http://wpa.qq.com/msgrd?v=3&uin=2844377940&site=qq&menu=yes',
icon: 'fa-qq',
style: {background: '#ff9293', color: '#fff'}
}, {name: '使用帮助',
link:'http://help.bigaka.com/',
style: {background: '#40b0ff', color: '#fff'},
icon: 'fa-info'},
{name: '舞象客服',
link:'http://help.bigaka.com/',
style: {background: '#e0e0e0', color: '#000'},
icon: 'fa-user-circle-o'}],
user: {
headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
name: '测试商户组'
},
historys: [{'name': '自动标签', 'index': '1,0,2', 'time': '2018-11-01 10:06:07'}, {'name': '快速查询', 'index': '1,0,0', 'time': '2018-10-31 17:17:09'}, {'name': '营销推送', 'index': '2,0,0', 'time': '2018-10-31 17:12:53'}, {'name': '会员圈选', 'index': '1,0,1', 'time': '2018-10-31 16:52:47'}, {'name': '概览', 'index': '0,0,0', 'time': '2018-10-31 13:31:59'}, {'name': '趋势', 'index': '0,1,0', 'time': '2018-10-29 15:52:31'}, {'name': '会员卡设置', 'index': '1,1,0', 'time': '2018-10-29 15:51:00'}, {'name': '生日营销(new)', 'index': '2,0,2', 'time': '2018-10-29 15:50:18'}]
}
},
......@@ -329,6 +332,7 @@ export default {
}
},
...mapGetters({
project: 'getProjectInfo',
menus: 'getMenus',
editMenus: 'getEditMenus',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo'
......@@ -338,41 +342,16 @@ export default {
message
},
mounted () {
this.$nextTick(() => {
this.initSlimscroll()
})
const index = getCookie('cur_menu_index')
const indexPath = index.split(',').reverse()
this.currentSelectIndex = indexPath[1]
},
methods: {
...mapActions([
'showEditMenus',
'hideEditMenus'
]),
initSlimscroll () {
$('.message-panel.el-notification').slimScroll({
width: '100%', // 可滚动区域宽度
height: '100%', // 可滚动区域高度
size: '10px', // 滚动条宽度，即组件宽度
color: '#000', // 滚动条颜色
position: 'right', // 组件位置：left/right
distance: '0px', // 组件与侧边之间的距离
start: 'top', // 默认滚动位置：top/bottom
opacity: 0.4, // 滚动条透明度
alwaysVisible: true, // 是否 始终显示组件
disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
railVisible: true, // 是否 显示轨道
railColor: '#333', // 轨道颜色
railOpacity: 0.2, // 轨道透明度
railDraggable: true, // 是否 滚动条可拖动
railClass: 'slimScrollRail', // 轨道div类名
barClass: 'slimScrollBar', // 滚动条div类名
wrapperClass: 'slimScrollDiv', // 外包div类名
allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
wheelStep: 20, // 滚轮滚动量
touchScrollStep: 200, // 滚动量当用户使用手势
borderRadius: '7px', // 滚动条圆角
railBorderRadius: '7px' // 轨道圆角
})
},
clickItem () {
console.log('this is header index %o', this)
},
......@@ -415,10 +394,16 @@ export default {
formatPathString (...args) {
return args.join('-')
},
handlerHelperClick (item) {
this.$router.push({
path: `/${item.link}`
})
},
gotoPage (link) {
if (link) {
location.href = link
}
this.$router.push({
path: `/${link}`
})
}
}
}
......
src/components/Header/message.vue
......@@ -22,7 +22,6 @@
<script>
import {Observable} from 'rxjs'
import {throttleTime, switchMap, filter} from 'rxjs/operators'
require('@/lib/iscroll/iscroll')
const IScroll = window.iScroll
let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset
......@@ -48,7 +47,12 @@ export default {
watch: {},
computed: {},
mounted () {
this.$nextTick(() => {
this.bindMessageTapEvent()
setTimeout(() => {
this.initSlimscroll()
},100)
})
},
methods: {
async getListDataFromNet () {
......@@ -179,14 +183,7 @@ export default {
})
})
const mouseupEl$ = Observable.create(observer => {
$('body').on('mouseup','.message-item',(event) => {
// const item = $(event.currentTarget)
observer.next(event)
})
})
mouseupEl$.pipe(
switchMap(ev => mousemoveEl$),
mousemoveEl$.pipe(
switchMap(ev => clickEl$),
throttleTime(300),
filter(ev => ev.type === 'click')
......@@ -220,12 +217,40 @@ export default {
this.getListDataFromNet()
},
initSlimscroll () {
$('#wrapper').slimScroll({
width: '100%', // 可滚动区域宽度
height: '700px', // 可滚动区域高度
size: '10px', // 滚动条宽度，即组件宽度
color: '#000', // 滚动条颜色
position: 'right', // 组件位置：left/right
distance: '0px', // 组件与侧边之间的距离
start: 'top', // 默认滚动位置：top/bottom
opacity: 0.4, // 滚动条透明度
alwaysVisible: true, // 是否 始终显示组件
disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
railVisible: true, // 是否 显示轨道
railColor: '#333', // 轨道颜色
railOpacity: 0.2, // 轨道透明度
railDraggable: true, // 是否 滚动条可拖动
railClass: 'slimScrollRail', // 轨道div类名
barClass: 'slimScrollBar', // 滚动条div类名
wrapperClass: 'slimScrollDiv', // 外包div类名
allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
wheelStep: 20, // 滚轮滚动量
touchScrollStep: 200, // 滚动量当用户使用手势
borderRadius: '7px', // 滚动条圆角
railBorderRadius: '7px' // 轨道圆角
})
},
openMessageContent (item) {
this.$alert(`${item.content}`, '', {
this.$alert(`<div><session class="model-body">${item.content}</session></div>`, '', {
dangerouslyUseHTMLString: true,
customClass: 'message-panel',
confirmButtonText: '知道了',
title:item.title,
callback:(action) => {
if (action === 'cancel') {
this.axios.post('http://testcenter.bigaka.net/b/store/notice!addNoticeUserRelationAction.do', {
params:{
"userId":"3956",
......@@ -233,12 +258,39 @@ export default {
}
})
}
}
})
this.$nextTick(() => {
$(".el-message-box__message")
.slimscroll({
height: '530px',
distance: '10px',
alwaysVisible: false,
railVisible: true,
railColor: '#e1e1e1',
railOpacity: 1,
size: '6px',
color: '#77c2f7',
opacity: 1
})
})
}
}
}
</script>
<style>
.message-panel .el-message-box__title {
min-height: 16.428571429px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.model-body {
position: relative;
overflow: hidden;
width: auto;
height: 500px;
}
</style>
<style scoped>
#wrapper {
......
src/components/Sidebar/index.vue
<template lang='pug'>
.sidebar-wrapper
.control(':class'="{open:unfold,close:!unfold}")
.control(':class'="{open:sidebarUnfoldInfo,close:!sidebarUnfoldInfo}")
.sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
.logo
img(':src'="logo")
.item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
.item('v-if'="menus.length",'v-for'="(data,itemIndex) in menus" ,':key'="data.item.id",'@click'='choseMenu(data,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
sidebar-item&attributes({
':icon':'item.ico',
':link':'item.link',
':type':'item.type',
':id':'item.id',
':name':'item.name',
':pid':'item.pid',
':grade':'item.grade',
':sort':'item.sort'
':icon':'data.item.ico',
':link':'data.item.link',
':type':'data.item.type',
':id':'data.item.id',
':name':'data.item.name',
':pid':'data.item.pid',
':grade':'data.item.grade',
':sort':'data.item.sort'
})
transition(name="fade",mode="out-in",appear)
.childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
.children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
.children-item
el-menu&attributes({
'ref':"menu",
'default-active':"2",
'class':"el-menu-vertical",
'background-color':"#374A5E",
'text-color':"#fff",
'unique-opened':true,
'active-text-color':"#fff",
'mode':'vertical'
'mode':'vertical',
'@select':"selectItemMenu"
})
el-submenu(':index'="index | toString",'@select'="selectItemMenu")
el-submenu(':index'="index | toString",'v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
template(slot="title")
span {{it.name}}
template
el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",'@click'="choseSubChildren(i)")
el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",@click="choseSubChildren(i)")
span.menu-item-name {{i.name}}
.arrow-tip(':class'="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
img(class='icon-arrow',':class'="{right:!sidebarUnfoldInfo}","src"='@/assets/images/sidebar/left-arrow-gray.png')
......@@ -39,16 +41,22 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import sidebarItem from '../sidebarItem'
const CrossStorageClient = require('cross-storage').CrossStorageClient;
const crmDomain = location.hostname
const crossStorage = new CrossStorageClient(`${crmDomain}/hub.jsp`, {
timeout: 5000,
frameId: 'storageFrame'
});
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
data () {
return {
currentIndexPath: [1,0],
collapse: false,
currentRouteIndex: 0,
logo,
unfold: false, // 水平展开
// unfold: false, // 水平展开
unfoldBtn: false, // 展开按钮
currentMenusIndex: -1
currentMenusIndex: 2
}
},
filters: {
......@@ -62,48 +70,83 @@ export default {
components: {
sidebarItem
},
mounted () {},
computed: {
...mapGetters({menus: 'getMenus', sidebarUnfoldInfo: 'getSidebarUnfoldInfo'}),
...mapGetters({
menus: 'getMenus',
project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}),
currentMenus: {
get () {
const currentIndex = this.currentMenusIndex
return currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => {
if (this.currentMenus) {
this.handleOpen()
}
})
return currentMenus
}
}
},
created () {
mounted () {
},
methods: {
handleOpen () {
const menus = this.$refs.menu
menus.open(0)
},
/**
* 选择边测菜单主菜单
*/
choseMenu (selectItem, selectItemIndex) {
this.currentMenusIndex = selectItemIndex
if (!this.unfold) {
if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true)
}
},
/**
* 二级菜单
**/
choseChildrenItem (...args) {
console.log('this is sidebar 二级菜单 %o', args)
choseChildrenItem (item) {
if (item.link) {
this.$router.push({
path: `/${item.link}`
})
}
},
/**
* 三级菜单
* @param args
**/
selectItemMenu (item) {
console.log('this is sidebar 三级菜单 %o', item)
console.log(item)
const currentMenusIndex = this.currentMenusIndex
if (currentMenusIndex > -1) {
const [idx1, idx2] = item.split('-').reverse()
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name
const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
const storeId = this.project.store_id
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId) ? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId)) : [];
menuHistoryJson.push({
name: historyItemName,
time,
index:`${currentMenusIndex,idx1,idx2}`
})
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
crossStorage.onConnect().then(function() {
return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson));
})
}
},
toggleUnfold (...args) {
if (!args.length) {
this.unfold = !this.unfold
this.setSidebarUnfold(!this.sidebarUnfoldInfo)
} else {
this.unfold = args[0]
this.setSidebarUnfold(args[0])
}
this.setSidebarUnfold(this.unfold)
},
hiddenUnfoldBtn () {
this.unfoldBtn = false
......@@ -117,7 +160,7 @@ export default {
})
},
getCurrentMenus (index) {
return this.menus[index]
return this.menus[index].item
},
...mapActions(['setSidebarUnfold'])
}
......
src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/* @flow */
import Vue from 'vue'
import App from './App'
import router from './router'
......
src/store/global/index.js
......@@ -12,55 +12,109 @@ const HIDE_EDIT_MENUS = 'HIDE_EDIT_MENUS'
// 边侧菜单
const SIDEBAR_UNFOLD = 'SIDEBAR_UNFOLD'
// 基本信息
const GET_PROJECT_INFO = 'GET_PROJECT_INFO'
const state = {
menus: [],
editMenus: false,
sidebarUnfold: false // false:边侧菜单收缩, true:边侧菜单展开
projectInfo: null,
currentMenus: [],
sidebarUnfold: true // false:边侧菜单收缩, true:边侧菜单展开
}
const actions = {
async getMenus ({
async getMenus({
commit, dispatch
}, parmas) {
let res = await globalApi.getMenus(parmas)
let menus = res.data.data
commit(GET_MEUMS, menus)
let menus2 = menus.map((item, index) => {
return {
index,
item: { ...item }
}
})
console.log(menus2)
commit(GET_MEUMS, menus2)
},
showEditMenus ({commit}) {
showEditMenus({ commit }) {
commit(SHOW_EDIT_MENUS, true)
},
hideEditMenus ({commit}) {
computedSidebarUnfoldRouter({ commit, dispatch }, { route, menus }) {
for (let index = 0; index < menus.length; index++) {
const element = menus[index]
if (element.link === route) {
dispatch('setCurrentMenus', { index: `${index}`, item: element })
break
} else {
for (let i = 0; i < element.length; i++) {
const item = element[i]
if (item.link === route) {
dispatch('setCurrentMenus', { index: `${index}-${i}`, item })
break
} else {
for (let j = 0; j < item.length; j++) {
const it = item[j]
if (it.link === route) {
dispatch('setCurrentMenus', { index: `${index}-${i}-${j}`, item: it })
break
}
}
}
}
}
}
},
hideEditMenus({ commit }) {
commit(HIDE_EDIT_MENUS, false)
},
setSidebarUnfold ({commit}, type) {
setSidebarUnfold({ commit }, type) {
commit(SIDEBAR_UNFOLD, type)
},
async getProjectInfo({ commit, dispatch }) {
let res = await globalApi.getProjectInfo()
let projectInfo = res.data
commit(GET_PROJECT_INFO, projectInfo)
}
}
const getters = {
getMenus (state) {
getMenus(state) {
return state.menus
},
getEditMenus (state) {
getEditMenus(state) {
return state.editMenus
},
getSidebarUnfoldInfo (state) {
getSidebarUnfoldInfo(state) {
return state.sidebarUnfold
},
getProjectInfo(state) {
return state.projectInfo
},
getCurrentMenus(state) {
return state.currentMenus
}
}
const mutations = {
[GET_MEUMS] (state, menus) {
state.menus = menus
[GET_MEUMS](state, menus) {
state.menus = [...menus]
},
[SHOW_EDIT_MENUS] (state, status) {
[SHOW_EDIT_MENUS](state, status) {
state.editMenus = status
},
[HIDE_EDIT_MENUS] (state, status) {
[HIDE_EDIT_MENUS](state, status) {
state.editMenus = status
},
[SIDEBAR_UNFOLD] (state, type) {
[SIDEBAR_UNFOLD](state, type) {
state.sidebarUnfold = type
},
[GET_PROJECT_INFO](state, projectInfo) {
state.projectInfo = { ...projectInfo }
}
}
......
src/utils/index.js
import date from './moment'
export const M = date
export function setCookie(name, value, exptime) {
const ctx = location.hostname
var now = new Date()
var time = now.getTime()
var anhour = (exptime + 8) * 3600
time += anhour * 1000
now.setTime(time)
document.cookie = name + '=' + value + ';path=' + ctx + '/;expires=' + now.toUTCString()
}
export function getCookie(name) {
const cArr = document.cookie.split('; ')
for (var i = 0; i < cArr.length; i++) {
let cArr2 = cArr[i].split('=')
if (cArr2[0] === name) {
return cArr2[1]
}
}
return ''
}
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