3b41cffbc9
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
305 lines
10 KiB
JavaScript
305 lines
10 KiB
JavaScript
// css 样式依赖common.css
|
|
const asideMenu = {
|
|
template: `
|
|
<el-aside width="190px">
|
|
<a :href="commonData.clientarea_logo_url || '/home.htm'" onclick="return false" class="menu-alink">
|
|
<img class="ali-logo" :src="logo" @click="goHome" v-show="logo"></img>
|
|
</a>
|
|
<el-menu class="menu-top" :default-active="menuActiveId" @select="handleSelect" background-color="transparent"
|
|
text-color="var(--color-menu-text)" active-text-color="var(--color-menu-text-active)">
|
|
<template v-for="(item,index) in menu1">
|
|
<!-- 只有一级菜单 -->
|
|
<template v-if="!item.child || item.child?.length === 0">
|
|
<a :href="getMenuUrl(item.id || item.url)" onclick="return false" class="menu-alink">
|
|
<el-menu-item :key="item.id ? item.id : item.url" :index="item.id ? item.id + '' : item.url">
|
|
<i class="iconfont" :class="item.icon"></i>
|
|
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
|
</el-menu-item>
|
|
</a>
|
|
</template>
|
|
|
|
<!-- 有二级菜单 -->
|
|
<el-submenu v-else :key="item.id ? item.id : item.url" :index="item.id ? item.id + '' : item.url">
|
|
<template slot="title">
|
|
<i class="iconfont" :class="item.icon"></i>
|
|
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
|
</template>
|
|
<template v-for="child in item.child">
|
|
<a :href="getMenuUrl(child.id || child.url)" onclick="return false" class="menu-alink">
|
|
<el-menu-item :index="child.id + ''" :key="child.id">
|
|
{{child.name}}
|
|
</el-menu-item>
|
|
</a>
|
|
</template>
|
|
</el-submenu>
|
|
</template>
|
|
</el-menu>
|
|
<div class="line" v-if="hasSeparate"></div>
|
|
<el-menu class="menu-top" :default-active="menuActiveId" @select="handleSelect" background-color="transparent"
|
|
text-color="var(--color-menu-text)" active-text-color="#FFF">
|
|
<template v-for="(item,index) in menu2">
|
|
<!-- 只有一级菜单 -->
|
|
<template v-if="!item.child || item.child?.length === 0">
|
|
<a :href="getMenuUrl(item.id || item.url)" onclick="return false" class="menu-alink">
|
|
<el-menu-item :key="item.id ? item.id + '' : item.url" :index="item.id ? item.id + '' : item.url">
|
|
<i class="iconfont" :class="item.icon"></i>
|
|
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
|
</el-menu-item>
|
|
</a>
|
|
</template>
|
|
|
|
<!-- 有二级菜单 -->
|
|
<el-submenu v-else :key="item.id ? item.id : item.url" :index="item.id ? item.id + '' : item.url">
|
|
<template slot="title">
|
|
<i class="iconfont" :class="item.icon"></i>
|
|
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
|
</template>
|
|
<template v-for="child in item.child">
|
|
<a :href="getMenuUrl(child.id || child.url)" onclick="return false" class="menu-alink">
|
|
<el-menu-item :index="child.id + ''" :key="child.id">
|
|
{{child.name}}
|
|
</el-menu-item>
|
|
</a>
|
|
</template>
|
|
</el-submenu>
|
|
</template>
|
|
</el-menu>
|
|
</el-aside>
|
|
|
|
`,
|
|
// 云服务器 当前
|
|
// 物理服务器 dcim
|
|
// 通用产品
|
|
data() {
|
|
return {
|
|
activeId: 1,
|
|
menu1: [],
|
|
menu2: [],
|
|
logo: "",
|
|
menuActiveId: "",
|
|
iconsData: [],
|
|
commonData: {},
|
|
noRepeat: [],
|
|
hasSeparate: false,
|
|
originMenu: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.doGetMenu();
|
|
// const mainLoading = document.getElementById("mainLoading");
|
|
// if (mainLoading) {
|
|
// mainLoading.style.display = "none";
|
|
// }
|
|
// if (document.getElementsByClassName("template")[0]) {
|
|
// document.getElementsByClassName("template")[0].style.display = "block";
|
|
// }
|
|
},
|
|
created() {
|
|
this.getCommonSetting();
|
|
},
|
|
beforeUpdate() {},
|
|
mixins: [mixin],
|
|
updated() {
|
|
// // 关闭loading
|
|
// document.getElementsByClassName('template')[0].style.display = 'block'
|
|
const mainLoading = document.getElementById("mainLoading");
|
|
if (mainLoading) {
|
|
mainLoading.style.display = "none";
|
|
}
|
|
if (document.getElementsByClassName("template")[0]) {
|
|
document.getElementsByClassName("template")[0].style.display = "block";
|
|
}
|
|
},
|
|
methods: {
|
|
// 页面跳转
|
|
// toPage(e) {
|
|
// // 获取 当前点击导航的id 存入本地
|
|
// const id = e.id
|
|
// localStorage.setItem('frontMenusActiveId', id)
|
|
// // 跳转到对应路径
|
|
// location.href = '/' + e.url
|
|
// },
|
|
// 获取通用配置
|
|
async getCommonSetting() {
|
|
try {
|
|
const res = await getCommon();
|
|
this.commonData = res.data.data;
|
|
localStorage.setItem(
|
|
"common_set_before",
|
|
JSON.stringify(res.data.data)
|
|
);
|
|
this.logo = this.commonData.system_logo;
|
|
} catch (error) {}
|
|
},
|
|
// 判断当前菜单激活
|
|
setActiveMenu() {
|
|
const originUrl = location.pathname.slice(1);
|
|
const allUrl = originUrl + location.search;
|
|
let flag = false;
|
|
this.originMenu.forEach((item) => {
|
|
// 当前url下存在和导航菜单对应的路径
|
|
if (!item.child && item.url) {
|
|
const url = String(item.url).split("?");
|
|
if (
|
|
(url.length > 1 && item.url == allUrl) ||
|
|
(url.length == 1 && item.url == originUrl)
|
|
) {
|
|
this.menuActiveId = item.id + "";
|
|
flag = true;
|
|
}
|
|
}
|
|
// 当前url下存在二级菜单
|
|
if (item.child && item.child.length > 0) {
|
|
item.child.forEach((child) => {
|
|
const url = String(child.url).split("?");
|
|
if (
|
|
(url.length > 1 && child.url == allUrl) ||
|
|
(url.length == 1 && child.url == originUrl)
|
|
) {
|
|
this.menuActiveId = child.id + "";
|
|
flag = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
if (!flag) {
|
|
this.menuActiveId = localStorage.getItem("frontMenusActiveId") || "";
|
|
}
|
|
},
|
|
goHome() {
|
|
localStorage.frontMenusActiveId = "";
|
|
const openUrl = this.commonData.clientarea_logo_url || "/home.htm";
|
|
if (this.commonData.clientarea_logo_url_blank == 1) {
|
|
window.open(openUrl);
|
|
} else {
|
|
location.href = openUrl;
|
|
}
|
|
},
|
|
|
|
// 获取前台导航
|
|
doGetMenu() {
|
|
getMenu().then((res) => {
|
|
if (res.data.status === 200) {
|
|
res.data.data.menu.forEach((item) => {
|
|
if (item.child && item.child.length > 0) {
|
|
this.originMenu.push(...item.child);
|
|
} else {
|
|
this.originMenu.push(item);
|
|
}
|
|
});
|
|
const menu = res.data.data.menu;
|
|
localStorage.setItem("frontMenus", JSON.stringify(menu));
|
|
let index = menu.findIndex((item) => item.name == "分隔符");
|
|
if (index != -1) {
|
|
this.hasSeparate = true;
|
|
this.menu1 = menu.slice(0, index);
|
|
this.menu2 = menu.slice(index + 1);
|
|
} else {
|
|
this.hasSeparate = false;
|
|
this.menu1 = menu;
|
|
}
|
|
|
|
this.setActiveMenu();
|
|
}
|
|
});
|
|
// 获取详情
|
|
accountDetail()
|
|
.then((res) => {
|
|
if (res.data.status == 200) {
|
|
let obj = res.data.data.account;
|
|
let id = res.data.data.account.id;
|
|
localStorage.setItem(
|
|
"is_sub_account",
|
|
obj.customfield?.is_sub_account
|
|
);
|
|
if (obj.customfield?.is_sub_account == 1) {
|
|
// 子账户
|
|
accountPermissions(id).then((relust) => {
|
|
let rule = relust.data.data.rule;
|
|
this.$emit("getruleslist", rule);
|
|
});
|
|
} else {
|
|
// 主账户
|
|
this.$emit("getruleslist", "all");
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err, "err----->");
|
|
});
|
|
},
|
|
arrFun(n) {
|
|
for (var i = 0; i < n.length; i++) {
|
|
//用typeof判断是否是数组
|
|
if (n[i].child && typeof n[i].child == "object") {
|
|
let obj = JSON.parse(JSON.stringify(n[i]));
|
|
delete obj.child;
|
|
this.noRepeat.push(obj);
|
|
this.arrFun(n[i].child);
|
|
} else {
|
|
this.noRepeat.push(n[i]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/*
|
|
* 获取菜单url
|
|
* @param {Number} id 菜单id 或者url
|
|
* @return {String} url 菜单url
|
|
*/
|
|
getMenuUrl(id) {
|
|
const temp =
|
|
this.originMenu.find((item) => item.id == id || item.url == id) || {};
|
|
const reg =
|
|
/^(((ht|f)tps?):\/\/)([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
|
|
let url = "/" + temp.url;
|
|
if (reg.test(temp.url)) {
|
|
if (temp?.second_reminder === 1) {
|
|
url = `/transfer.htm?target=${encodeURIComponent(temp.url)}`;
|
|
} else {
|
|
url = temp.url;
|
|
}
|
|
}
|
|
return url;
|
|
},
|
|
|
|
handleSelect(id) {
|
|
localStorage.setItem("frontMenusActiveId", id);
|
|
const temp =
|
|
this.originMenu.find((item) => item.id == id || item.url == id) || {};
|
|
const reg =
|
|
/^(((ht|f)tps?):\/\/)([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
|
|
if (reg.test(temp.url)) {
|
|
if (temp?.second_reminder === 1) {
|
|
return window.open(
|
|
`/transfer.htm?target=${encodeURIComponent(temp.url)}`
|
|
);
|
|
} else {
|
|
return window.open(temp.url);
|
|
}
|
|
}
|
|
location.href = "/" + temp.url;
|
|
},
|
|
getAllIcon() {
|
|
let url = "/upload/common/iconfont/iconfont.json";
|
|
let _this = this;
|
|
|
|
// 申明一个XMLHttpRequest
|
|
let request = new XMLHttpRequest();
|
|
// 设置请求方法与路径
|
|
request.open("get", url);
|
|
// 不发送数据到服务器
|
|
request.send(null);
|
|
//XHR对象获取到返回信息后执行
|
|
request.onload = function () {
|
|
// 解析获取到的数据
|
|
let data = JSON.parse(request.responseText);
|
|
_this.iconsData = data.glyphs;
|
|
_this.iconsData.map((item) => {
|
|
item.font_class = "icon-" + item.font_class;
|
|
});
|
|
};
|
|
},
|
|
},
|
|
};
|