157 lines
3.5 KiB
Vue
157 lines
3.5 KiB
Vue
<template>
|
|
<div class="workbench">
|
|
<h3 class="workbench-title">全部应用</h3>
|
|
<el-tabs>
|
|
<el-tab-pane
|
|
v-for="(item, index) in routeData"
|
|
:key="index"
|
|
:label="item.meta ? item.meta.title : ''"
|
|
v-if="item.meta"
|
|
>
|
|
<div class="menuContainer">
|
|
<div
|
|
v-for="(list, listIndex) in item.children"
|
|
class="menuBox"
|
|
@click="goRoute(item, list)"
|
|
v-if="!item.meta.hidden"
|
|
>
|
|
<img
|
|
class="menuIcon"
|
|
:src="list.meta.icon"
|
|
v-if="list.meta.icon"
|
|
/>
|
|
<img class="menuIcon" src="../logo1.png" v-else />
|
|
<p class="menuContent">{{ list.meta.title }}</p>
|
|
</div>
|
|
</div></el-tab-pane
|
|
>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { TagsView } from "@/layout/components";
|
|
import request from "@/utils/request";
|
|
export default {
|
|
name: "Workbench",
|
|
components: {
|
|
TagsView,
|
|
},
|
|
created() {
|
|
this.$store.dispatch("settings/changeSetting", {
|
|
key: "showTagsView",
|
|
value: true,
|
|
});
|
|
},
|
|
data() {
|
|
return {
|
|
routeData: [], //菜单数据
|
|
};
|
|
},
|
|
mounted() {
|
|
let routeList = localStorage.getItem("routeList")
|
|
? JSON.parse(localStorage.getItem("routeList"))
|
|
: [];
|
|
this.routeData = this.OrganizeMenus(routeList);
|
|
},
|
|
methods: {
|
|
goRoute(val, item) {
|
|
let routeData = this.$router.resolve({
|
|
path: item.path,
|
|
name: item.name,
|
|
});
|
|
window.open(routeData.href, "_self");
|
|
},
|
|
// 处理icon
|
|
handlerIcon(item) {
|
|
let str = "";
|
|
if (item.includes("?")) {
|
|
str = item.split("?")[1];
|
|
} else {
|
|
str = item;
|
|
}
|
|
return str;
|
|
},
|
|
handlerIconColor(item) {
|
|
let color = "";
|
|
if (item.includes("?")) {
|
|
color = item.split("?")[0];
|
|
} else {
|
|
color = "#1478F6";
|
|
}
|
|
return color;
|
|
},
|
|
// 整理菜单数据
|
|
OrganizeMenus(data) {
|
|
let arrData = [];
|
|
data.forEach((bItem) => {
|
|
if (bItem.children && bItem.children.length > 0) {
|
|
bItem.children.forEach((cItem) => {
|
|
if (cItem.meta.icon) {
|
|
this.getLogoUrl(cItem.meta.icon).then((res) => {
|
|
let imageUrl =
|
|
"data:image/png/jpg;base64," +
|
|
btoa(
|
|
new Uint8Array(res).reduce(
|
|
(data, byte) => data + String.fromCharCode(byte),
|
|
""
|
|
)
|
|
);
|
|
this.$set(cItem.meta, 'icon', imageUrl)
|
|
});
|
|
}
|
|
});
|
|
}
|
|
arrData.push(bItem);
|
|
});
|
|
return arrData;
|
|
},
|
|
getLogoUrl(id) {
|
|
return request({
|
|
url:
|
|
"/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
|
|
method: "get",
|
|
responseType: "arraybuffer",
|
|
}).then((res) => {
|
|
return res;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.workbench {
|
|
background: #fff;
|
|
// padding: 15px;
|
|
margin: 0 10px;
|
|
}
|
|
.workbench-title {
|
|
margin: 15px 0;
|
|
}
|
|
.menuContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.menuBox {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fafafa;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
width: 200px;
|
|
margin: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.menuIcon {
|
|
width: 36px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border-radius: 12px;
|
|
margin-right: 10px;
|
|
}
|
|
.menuContent {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
</style> |