介绍
ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)
功能
介绍新增、更新、删除用户信息的改造过程
新增用户
编辑用户
删除用户
页面改造
使用ng-alain框架实现以上功能，目录 结果如下
目录结果
create-user 存放创建用户的组件
edit-user 存放编辑用户的组件
新增用户
调用方法
add() {
this._appModalService.show(UsersCreateUserComponent).subscribe(res => {
this.load();
});
}
create-user.component.html
<div class="modal-header">
<div class="modal-title">{{l("CreateNewUser")}}</div>
</div>
<nz-tabset>
<nz-tab nzTitle="基本信息">
<div nz-row>
<div nz-col class="mt-sm">
{{l("UserName")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.userName" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("Name")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.name" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("Surname")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.surname" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("EmailAddress")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.emailAddress" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("Password")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.password" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("ConfirmPassword")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.confirmPassword" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("IsActive")}}
</div>
<div ng-col class="mt-sm">
<nz-switch [(ngModel)]="user.isActive"></nz-switch>
</div>
</div>
</nz-tab>
<nz-tab nzTitle="角色">
<nz-checkbox-group [(ngModel)]="checkOptionsOne"></nz-checkbox-group>
</nz-tab>
</nz-tabset>
<div class="modal-footer">
<button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="close()">
{{l("Cancel")}}
</button>
<button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="save()">
{{l("Save")}}
</button>
</div>
create-user.component.ts
import { Component, OnInit, ViewChild, Injector } from '@angular/core';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { SimpleTableColumn, SimpleTableComponent } from '@delon/abc';
import { SFSchema } from '@delon/form';
import { NzModalRef, NzModalService, NzMessageService } from 'ng-zorro-antd';
import { UserServiceProxy, CreateUserDto, RoleDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/app-component-base';
import * as _ from 'lodash';
@Component({
selector: 'users-create-user',
templateUrl: './create-user.component.html',
})
export class UsersCreateUserComponent extends AppComponentBase implements OnInit {
user: CreateUserDto = null;
roles: RoleDto[] = null;
saving: boolean = false;
checkOptionsOne:Array<any> = [];
constructor(injector: Injector,
private _userService: UserServiceProxy,
private subject: NzModalRef,
private http: _HttpClient, private modal: ModalHelper) {
super(injector);
}
ngOnInit() {
this._userService.getRoles()
.subscribe((result) => {
this.roles = result.items;
this.initRole(this.roles);
});
this.user = new CreateUserDto();
this.user.init({ isActive: true });
this.checkOptionsOne = [
{ label: 'Apple', value: 'Apple', checked: true },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' }
];
}
initRole(roles: RoleDto[]): void {
this.checkOptionsOne = _.map(roles, c => {
return {
label: c.displayName,
value: c.normalizedName
};
}
);
}
/**
* 保存操作
*/
save(): void {
this.saving = true;
const selectRoles = _.filter(this.checkOptionsOne,c=>c.checked);
const roles = _.map( selectRoles,'value');
this.user.roleNames = roles;
this._userService.create(this.user)
.finally(() => {
this.saving = false;
})
.subscribe((res) => {
this.notify.info(this.l('SavedSuccessfully'));
this.close();
});
}
/**
* 关闭弹出窗
*/
close(): void {
this.subject.destroy();
}
}
编辑用户
将userId传入edit-user-modal组件内，调用方式如下
edit(id: number): void {
this._appModalService.show(UsersEditUserComponent, {
userId: id
}).subscribe(res => {
this.load();
});
}
edit-user.component.html
<div class="modal-header">
<div class="modal-title">{{l("EditUser")}}</div>
</div>
<nz-tabset>
<nz-tab nzTitle="基本信息">
<div nz-row>
<div nz-col class="mt-sm">
{{l("UserName")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.userName" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("Name")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.name" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("Surname")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.surname" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("EmailAddress")}}
</div>
<div ng-col class="mt-sm">
<input nz-input [(ngModel)]="user.emailAddress" />
</div>
</div>
<div nz-row>
<div nz-col class="mt-sm">
{{l("IsActive")}}
</div>
<div ng-col class="mt-sm">
<nz-switch [(ngModel)]="user.isActive"></nz-switch>
</div>
</div>
</nz-tab>
<nz-tab nzTitle="角色">
<nz-checkbox-group [(ngModel)]="checkOptionsOne"></nz-checkbox-group>
</nz-tab>
</nz-tabset>
<div class="modal-footer">
<button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="close()">
{{l("Cancel")}}
</button>
<button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="save()">
{{l("Save")}}
</button>
</div>
edit-user-modal.component.ts
import { Component, OnInit, ViewChild,Injector, Input } from '@angular/core';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { SimpleTableColumn, SimpleTableComponent } from '@delon/abc';
import { SFSchema } from '@delon/form';
import { NzModalRef, NzModalService, NzMessageService } from 'ng-zorro-antd';
import { UserServiceProxy, UserDto, RoleDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/app-component-base';
import * as _ from 'lodash';
@Component({
selector: 'users-edit-user',
templateUrl: './edit-user.component.html',
})
export class UsersEditUserComponent extends AppComponentBase implements OnInit {
user: UserDto = null;
roles: RoleDto[] = null;
saving: boolean = false;
checkOptionsOne = [];
@Input()
userId:number = null;
constructor(injector: Injector,
private _userService: UserServiceProxy,
private subject: NzModalRef,private http: _HttpClient, private modal: ModalHelper) {
super(injector);
this.user = new UserDto();
}
ngOnInit() {
this._userService.getRoles()
.subscribe((result) => {
this.roles = result.items;
this.initRole(this.roles);
});
this._userService.get(this.userId)
.subscribe(
(result) => {
this.user = result;
this.initRole(this.roles);
});
}
initRole(roles: RoleDto[]): void {
this.checkOptionsOne = _.map(roles, c => {
return {
label: c.displayName,
value: c.normalizedName,
checked:this.userInRole(c,this.user)
};
}
);
}
userInRole(role: RoleDto, user: UserDto): boolean {
if(user.roleNames == null){
return false;
};
if (user.roleNames.indexOf(role.normalizedName) !== -1) {
return true;
}
else {
return false;
}
}
/**
* 保存操作
*/
save(): void {
this.saving = true;
var roles = _.map( _.filter(this.checkOptionsOne,c=>c.checked),'value');
this.user.roleNames = roles;
this._userService.update(this.user)
.finally(() => {
this.saving = false;
})
.subscribe((res) => {
this.notify.info(this.l('SavedSuccessfully'));
this.close();
});
}
/**
* 关闭弹出窗
*/
close(): void {
this.subject.destroy();
}
}
删除用户
删除数据之前，需要确认是否进行删除操作，代码如下
delete(user: UserDto): void {
abp.message.confirm(
"Delete user '" + user.fullName + "'?"
).then((result: boolean) => {
console.log(result);
if (result) {
this._userService.delete(user.id)
.finally(() => {
abp.notify.info("Deleted User: " + user.fullName);
this.load();
})
.subscribe(() => { });
}
});
}
运行结果
新增用户
编辑用户
删除用户
我的公众号
我的公众号
网友评论