Skip to content

A
apaas-ui
Commit 4f62d9e6 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

配动态菜单

parent 3a175488
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 609 deletions
src/components/menu-copy.vue deleted 100644 → 0
View file @ 3a175488
<template>
<!--
this page will be destoryed after userRoles is available
-->
<div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt class="logo" />
<div style="float:right;cursor: pointer;position:relative;" class="user_hover">
<span
v-if="userInfo.user_name && userInfo.user_name !=''"
class="user"
>{{ userInfo.user_name }}</span>
<span v-else @click="gotopage('login')" class="user">请登录</span>
<img
:class="userInfo.picture_path ? 'user_pic': 'user_default'"
:src="
userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
"
/>
<div v-if="userInfo.user_name && userInfo.user_name !=''" class="user_menu">
<div
v-for="(item, index) in user_arr"
:key="index + 700"
@click="gotopage(item.path)"
>{{ item.name }}</div>
</div>
<div v-if="userInfo.user_name && userInfo.user_name !=''" class="sj"></div>
</div>
<div
style="float:right;cursor: pointer;position:relative;"
class="shop_hover"
@click="gotopage('/shop/shopping_cart')"
>
<div class="car">
<el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
<img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
</div>
<div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_menu">
<div class="shop_list_title">最近加入的服务：</div>
<div
v-for="(item, index) in shopping_list"
:key="'shopping' + index"
class="shop_list_cell shop_line"
>
<img :src="item.service.cover" class="shop_img" />
<div class="shop_cell_msgs">
<p @click="getDetail(item.id)" class="shop_cell_name over_one">
{{
item.service_id == 0
? item.application.app_name
: item.service.name
}}
</p>
<p class="shop_cell_msg bover_one">
{{
item.service_id == 0
? item.application.ywly
: item.service.sectors_name
}}
</p>
<p class="shop_cell_msg over_one">
{{
item.service_id == 0
? item.application.org
: item.service.organization_name
}}
</p>
</div>
<div>
<img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
</div>
</div>
<div class="shop_footer">
<el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
</div>
</div>
<div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_sj"></div>
</div>
<div style="float:right">
<div
v-for="(item, index) in menu_arr"
:key="index + 200"
class="menu_box user_hover"
@click="navAction(index, item.visit_url)"
:style="{ color: now_menu == index ? '#fff' : '' }"
>
{{ item.menu_name }}
<div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
<div
v-for="(v, indexs) in item.Child"
:key="indexs + 700"
@click.stop="gotoChildPage(v, index)"
>{{ v.menu_name }}</div>
</div>
<div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
<div class="bottom_show" v-if="now_menu == index"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menu_arr: [
// {
// name: "工作台",
// path: "/workplace",
// children: [
// {
// name: "服务注册",
// path: "/fwzc/fwcs"
// },
// {
// name: "服务管理",
// path: "/fwgl/"
// },
// {
// name: "应用管理",
// path: "/yygl/"
// }
// ]
// },
// {
// name: "技术支持",
// path: "/xxx"
// },
// {
// name: "服务超市",
// path: "/services_shop",
// children: [
// {
// name: "数据服务",
// path: "/shop/data_service_list/5"
// },
// {
// name: "时空服务",
// path: "/shop/space_time_service_list/6"
// },
// {
// name: "视频服务",
// path: "/shop/video_service_list/7"
// },
// {
// name: "感知服务",
// path: "/shop/perception_service_list/10"
// },
// {
// name: "综合应用",
// path: "/shop/comprehensive_app_list/11"
// },
// {
// name: "云资源服务",
// path: "/shop/cloud"
// },
// {
// name: "应用商店",
// path: "/shop/app_store_list/12"
// }
// ]
// }
],
now_menu: 2,
user_arr: [
{ name: "个人档案", path: "/user/user_info" },
{ name: "消息通知", path: "/user/message" },
{ name: "收银中心", path: "" },
{ name: "关于BD-aPaaS", path: "" },
{ name: "退出登录", path: "logout" }
],
shopping_list: [],
menuCartNum: 0
};
},
mounted() {
this.getNowMenu();
this.getList();
},
computed: {
getMenuCartState() {
return this.$store.state.menuCartState;
},
userInfo() {
return this.$store.state.userInfo || {};
}
},
watch: {
getMenuCartState(newVal) {
this.getList();
}
},
methods: {
gotopage(n) {
if (n == "logout") {
window.location.href = "/iam/api/logout";
} else if (n == "login") {
let path = this.$route.path;
window.location.href = "/iam/login/#/login?ReturnUrl=" + path;
} else {
this.$router.push(n);
}
},
settlement() {
this.$router.push({ name: "shoppingCart" });
},
deleteItem(id) {
let query = [id];
this.$api.serviceShop.delShoppingCart(query).then(response => {
this.getList();
});
},
getDetail() {
// if you want goto detail page, you should give me the type at first
// at here, we will goto shopping cart
this.$router.push({ name: "shoppingCart" });
},
navAction(index, path) {
this.$router.push(path);
this.now_menu = index;
window.sessionStorage.setItem("menuIndex", index);
},
gotoChildPage(v, parent) {
if (v.visit_url) {
if (v.visit_url == "/fwgl/" || v.visit_url == "/yygl/") {
this.$router.push(v.visit_url + this.$store.getters.level);
} else if (parent == 2) {
this.$router.push(v.visit_url);
this.$store.commit("serviceShopMenuAct", v.visit_url);
} else {
this.$router.push(v.visit_url);
}
this.now_menu = parent;
window.sessionStorage.setItem("menuIndex", parent);
}
},
getList() {
this.$api.serviceShop.getShoppingCart().then(response => {
if (response.data.success == "1") {
this.menuCartNum = response.data.data.valid
? response.data.data.valid.length
: 0;
this.shopping_list = response.data.data.valid
? response.data.data.valid.slice(0, 3)
: [];
} else {
console.log(response.data.message);
}
});
},
getMenuIndex() {
let index = window.sessionStorage.getItem("menuIndex");
console.log(index);
this.now_menu = index ? index : 2;
},
getNowMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
if (response.data.success == 1) {
this.menu_arr = response.data.data[0].Child;
this.getMenuIndex();
}
});
}
}
};
</script>
<style scoped>
.menu {
width: 100%;
height: 84px;
background-color: #0f2683;
color: #8390ee;
line-height: 84px;
}
.logo {
float: left;
margin: 30px 0 0 40px;
}
.user {
float: right;
display: inline-block;
width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
font-size: 16px;
}
.user_pic {
float: right;
margin-right: 10px;
margin-top: 26px;
width: 30px;
height: 30px;
}
.user_default {
float: right;
margin-right: 10px;
margin-top: 30px;
}
.car {
float: right;
width: 50px;
text-align: center;
position: relative;
}
.number {
position: absolute;
background-color: #e56600;
border-radius: 11px;
color: #fcefd6;
line-height: 18px;
height: 20px;
text-align: center;
left: 38px;
top: 26px;
z-index: 2;
}
.car_img {
position: relative;
top: 7px;
}
.menu_box {
float: right;
width: 185px;
text-align: center;
cursor: pointer;
position: relative;
}
.menu_box:nth-of-type(1) {
margin-right: 52px;
}
.bottom_show {
width: 24px;
height: 5px;
background-color: #e56600;
border-radius: 3px;
position: absolute;
bottom: 0px;
left: calc(50% - 12px);
}
.user_menu {
width: 135px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
left: -20px;
overflow: hidden;
display: none;
z-index: 1;
}
.shop_menu {
width: 280px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 8px;
position: absolute;
top: 80px;
left: -20px;
overflow: hidden;
display: none;
z-index: 1;
padding: 10px 20px;
}
.user_hover:hover .user_menu {
display: block;
}
.user_hover:hover .sj {
display: block;
}
.shop_hover {
height: 100%;
margin-right: 50px;
}
.shop_hover:hover .shop_menu {
display: block;
}
.shop_hover:hover .shop_sj {
display: block;
}
.user_menu div {
width: 135px;
height: 44px;
line-height: 44px;
text-align: center;
color: #0d1847;
}
.user_menu div:hover {
background-color: #e56600;
color: #fff;
}
.sj {
width: 16px;
height: 16px;
background-color: #e56600;
position: absolute;
top: 72px;
transform: rotate(45deg);
display: none;
}
.shop_sj {
width: 16px;
height: 16px;
background-color: #fff;
position: absolute;
top: 72px;
left: 20px;
transform: rotate(45deg);
display: none;
}
.shop_list_title {
color: #8890a7;
font-size: 14px;
height: 30px;
line-height: 30px;
}
.shop_list_cell {
height: 80px;
padding: 10px 0;
display: flex;
line-height: 26px;
}
.shop_line {
border-bottom: #f4f7fc 2px solid;
}
.shop_line:nth-last-child(2) {
border-bottom: 0;
}
.shop_img {
width: 60px;
height: 60px;
border-radius: 8px;
}
.shop_footer {
width: 100%;
height: 50px;
text-align: right;
padding: 15px 0;
line-height: 30px;
}
.shop_settlement {
background-color: #e56600;
color: #fcefd6;
}
.shop_cell_msgs {
width: calc(100% - 80px);
margin-left: 10px;
}
.shop_cell_name {
color: #2d3867;
font-size: 14px;
line-height: 24px;
}
.shop_cell_name:hover {
color: #0d0807;
}
.shop_cell_msg {
color: #8890a7;
font-size: 12px;
line-height: 18px;
}
.over_one {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<style>
.number .el-badge__content {
background-color: #e56600;
border: 0;
line-height: 18px;
padding: 0 7px;
}
</style>
\ No newline at end of file
src/components/menu.vue
View file @ 4f62d9e6
...@@ -78,18 +78,18 @@ ...@@ -78,18 +78,18 @@
v-for="(item, index) in menu_arr" v-for="(item, index) in menu_arr"
:key="index + 200" :key="index + 200"
class="menu_box user_hover" class="menu_box user_hover"
@click="navAction(index, item.path)" @click="navAction(index, item.visit_url)"
:style="{ color: now_menu == index ? '#fff' : '' }" :style="{ color: now_menu == index ? '#fff' : '' }"
> >
{{ item.name }} {{ item.menu_name }}
<div class="user_menu" v-if="item.children && item.children.length" style="left: 30px;"> <div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
<div <div
v-for="(v, indexs) in item.children" v-for="(v, indexs) in item.Child"
:key="indexs + 700" :key="indexs + 700"
@click.stop="gotoChildPage(v, index)" @click.stop="gotoChildPage(v, index)"
>{{ v.name }}</div> >{{ v.menu_name }}</div>
</div> </div>
<div class="sj" v-if="item.children && item.children.length" style="left: 60px;"></div> <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
<div class="bottom_show" v-if="now_menu == index"></div> <div class="bottom_show" v-if="now_menu == index"></div>
</div> </div>
</div> </div>
...@@ -100,70 +100,13 @@ ...@@ -100,70 +100,13 @@
export default { export default {
data() { data() {
return { return {
menu_arr: [ menu_arr: [],
{
name: "工作台",
path: "/workplace",
children: [
{
name: "服务注册",
path: "/fwzc/fwcs"
},
{
name: "服务管理",
path: "/fwgl/"
},
{
name: "应用管理",
path: "/yygl/"
}
]
},
{
name: "技术支持",
path: "/xxx"
},
{
name: "服务超市",
path: "/services_shop",
children: [
{
name: "数据服务",
path: "/shop/data_service_list/5"
},
{
name: "时空服务",
path: "/shop/space_time_service_list/6"
},
{
name: "视频服务",
path: "/shop/video_service_list/7"
},
{
name: "感知服务",
path: "/shop/perception_service_list/10"
},
{
name: "综合应用",
path: "/shop/comprehensive_app_list/11"
},
{
name: "云资源服务",
path: "/shop/cloud"
},
{
name: "应用商店",
path: "/shop/app_store_list/12"
}
]
}
],
now_menu: 2, now_menu: 2,
user_arr: [ user_arr: [
{ name: "个人档案", path: "/user/user_info" }, { name: "个人档案", path: "/user/user_info" },
{ name: "消息通知", path: "/user/message" }, { name: "消息通知", path: "/user/message" },
{ name: "收银中心", path: "/authority" }, { name: "收银中心", path: "" },
{ name: "关于BD-aPaaS", path: "/data_analysis" }, { name: "关于BD-aPaaS", path: "" },
{ name: "退出登录", path: "logout" } { name: "退出登录", path: "logout" }
], ],
shopping_list: [], shopping_list: [],
...@@ -171,7 +114,7 @@ export default { ...@@ -171,7 +114,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.getMenuIndex(); this.getNowMenu();
this.getList(); this.getList();
}, },
computed: { computed: {
...@@ -218,14 +161,14 @@ export default { ...@@ -218,14 +161,14 @@ export default {
window.sessionStorage.setItem("menuIndex", index); window.sessionStorage.setItem("menuIndex", index);
}, },
gotoChildPage(v, parent) { gotoChildPage(v, parent) {
if (v.path) { if (v.visit_url) {
if (v.path == "/fwgl/" || v.path == "/yygl/") { if (v.visit_url == "/fwgl/" || v.visit_url == "/yygl/") {
this.$router.push(v.path + this.$store.getters.level); this.$router.push(v.visit_url + this.$store.getters.level);
} else if (parent == 2) { } else if (parent == 2) {
this.$router.push(v.path); this.$router.push(v.visit_url);
this.$store.commit("serviceShopMenuAct", v.path); this.$store.commit("serviceShopMenuAct", v.visit_url);
} else { } else {
this.$router.push(v.path); this.$router.push(v.visit_url);
} }
this.now_menu = parent; this.now_menu = parent;
window.sessionStorage.setItem("menuIndex", parent); window.sessionStorage.setItem("menuIndex", parent);
...@@ -249,6 +192,14 @@ export default { ...@@ -249,6 +192,14 @@ export default {
let index = window.sessionStorage.getItem("menuIndex"); let index = window.sessionStorage.getItem("menuIndex");
console.log(index); console.log(index);
this.now_menu = index ? index : 2; this.now_menu = index ? index : 2;
},
getNowMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
if (response.data.success == 1) {
this.menu_arr = response.data.data[0].Child;
this.getMenuIndex();
}
});
} }
} }
}; };
......
src/components/service_shop_menu.vue
View file @ 4f62d9e6
<template> <template>
<div class="service_shop_menu"> <div class="service_shop_menu">
<ul class="service_shop_menu_list"> <ul class="service_shop_menu_list">
<li v-for="(item, index) in menuList" :key="index" @click="active(item.router)"> <li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
<img <img
v-if="item.router == actives" v-if="item.visit_url == actives"
:src="require('../assets/imgs/' + item.active + '.png')" :src="item.active != '' ? require('../assets/imgs/' + item.active + '.png') : ''"
class="menu_img" class="menu_img"
/> />
<img v-else :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" /> <img v-else :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" />
<span :class="item.router == actives ? 'menu_item_active':'menu_item'">{{ item.label }}</span> <span
:class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
>{{ item.menu_name }}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -20,57 +22,7 @@ export default { ...@@ -20,57 +22,7 @@ export default {
data() { data() {
return { return {
actives: "", actives: "",
menuList: [ menuList: []
{
id: 0,
label: "数据服务",
router: "/shop/data_service_list/5",
active: "tool_ic_shujufw_sel",
default: "tool_ic_shujufw"
},
{
id: 1,
label: "时空服务",
router: "/shop/space_time_service_list/6",
active: "tool_ic_shikongfw_sel",
default: "tool_ic_shikongfw"
},
{
id: 2,
label: "视频服务",
router: "/shop/video_service_list/7",
active: "tool_ic_shipinfw_sel",
default: "tool_ic_shipinfw"
},
{
id: 3,
label: "感知服务",
router: "/shop/perception_service_list/10",
active: "tool_ic_ganzhifw_sel",
default: "tool_ic_ganzhifw"
},
{
id: 4,
label: "综合服务",
router: "/shop/comprehensive_app_list/11",
active: "tool_ic_zongheyyfw_sel",
default: "tool_ic_zongheyyfw"
},
{
id: 5,
label: "云资源服务",
router: "/shop/cloud",
active: "tool_ic_yunziyuanfw_sel",
default: "tool_ic_yunziyuanfw"
},
{
id: 6,
label: "应用商店",
router: "/shop/app_store_list/12",
active: "tool_ic_yingyongsd_sel",
default: "tool_ic_yingyongsd"
}
]
}; };
}, },
computed: { computed: {
...@@ -84,6 +36,7 @@ export default { ...@@ -84,6 +36,7 @@ export default {
} }
}, },
mounted() { mounted() {
this.getShopMenu();
this.$store.commit("serviceShopMenuAct", this.$route.path); this.$store.commit("serviceShopMenuAct", this.$route.path);
this.actives = this.$store.state.serviceShopMenu; this.actives = this.$store.state.serviceShopMenu;
}, },
...@@ -94,6 +47,60 @@ export default { ...@@ -94,6 +47,60 @@ export default {
getActiveMenu(val) { getActiveMenu(val) {
this.actives = val; this.actives = val;
this.$router.push(val); this.$router.push(val);
},
getShopMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
if (response.data.success == 1) {
let arr = response.data.data[0].Child;
let shopArr = [];
arr.forEach(item => {
if (item.visit_url == "/services_shop") {
shopArr = item.Child;
}
});
shopArr.forEach(item => {
let uri = item.visit_url.substring(6);
if (uri.indexOf("/") != -1) {
uri = uri.substring(0, uri.indexOf("/"));
}
switch (uri) {
case "data_service_list":
item.active = "tool_ic_shujufw_sel";
item.default = "tool_ic_shujufw";
break;
case "space_time_service_list":
item.active = "tool_ic_shikongfw_sel";
item.default = "tool_ic_shikongfw";
break;
case "video_service_list":
item.active = "tool_ic_shipinfw_sel";
item.default = "tool_ic_shipinfw";
break;
case "perception_service_list":
item.active = "tool_ic_ganzhifw_sel";
item.default = "tool_ic_ganzhifw";
break;
case "comprehensive_app_list":
item.active = "tool_ic_zongheyyfw_sel";
item.default = "tool_ic_zongheyyfw";
break;
case "cloud":
item.active = "tool_ic_yunziyuanfw_sel";
item.default = "tool_ic_yunziyuanfw";
break;
case "app_store_list":
item.active = "tool_ic_yingyongsd_sel";
item.default = "tool_ic_yingyongsd";
break;
default:
item.active = "1";
item.default = "1";
break;
}
});
this.menuList = shopArr;
}
});
} }
} }
}; };
......
src/pages/authority/menu/menus.vue
View file @ 4f62d9e6
...@@ -149,8 +149,8 @@ export default { ...@@ -149,8 +149,8 @@ export default {
{ required: true, message: "请填写菜单访问地址", trigger: "blur" }, { required: true, message: "请填写菜单访问地址", trigger: "blur" },
{ {
min: 0, min: 0,
max: 30, max: 50,
message: "访问地址长度不超过30个字", message: "访问地址长度不超过50个字",
trigger: "blur" trigger: "blur"
} }
], ],
......
src/pages/service_shop/shop_list.vue
View file @ 4f62d9e6
...@@ -32,7 +32,6 @@ export default { ...@@ -32,7 +32,6 @@ export default {
getVal(val) { getVal(val) {
let uri = val.substring(6); let uri = val.substring(6);
uri = uri.substring(0, uri.indexOf("/")); uri = uri.substring(0, uri.indexOf("/"));
console.log(uri);
switch (uri) { switch (uri) {
case "data_service_list": case "data_service_list":
this.name = "数据服务"; this.name = "数据服务";
......
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