Skip to content

C
common-templete
Commit 199152a0 by tangqy
Options

调整

parent c0eceec1
Showing with 301 additions and 311 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",
...@@ -55,8 +54,11 @@ export default { ...@@ -55,8 +54,11 @@ export default {
collapse: false, collapse: false,
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 menus = this.$refs.menu const currentIndexPath = [this.firstIndex, this.secondIndex, this.thirdIndex]
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0 console.log(currentIndexPath)
console.log('openIndex', openIndex) const menus = this.$refs.menu
menus.open(openIndex) console.log(menus)
}, this.$nextTick(() => {
// calcRouter(menus) { if (currentIndexPath.join('-') === this.currentPath.join('-')) {
// const currentRoute = location.href menus.open(this.secondIndex)
// const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute) console.log('open')
// this.selectIndexPath = indexPath } else {
// console.log(this.selectIndexPath) menus.close(this.secondIndex)
// }, console.log('close')
}
})
},
// 隐藏边侧栏，边侧栏最小化 // 隐藏边侧栏，边侧栏最小化
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() {
...@@ -191,7 +173,24 @@ export default { ...@@ -191,7 +173,24 @@ export default {
return this.menus[index] return this.menus[index]
}, },
...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,283 +42,274 @@ ...@@ -42,283 +42,274 @@
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,
// unfold: false, // 水平展开 // unfold: false, // 水平展开
unfoldBtn: false, // 展开按钮 unfoldBtn: false, // 展开按钮
} }
}, },
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() { return (this.selectIndexPath && this.selectIndexPath.length) ? this.selectIndexPath[0] : -1
let res = -1 },
if (this.currentPath && this.currentPath.length) { currentMenus: {
res = this.currentPath[0] get () {
this.$nextTick(() => { const currentIndex = this.currentMenusIndex
this.handleOpen() const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
}) this.$nextTick(() => {
} if (this.currentMenus) {
return res this.handleOpen()
}, }
currentMenus: { })
get() { return currentMenus
const currentIndex = this.currentMenusIndex }
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex) },
this.$nextTick(() => { calc () {
if (this.currentMenus) { const hasMenus = this.menus && this.menus.length
this.handleOpen() if (hasMenus ) {
} this.calcRouter(this.menus)
}) }
return currentMenus return hasMenus
}, }
}, },
}, mounted () {
mounted() {},
methods: { },
handleOpen() { methods: {
const menus = this.$refs.menu handleOpen () {
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0 const menus = this.$refs.menu
menus.open(openIndex) const openIndex = (this.selectIndexPath.length === 3) ? this.selectIndexPath[1] : 0
}, menus.open(openIndex)
calcRouter(menus) { },
const currentRoute = location.href // 隐藏边侧栏，边侧栏最小化
const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute) handerNoSidebar () {
this.selectIndexPath = indexPath console.log('handerNoSidebar')
console.log(this.selectIndexPath) this.setSidebarUnfold(false)
}, },
// 隐藏边侧栏，边侧栏最小化 /**
handerNoSidebar() { * 选择边测菜单主菜单
console.log('handerNoSidebar') */
this.setSidebarUnfold(false) choseMenu (selectItem, selectItemIndex) {
}, this.currentMenusIndex = selectItemIndex
/** if (!this.sidebarUnfoldInfo) {
* 选择边测菜单主菜单 this.toggleUnfold(true)
*/ }
choseMenu(selectItem, selectItemIndex) { },
console.log('--', selectItem, selectItemIndex) /**
this.currentMenusIndex = selectItemIndex * 二级菜单
console.log('current', this.currentMenusIndex) **/
if (!this.sidebarUnfoldInfo) { choseChildrenItem (item) {
this.toggleUnfold(true) if (item.link) {
} this.$router.push({
}, path: `/${item.link}`
/** })
* 二级菜单 }
**/ },
choseChildrenItem(item) { /**
if (item.link) { * 三级菜单
this.$router.push({ * @param args
path: `/${item.link}`, **/
}) selectItemMenu (item) {
} console.log(item)
}, const currentMenusIndex = this.currentMenusIndex
/** if (currentMenusIndex > -1) {
* 三级菜单 const [idx1, idx2] = item.split('-').reverse()
* @param args const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name
**/ const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
selectItemMenu(item) { const storeId = this.project.store_id
console.log(item) const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId) ? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId)) : [];
const currentMenusIndex = this.currentMenusIndex menuHistoryJson.push({
if (currentMenusIndex > -1) { name: historyItemName,
const [idx1, idx2] = item.split('-').reverse() time,
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name index:`${currentMenusIndex,idx1,idx2}`
const time = this.$moment().format('YYYY-MM-DD hh:mm:ss') })
const storeId = this.project.store_id localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId) crossStorage.onConnect().then(function() {
? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId)) return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson));
: [] })
menuHistoryJson.push({ }
name: historyItemName, },
time, toggleUnfold (...args) {
index: `${(currentMenusIndex, idx1, idx2)}`, console.log(args)
}) if (!args.length) {
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson)) this.setSidebarUnfold(!this.sidebarUnfoldInfo)
crossStorage.onConnect().then(function() { } else {
return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson)) this.setSidebarUnfold(args[0])
}) }
} },
}, hiddenUnfoldBtn () {
toggleUnfold(...args) { this.unfoldBtn = false
console.log(args) },
if (!args.length) { showUnfoldBtn () {
this.setSidebarUnfold(!this.sidebarUnfoldInfo) this.unfoldBtn = true
} else { },
this.setSidebarUnfold(args[0]) choseSubChildren (item) {
} this.$router.push({
}, path: `/${item.link}`
hiddenUnfoldBtn() { })
this.unfoldBtn = false },
}, getCurrentMenus (index) {
showUnfoldBtn() { return this.menus[index]
this.unfoldBtn = true },
}, ...mapActions(['setSidebarUnfold'])
choseSubChildren(item) { }
this.$router.push({
path: `/${item.link}`,
})
},
getCurrentMenus(index) {
return this.menus[index]
},
...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
top 0
bottom 0
width 70px
&::after
position absolute
top 0
left 0 left 0
top 0
bottom 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 width 70px
transition width ease-in-out 0.2s &::after
&.open position absolute
width 240px top 0
transition width ease-in-out 0.2s left 0
.logo bottom 0
text-overflow ellipsis right 0
overflow hidden content ''
font-weight 400 background #2A3F54
font-size 22px z-index -1
width 100% .arrow-tip
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 position absolute
right auto top 50%
width 9px width 48px
z-index 1 height 48px
line-height 48px
border-radius 50% border-radius 50%
&::after text-align center
box-sizing border-box background-color rgba(55, 74, 94, .5)
border-left 1px solid #425668 transform translateX(-50%)
bottom 0 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 .2s
&.open
width 240px
transition width ease-in-out .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 '' content ''
left 22px background #1ABB9C
width 5px
position absolute
right 0
top 10px
height 47px
.childrens-meuns
position absolute position absolute
top 0 top 0
.menu-item-name left 70px
position relative bottom 0
display block width 170px
font-weight 400 background #374A5E
font-size 10px 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> </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