Browse Source

菜单管理

beijing
陈鹏飞 2 years ago
parent
commit
0005c50dca
  1. 2
      src/app/pages/home/home.component.html
  2. 2
      src/app/pages/login/login.component.ts
  3. 153
      src/app/system-management/user/user.component.html
  4. 75
      src/app/system-management/user/user.component.scss

2
src/app/pages/home/home.component.html

@ -19,7 +19,7 @@
</li>
</ng-container>
<ng-template #elseTemplate>
<li *ngFor="let item of menuList2" (click)="routerChange(item)"
<li *ngFor="let item of menuList1" (click)="routerChange(item)"
[ngClass]="{'router-link-active': item.name == selectedItem}">
{{item.name}}
</li>

2
src/app/pages/login/login.component.ts

@ -124,7 +124,7 @@ export class LoginComponent implements OnInit {
sessionStorage.setItem("encryptedAccessToken", data.result.encryptedAccessToken);
this.http.get('/api/services/app/Session/GetCurrentLoginInformations').subscribe((data: any) => {
console.log('GetCurrentLoginInformations', data.result)
if (data.result.user.menus.length == 0 && data.result.name!="admin") {
if (data.result.user.menus.length == 0 && data.result.user.userName!="admin") {
this.message.create('error', `当前用户未分配菜单`);
this.isLoading = false
return

153
src/app/system-management/user/user.component.html

@ -1,63 +1,100 @@
<div class="userBox" id="userBox">
<div class="topbox">
<div class="lefttop">
<span>用户列表</span>
<span><i nz-icon nzType="search"></i> {{usersNum}}名用户</span>
<div class="orbox">
<div class="topbox2">
<div class="lefttop">
<span>组织机构列表</span>
</div>
<div class="righttop">
<nz-input-group nzPrefixIcon="search">
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" />
</nz-input-group>
</div>
</div>
<div class="righttop">
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" />
</nz-input-group>
</nz-form-control>
<button style="display: none;" type="submit"></button>
</nz-form-item>
</form>
<button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle"
nzTheme="outline"></i>新增</button>
<div class="treeTitle">
<span>组织机构</span>
</div>
<div class="treebox">
<nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll"
[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)"
[nzTreeTemplate]="nzTreeTemplate" [nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<div class="nodebox">
<span class="name">{{ node.title }}</span>
</div>
</ng-template>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i>
</ng-template>
</ng-template>
</div>
</div>
<div class="tablebox">
<nz-table #basicTable [nzData]="usersLIst" [nzShowPagination]='false' [nzPageSize]='16'>
<thead>
<tr>
<th></th>
<th>账号</th>
<th>姓名</th>
<th style="width:45%;">角色</th>
<th>所属机构</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td><img src="../../../assets/images/user.png" alt=""></td>
<td>{{ data.userName }}</td>
<td>{{ data.name }}</td>
<td nzBreakWord>
<span style="margin-right: 8px;" *ngFor="let item of data.roleDisplayNames">{{item}}</span>
</td>
<td>
<!-- <div class="ortype">
自营
</div> -->
{{data.organizationName}}
</td>
<td class="operation">
<a (click)="editUser(data)">编辑</a>
<a (click)="resetPassword(data)">重置密码</a>
<a (click)="delete(data)">删除</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
<div class="pagination">
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16"
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
</nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
<div class="box">
<div class="topbox">
<div class="lefttop">
<span>用户列表</span>
<span><i nz-icon nzType="search"></i> {{usersNum}}名用户</span>
</div>
<div class="righttop">
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" />
</nz-input-group>
</nz-form-control>
<button style="display: none;" type="submit"></button>
</nz-form-item>
</form>
<button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle"
nzTheme="outline"></i>新增</button>
</div>
</div>
<div class="tablebox">
<nz-table #basicTable [nzData]="usersLIst" [nzShowPagination]='false' [nzPageSize]='16'>
<thead>
<tr>
<th></th>
<th>账号</th>
<th>姓名</th>
<th style="width:45%;">角色</th>
<th>所属机构</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td><img src="../../../assets/images/user.png" alt=""></td>
<td>{{ data.userName }}</td>
<td>{{ data.name }}</td>
<td nzBreakWord>
<span style="margin-right: 8px;" *ngFor="let item of data.roleDisplayNames">{{item}}</span>
</td>
<td>
<!-- <div class="ortype">
自营
</div> -->
{{data.organizationName}}
</td>
<td class="operation">
<a (click)="editUser(data)">编辑</a>
<a (click)="resetPassword(data)">重置密码</a>
<a (click)="delete(data)">删除</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
<div class="pagination">
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16"
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
</nz-pagination>
<ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
</div>
</div>
</div>
</div>

75
src/app/system-management/user/user.component.scss

@ -6,10 +6,68 @@
padding: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
thead {}
// flex-direction: column;
.treebox {
display: flex;
flex-direction: column;
}
.topbox2 {
width: 100%;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
.lefttop {
span {
color: #000D21;
margin-right: 16px;
}
.yellowspan {
color: rgb(240, 176, 37);
}
}
.righttop {
height: 36px;
display: flex;
button {
margin-left: 16px;
}
nz-input-group {
height: 32px;
}
}
}
.orbox {
width: 375px;
// height: 100%;
overflow-y: auto;
margin-right: 10px;
display: flex;
flex-direction: column;
}
.treeTitle {
width: 100%;
height: 55px;
line-height: 55px;
margin-top: 12px;
display: flex;
justify-content: space-between;
color: #000D21;
box-sizing: border-box;
padding-left: 30px;
padding-right: 180px;
background: rgba(145, 204, 255, 0.2);
border: 1px solid rgba(145, 204, 255, 0.2);
}
.nodebox {
font-size: 15px;
}
tbody {
tr {
td:nth-child(1) {
@ -29,7 +87,14 @@
}
}
}
.box{
flex: 1;
overflow: auto;
padding-top: 20px;
::-webkit-scrollbar {
display: none;
}
}
.topbox {
width: 100%;
height: 36px;
@ -37,7 +102,7 @@
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
.lefttop {
span:nth-child(1) {
color: #000D21;

Loading…
Cancel
Save