push
This commit is contained in:
xuziqiang
92
lib/paas/view/system/application/application.vue
Normal file
92
lib/paas/view/system/application/application.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<a-config-provider :locale="locale">
|
||||
<router-view v-if="isLogin" />
|
||||
<template v-else>
|
||||
<ns-layout v-if="ifShowHeader" />
|
||||
<ns-content v-else />
|
||||
</template>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, watch } from 'vue';
|
||||
import NsLayout from '../layout/layout.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||
import { authorizationService } from '/nerv-base/store/modules/authorization-service';
|
||||
import { appConfigStore } from '/nerv-base/store/modules/app-config';
|
||||
export default defineComponent({
|
||||
name: 'NsApplication',
|
||||
components: { NsLayout },
|
||||
props: {
|
||||
layout: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const route = useRoute();
|
||||
const isLogin = ref(false);
|
||||
const switchData = computed(() => authorizationService().switches);
|
||||
|
||||
let ifShowHeader = ref(props.layout);
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(e) => {
|
||||
isLogin.value = e === '/login';
|
||||
},
|
||||
);
|
||||
|
||||
console.log('window.self === window.top', window.self === window.top);
|
||||
//判断页面是否被嵌在iframe中
|
||||
if (!(window.self === window.top)) {
|
||||
console.log('在iframe中');
|
||||
ifShowHeader.value = false;
|
||||
}
|
||||
|
||||
return {
|
||||
appConfig: appConfigStore(),
|
||||
switchData,
|
||||
isLogin,
|
||||
locale: zhCN,
|
||||
ifShowHeader,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
switchData: {
|
||||
handler() {
|
||||
if (!this.appConfig.customAppTitle) {
|
||||
this.setHead();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setHead() {
|
||||
/** stack和cloud平台分别设置标签页信息 */
|
||||
try {
|
||||
const switchData = authorizationService().switches;
|
||||
const app = authorizationService().getApp();
|
||||
if (switchData && switchData.isNervStack) {
|
||||
console.log(document.getElementsByTagName('link')[0]);
|
||||
document.getElementsByTagName('title')[0].innerText = 'OP Console';
|
||||
document
|
||||
.getElementsByTagName('link')[0]
|
||||
.setAttribute('href', `/${app}/favicon-stack.ico`);
|
||||
} else {
|
||||
document.getElementsByTagName('title')[0].innerText = 'Cloud Console';
|
||||
document.getElementsByTagName('link')[0].setAttribute('href', `/${app}/favicon.ico`);
|
||||
}
|
||||
} catch (error) {
|
||||
document.getElementsByTagName('title')[0].innerText = 'Cloud Console';
|
||||
document.getElementsByTagName('link')[0].setAttribute('href', `/${app}/favicon.ico`);
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
4
lib/paas/view/system/application/index.ts
Normal file
4
lib/paas/view/system/application/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import application from './application.vue';
|
||||
import { withInstall } from '/nerv-lib/util';
|
||||
|
||||
export const NsApplication = withInstall(application);
|
||||
24
lib/paas/view/system/layout/content.vue
Normal file
24
lib/paas/view/system/layout/content.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<!-- <ns-tags /> -->
|
||||
<!-- <a-layout-content > -->
|
||||
<router-view />
|
||||
<!-- <router-view v-slot="{ Component }" :include="data">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view> -->
|
||||
<!-- </a-layout-content> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'NsContent',
|
||||
setup() {
|
||||
const cachedViews = ref(['Status']);
|
||||
return { cachedViews };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
243
lib/paas/view/system/layout/header.vue
Normal file
243
lib/paas/view/system/layout/header.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<a-layout-header class="header">
|
||||
<a-row type="flex">
|
||||
<a-col class="nav-item nav-logo">
|
||||
<!--logo-->
|
||||
<img v-if="!customAppLogo" class="app-logo" :src="imageUrl" />
|
||||
<ns-icon v-else style="width: 100px; height: 30px" class="headerLogin" name="headerLogin" />
|
||||
</a-col>
|
||||
<a-col class="nav-item nav-menu">
|
||||
<!--产品与服务-->
|
||||
<ns-start-menu />
|
||||
</a-col>
|
||||
|
||||
<a-col class="nav-item nav-region">
|
||||
<!--地域-->
|
||||
<nav-region />
|
||||
</a-col>
|
||||
<a-col flex="1 1 0%">
|
||||
<!--占位-->
|
||||
</a-col>
|
||||
<a-col class="nav-item nav-notice" v-if="showNotify">
|
||||
<!--通知中心-->
|
||||
<div class="notify" @click="gotoNotify()" title="通知中心">
|
||||
<span>通知中心</span>
|
||||
<i class="tip" v-if="notifies.length > 0"></i>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col class="nav-item nav-user">
|
||||
<!--用户菜单-->
|
||||
<ns-icon name="user" class="icon-user" />
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
{{ userName }}
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu v-for="(item, index) in userMenus" :key="index">
|
||||
<a-menu-item key="index">
|
||||
<a @click="onUserMenu(item.name)">{{ item.label }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-col>
|
||||
|
||||
<a-col>
|
||||
<!-- <div class="plugins right">-->
|
||||
<!-- <div class="theme-dropdown">-->
|
||||
<!-- <a-dropdown-->
|
||||
<!-- :trigger="['click']"-->
|
||||
<!-- :overlayStyle="{ width: '220px' }"-->
|
||||
<!-- v-model:visible="themeVisible"-->
|
||||
<!-- >-->
|
||||
<!-- <BgColorsOutlined :style="{ fontSize: '18px', color: themeColor?.hex || themeColor }" />-->
|
||||
<!-- <template #overlay>-->
|
||||
<!-- <NsColorPicker v-model:value="themeColor" />-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-dropdown>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { loginService } from '/nerv-lib/paas/store/modules/login-service';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
import NsStartMenu from './start-menu.vue';
|
||||
import NavRegion from './region.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { debouncedWatch } from '@vueuse/core';
|
||||
import { appConfigStore } from '/nerv-lib/paas/store/modules/app-config';
|
||||
export default defineComponent({
|
||||
name: 'NsHeader',
|
||||
components: { NsStartMenu, DownOutlined, NavRegion },
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-valid-default-prop
|
||||
headerList: { type: Array, default: () => [] },
|
||||
initHeaderKey: { type: Array },
|
||||
notifies: { type: Array, default: () => [] },
|
||||
showNotify: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup: () => {
|
||||
const loginMap = loginService();
|
||||
let { userName } = storeToRefs(loginMap);
|
||||
const imageUrl = ref('/api/passport/objs/LogoImage/logo.png');
|
||||
const appConfig = appConfigStore();
|
||||
let themeColor = ref('#194d33');
|
||||
let themeVisible = ref(false);
|
||||
|
||||
function changeTheme(color) {
|
||||
// replaceStyleVariables({ colorVariables: [...getThemeColors(color)] });
|
||||
}
|
||||
|
||||
debouncedWatch(
|
||||
() => themeColor.value,
|
||||
() => {
|
||||
changeTheme(themeColor.value?.hex);
|
||||
},
|
||||
{
|
||||
debounce: 500,
|
||||
},
|
||||
);
|
||||
return {
|
||||
customAppLogo: appConfig.customAppLogo,
|
||||
imageUrl,
|
||||
userName,
|
||||
themeColor,
|
||||
themeVisible,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
region: { value: '' },
|
||||
userMenus: [{ label: '退出', name: 'exit' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
gotoNotify() {
|
||||
// if (this.authorizationService.isCurrentApp('nervui-notify')) {
|
||||
// if (this.region) {
|
||||
// this.router.navigate(['/notify/WebConsoleMsg'], {
|
||||
// relativeTo: this.route,
|
||||
// replaceUrl: true,
|
||||
// queryParams: { view: 'unreadWebConsoleMsg', region: this.region.value },
|
||||
// });
|
||||
// } else {
|
||||
// this.router.navigate(['/notify/WebConsoleMsg'], {
|
||||
// relativeTo: this.route,
|
||||
// replaceUrl: true,
|
||||
// queryParams: { view: 'unreadWebConsoleMsg' },
|
||||
// });
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
if (this.region) {
|
||||
window.location.href =
|
||||
'/nervui-notify/notify/unWebConsoleMsg/list?®ion=' + this.region.value;
|
||||
} else {
|
||||
window.location.href = '/nervui-notify/notify/unWebConsoleMsg/list';
|
||||
}
|
||||
},
|
||||
onUserMenu(name: string) {
|
||||
if (name === 'exit') {
|
||||
const loginMap = loginService();
|
||||
loginMap.logout();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 20px 0 rgb(23 46 1 / 3%);
|
||||
// border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.ant-row {
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
color: @layout-header-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
|
||||
.icon-logo {
|
||||
width: 60px !important;
|
||||
height: 36px !important;
|
||||
color: @layout-header-link-color !important;
|
||||
}
|
||||
.app-logo {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
margin: 11px 3px 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
padding: 0 16px;
|
||||
.icon-user {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
color: @layout-header-link-color !important;
|
||||
margin-right: 8px;
|
||||
}
|
||||
a {
|
||||
color: @layout-header-link-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notify {
|
||||
position: relative;
|
||||
color: @layout-header-color;
|
||||
.tip {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: -4px;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
transform: scale(0.8);
|
||||
background: #ff1744;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(
|
||||
.ant-dropdown-trigger > .anticon.anticon-down,
|
||||
.ant-dropdown-link > .anticon.anticon-down,
|
||||
.ant-dropdown-button > .anticon.anticon-down
|
||||
) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.theme-dropdown {
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
lib/paas/view/system/layout/layout.vue
Normal file
250
lib/paas/view/system/layout/layout.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div className="application" style="height: 100%">
|
||||
<div className="headerMenu" v-if="showLayout">
|
||||
<ns-header :notifies="notifies" :showNotify="showNotify" />
|
||||
</div>
|
||||
<div className="contentMenu">
|
||||
<div className="leftMenu" v-if="showLayout">
|
||||
<ns-sider :appRecords="docks" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<ns-content />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service';
|
||||
import { CatalogConfigService, CatalogItem } from '/nerv-lib/paas/store/modules/catalog-config';
|
||||
import {defineComponent, inject} from 'vue';
|
||||
import NsHeader from './header.vue';
|
||||
import NsSider from './sider.vue';
|
||||
import NsContent from './content.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsLayout',
|
||||
components: { NsHeader, NsSider, NsContent },
|
||||
provide() {
|
||||
return {
|
||||
selecDocks: (item: CatalogItem) => {
|
||||
this.toggleDock(item);
|
||||
},
|
||||
};
|
||||
},
|
||||
setup() {
|
||||
const showLayout = inject('showLayout', true);
|
||||
return { showLayout }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
authLoadComplete: false,
|
||||
showNotify: false,
|
||||
authService: {},
|
||||
catalogConfig: {},
|
||||
notifies: [], //未读通知
|
||||
docks: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.authService = authorizationService();
|
||||
this.catalogConfig = CatalogConfigService();
|
||||
this.catalogConfig.$subscribe((mutation, state) => {
|
||||
this.restoreDocks(this.authService.itemMap);
|
||||
});
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
restoreDocks(authorityMap: any) {
|
||||
const storage = window.localStorage;
|
||||
this.showNotify = this.authService.checkPermission('notify', 'WebConsoleMsg');
|
||||
if (this.showNotify) {
|
||||
this.getNotifies();
|
||||
}
|
||||
if (!storage) {
|
||||
return;
|
||||
}
|
||||
if (!storage['docks']) {
|
||||
storage['docks'] = JSON.stringify([]);
|
||||
}
|
||||
const cataItemNamesMap = {};
|
||||
|
||||
const { data } = this.catalogConfig;
|
||||
let catalogs = cloneDeep(data);
|
||||
// console.log('catalogs', catalogs);
|
||||
if (catalogs) {
|
||||
this.docks = [];
|
||||
catalogs.forEach((catalog) => {
|
||||
if (catalog.items) {
|
||||
catalog.items.forEach((item) => {
|
||||
cataItemNamesMap[item.name] = item;
|
||||
});
|
||||
}
|
||||
});
|
||||
let newDocksObjs;
|
||||
if (storage['newDocks']) {
|
||||
newDocksObjs = JSON.parse(storage['newDocks']);
|
||||
}
|
||||
let dockNames = JSON.parse(storage['docks']).filter((it) => {
|
||||
return cataItemNamesMap[it] != null;
|
||||
});
|
||||
// console.log('cataItemNamesMap', cataItemNamesMap);
|
||||
dockNames = dockNames.filter((it) => {
|
||||
let name = it;
|
||||
if (newDocksObjs && newDocksObjs instanceof Array) {
|
||||
newDocksObjs.forEach((item) => {
|
||||
if (item[it] != null) {
|
||||
name = item[it] + '_' + it;
|
||||
}
|
||||
});
|
||||
}
|
||||
return authorityMap[name] != null || authorityMap['*'] != null;
|
||||
});
|
||||
storage['docks'] = JSON.stringify(dockNames);
|
||||
dockNames.forEach((it) => {
|
||||
cataItemNamesMap[it].dock = true;
|
||||
this.docks.push(cataItemNamesMap[it]);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//获取通知信息
|
||||
getNotifies() {
|
||||
let where = {
|
||||
where: 'status = ?',
|
||||
values: 0,
|
||||
order: 'created_at desc',
|
||||
pageSize: 100,
|
||||
};
|
||||
http.get('/api/notify/notify/objs/WebConsoleMsg', where).then((response) => {
|
||||
let data = response['data'];
|
||||
if (data) {
|
||||
this.notifies = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
//处理产品与服务中用户选中的项目
|
||||
toggleDock(item: CatalogItem): void {
|
||||
//operate bind data
|
||||
this.operateBindData(item);
|
||||
|
||||
//operate localStorage data
|
||||
this.operateLocalStorageData(item);
|
||||
},
|
||||
/**
|
||||
* 当点击"产品与服务"里面的子菜单时, 操作数据绑定对象来控制左侧边栏的图标
|
||||
*
|
||||
* @param item 当前选中的子菜单
|
||||
*/
|
||||
operateBindData(item: CatalogItem) {
|
||||
var index = this.docks.findIndex((e) => e.name == item.name);
|
||||
if (index > -1) {
|
||||
this.docks.splice(index, 1);
|
||||
} else {
|
||||
this.docks.push(item);
|
||||
if (item.url.indexOf('http') == 0 || item.isRedirect) {
|
||||
var a = document.createElement('a');
|
||||
a.setAttribute('href', item.url);
|
||||
a.setAttribute('target', item.url.indexOf('http') == 0 ? '_blank' : '_self');
|
||||
a.setAttribute('id', 'startTelMedicine');
|
||||
// 防止反复添加
|
||||
if (document.getElementById('startTelMedicine')) {
|
||||
document.body.removeChild(document.getElementById('startTelMedicine'));
|
||||
}
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
} else if (item.url.indexOf('http') == -1 && !item.isRedirect) {
|
||||
// console.log(item);
|
||||
// this.router.navigate([item.url], {
|
||||
// relativeTo: this.route,
|
||||
// queryParams: item.queryParams,
|
||||
// });
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 当点击"产品与服务"里面的子菜单时, 操作做本地存储, 以便下次会话记住左侧菜单项
|
||||
*
|
||||
* @param item 当前选中的子菜单
|
||||
*/
|
||||
operateLocalStorageData(item: CatalogItem) {
|
||||
let storage = window.localStorage;
|
||||
|
||||
if (!storage) {
|
||||
return;
|
||||
}
|
||||
|
||||
let docks = [];
|
||||
let newDocks = [];
|
||||
|
||||
let jsonStr = storage['docks'];
|
||||
let newDocksStr = storage['newDocks'];
|
||||
if (jsonStr) {
|
||||
docks = JSON.parse(jsonStr);
|
||||
}
|
||||
if (newDocksStr) {
|
||||
newDocks = JSON.parse(newDocksStr);
|
||||
}
|
||||
|
||||
let flag = false; //默认未选中
|
||||
if (item['splitMenuModule']) {
|
||||
newDocks = newDocks.filter((it) => {
|
||||
for (let key in it) {
|
||||
if (key == item.name) {
|
||||
flag = true;
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var index = docks.findIndex((e) => e == item.name);
|
||||
if (index > -1) {
|
||||
docks.splice(index, 1);
|
||||
} else {
|
||||
docks.push(item.name);
|
||||
if (item['splitMenuModule'] && !flag) {
|
||||
let obj = {};
|
||||
obj[item.name] = item['splitMenuModule'];
|
||||
newDocks.push(obj);
|
||||
}
|
||||
}
|
||||
|
||||
storage['docks'] = JSON.stringify(docks);
|
||||
storage['newDocks'] = JSON.stringify(newDocks);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application {
|
||||
display: block !important;
|
||||
|
||||
.headerMenu {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentMenu {
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
|
||||
.leftMenu {
|
||||
width: 48px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
min-height: 580px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
344
lib/paas/view/system/layout/nav-content.vue
Normal file
344
lib/paas/view/system/layout/nav-content.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="ns-nav-content">
|
||||
<div class="ns-nav">
|
||||
<div class="ns-nav-head">
|
||||
<h4 v-if="!sideMenus.backTo" class="ns-nav-title">{{ sideMenus.title }}</h4>
|
||||
<a-button
|
||||
v-else
|
||||
class="ns-nav-back"
|
||||
type="link"
|
||||
@click="navigation(sideMenus.backTo as any)">
|
||||
<template #icon>
|
||||
<left-outlined />
|
||||
</template>
|
||||
返回
|
||||
</a-button>
|
||||
</div>
|
||||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
:open-keys="openKeys"
|
||||
class="nav-menu"
|
||||
mode="inline">
|
||||
<template v-for="menu in menus">
|
||||
<a-sub-menu v-if="menu.submenus && menu.ifShow" :key="menu.name">
|
||||
<template #title>{{ menu.label }}</template>
|
||||
<template v-for="subMenu in menu.submenus" :key="subMenu.name">
|
||||
<a-menu-item
|
||||
v-if="subMenu.ifShow"
|
||||
:class="{ 'nav-current': currentRouter(subMenu.url) }">
|
||||
<router-link
|
||||
:class="{ 'nav-sub-current': currentRouter(subMenu.url) }"
|
||||
:to="{ name: subMenu.name }"
|
||||
active-class="nav-sub-current"
|
||||
class="nav-sub-item"
|
||||
@click="navChange()">
|
||||
<span>{{ subMenu.label }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item
|
||||
v-else
|
||||
:key="menu.name"
|
||||
:class="{ 'nav-current': currentRouter(menu.url) }"
|
||||
v-if="menu.ifShow">
|
||||
<router-link
|
||||
:class="{ 'nav-sub-current': currentRouter(menu.url) }"
|
||||
:to="{ name: menu.name }"
|
||||
active-class="nav-sub-current"
|
||||
class="nav-sub-item"
|
||||
@click="navChange()">
|
||||
<span>{{ menu.label }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="ns-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <router-view /> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, unref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ModuleRes, SideMenu, SideMenuItem } from '/nerv-lib/paas/store/modules/config-service';
|
||||
import { LeftOutlined } from '@ant-design/icons-vue';
|
||||
import { authorizationService } from '/nerv-lib/paas';
|
||||
import { cloneDeep, isFunction } from 'lodash-es';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsNavContent',
|
||||
components: {
|
||||
LeftOutlined,
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
if (!route?.meta?.sideMenus) {
|
||||
console.error(route.name, ' has not meta.sideMenus');
|
||||
}
|
||||
const authService = authorizationService();
|
||||
const modulesRes = authService.ModulesRes;
|
||||
const appInfo = cloneDeep(
|
||||
modulesRes.find((item) => item.app === authService.getApp()),
|
||||
) as ModuleRes;
|
||||
// console.log('modulesRes', modulesRes);
|
||||
// console.log('appInfo', appInfo);
|
||||
const menus = ref<any[]>([]);
|
||||
const selectedKeys = ref<any[]>([]);
|
||||
const openKeys = ref<any[]>([]);
|
||||
|
||||
const sideMenus = computed(() => {
|
||||
// console.log(route, 'rou我是te');
|
||||
return cloneDeep(route?.meta?.sideMenus as SideMenu);
|
||||
});
|
||||
|
||||
const menuNameList = computed(() => {
|
||||
return unref(sideMenus).menus.map((item) => item.name);
|
||||
});
|
||||
|
||||
const projectName = computed(() => route.params.projectName as string);
|
||||
const moduleName = computed(() => route.matched[0].name as string);
|
||||
const fullPath = computed(() => route.fullPath);
|
||||
|
||||
const currentRouter = (val: any) => {
|
||||
return unref(fullPath).includes(val);
|
||||
};
|
||||
|
||||
function getMenuItem(name: string): SideMenuItem | undefined {
|
||||
const menu = unref(sideMenus).menus.find((item) => item.name === name);
|
||||
if (
|
||||
menu &&
|
||||
authService.checkPermission(
|
||||
unref(moduleName),
|
||||
menu.name as string,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
)
|
||||
) {
|
||||
if (isFunction(menu.ifShow)) {
|
||||
menu.ifShow = menu.ifShow({ route, authService }) || false;
|
||||
} else {
|
||||
menu.ifShow = true;
|
||||
}
|
||||
return menu;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function navChange() {
|
||||
Object.keys(sessionStorage).forEach((key) => {
|
||||
const tableSession = JSON.parse(sessionStorage[key] || '{}');
|
||||
if (
|
||||
tableSession &&
|
||||
tableSession.name &&
|
||||
unref(menuNameList).includes(tableSession.name)
|
||||
) {
|
||||
delete sessionStorage[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function navigation(url: string) {
|
||||
navChange();
|
||||
selectedKeys.value = [];
|
||||
router.push({ name: url });
|
||||
}
|
||||
|
||||
watch(
|
||||
[route, sideMenus],
|
||||
() => {
|
||||
if (unref(sideMenus).root) {
|
||||
const _menus: SideMenuItem[] = [];
|
||||
appInfo?.menus.forEach((item: any) => {
|
||||
const menu = unref(sideMenus).menus.find((item1) => item1.name === item.name);
|
||||
// console.log(menu, 'menu');
|
||||
|
||||
if (item.isDir) {
|
||||
const _item: SideMenuItem = {
|
||||
name: item.name,
|
||||
label: item.label,
|
||||
submenus: [],
|
||||
module: '',
|
||||
url: '',
|
||||
};
|
||||
let open = false;
|
||||
|
||||
item.submenus.forEach((subItem: any) => {
|
||||
const _subItem = getMenuItem(subItem.name);
|
||||
_subItem && _item.submenus && _item.submenus.push(_subItem);
|
||||
if (route.fullPath.includes(subItem.url || subItem.path)) {
|
||||
selectedKeys.value = [subItem.name]; // 通过输入路由匹配到文件夹下的菜单，一开始须手动加入
|
||||
open = true;
|
||||
}
|
||||
});
|
||||
if (open) unref(openKeys).push(item.name);
|
||||
// const {if}
|
||||
if (
|
||||
authService.checkPermission(
|
||||
unref(moduleName),
|
||||
_item.name,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
)
|
||||
) {
|
||||
if (menu && isFunction(menu.ifShow)) {
|
||||
_item.ifShow = menu.ifShow({ route, authService }) || false;
|
||||
} else {
|
||||
_item.ifShow = true;
|
||||
}
|
||||
_menus.push(_item);
|
||||
}
|
||||
} else {
|
||||
const _item = getMenuItem(item.name);
|
||||
!!_item && _menus.push(_item);
|
||||
}
|
||||
});
|
||||
|
||||
menus.value = _menus;
|
||||
} else {
|
||||
const _menus: SideMenuItem[] = [];
|
||||
unref(sideMenus).menus.forEach((menuItem: SideMenuItem) => {
|
||||
const openPermission =
|
||||
authService.checkPermission(
|
||||
menuItem.app || unref(moduleName),
|
||||
menuItem.bindView || menuItem.name,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
) || menuItem.openPermission;
|
||||
const _menusItem = {
|
||||
...menuItem,
|
||||
};
|
||||
if (isFunction(menuItem.ifShow)) {
|
||||
_menusItem.ifShow = menuItem.ifShow({ route, authService }) || false;
|
||||
} else {
|
||||
_menusItem.ifShow = true;
|
||||
}
|
||||
if (openPermission) _menus.push(_menusItem);
|
||||
});
|
||||
menus.value = unref(sideMenus).menus.filter((menuItem: SideMenuItem) => {
|
||||
return (
|
||||
authService.checkPermission(
|
||||
menuItem.app || unref(moduleName),
|
||||
menuItem.bindView || menuItem.name,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
) || menuItem.openPermission
|
||||
);
|
||||
});
|
||||
menus.value = _menus;
|
||||
}
|
||||
if (route.name === unref(sideMenus).name && unref(menus).length > 0) {
|
||||
router.push({ name: unref(menus)[0].name, query: route.query });
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
console.log('route', route);
|
||||
|
||||
return {
|
||||
currentRouter,
|
||||
navChange,
|
||||
navigation,
|
||||
menus,
|
||||
openKeys,
|
||||
selectedKeys,
|
||||
sideMenus,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ns-nav-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.ns-nav {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
background: @layout-sider-background !important;
|
||||
background-size: cover;
|
||||
|
||||
.ns-nav-head {
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
:deep(.ant-btn) {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
> .anticon + span,
|
||||
.ant-btn > span + .anticon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.ns-nav-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ns-nav-back {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-nav-item {
|
||||
color: #212529;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-nav-current {
|
||||
background-color: #fff !important;
|
||||
color: @link-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
background-color: unset;
|
||||
|
||||
.ant-menu-item {
|
||||
background-color: unset;
|
||||
margin-top: 0;
|
||||
|
||||
&.nav-current,
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.ant-menu-item-selected::after {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ns-content {
|
||||
width: 100%;
|
||||
min-width: 650px;
|
||||
background-color: #ffffff;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
lib/paas/view/system/layout/region.vue
Normal file
110
lib/paas/view/system/layout/region.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<a-dropdown :trigger="['click']" v-if="selectedItemLabel">
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
{{ currentRegion?.label || selectedItemLabel }}
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu v-model:selectedKeys="selectedKeys">
|
||||
<a-menu-item v-for="item in regionArray" :key="item.value">
|
||||
<a @click="selectItem(item)">{{ item.label }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service';
|
||||
import { storeToRefs } from 'pinia';
|
||||
export default defineComponent({
|
||||
name: 'NavRegion',
|
||||
components: { DownOutlined },
|
||||
setup() {
|
||||
let { currentRegion } = storeToRefs(authorizationService());
|
||||
return { currentRegion };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedItemLabel: '',
|
||||
regionArray: [],
|
||||
defaultRegion: {},
|
||||
selectedKeys: ['default'], // 默认选中的region
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const authorizationMap = authorizationService();
|
||||
authorizationMap.$subscribe((mutation, state) => {
|
||||
this.regionArray = authorizationMap.regionArray;
|
||||
this.defaultRegion = authorizationMap.defaultRegion;
|
||||
this.selectedItemLabel = this.defaultRegion.label;
|
||||
});
|
||||
// 设置顶部导航的region
|
||||
if (window.localStorage?.region) {
|
||||
const region = JSON.parse(window.localStorage.region);
|
||||
this.selectedKeys = [region.value];
|
||||
authorizationMap.setCurrentRegion(region);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectItem(options: { label: string; isDefault: any; value: any }) {
|
||||
// this.regionService.selectedRegion.emit(event);
|
||||
const authorizationMap = authorizationService();
|
||||
authorizationMap.setCurrentRegion(options);
|
||||
this.selectedItemLabel = options.label;
|
||||
// if (options.isDefault) {
|
||||
// window.localStorage.removeItem('region');
|
||||
// }
|
||||
// if (!options.isDefault) {
|
||||
// window.localStorage['region'] = JSON.stringify(options);
|
||||
// }
|
||||
window.localStorage['region'] = JSON.stringify(options);
|
||||
this.selectedKeys = [options.value];
|
||||
this.replaceUrl(options);
|
||||
},
|
||||
replaceUrl(event: { label?: string; isDefault: any; value: any }) {
|
||||
// 地域变更, 更改url
|
||||
let href = location.origin + location.pathname;
|
||||
if (event.isDefault) {
|
||||
if (location.search && location.search.indexOf('region') != -1) {
|
||||
if (location.search.indexOf('&') != -1) {
|
||||
let searchs = location.search.split('&');
|
||||
searchs.pop();
|
||||
href = href + searchs.join('&');
|
||||
} else {
|
||||
href = href;
|
||||
}
|
||||
} else {
|
||||
href = href + location.search;
|
||||
}
|
||||
} else {
|
||||
if (!location.search) {
|
||||
href = href + '?region=' + event.value;
|
||||
} else if (location.search.indexOf('region') == -1) {
|
||||
href = href + location.search + '®ion=' + event.value;
|
||||
} else {
|
||||
let searchs = location.search.split('=');
|
||||
if (searchs[searchs.length - 1] == event.value) {
|
||||
return;
|
||||
}
|
||||
searchs[searchs.length - 1] = event.value;
|
||||
href = href + searchs.join('=');
|
||||
}
|
||||
}
|
||||
location.replace(href);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nav-region {
|
||||
.ant-dropdown-link {
|
||||
color: @layout-header-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
lib/paas/view/system/layout/sider.vue
Normal file
115
lib/paas/view/system/layout/sider.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<!-- @format -->
|
||||
<template>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="nav-item h0"
|
||||
:class="{ 'nav-item-current': isRouteLinkActive('/login') }"
|
||||
href="/nervui-main/dashboard">
|
||||
<span class="flag"></span>
|
||||
<i class="iconfont"></i>
|
||||
<span class="nav-title h5">总览</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="item in appRecords" :key="item.index">
|
||||
<a class="nav-item h0" :href="item.url" v-if="item.isRedirect">
|
||||
<span class="flag"></span>
|
||||
<i class="iconfont" v-html="item.icon"></i>
|
||||
<span class="nav-title h5">{{ item.label }}</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="nav-item h0"
|
||||
v-if="!item.isRedirect"
|
||||
:class="{ 'nav-item-current': isRouteLinkActive(item.url) }">
|
||||
<span class="flag"></span>
|
||||
<i class="iconfont" v-html="item.icon"></i>
|
||||
<span class="nav-title h5">{{ item.label }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'NsSider',
|
||||
components: {},
|
||||
props: {
|
||||
appRecords: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isRouteLinkActive(routerLink: string) {
|
||||
let module = routerLink.split('/')[1];
|
||||
let uri = window.location.pathname;
|
||||
return uri.indexOf(module) != -1;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
nav {
|
||||
background: @layout-nav-background;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 48px;
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
width: @nav-width;
|
||||
z-index: 99;
|
||||
transition: width 0.2s;
|
||||
ul {
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: @layout-nav-color;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
// vertical-align: middle;
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
font-family: iconfont !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
line-height: 48px;
|
||||
// color: #52616f;
|
||||
}
|
||||
&:hover {
|
||||
background: @layout-nav-hover;
|
||||
}
|
||||
}
|
||||
.nav-item-current {
|
||||
background: @layout-nav-hover;
|
||||
color: @layout-nav-check-color !important;
|
||||
.iconfont {
|
||||
color: #00acff !important;
|
||||
}
|
||||
.flag {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
border-left: 2px solid #00acff;
|
||||
width: 2px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nav:hover {
|
||||
width: @nav-open-width;
|
||||
}
|
||||
</style>
|
||||
244
lib/paas/view/system/layout/start-menu.vue
Normal file
244
lib/paas/view/system/layout/start-menu.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<a class="start-menu-link" @click="showMenu()">
|
||||
产品与服务
|
||||
<DownOutlined class="nav-item-icon" />
|
||||
</a>
|
||||
<div class="start-menu">
|
||||
<a-drawer
|
||||
class="start-menu-box"
|
||||
placement="top"
|
||||
:closable="false"
|
||||
:visible="IfshowMenu"
|
||||
:zIndex="90"
|
||||
@close="showMenu">
|
||||
<div class="menu-search-block">
|
||||
<div class="search-block">
|
||||
<a-input-search
|
||||
v-model:value="searchInput"
|
||||
placeholder="通过名称/关键字查找产品（例如：中间件、告警管理等）"
|
||||
@search="onSearchMenu"
|
||||
class="search-input" />
|
||||
</div>
|
||||
<div class="search-Tip" v-if="showTip">
|
||||
<p class="successTip" v-if="isSuccess == 1"
|
||||
>以下是与"<span class="search-key">{{ searchInput }}</span
|
||||
>"相关的产品与服务：</p
|
||||
>
|
||||
<p class="failTip" v-if="isSuccess == 0">
|
||||
未找到与"<span class="search-key">{{ searchInput }}</span
|
||||
>"相关的产品与服务。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--改高度，滚动条 -->
|
||||
<div class="menu-box">
|
||||
<template v-for="(catalog, index) in catalogs" :key="index">
|
||||
<div class="menu-block" v-if="catalog.items.length > 0">
|
||||
<h5 class="menu-block-title h5">{{ catalog.label }}</h5>
|
||||
|
||||
<ul class="menu-block-container">
|
||||
<li
|
||||
class="menu-block-item"
|
||||
v-for="(item, ind) in catalog.items"
|
||||
:key="ind"
|
||||
@click="onDockCatalogItem(item)">
|
||||
<i class="iconfont h3 item-icon" v-html="item.icon"></i>
|
||||
<span>{{ item.label }}</span>
|
||||
|
||||
<i class="iconfont tip-icon" :class="{ active: item.dock }"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
import { CatalogConfigService, CatalogItem } from '/nerv-lib/paas/store/modules/catalog-config';
|
||||
import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
// import { useRouter } from 'vue-router';
|
||||
// import { http } from '/nerv-lib/util/http';
|
||||
// import { message } from 'ant-design-vue';
|
||||
// import Cookies from 'js-cookie';
|
||||
export default defineComponent({
|
||||
name: 'NsStartMenu',
|
||||
components: { DownOutlined },
|
||||
props: {},
|
||||
setup: () => {
|
||||
//提供provide
|
||||
const selecDocks = inject('selecDocks');
|
||||
|
||||
return {
|
||||
selecDocks,
|
||||
};
|
||||
},
|
||||
data(): {
|
||||
IfshowMenu: boolean;
|
||||
showTip: boolean;
|
||||
searchInput: any;
|
||||
isSuccess: number;
|
||||
catalogsTemp: Array<any>;
|
||||
catalogs: Array<any>;
|
||||
} {
|
||||
return {
|
||||
IfshowMenu: false,
|
||||
showTip: false,
|
||||
searchInput: '',
|
||||
isSuccess: 0,
|
||||
catalogsTemp: [],
|
||||
catalogs: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const catalogConfigService = CatalogConfigService();
|
||||
const authService = authorizationService();
|
||||
catalogConfigService.$subscribe((_mutation, state) => {
|
||||
const { data } = state;
|
||||
this.catalogs = cloneDeep(data);
|
||||
if (!data) return;
|
||||
this.catalogs.forEach((cate: any) => {
|
||||
if (cate.items) {
|
||||
cate.items = cate.items.filter((m1: any) => {
|
||||
if (m1['splitMenuModule']) {
|
||||
return authService.exists(m1['splitMenuModule'], m1['name']);
|
||||
} else if (m1['splitModule']) {
|
||||
return false;
|
||||
} else {
|
||||
return authService.exists(m1['name']);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.catalogsTemp = this.catalogs;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
showMenu() {
|
||||
this.IfshowMenu = !this.IfshowMenu;
|
||||
},
|
||||
onSearchMenu() {
|
||||
let catalogs: any[] = [];
|
||||
let searchStr = '';
|
||||
searchStr = this.searchInput;
|
||||
this.catalogs = JSON.parse(JSON.stringify(this.catalogsTemp));
|
||||
if (searchStr == '') {
|
||||
this.showTip = false;
|
||||
return;
|
||||
}
|
||||
let reg = new RegExp(searchStr, 'i');
|
||||
this.showTip = true;
|
||||
this.catalogs.forEach((it: any) => {
|
||||
if (reg.test(it.label)) {
|
||||
catalogs.push(it);
|
||||
}
|
||||
if (!reg.test(it.label)) {
|
||||
let items: any[] = [];
|
||||
it.items.forEach((subIt: any) => {
|
||||
if (reg.test(subIt.label)) {
|
||||
items.push(subIt);
|
||||
}
|
||||
});
|
||||
if (items.length != 0) {
|
||||
let catalogItem: any = {};
|
||||
catalogItem['name'] = it.name;
|
||||
catalogItem['label'] = it.label;
|
||||
catalogItem['items'] = items;
|
||||
catalogs.push(catalogItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.catalogs = catalogs;
|
||||
if (catalogs.length == 0) {
|
||||
this.isSuccess = 0;
|
||||
} else {
|
||||
this.isSuccess = 1;
|
||||
}
|
||||
},
|
||||
onDockCatalogItem(item: CatalogItem): void {
|
||||
item.dock = !item.dock;
|
||||
(this.selecDocks as Function)(item);
|
||||
// this.eventDockCatalogItem.emit(item);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.start-menu-link {
|
||||
color: @layout-header-color;
|
||||
&:hover {
|
||||
color: @layout-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.start-menu {
|
||||
.title {
|
||||
margin-left: 16px;
|
||||
margin-bottom: 0px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.doorway {
|
||||
margin: 0 8px;
|
||||
color: #808d96 !important;
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-tip {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
// background-color: #fff;
|
||||
width: 100%;
|
||||
//overflow-y: auto;
|
||||
height: 722px;
|
||||
left: 48px;
|
||||
width: 100%;
|
||||
|
||||
.mask {
|
||||
// position: absolute;
|
||||
// left: 0px;
|
||||
// right: 0px;
|
||||
// top: 49px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: 2000px;
|
||||
width: 40%;
|
||||
z-index: 98;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-item-icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.start-menu-box {
|
||||
:deep(.ant-drawer-content-wrapper) {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
188
lib/paas/view/system/login.vue
Normal file
188
lib/paas/view/system/login.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div id="login-container">
|
||||
<a-layout>
|
||||
<a-layout-header>
|
||||
<img class="logo-img" src="/asset/image/login/logo-paas.png" />
|
||||
</a-layout-header>
|
||||
<a-layout-content>
|
||||
<div class="login-content">
|
||||
<div class="login-header">
|
||||
<p class="english">NERV STACK</p>
|
||||
<p class="chinese">管理平台</p>
|
||||
</div>
|
||||
<div class="login-user-info">
|
||||
<span class="error-info" v-if="errorMsg">{{ errorMsg }}</span>
|
||||
<a-input
|
||||
class="input"
|
||||
placeholder="用户名"
|
||||
v-model:value="userName"
|
||||
@keyup.enter="submit" />
|
||||
<a-input-password placeholder="密码" v-model:value="password" @keyup.enter="submit" />
|
||||
</div>
|
||||
<div class="login-btn">
|
||||
<a-button :loading="loading" @click="submit" type="primary">登录 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import Cookies from 'js-cookie';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserLogin',
|
||||
setup() {
|
||||
const userName = ref<string>('');
|
||||
const password = ref<string>('');
|
||||
const errorMsg = ref<string>('');
|
||||
const router = useRouter();
|
||||
const loading = ref<boolean>(false);
|
||||
|
||||
const submit = async function () {
|
||||
try {
|
||||
if (userName.value == '') {
|
||||
return;
|
||||
}
|
||||
if (password.value == '') {
|
||||
return;
|
||||
}
|
||||
let data = JSON.stringify({ name: userName.value, password: password.value });
|
||||
loading.value = true;
|
||||
const result = await http.post('/api/passport/objs/login', data);
|
||||
if (result && result['nervsid']) {
|
||||
Cookies.set('nervsid', result['nervsid']);
|
||||
}
|
||||
loading.value = false;
|
||||
|
||||
router.replace({ name: 'root' });
|
||||
} catch {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
return {
|
||||
userName,
|
||||
password,
|
||||
loading,
|
||||
errorMsg,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#login-container {
|
||||
background: url('/asset/image/login/login-background.jpeg') no-repeat center #f5f6f9;
|
||||
height: 100%;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
max-width: 130px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
background-color: transparent;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.login-content {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -66%);
|
||||
}
|
||||
|
||||
.login-content .login-header p {
|
||||
color: #00acff;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
|
||||
&.english {
|
||||
font-size: 25px;
|
||||
margin: 30px 0 10px 0;
|
||||
}
|
||||
|
||||
&.chinese {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-content .login-user-info {
|
||||
width: 422px;
|
||||
margin: 0 auto;
|
||||
|
||||
.error-info {
|
||||
color: #e4393c;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-input-password {
|
||||
height: 48px;
|
||||
margin-bottom: 20px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.ant-input::-webkit-input-placeholder,
|
||||
.ant-input-password::-webkit-input-placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
.ant-input-password::-webkit-input-placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
.ant-btn {
|
||||
width: 300px;
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ant-layout-content {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.ant-layout-content {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user