|
|
@@ -1,224 +1,301 @@
|
|
|
<template>
|
|
|
- <li class="main-menu" v-if="router || link" :id="id" @click="menuClick(name,'',1,link,target,router,id,$event)" v-bind:class="{'active':active}">
|
|
|
- <router-link :target="target" :to="router" v-if="router">
|
|
|
- <i :class="icon"></i> <span>{{ name }}</span>
|
|
|
- <span class="pull-right-container" v-show="badge">
|
|
|
- <small class="label pull-right" :class="[badge.type==='String'?'bg-green':'label-primary']">{{ badge.data }}</small>
|
|
|
+ <li
|
|
|
+ class="main-menu"
|
|
|
+ v-if="router || link"
|
|
|
+ :id="id"
|
|
|
+ @click="menuClick(name, '', 1, link, target, router, id, $event)"
|
|
|
+ v-bind:class="{ active: active }"
|
|
|
+ >
|
|
|
+ <router-link :target="target" :to="router" v-if="router">
|
|
|
+ <i :class="icon"></i> <span>{{ name }}</span>
|
|
|
+ <span class="pull-right-container" v-show="badge">
|
|
|
+ <small
|
|
|
+ class="label pull-right"
|
|
|
+ :class="[badge.type === 'String' ? 'bg-green' : 'label-primary']"
|
|
|
+ >{{ badge.data }}</small
|
|
|
+ >
|
|
|
</span>
|
|
|
- </router-link>
|
|
|
- <a v-bind:href="link" v-bind:target="target" v-else-if="target=='_blank'">
|
|
|
- <i :class="icon"></i>
|
|
|
- <span>{{ name }}</span>
|
|
|
- </a>
|
|
|
- <a v-bind:target="target" v-else>
|
|
|
- <i :class="icon"></i>
|
|
|
- <span>{{ name }}</span>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li :class="getType" :id="id" v-else>
|
|
|
- {{ isHeader ? name : '' }}
|
|
|
- <a v-if="!isHeader" @click="menuClick(name,'',0,link,target,router,id,$event)">
|
|
|
- <i :class="icon"></i> <span style="padding-bottom: 16px;margin-left:0px">{{ name }}</span>
|
|
|
- <span class="pull-right-container">
|
|
|
- <small v-if="badge && badge.data" class="label pull-right" :class="[badge.type==='String'?'bg-green':'label-primary']">{{ badge.data }}</small>
|
|
|
+ </router-link>
|
|
|
+ <a v-bind:href="link" v-bind:target="target" v-else-if="target == '_blank'">
|
|
|
+ <i :class="icon"></i>
|
|
|
+ <span>{{ name }}</span>
|
|
|
+ </a>
|
|
|
+ <a v-bind:target="target" v-else>
|
|
|
+ <i :class="icon"></i>
|
|
|
+ <span>{{ name }}</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li :class="getType" :id="id" v-else>
|
|
|
+ {{ isHeader ? name : "" }}
|
|
|
+ <a
|
|
|
+ v-if="!isHeader"
|
|
|
+ @click="menuClick(name, '', 0, link, target, router, id, $event)"
|
|
|
+ >
|
|
|
+ <i :class="icon"></i>
|
|
|
+ <span style="padding-bottom: 16px; margin-left: 0px">{{ name }}</span>
|
|
|
+ <span class="pull-right-container">
|
|
|
+ <small
|
|
|
+ v-if="badge && badge.data"
|
|
|
+ class="label pull-right"
|
|
|
+ :class="[badge.type === 'String' ? 'bg-green' : 'label-primary']"
|
|
|
+ >{{ badge.data }}</small
|
|
|
+ >
|
|
|
<i v-else class="fa fa-angle-left pull-right"></i>
|
|
|
</span>
|
|
|
- </a>
|
|
|
- <ul class="treeview-menu" style="margin-top:0;" v-if="items.length > 0">
|
|
|
- <li v-bind:class="{'active':item.active}" class="sub-menu" v-for="item in items" :id="item.id" @click="menuClick(name,item.name,1,item.link,item.target,item.router,item.id,$event)">
|
|
|
- <router-link :target="target" :to="item.router" :title="item.name" v-if="item.router">
|
|
|
- <i :class="item.icon"></i>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </router-link>
|
|
|
- <a v-bind:href="item.link" v-bind:target="item.target" :title="item.name" v-else-if="item.target=='_blank'">
|
|
|
- <i :class="item.icon"></i>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </a>
|
|
|
- <a v-bind:target="item.target" :title="item.name" v-else>
|
|
|
- <i :class="item.icon"></i>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
+ </a>
|
|
|
+ <ul class="treeview-menu" style="margin-top: 0" v-if="items.length > 0">
|
|
|
+ <li
|
|
|
+ v-bind:class="{ active: item.active }"
|
|
|
+ class="sub-menu"
|
|
|
+ v-for="item in items"
|
|
|
+ :id="item.id"
|
|
|
+ @click="
|
|
|
+ menuClick(
|
|
|
+ name,
|
|
|
+ item.name,
|
|
|
+ 1,
|
|
|
+ item.link,
|
|
|
+ item.target,
|
|
|
+ item.router,
|
|
|
+ item.id,
|
|
|
+ $event
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ :target="target"
|
|
|
+ :to="item.router"
|
|
|
+ :title="item.name"
|
|
|
+ v-if="item.router"
|
|
|
+ >
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ v-bind:href="item.link"
|
|
|
+ v-bind:target="item.target"
|
|
|
+ :title="item.name"
|
|
|
+ v-else-if="item.target == '_blank'"
|
|
|
+ >
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </a>
|
|
|
+ <a v-bind:target="item.target" :title="item.name" v-else>
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {mapGetters,mapActions} from 'vuex'
|
|
|
- export default {
|
|
|
- name: 'va-slide-item',
|
|
|
- props: {
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: 'item'
|
|
|
+import { mapGetters, mapActions } from "vuex";
|
|
|
+export default {
|
|
|
+ name: "va-slide-item",
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: "item",
|
|
|
+ },
|
|
|
+ isHeader: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ icon: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ active: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ badge: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
},
|
|
|
- isHeader: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
+ },
|
|
|
+ items: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [];
|
|
|
},
|
|
|
- icon: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- name: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- id: {
|
|
|
- type: Number
|
|
|
- },
|
|
|
- active: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- badge: {
|
|
|
- type: Object,
|
|
|
- default () {
|
|
|
- return {}
|
|
|
- }
|
|
|
- },
|
|
|
- items: {
|
|
|
- type: Array,
|
|
|
- default () {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- router: {
|
|
|
- type: String,
|
|
|
- default:''
|
|
|
- },
|
|
|
- link: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- target: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
+ },
|
|
|
+ router: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ link: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ target: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
},
|
|
|
- created () {
|
|
|
- },
|
|
|
- methods:{
|
|
|
- ...mapActions([
|
|
|
- 'storeMenuInfo'
|
|
|
- ]),
|
|
|
- menuClick:function(menuName,subMenuName,type,linkUrl,target,router,id,e){
|
|
|
- if(type==0){
|
|
|
- sessionStorage.setItem('refresh_sub_id',id);
|
|
|
- }else{
|
|
|
- sessionStorage.setItem('refresh_child_id',id);
|
|
|
- }
|
|
|
-// if(target && target=='_blank')
|
|
|
-// {
|
|
|
-// console.log("新起页面访问:"+linkUrl);
|
|
|
-// return;
|
|
|
-// }
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ ...mapActions(["storeMenuInfo"]),
|
|
|
+ menuClick: function (
|
|
|
+ menuName,
|
|
|
+ subMenuName,
|
|
|
+ type,
|
|
|
+ linkUrl,
|
|
|
+ target,
|
|
|
+ router,
|
|
|
+ id,
|
|
|
+ e
|
|
|
+ ) {
|
|
|
+ if (type == 0) {
|
|
|
+ sessionStorage.setItem("refresh_sub_id", id);
|
|
|
+ } else {
|
|
|
+ sessionStorage.setItem("refresh_child_id", id);
|
|
|
+ }
|
|
|
+ // if(target && target=='_blank')
|
|
|
+ // {
|
|
|
+ // console.log("新起页面访问:"+linkUrl);
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
var menuBtn = $(e.target).closest("li");
|
|
|
|
|
|
- if($(menuBtn).hasClass("treeview"))
|
|
|
- {
|
|
|
- $("ul.treeview-menu").slideUp();
|
|
|
+ if ($(menuBtn).hasClass("treeview")) {
|
|
|
+ $("ul.treeview-menu").slideUp();
|
|
|
var flag = $(menuBtn).hasClass("menu-open");
|
|
|
$("li.main-menu").removeClass("active");
|
|
|
$(".treeview").removeClass("active menu-open");
|
|
|
- $("#treeview-menu").css({display:"none"});
|
|
|
- if(!flag) {
|
|
|
-// $("li.sub-menu").removeClass("active");
|
|
|
+ $("#treeview-menu").css({ display: "none" });
|
|
|
+ if (!flag) {
|
|
|
+ // $("li.sub-menu").removeClass("active");
|
|
|
$(menuBtn).addClass("menu-open");
|
|
|
-// $(e.target).find(".treeview-menu").css({display:"block"});
|
|
|
+ // $(e.target).find(".treeview-menu").css({display:"block"});
|
|
|
$(menuBtn).find(".treeview-menu").slideDown();
|
|
|
+ } else {
|
|
|
+ $(menuBtn).find(".treeview-menu").slideUp();
|
|
|
}
|
|
|
- else{
|
|
|
- $(menuBtn).find(".treeview-menu").slideUp();
|
|
|
- }
|
|
|
- }
|
|
|
- else if((router || (linkUrl && target=="_self")) && $(menuBtn).hasClass("main-menu"))
|
|
|
- {
|
|
|
-
|
|
|
+ } else if (
|
|
|
+ (router || (linkUrl && target == "_self")) &&
|
|
|
+ $(menuBtn).hasClass("main-menu")
|
|
|
+ ) {
|
|
|
$(".treeview").removeClass("menu-open");
|
|
|
- $("#treeview-menu").css({display:"none"});
|
|
|
+ $("#treeview-menu").css({ display: "none" });
|
|
|
$("li.main-menu").removeClass("active");
|
|
|
$(menuBtn).addClass("active");
|
|
|
- }
|
|
|
- else if((router || (linkUrl && target=="_self")) && $(menuBtn).hasClass("sub-menu"))
|
|
|
- {
|
|
|
+ } else if (
|
|
|
+ (router || (linkUrl && target == "_self")) &&
|
|
|
+ $(menuBtn).hasClass("sub-menu")
|
|
|
+ ) {
|
|
|
$("li.sub-menu").removeClass("active");
|
|
|
$(menuBtn).addClass("active");
|
|
|
}
|
|
|
- if(type==1)
|
|
|
- {
|
|
|
+ if (type == 1) {
|
|
|
var menuInfo = {};
|
|
|
menuInfo.menuName = menuName;
|
|
|
- if(subMenuName)
|
|
|
- {
|
|
|
+ if (subMenuName) {
|
|
|
menuInfo.subMenuName = subMenuName;
|
|
|
}
|
|
|
- if(linkUrl || router)
|
|
|
- {
|
|
|
- if(linkUrl)
|
|
|
- {
|
|
|
+ if (linkUrl || router) {
|
|
|
+ if (linkUrl) {
|
|
|
menuInfo.linkUrl = linkUrl;
|
|
|
}
|
|
|
- if(router)
|
|
|
- {
|
|
|
+ if (router) {
|
|
|
menuInfo.router = router;
|
|
|
}
|
|
|
this.storeMenuInfo(menuInfo);
|
|
|
}
|
|
|
- if(router)
|
|
|
- {
|
|
|
- this.$router.push(router);
|
|
|
+ if (router) {
|
|
|
+ this.$router.push({ path: router, query: { menuId: id } });
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
- getType () {
|
|
|
- let className="";
|
|
|
+ getType() {
|
|
|
+ let className = "";
|
|
|
if (this.isHeader) {
|
|
|
- return 'header'
|
|
|
+ return "header";
|
|
|
}
|
|
|
- if(this.type !== 'item'){
|
|
|
- if(this.active)
|
|
|
- {
|
|
|
- className+="active menuOpen";
|
|
|
+ if (this.type !== "item") {
|
|
|
+ if (this.active) {
|
|
|
+ className += "active menuOpen";
|
|
|
}
|
|
|
- className+=" treeview";
|
|
|
+ className += " treeview";
|
|
|
}
|
|
|
return className;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- a:active,
|
|
|
- a:visited,
|
|
|
- a:focus,
|
|
|
- a:hover {
|
|
|
- outline: 0;
|
|
|
- text-decoration: none !important;
|
|
|
- }
|
|
|
- .skin-blue .sidebar-menu>li>.treeview-menu .sub-menu a{
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .skin-blue .sidebar a,.skin-blue .sidebar a span{color:hsla(0,0%,100%,.7); font-size: 14px; font-weight: normal;}
|
|
|
- .skin-blue .sidebar-menu .treeview-menu>li>a{color:#fff;}
|
|
|
- .skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a{
|
|
|
- background: #484f61; color: #fff;border-left:none;
|
|
|
+a:active,
|
|
|
+a:visited,
|
|
|
+a:focus,
|
|
|
+a:hover {
|
|
|
+ outline: 0;
|
|
|
+ text-decoration: none !important;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li > .treeview-menu .sub-menu a {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.skin-blue .sidebar a,
|
|
|
+.skin-blue .sidebar a span {
|
|
|
+ color: hsla(0, 0%, 100%, 0.7);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li > a {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li:hover > a,
|
|
|
+.skin-blue .sidebar-menu > li.active > a,
|
|
|
+.skin-blue .sidebar-menu > li.menu-open > a {
|
|
|
+ background: #484f61;
|
|
|
+ color: #fff;
|
|
|
+ border-left: none;
|
|
|
+}
|
|
|
+.sidebar-menu li > a > .pull-right-container > .fa-angle-left {
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li > a:hover {
|
|
|
+ background: #484f61;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li.active > a {
|
|
|
+ border-left-color: none;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li > .treeview-menu {
|
|
|
+ padding: 0 0;
|
|
|
+ background: #353d50;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li > .treeview-menu .sub-menu a {
|
|
|
+ padding: 0 0 0 8px;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu > li > .treeview-menu .sub-menu {
|
|
|
+ margin: 0;
|
|
|
+ padding: 14px 24px;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li.active {
|
|
|
+ background: #2d8cf0;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li:hover {
|
|
|
+ background: #50aaec;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li.active a,
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li:hover a {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li.active a span,
|
|
|
+.skin-blue .sidebar-menu .treeview-menu > li:hover a span {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
- .sidebar-menu li>a>.pull-right-container>.fa-angle-left{
|
|
|
- margin-right: 3px;
|
|
|
- }
|
|
|
-.skin-blue .sidebar-menu>li>a:hover{background: #484f61;}
|
|
|
-.skin-blue .sidebar-menu>li.active>a{border-left-color:none;}
|
|
|
-.skin-blue .sidebar-menu>li>.treeview-menu{padding:0 0; background: #353d50;}
|
|
|
-.skin-blue .sidebar-menu>li>.treeview-menu .sub-menu a{padding:0 0 0 8px;}
|
|
|
-.skin-blue .sidebar-menu>li>.treeview-menu .sub-menu{margin:0;padding:14px 24px;}
|
|
|
-.skin-blue .sidebar-menu .treeview-menu>li.active{ background: #2d8cf0;color:#fff;}
|
|
|
-.skin-blue .sidebar-menu .treeview-menu>li:hover{ background:#50aaec;color:#fff;}
|
|
|
-.skin-blue .sidebar-menu .treeview-menu>li.active a,.skin-blue .sidebar-menu .treeview-menu>li:hover a{color:#fff;}
|
|
|
-.skin-blue .sidebar-menu .treeview-menu>li.active a span,.skin-blue .sidebar-menu .treeview-menu>li:hover a span{color:#fff;}
|
|
|
-
|
|
|
</style>
|
simple