Skip to content

C
common-templete
Commit 258bb80d by 高淑倩
Options

merge:sidebar

parents 41eb38d7 199152a0
Showing with 42 additions and 364 deletions
src/components/Sidebar/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()") .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
.logo .logo
img(':src'="logo") img(':src'="logo")
.item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMainMenuIndex === itemIndex}") .item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:firstIndex === itemIndex}")
sidebar-item&attributes({ sidebar-item&attributes({
':icon':'item.ico', ':icon':'item.ico',
':link':'item.link', ':link':'item.link',
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
.children-item .children-item
el-menu&attributes({ el-menu&attributes({
'ref':"menu", 'ref':"menu",
'default-active':"2",
'class':"el-menu-vertical", 'class':"el-menu-vertical",
'background-color':"#374A5E", 'background-color':"#374A5E",
'text-color':"#fff", 'text-color':"#fff",
...@@ -56,7 +55,10 @@ export default { ...@@ -56,7 +55,10 @@ export default {
logo, logo,
// unfold: false, // 水平展开 // unfold: false, // 水平展开
unfoldBtn: false, // 展开按钮 unfoldBtn: false, // 展开按钮
currentMainMenuIndex: 0, //mainIndex firstIndex: 0,
secondIndex: 0,
thirdIndex: 0,
currentMenus: [],
} }
}, },
filters: { filters: {
...@@ -78,44 +80,24 @@ export default { ...@@ -78,44 +80,24 @@ export default {
project: 'getProjectInfo', project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo', sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}), }),
currentMenusIndex() {
let res = -1
if (this.currentPath && this.currentPath.length) {
res = this.currentPath[0]
this.$nextTick(() => {
this.handleOpen()
})
}
return res
},
currentMenus: {
get() {
// const currentIndex = this.currentMenusIndex
const currentIndex = this.currentMainMenuIndex
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => {
if (this.currentMenus) {
// this.handleOpen()
}
})
return currentMenus
},
},
}, },
mounted() {}, mounted() {},
methods: { methods: {
handleOpen() { handleOpen() {
const currentIndexPath = [this.firstIndex, this.secondIndex, this.thirdIndex]
console.log(currentIndexPath)
const menus = this.$refs.menu const menus = this.$refs.menu
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0 console.log(menus)
// menus.open(openIndex) this.$nextTick(() => {
if (currentIndexPath.join('-') === this.currentPath.join('-')) {
menus.open(this.secondIndex)
console.log('open')
} else {
menus.close(this.secondIndex)
console.log('close')
}
})
}, },
// calcRouter(menus) {
// const currentRoute = location.href
// const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
// this.selectIndexPath = indexPath
// console.log(this.selectIndexPath)
// },
// 隐藏边侧栏，边侧栏最小化 // 隐藏边侧栏，边侧栏最小化
handerNoSidebar() { handerNoSidebar() {
this.setSidebarUnfold(false) this.setSidebarUnfold(false)
...@@ -124,7 +106,9 @@ export default { ...@@ -124,7 +106,9 @@ export default {
* 选择边测菜单主菜单 * 选择边测菜单主菜单
*/ */
choseMenu(selectItem, selectItemIndex) { choseMenu(selectItem, selectItemIndex) {
this.currentMainMenuIndex = selectItemIndex console.log('--', selectItem, selectItemIndex)
this.firstIndex = selectItemIndex
console.log('current', this.firstIndex)
if (!this.sidebarUnfoldInfo) { if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true) this.toggleUnfold(true)
} }
...@@ -144,10 +128,11 @@ export default { ...@@ -144,10 +128,11 @@ export default {
* @param args * @param args
**/ **/
selectItemMenu(item) { selectItemMenu(item) {
const currentMenusIndex = this.currentMenusIndex console.log(item)
if (currentMenusIndex > -1) { const firstIndex = this.firstIndex
if (firstIndex > -1) {
const [idx1, idx2] = item.split('-').reverse() const [idx1, idx2] = item.split('-').reverse()
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name const historyItemName = this.menus[firstIndex].children[idx1].children[idx2].name
const time = this.$moment().format('YYYY-MM-DD hh:mm:ss') const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
const storeId = this.project.store_id const storeId = this.project.store_id
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId) const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId)
...@@ -156,7 +141,7 @@ export default { ...@@ -156,7 +141,7 @@ export default {
menuHistoryJson.push({ menuHistoryJson.push({
name: historyItemName, name: historyItemName,
time, time,
index: `${(currentMenusIndex, idx1, idx2)}`, index: `${(firstIndex, idx1, idx2)}`,
}) })
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson)) localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
crossStorage.onConnect().then(function() { crossStorage.onConnect().then(function() {
...@@ -188,6 +173,23 @@ export default { ...@@ -188,6 +173,23 @@ export default {
}, },
...mapActions(['setSidebarUnfold']), ...mapActions(['setSidebarUnfold']),
}, },
watch: {
firstIndex(val) {
this.currentMenus = this.getCurrentMenus(val)
this.$nextTick(() => {
this.handleOpen()
})
},
currentPath(val) {
if (val.length) {
const [first, second, third] = [...val]
this.firstIndex = first
this.secondIndex = second
this.thirdIndex = third
}
console.log('currentPath is %o', val)
},
},
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
......
src/components/Sidebar/index1.vue deleted 100644 → 0
<template lang='pug'>
.sidebar-wrapper
.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}")
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'
})
transition(name="fade",mode="out-in",appear)
.childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
.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',
'@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)")
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')
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { calcIndexPathByCurrentRouter } from '@/utils'
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 {
collapse: false,
logo,
// unfold: false, // 水平展开
unfoldBtn: false, // 展开按钮
}
},
filters: {
toString(value) {
return value + ''
},
pipeString(...args) {
return args.join('-')
},
},
components: {
sidebarItem,
},
computed: {
...mapGetters({
menus: 'getMenus',
currentPath: 'getCurrentPath',
project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}),
currentMenusIndex() {
let res = -1
if (this.currentPath && this.currentPath.length) {
res = this.currentPath[0]
this.$nextTick(() => {
this.handleOpen()
})
}
return res
},
currentMenus: {
get() {
const currentIndex = this.currentMenusIndex
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => {
if (this.currentMenus) {
this.handleOpen()
}
})
return currentMenus
},
},
},
mounted() {},
methods: {
handleOpen() {
const menus = this.$refs.menu
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0
menus.open(openIndex)
},
// calcRouter(menus) {
// const currentRoute = location.href
// const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
// this.selectIndexPath = indexPath
// console.log(this.selectIndexPath)
// },
// 隐藏边侧栏，边侧栏最小化
handerNoSidebar() {
console.log('handerNoSidebar')
this.setSidebarUnfold(false)
},
/**
* 选择边测菜单主菜单
*/
choseMenu(selectItem, selectItemIndex) {
console.log('--', selectItem, selectItemIndex)
this.currentMenusIndex = selectItemIndex
console.log('current', this.currentMenusIndex)
if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true)
}
},
/**
* 二级菜单
**/
choseChildrenItem(item) {
if (item.link) {
this.$router.push({
path: `/${item.link}`,
})
}
},
/**
* 三级菜单
* @param args
**/
selectItemMenu(item) {
console.log(item)
const currentMenusIndex = this.currentMenusIndex
if (currentMenusIndex > -1) {
const [idx1, idx2] = item.split('-').reverse()
const historyItemName = this.menus && 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) {
console.log(args)
if (!args.length) {
this.setSidebarUnfold(!this.sidebarUnfoldInfo)
} else {
this.setSidebarUnfold(args[0])
}
},
hiddenUnfoldBtn() {
this.unfoldBtn = false
},
showUnfoldBtn() {
this.unfoldBtn = true
},
choseSubChildren(item) {
this.$router.push({
path: `/${item.link}`,
})
},
getCurrentMenus(index) {
return this.menus[index]
},
...mapActions(['setSidebarUnfold']),
},
}
</script>
<style lang="stylus" scoped>
.sidebar-wrapper
position relative
height 100px
display inline-block
z-index 100
.sidebar
position fixed
left 0
top 0
bottom 0
width 70px
&::after
position absolute
top 0
left 0
bottom 0
right 0
content ''
background #2A3F54
z-index -1
.arrow-tip
position absolute
top 50%
width 48px
height 48px
line-height 48px
border-radius 50%
text-align center
background-color rgba(55, 74, 94, 0.5)
transform translateX(-50%)
transition all 0.2s
cursor pointer
z-index -2
&.left-l
left 70px
&.left-ll
left 240px
.icon-arrow
display inline-block
margin-left 15px
width 8px
&.right
transform rotateY(180deg)
.control
visibility hidden
height 100px
&.close
width 70px
transition width ease-in-out 0.2s
&.open
width 240px
transition width ease-in-out 0.2s
.logo
text-overflow ellipsis
overflow hidden
font-weight 400
font-size 22px
width 100%
color #ECF0F1
line-height 59px
display block
height 65px
margin 10px auto
padding-left 5px
padding-top 5px
img
width 60px
.item
position relative
display block
cursor pointer
text-align center
& + &
margin-bottom 6px
.active::after
display block
content ''
background #1ABB9C
width 5px
position absolute
right 0
top 10px
height 47px
.childrens-meuns
position absolute
top 0
left 70px
bottom 0
width 170px
background #374A5E
z-index -1
zoom 1
.children-item
text-align left
margin-bottom 6px
.el-menu
border-right none
.el-submenu .el-menu-item
min-width auto
.el-menu-item
position relative
padding 0 10px 0 36px
box-sizing border-box
&::before
box-sizing border-box
background #425668
bottom auto
content ''
height 9px
left 18px
margin-top 20px
position absolute
right auto
width 9px
z-index 1
border-radius 50%
&::after
box-sizing border-box
border-left 1px solid #425668
bottom 0
content ''
left 22px
position absolute
top 0
.menu-item-name
position relative
display block
font-weight 400
font-size 10px
</style>
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