袁野 7 months ago
parent 45b0b55adf
commit 3956513a8a
  1. 13
      src/app/pages/body/index/index.component.html
  2. 13
      src/app/pages/body/index/index.component.less
  3. 36
      src/app/pages/body/index/index.component.ts
  4. 61
      src/app/pages/body/index/index1.component.html
  5. 84
      src/app/pages/body/index/index1.component.less
  6. 4
      src/app/pages/body/tab/tab.component.less
  7. 63
      src/app/pages/index/index/index.component.html
  8. 20
      src/app/servies/login/login.service.ts

@ -13,6 +13,19 @@
<li *ngFor="let item of menuData" [ngClass]="{'li-selected' : item.selected}" (click)="isSelected(item)">{{item.menuName}}</li>
</ul>
</div>
<div class="user" nz-col nzSpan="4">
<div>
<span nz-dropdown [nzDropdownMenu]="menu">{{userInfo['userName']}}</span>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li nz-menu-item (click)="loginOut()">退出登录</li>
</ul>
</nz-dropdown-menu>
</div>
</div>
</div>
</nz-header>
<!-- end 头部 end -->

@ -54,3 +54,16 @@ nz-sider {
nz-content {
padding: 0 0 0 4px;
}
.user {
div {
cursor: pointer;
float: right;
margin-right: 30px;
color: white;
white-space: nowrap;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
}

@ -17,7 +17,10 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTabComponent, NzTabSetComponent} from "ng-zorro-antd/tabs";
import {TabComponent} from "../tab/tab.component";
import {BrowserStorageService} from "../../../utils/localStorage.service";
import {DATA} from "../../../data/login/localStorage.namespace";
import {DATA, INIT_FLAG, LOGIN_DATA, USER_TOKEN} from "../../../data/login/localStorage.namespace";
import {NzDropDownDirective, NzDropdownMenuComponent} from "ng-zorro-antd/dropdown";
import {LoginService} from "../../../servies/login/login.service";
import {NzMessageService} from "ng-zorro-antd/message";
@Component({
selector: 'app-index',
@ -43,7 +46,9 @@ import {DATA} from "../../../data/login/localStorage.namespace";
NzTabSetComponent,
TabComponent,
NzSiderComponent,
NzMenuGroupComponent
NzMenuGroupComponent,
NzDropDownDirective,
NzDropdownMenuComponent
],
templateUrl: './index.component.html',
styleUrl: './index.component.less',
@ -54,16 +59,22 @@ export class IndexComponent {
'menuName' : '首页',
'selected' : true,
}];
userInfo: any;
// 左侧菜单栏数据
leftMenuData: any = [];
// 侧边菜单展示开关
isCollapse = true;
constructor(private storage: BrowserStorageService,
private router: Router) {
constructor(
private storage: BrowserStorageService,
private message: NzMessageService,
private router: Router, // 路由
private login: LoginService
) {
this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']);
this.userInfo = this.storage.get(DATA)['account'];
console.log("用户数据" , this.userInfo);
}
// 选择操作
@ -80,4 +91,19 @@ export class IndexComponent {
this.isCollapse = item['menuName'] === '首页';
}
// 退出登录
public loginOut(): void {
this.login.loginOut( (data: any) => {
if (data['return_code'] === '000000') {
this.storage.remove(LOGIN_DATA);
this.storage.remove(DATA);
this.storage.remove(USER_TOKEN);
this.storage.remove(INIT_FLAG);
this.router.navigateByUrl('/login').then();
} else {
this.message.error(data['return_msg']);
}
});
}
}

@ -1,61 +0,0 @@
<nz-layout>
<nz-header>
<div nz-row>
<!-- logo -->
<div class="logo" nz-col nzSpan="4">
<h2>普惠GO管理平台</h2>
</div>
<!-- logo -->
<!-- start 顶部菜单 start-->
<div class="menu" nz-col nzSpan="16">
<ul>
<li *ngFor="let item of menuData" [ngClass]="{'li-selected' : item.selected}" (click)="isSelected(item)">{{item.menuName}}</li>
</ul>
</div>
<!-- end 顶部菜单 end -->
</div>
</nz-header>
<nz-layout>
<nz-sider nzCollapsible [nzCollapsedWidth]="0" >
<!-- start 左侧导航栏 start -->
<div [@openClose]="isCollapse ? 'open' : 'closed'" class="side_menu">
<div class="side_menu_top" (click)="isCollapse = false">
<div class="side_menu_top_icon">
<span nz-icon nzType="menu-fold" nzTheme="outline"></span>
</div>
<span style="font-size: 14px;">收起</span>
</div>
<!-- start 菜单内容 end-->
<div class="side_menu_content">
<ul nz-menu nzMode="inline">
<li nz-submenu nzOpen *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" >
<ul>
<li nz-menu-group>
<ul>
<li nz-menu-item nzMatchRouter *ngFor="let childMenu of item['childMenuList']">
<a [routerLink]="[item['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: item['menuName']}" (click)="clickMenu(childMenu)">{{childMenu['menuName']}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- start 菜单内容 end -->
</div>
<!-- end 左侧导航栏 end -->
</nz-sider>
<nz-content class="inner-content">
<!-- 主体内容-->
<div class="content" [ngClass]="{'content-width' : isCollapse}">
<app-tab></app-tab>
</div>
</nz-content>
</nz-layout>
</nz-layout>

@ -1,84 +0,0 @@
nz-header {
background: #181f47;
padding: 0 26px;
.logo {
h2 {
color: white;
}
}
.menu {
width: 52%;
display: flex;
justify-content: center;
ul {
li {
height: 56px;
float: left;
color: #fff;
opacity: .65;
font-size: 14px;
padding: 0 20px;
cursor: pointer;
}
.li-selected {
opacity: 1;
border-bottom: 2px solid #1890ff;
}
li:hover {
opacity: 1;
border-bottom: 2px solid #1890ff;
}
list-style-type: none; /* 移除列表的标记,如果需要的话 */
padding: 0; /* 移除padding,如果需要的话 */
}
}
}
nz-breadcrumb {
margin: 16px 0;
}
nz-footer {
text-align: center;
}
.inner-content {
div {
float: left;
}
.side_menu {
height: 100%;
color: #595959;
box-shadow: 2px 0 8px rgba(0,0,0,.15);
.side_menu_top {
width: 100%;
margin-top: 8px;
font-size: 18px;
height: 26px;
line-height: 23px;
margin-left: 14px;
.side_menu_top_icon {
height: 26px;
line-height: 26px;
}
span {
margin-left: 6px;
}
}
.side_menu_content {
margin-top: 10px;
width: 100%;
height: 100%;
}
}
height: calc(100vh - 64px);
}
.content {
width:100vw;
}
.content-width {
width: calc(100vw - 280px);
}

@ -28,3 +28,7 @@
background: #f5f5f5;
}
nz-card {
height: calc(100vh - 114px);
overflow: auto;
}

@ -1 +1,64 @@
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>
<p>首页</p>

@ -9,10 +9,30 @@ export class LoginService {
constructor(private http: HttpClient) {}
/**
* @Author Sum1Dream
* @Name userLogin
* @Description // 登录
* @Date 15:52 2024/4/18
* @Param params
* @Param callBack
*/
public userLogin(params: object, callBack:any) {
this.http.post(environment.userUrl + 'secUser/login', params).subscribe(data => {
callBack(data);
});
}
/**
* @Author Sum1Dream
* @Name loginOut
* @Description // 退出登录
* @Date 15:52 2024/4/18
* @Param callBack
*/
public loginOut(callBack:any) {
this.http.post(environment.userUrl + 'secUser/loginOut', null).subscribe(data => {
callBack(data);
});
}
}

Loading…
Cancel
Save