windy/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户管理-用户详情、新增用户

Browse Source
This commit is contained in:
liweijin
2018-11-20 18:29:13 +08:00
parent 074d4b7409
commit 1df0ecb4a5
10 changed files with 348 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/main.scss
+15 -1
View File
@@ -56,7 +56,21 @@
.table-operation-box{
margin-bottom: 16px;
}
/* 表格样式 */
.table-box {
.table-operation-btn {
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
font-size: 20px;
}
.edit{
color: #40a9ff;
}
.danger{
color: #f86c6b;
}
}
/* 目录树样式 */
:host /deep/ ul.tree{
src/app/pages/system-management/system-management-routing.module.ts
+6 -1
View File
@@ -8,6 +8,7 @@ import { UserManagementComponent } from './user-management/user-management.compo
import { DepartmentManagementComponent } from './department-management/department-management.component';
import { OperationLogsComponent } from './operation-logs/operation-logs.component';
import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component';
const systemManagementRoutes: Routes = [
{
@@ -29,7 +30,7 @@ const systemManagementRoutes: Routes = [
},
{
path: 'users',
component: UserManagementComponent
component: UserManagementComponent,
},
{
path: 'departments',
@@ -42,6 +43,10 @@ const systemManagementRoutes: Routes = [
{
path: 'synchronization',
component: DataSynchronizeComponent
},
{
path: 'users/modify',
component: UserManagementModifyComponent
}
]
}
src/app/pages/system-management/system-management.module.ts
+2
View File
@@ -21,6 +21,7 @@ import { ColorSettingsComponent } from './personal-settings/color-settings/color
import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/msg-alert-warning.component';
import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component';
import { ComponentsModule } from '../../components/components.module';
import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component';
@NgModule({
imports: [
CommonModule,
@@ -42,6 +43,7 @@ import { ComponentsModule } from '../../components/components.module';
ColorSettingsComponent,
MsgAlertWarningComponent,
FlightAgencyComponent,
UserManagementModifyComponent,
],
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.html
+58
View File
@@ -0,0 +1,58 @@
<div class="system-main-container">
<div class="user-modify-box card">
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="real_name" formControlName="real_name" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('real_name').dirty && validateForm.get('real_name').errors">请输入姓名</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="loginId" nzRequired>统一身份认证账号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="loginId" formControlName="loginId" placeholder="请输入统一身份认证账号">
<nz-form-explain *ngIf="validateForm.get('loginId').dirty && validateForm.get('loginId').errors">请输入统一身份认证账号</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>本系统密码</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="password" formControlName="password" placeholder="请输入密码">
<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>所属机构</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="password" formControlName="password" placeholder="请选择所属机构">
<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请选择所属机构</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="identify_num" formControlName="identify_num" placeholder="请输入身份证号">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="email" formControlName="email" placeholder="请输入邮箱地址">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="mobile">电话</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="mobile" formControlName="mobile" placeholder="请输入电话号码">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-row style="margin-bottom:8px;">
<nz-form-control [nzSpan]="14" [nzOffset]="6">
<button nz-button nzType="primary">保存</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
</div>
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.scss
View File
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserManagementModifyComponent } from './user-management-modify.component';
describe('UserManagementModifyComponent', () => {
let component: UserManagementModifyComponent;
let fixture: ComponentFixture<UserManagementModifyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UserManagementModifyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserManagementModifyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.ts
+46
View File
@@ -0,0 +1,46 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
@Component({
selector: 'app-user-management-modify',
templateUrl: './user-management-modify.component.html',
styleUrls: ['./user-management-modify.component.scss','../../../main.scss']
})
export class UserManagementModifyComponent implements OnInit {
validateForm: FormGroup;
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.validateForm = this.fb.group({
real_name:[ null, [ Validators.required ] ],
loginId:[ null, [ Validators.required ] ],
password:[ null, [ Validators.required ] ],
identify_num:[ null],
email:[ null],
mobile:[ null],
});
}
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[ i ].markAsDirty();
this.validateForm.controls[ i ].updateValueAndValidity();
}
}
updateConfirmValidator(): void {
/** wait for refresh value */
Promise.resolve().then(() => this.validateForm.controls.checkPassword.updateValueAndValidity());
}
confirmationValidator = (control: FormControl): { [ s: string ]: boolean } => {
if (!control.value) {
return { required: true };
} else if (control.value !== this.validateForm.controls.password.value) {
return { confirm: true, error: true };
}
};
}
src/app/pages/system-management/user-management/user-management.component.html
+131 -37
View File
@@ -11,7 +11,7 @@
<nz-form-item >
<nz-form-label nzSpan="6">姓名</nz-form-label>
<nz-form-control nzSpan="17">
<input nz-input placeholder="请输入姓名">
<input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名">
</nz-form-control>
</nz-form-item>
</div>
@@ -19,57 +19,151 @@
<nz-form-item >
<nz-form-label nzSpan="8">用户名</nz-form-label>
<nz-form-control nzSpan="15">
<input nz-input placeholder="请输入用户名">
<input nz-input [(ngModel)]='search.login_name' placeholder="请输入用户名">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-control nzSpan="24">
<button class="mr10" nz-button nzType="primary" [nzLoading]="isLoading" (click)="isLoading=(!isLoading)"><i nz-icon type="search"></i>查询</button>
<button nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
<button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div class="table-operation-box">
<button nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
</div>
</div>
<div class="table-box">
<app-request-status [statusParams]='statusParamsTable'></app-request-status>
<nz-table [nzShowPagination]='false' *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>姓名</th>
<!-- <th>所属机构</th> -->
<th>性别</th>
<th>用户名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td>{{item.real_name}}</td>
<td>
<span *ngIf="item.sex=='m'">男</span>
<span *ngIf="item.sex=='f'">女</span>
</td>
<td>{{item.login_name}}</td>
<td>{{item.email}}</td>
<td>{{item.mobile}}</td>
<td></td>
</tr>
</tbody>
<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>用户名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
<td>
<span *ngIf="item.sex=='m'">男</span>
<span *ngIf="item.sex=='f'">女</span>
</td>
<td>{{item.login_name}}</td>
<td>{{item.email}}</td>
<td>{{item.mobile}}</td>
<td>
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
<nz-divider nzType="vertical"></nz-divider>
<i class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td>
</tr>
</tbody>
</nz-table>
<div class="page-box" *ngIf="statusParamsTable.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div>
</div>
<div class="page-box">
<nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination>
</div>
</div>
</div>
</div>
<!-- 详情 -->
<div class="user-detail-box">
<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"[nzMaskClosable]="true" [nzWidth]="500" [nzVisible]="visible" nzTitle="用户详情" (nzOnClose)="close()">
<app-request-status [statusParams]='statusParamsDetail'></app-request-status>
<form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'">
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>姓名</nz-form-label>
<span class="detail-item-text">{{userDetail.real_name}}</span>
<span *ngIf='!userDetail.real_name'>无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>统一身份认证账号</nz-form-label>
<span class="detail-item-text">{{userDetail.loginId}}</span>
<span *ngIf='!userDetail.loginId'>无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>本系统密码</nz-form-label>
<span class="detail-item-text">{{userDetail.password}}</span>
<span *ngIf='!userDetail.password'>无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>所属机构</nz-form-label>
<span *ngFor="let option of userDetail.orgList" class="detail-item-text">{{option.organization}}</span>
<span *ngIf="userDetail.orgList.length<=0">无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>身份证号</nz-form-label>
<span class="detail-item-text">{{userDetail.identify_num}}</span>
<span *ngIf='!userDetail.identify_num'>无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>邮箱</nz-form-label>
<span class="detail-item-text">{{userDetail.email}}</span>
<span *ngIf='!userDetail.email'>无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>电话</nz-form-label>
<span class="detail-item-text">{{userDetail.mobile}}</span>
<span *ngIf='!userDetail.mobile'>无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>所属角色</nz-form-label>
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
</ng-container>
<span *ngIf="userDetail.roleList.length<=0">无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>状态</nz-form-label>
<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
<span class="detail-item-text" *ngIf='userDetail.status==0'>未激活</span>
<span *ngIf='!userDetail.status'>无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>性别</nz-form-label>
<span class="detail-item-text" *ngIf='userDetail.sex=="m"'>男</span>
<span class="detail-item-text" *ngIf='userDetail.sex=="f"'>女</span>
<span *ngIf='!userDetail.sex'>无</span>
</nz-form-item>
</div>
</div>
</form>
</nz-drawer>
</div>
src/app/pages/system-management/user-management/user-management.component.scss
+6 -1
View File
@@ -2,4 +2,9 @@
.card{
}
}
}
.user-detail{
.detail-item-text{
color: #1890ff;
}
}
src/app/pages/system-management/user-management/user-management.component.ts
+59 -4
View File
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router';
import 'ztree';
declare var $: any;
@@ -13,12 +14,16 @@ declare var jQuery: any;
export class UserManagementComponent implements OnInit {
treeSelected:any; //树模型-当前选中项
collectionSize:any ;
public tableData:any=[];
statusParamsTable:any={ //获取目录树接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
statusParamsTree:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
public search:any={
page_index:'1',
page_size:'10',
@@ -26,30 +31,80 @@ export class UserManagementComponent implements OnInit {
login_name:'',
orgId:'',
}
isLoading:false;
public tableData:any=[];
visible = false;
userDetail:any={}; //用户详情
constructor(
private http:HttpClientService,
private router:Router,
) { }
ngOnInit() {
this.initTree();
this.queryTable();
}
//新增、修改 1新增 2修改
addModify(type,item?){
if(type==1){
console.log(222)
this.router.navigate(['app/system/users/modify'],{queryParams:{operateType:1}})
}else if(type==2){
}
}
//打开详情页面
open(item): void {
this.statusParamsDetail.status=1;
this.visible = true;
this.userDetail={};
this.http.get('/sysapi/setting/user/detail/list', { uid: item.uid }).subscribe((json)=>{
if(json.is_success){
if(json.body){
this.statusParamsDetail.status=3;
this.userDetail=json.body;
}else{
this.statusParamsDetail.status=4;
}
}else{
this.statusParamsDetail.status=0;
}
})
}
//关闭详情页面
close(): void {
this.visible = false;
}
//重置，重置搜索条件
reset(){
this.search.page_index=1;
this.search.page_size=10;
this.search.real_name='';
this.search.login_name='';
this.queryTable();
}
//获取列表
queryTable():void{
this.statusParamsTable.status=1;
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
if(json.is_success){
this.tableData=json.body.list;
this.statusParamsTable.status=3;
this.collectionSize=json.body.total;
if(json.body.list&&json.body.list.length>0){
this.statusParamsTable.status=3;
}else{
this.statusParamsTable.status=4;
}
}else{
this.statusParamsTable.status=0;
}
})
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
}
//树模型参数设置
public zNodes: any[];
setting = {
@@ -78,7 +133,7 @@ export class UserManagementComponent implements OnInit {
},
},
};
//新树模型
//获取机构列表，树模型数据处理
initTree(){
//获取目录列表
this.statusParamsTree.status=1;