You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
9.2 KiB
277 lines
9.2 KiB
<template>
|
|
<div class="sider flex-column">
|
|
<div v-for="(item,index) in menusArray" :key="index" @click="onChangeMenu(index)">
|
|
<!-- fix: 页面刷新后 active 的处理 -->
|
|
<template v-if="item.path != '/more'">
|
|
|
|
<a @click="routerLink(item)"><!-- :to="item.path"_-->
|
|
<div :class="currentIndex == index ? 'sider-item__acitve flex' : 'sider-item flex' ">
|
|
<a-icon :type="item.type" :title="item.title" />
|
|
<!-- <div >没有同步按钮</div> -->
|
|
<span v-if="item.path == '/mail'" class="sider-item__tipIcon">
|
|
<a-icon v-if="!isMailSyncing" type="warning" theme="filled" class="icon--yellow" />
|
|
<span v-else-if="newMailCount > 0" class="sider-item__badge flex-center">
|
|
{{ newMailCount }}
|
|
<!-- //note: 思考在怎麼處理，在什麼操作下，新郵件通知標記消失 -->
|
|
</span>
|
|
</span>
|
|
<span v-if="index == 4" class="sider-item__tipIcon">
|
|
客户UI2.0
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
<template v-else>
|
|
<!-- todo: 更多菜单选中后的样式 -->
|
|
<div :class="{
|
|
'sider-item__acitve flex': currentIndex == index && !isSubMenusShow,
|
|
'sider-item flex': true,
|
|
'sider-item--focus': isSubMenusShow
|
|
}" @click="openSubMenu">
|
|
<a-icon :type="item.type" :title="item.title" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- fix: more的二級菜單部分 -->
|
|
<div class="navSubMenu padding-20" v-show="isSubMenusShow">
|
|
<!-- <div class="padding-20 flex-column">
|
|
<div class="flex-center" @click="pgLink('/importData')">
|
|
<a-icon type="vertical-align-bottom" class="iconNav" title="導入資料"/>
|
|
導入資料
|
|
</div>
|
|
</div> -->
|
|
<!-- {
|
|
path: '/userProfile',
|
|
title: '使用者概要',
|
|
type: 'dropbox'
|
|
} -->
|
|
<!-- todo: 遍历submenus -->
|
|
<ul class="padding-20">
|
|
<!-- <li @click="pgLink('/userProfile')">
|
|
<a>
|
|
<a-icon type="dropbox" class="iconNav" title="使用者概要"
|
|
/>使用者概要</a>
|
|
</li> -->
|
|
<li @click="pgLink('/importData')">
|
|
<a>
|
|
<a-icon type="vertical-align-bottom" class="iconNav" title="導入資料"
|
|
/>導入資料</a>
|
|
</li>
|
|
<!-- <li @click="pgLink('/ImportExcel')">
|
|
<a>
|
|
<a-icon type="vertical-align-bottom" class="iconNav" title="導入資料Excel"
|
|
/>導入資料Excel</a>
|
|
</li>
|
|
<li @click="pgLink('/importData')">
|
|
<a>
|
|
<a-icon type="vertical-align-top" class="iconNav" title="導出資料"
|
|
/>導出資料</a>
|
|
</li>
|
|
<li @click="pgLink('/importData')">
|
|
<a>
|
|
<a-icon type="vertical-align-middle" class="iconNav" title="合併重複"
|
|
/>合併重複</a>
|
|
</li>
|
|
<li @click="pgLink('/importData')">
|
|
<a>
|
|
<a-icon type="book" class="iconNav" title="知識庫"
|
|
/>知識庫</a>
|
|
</li>
|
|
<li @click="pgLink('/importData')">
|
|
<a>
|
|
<a-icon type="phone" class="iconNav" title="行動裝置"
|
|
/>行動裝置</a>
|
|
</li>
|
|
<li @click="pgLink('/insightsChartList')">
|
|
<a>
|
|
<a-icon type="bar-chart" class="iconNav" title="圖表分析"
|
|
/>圖表分析
|
|
</a>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Sider',
|
|
data () {
|
|
return {
|
|
// menusArray: ['github','google','apple','amazon','ellipsis'],
|
|
currentIndex: 0,
|
|
isSubMenusShow: false,
|
|
menusArray: [
|
|
// {
|
|
// path: '/custLatent',
|
|
// title: '潛在客戶',
|
|
// type: 'usergroup-add'
|
|
// },
|
|
{
|
|
path: '/business',
|
|
title: '交易',
|
|
type: 'pay-circle'
|
|
},
|
|
{
|
|
path: '/custList',
|
|
title: '客戶',
|
|
type: 'user'
|
|
},
|
|
{
|
|
path: '/persons',
|
|
title: '新客户模块',
|
|
type: 'user'
|
|
},{
|
|
path: '/more',
|
|
title: '更多..導入資料',
|
|
type: 'small-dash'
|
|
},
|
|
{
|
|
path: '/activities',
|
|
title: '活動',
|
|
type: 'schedule'
|
|
},
|
|
],
|
|
subMenu: [{
|
|
|
|
}]
|
|
}
|
|
},
|
|
computed: {
|
|
currentPath() {
|
|
// let currentIndex = 0;
|
|
let path = this.$route.path;
|
|
// console.log('path', path);
|
|
// this.currentIndex = this.menusArray.findIndex(item => ~path.indexOf(item.path));
|
|
return path;
|
|
},
|
|
isMailSyncing() {//計算當前賬戶是否有郵件為同步狀態
|
|
let result = this.$store.state.mail.isMailSyncing;
|
|
return result;
|
|
},
|
|
newMailCount() {
|
|
return this.$store.state.mail.newMailCount
|
|
},
|
|
},
|
|
watch: {
|
|
currentPath: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler (newValue, oldValue) {
|
|
let path = this.$route.path;
|
|
// console.log('path', path);
|
|
// this.$util.console(path, 'path變動');
|
|
if (~path.indexOf('setting') || ~path.indexOf('import')) {
|
|
this.currentIndex = 7;
|
|
} else {
|
|
this.currentIndex = this.menusArray.findIndex(item => ~path.indexOf(item.path));
|
|
};
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onChangeMenu (index) {
|
|
if (index == this.menusArray.length - 1) return;
|
|
this.currentIndex = index;
|
|
},
|
|
openSubMenu () {
|
|
this.isSubMenusShow = !this.isSubMenusShow;
|
|
},
|
|
routerLink(linkData){
|
|
console.log("linkData==============",linkData)
|
|
if (linkData == '/more') return this.isSubMenusShow = true;
|
|
this.isSubMenusShow = false;
|
|
this.$router.push(linkData.path);
|
|
},
|
|
pgLink(pgUrl){
|
|
this.isSubMenusShow = false;
|
|
this.$router.push(pgUrl);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
.sider {
|
|
padding-top: 5px;
|
|
align-items: center;
|
|
/* font-size: 36px !important; */
|
|
/* background: red; */
|
|
}
|
|
|
|
.sider .anticon {
|
|
font-size: 30px !important;
|
|
}
|
|
|
|
.sider div {
|
|
/* 元素距离左右各10px */
|
|
width: 80px;
|
|
height: 60px;
|
|
margin: auto;
|
|
justify-content: center;
|
|
border-radius: 7px;
|
|
margin-bottom: 3px;
|
|
cursor: pointer;
|
|
/* font-size: 36px !important; */
|
|
}
|
|
|
|
.sider-item {
|
|
color: #D2D2D2;
|
|
/* font-size: 36px !important; */
|
|
position: relative;
|
|
}
|
|
|
|
.sider-item__tipIcon {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 10px;
|
|
}
|
|
|
|
.sider-item__tipIcon .anticon {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.sider-item__badge {
|
|
color: #ffffff;
|
|
background: #f74536;
|
|
height: 18px;
|
|
width: 20px;
|
|
/* text-align: center; */
|
|
/* line-height: 18px; */
|
|
border-radius: 50%
|
|
}
|
|
|
|
.sider-item:hover{
|
|
background: #F6F6FC;
|
|
color: #383839 !important;
|
|
}
|
|
|
|
.sider-item__acitve {
|
|
background: #F6F6FC;
|
|
color: #383839 !important;
|
|
position: relative;
|
|
}
|
|
|
|
.sider-item__focus {
|
|
background: #F6F6FC;
|
|
color: #383839 !important;
|
|
position: relative;
|
|
}
|
|
|
|
.sider-item__acitve::before, .sider-item:hover::before {
|
|
content: '';
|
|
height: 56px;
|
|
width: 4px;
|
|
/* border-rdius: 5px; */
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 3px;
|
|
background: #F86F54;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|