Skip to content

C
common-templete
Commit 199152a0 by tangqy
Options

调整

parent c0eceec1
Showing with 99 additions and 109 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: {
...@@ -77,47 +79,25 @@ export default { ...@@ -77,47 +79,25 @@ export default {
currentPath: 'getCurrentPath', currentPath: 'getCurrentPath',
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()
// console.log('---', this.currentMenus)
}
})
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)
console.log('openIndex', openIndex) this.$nextTick(() => {
menus.open(openIndex) 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() {
console.log('handerNoSidebar') console.log('handerNoSidebar')
...@@ -127,7 +107,9 @@ export default { ...@@ -127,7 +107,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)
} }
...@@ -148,10 +130,10 @@ export default { ...@@ -148,10 +130,10 @@ export default {
**/ **/
selectItemMenu(item) { selectItemMenu(item) {
console.log(item) console.log(item)
const currentMenusIndex = this.currentMenusIndex const firstIndex = this.firstIndex
if (currentMenusIndex > -1) { 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)
...@@ -160,7 +142,7 @@ export default { ...@@ -160,7 +142,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() {
...@@ -192,6 +174,23 @@ export default { ...@@ -192,6 +174,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
...@@ -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:currentMenusIndex === itemIndex}") .item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(data,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
sidebar-item&attributes({ sidebar-item&attributes({
':icon':'item.ico', ':icon':'item.ico',
':link':'item.link', ':link':'item.link',
...@@ -42,15 +42,15 @@ ...@@ -42,15 +42,15 @@
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import { calcIndexPathByCurrentRouter } from '@/utils' import { calcIndexPathByCurrentRouter } from '@/utils'
import sidebarItem from '../sidebarItem' import sidebarItem from '../sidebarItem'
const CrossStorageClient = require('cross-storage').CrossStorageClient const CrossStorageClient = require('cross-storage').CrossStorageClient;
const crmDomain = location.hostname const crmDomain = location.hostname
const crossStorage = new CrossStorageClient(`${crmDomain}/hub.jsp`, { const crossStorage = new CrossStorageClient(`${crmDomain}/hub.jsp`, {
timeout: 5000, timeout: 5000,
frameId: 'storageFrame', frameId: 'storageFrame'
}) });
const logo = require('@/assets/images/sidebar/logo-blue.png') const logo = require('@/assets/images/sidebar/logo-blue.png')
export default { export default {
data() { data () {
return { return {
collapse: false, collapse: false,
logo, logo,
...@@ -59,36 +59,28 @@ export default { ...@@ -59,36 +59,28 @@ export default {
} }
}, },
filters: { filters: {
toString(value) { toString (value) {
return value + '' return value + ''
}, },
pipeString(...args) { pipeString (...args) {
return args.join('-') return args.join('-')
}, }
}, },
components: { components: {
sidebarItem, sidebarItem
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
menus: 'getMenus', menus: 'getMenus',
currentPath: 'getCurrentPath',
project: 'getProjectInfo', project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo', sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}), }),
currentMenusIndex() { currentMenusIndex () {
let res = -1 return (this.selectIndexPath && this.selectIndexPath.length) ? this.selectIndexPath[0] : -1
if (this.currentPath && this.currentPath.length) {
res = this.currentPath[0]
this.$nextTick(() => {
this.handleOpen()
})
}
return res
}, },
currentMenus: { currentMenus: {
get() { get () {
const currentIndex = this.currentMenusIndex const currentIndex = this.currentMenusIndex
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex) const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => { this.$nextTick(() => {
...@@ -97,34 +89,35 @@ export default { ...@@ -97,34 +89,35 @@ export default {
} }
}) })
return currentMenus return currentMenus
}
}, },
calc () {
const hasMenus = this.menus && this.menus.length
if (hasMenus ) {
this.calcRouter(this.menus)
}
return hasMenus
}
}, },
mounted () {
}, },
mounted() {},
methods: { methods: {
handleOpen() { handleOpen () {
const menus = this.$refs.menu const menus = this.$refs.menu
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0 const openIndex = (this.selectIndexPath.length === 3) ? this.selectIndexPath[1] : 0
menus.open(openIndex) menus.open(openIndex)
}, },
calcRouter(menus) {
const currentRoute = location.href
const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
this.selectIndexPath = indexPath
console.log(this.selectIndexPath)
},
// 隐藏边侧栏，边侧栏最小化 // 隐藏边侧栏，边侧栏最小化
handerNoSidebar() { handerNoSidebar () {
console.log('handerNoSidebar') console.log('handerNoSidebar')
this.setSidebarUnfold(false) this.setSidebarUnfold(false)
}, },
/** /**
* 选择边测菜单主菜单 * 选择边测菜单主菜单
*/ */
choseMenu(selectItem, selectItemIndex) { choseMenu (selectItem, selectItemIndex) {
console.log('--', selectItem, selectItemIndex)
this.currentMenusIndex = selectItemIndex this.currentMenusIndex = selectItemIndex
console.log('current', this.currentMenusIndex)
if (!this.sidebarUnfoldInfo) { if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true) this.toggleUnfold(true)
} }
...@@ -132,10 +125,10 @@ export default { ...@@ -132,10 +125,10 @@ export default {
/** /**
* 二级菜单 * 二级菜单
**/ **/
choseChildrenItem(item) { choseChildrenItem (item) {
if (item.link) { if (item.link) {
this.$router.push({ this.$router.push({
path: `/${item.link}`, path: `/${item.link}`
}) })
} }
}, },
...@@ -143,7 +136,7 @@ export default { ...@@ -143,7 +136,7 @@ export default {
* 三级菜单 * 三级菜单
* @param args * @param args
**/ **/
selectItemMenu(item) { selectItemMenu (item) {
console.log(item) console.log(item)
const currentMenusIndex = this.currentMenusIndex const currentMenusIndex = this.currentMenusIndex
if (currentMenusIndex > -1) { if (currentMenusIndex > -1) {
...@@ -151,21 +144,19 @@ export default { ...@@ -151,21 +144,19 @@ export default {
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name const historyItemName = this.menus[currentMenusIndex].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) ? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId)) : [];
? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId))
: []
menuHistoryJson.push({ menuHistoryJson.push({
name: historyItemName, name: historyItemName,
time, time,
index: `${(currentMenusIndex, idx1, idx2)}`, index:`${currentMenusIndex,idx1,idx2}`
}) })
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson)) localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
crossStorage.onConnect().then(function() { crossStorage.onConnect().then(function() {
return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson)) return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson));
}) })
} }
}, },
toggleUnfold(...args) { toggleUnfold (...args) {
console.log(args) console.log(args)
if (!args.length) { if (!args.length) {
this.setSidebarUnfold(!this.sidebarUnfoldInfo) this.setSidebarUnfold(!this.sidebarUnfoldInfo)
...@@ -173,31 +164,31 @@ export default { ...@@ -173,31 +164,31 @@ export default {
this.setSidebarUnfold(args[0]) this.setSidebarUnfold(args[0])
} }
}, },
hiddenUnfoldBtn() { hiddenUnfoldBtn () {
this.unfoldBtn = false this.unfoldBtn = false
}, },
showUnfoldBtn() { showUnfoldBtn () {
this.unfoldBtn = true this.unfoldBtn = true
}, },
choseSubChildren(item) { choseSubChildren (item) {
this.$router.push({ this.$router.push({
path: `/${item.link}`, path: `/${item.link}`
}) })
}, },
getCurrentMenus(index) { getCurrentMenus (index) {
return this.menus[index] return this.menus[index]
}, },
...mapActions(['setSidebarUnfold']), ...mapActions(['setSidebarUnfold'])
}, }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.sidebar-wrapper .sidebar-wrapper
position relative position relative
height 100px height 100px
display inline-block display inline-block
z-index 100 z-index 100
.sidebar .sidebar
position fixed position fixed
left 0 left 0
top 0 top 0
...@@ -212,7 +203,7 @@ export default { ...@@ -212,7 +203,7 @@ export default {
content '' content ''
background #2A3F54 background #2A3F54
z-index -1 z-index -1
.arrow-tip .arrow-tip
position absolute position absolute
top 50% top 50%
width 48px width 48px
...@@ -220,7 +211,7 @@ export default { ...@@ -220,7 +211,7 @@ export default {
line-height 48px line-height 48px
border-radius 50% border-radius 50%
text-align center text-align center
background-color rgba(55, 74, 94, 0.5) background-color rgba(55, 74, 94, .5)
transform translateX(-50%) transform translateX(-50%)
transition all 0.2s transition all 0.2s
cursor pointer cursor pointer
...@@ -229,22 +220,22 @@ export default { ...@@ -229,22 +220,22 @@ export default {
left 70px left 70px
&.left-ll &.left-ll
left 240px left 240px
.icon-arrow .icon-arrow
display inline-block display inline-block
margin-left 15px margin-left 15px
width 8px width 8px
&.right &.right
transform rotateY(180deg) transform rotateY(180deg)
.control .control
visibility hidden visibility hidden
height 100px height 100px
&.close &.close
width 70px width 70px
transition width ease-in-out 0.2s transition width ease-in-out .2s
&.open &.open
width 240px width 240px
transition width ease-in-out 0.2s transition width ease-in-out .2s
.logo .logo
text-overflow ellipsis text-overflow ellipsis
overflow hidden overflow hidden
font-weight 400 font-weight 400
...@@ -259,14 +250,14 @@ export default { ...@@ -259,14 +250,14 @@ export default {
padding-top 5px padding-top 5px
img img
width 60px width 60px
.item .item
position relative position relative
display block display block
cursor pointer cursor pointer
text-align center text-align center
& + & & + &
margin-bottom 6px margin-bottom 6px
.active::after .active::after
display block display block
content '' content ''
background #1ABB9C background #1ABB9C
...@@ -275,7 +266,7 @@ export default { ...@@ -275,7 +266,7 @@ export default {
right 0 right 0
top 10px top 10px
height 47px height 47px
.childrens-meuns .childrens-meuns
position absolute position absolute
top 0 top 0
left 70px left 70px
...@@ -287,19 +278,19 @@ export default { ...@@ -287,19 +278,19 @@ export default {
.children-item .children-item
text-align left text-align left
margin-bottom 6px margin-bottom 6px
.el-menu .el-menu
border-right none border-right none
.el-submenu .el-menu-item .el-submenu .el-menu-item
min-width auto min-width auto
.el-menu-item .el-menu-item
position relative position relative
padding 0 10px 0 36px padding: 0 10px 0 36px
box-sizing border-box box-sizing border-box
&::before &::before
box-sizing border-box box-sizing border-box
background #425668 background #425668
bottom auto bottom auto
content '' content ""
height 9px height 9px
left 18px left 18px
margin-top 20px margin-top 20px
...@@ -312,11 +303,11 @@ export default { ...@@ -312,11 +303,11 @@ export default {
box-sizing border-box box-sizing border-box
border-left 1px solid #425668 border-left 1px solid #425668
bottom 0 bottom 0
content '' content ""
left 22px left 22px
position absolute position absolute
top 0 top 0
.menu-item-name .menu-item-name
position relative position relative
display block display block
font-weight 400 font-weight 400
......
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