完成编辑联系人信息
目前我们已经实现了添加、删除联系人功能。以及查询电话薄和添加、删除电话的功能。还欠缺一个编辑联系人的功能。
编辑联系人的后端代码
首先在IPersonApplicationService中定义两个方法。
Task<GetPersonForEditOutput> GetPersonForEdit(NullableIdDto<Guid> input);
Task EditPerson(PersonEditDto input);
然后在PersonApplicationService中实现两个方法：
[AbpAuthorize(AppPermissions.Pages_Tenant_PhoneBook_EditPerson)]
public async Task<GetPersonForEditOutput> GetPersonForEdit(NullableIdDto<Guid> input)
{
var output = new GetPersonForEditOutput();
PersonEditDto editDto;
if (input.Id.HasValue)
{
var entity = await _personRepository.GetAsync(input.Id.Value);
editDto = ObjectMapper.Map<PersonEditDto>(entity);
}
else
{
editDto = new PersonEditDto();
}
output.Person = editDto;
return output;
}
[AbpAuthorize(AppPermissions.Pages_Tenant_PhoneBook_EditPerson)]
public async Task EditPerson(PersonEditDto input)
{
var entity = await _personRepository.GetAsync(input.Id.Value);
//将input属性的值赋值到entity中
ObjectMapper.Map(input, entity);
await _personRepository.UpdateAsync(entity);
}
我们需要创建两个Dto，用于数据进行传输和转换。
public class GetPersonForEditOutput
{
public PersonEditDto Person { get; set; }
}
/// <summary>
/// 联系人编辑Dto
/// </summary>
public class PersonEditDto
{
public Guid? Id { get; set; }
[Required]
[MaxLength(Person.MaxNameLength)]
public string Name { get; set; }
/// <summary>
/// 地址信息
/// </summary>
[MaxLength(Person.MaxAddressLength)]
public string Address { get; set; }
[EmailAddress]
[MaxLength(Person.MaxEmailAddressLength)]
public string EmailAddress { get; set; }
}
最后，将AutoMapper的配置添加到CustomerAppDtoMapper.cs中，如下所示：
configuration.CreateMap<PersonEditDto, Person>().ReverseMap();
创建前端组件edit-person
我们将现在的phonebook文件夹中，创建edit-person组件如下：
- edit-person.component.html
- edit-person.component.less
- edit-person.component.ts
edit-person.component.html 视图的代码如下：
<form nz-form #validateForm="ngForm" (ngSubmit)="submitForm()" nzLayout="horizontal" autocomplete="off">
<!-- 模态框头部 -->
<div class="modal-header">
<div class="modal-title">
<i class="iconfont icon-medicine-box mr-sm"></i>
<span>{{ l('EditPerson') }}</span>
</div>
</div>
<!-- 模态框内容 -->
<fieldset>
<!-- 提示信息 -->
<nz-form-item nz-row>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">
{{ l('Name') }}
</nz-form-label>
<nz-form-control nz-col [nzSm]="14" [nzXs]="24" required nzHasFeedback>
<!-- 控件位置 -->
<input
nz-input
name="name"
type="text"
#personName="ngModel"
[(ngModel)]="entity.name"
placeholder="请输入名字"
required
/>
</nz-form-control>
<nz-form-control nzExtra *ngIf="personName.control.dirty && personName.control.errors">
<ng-container *ngIf="personName.control.hasError('required')">{{ l('ThisFieldIsRequired') }} </ng-container>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-row>
<nz-form-label nz-col [nzSm]="6" [nzXs]="24" nzFor="address">
{{ l('Address') }}
</nz-form-label>
<nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
<input nz-input name="address" #address="ngModel" [(ngModel)]="entity.address" placeholder="请输入地址" />
</nz-form-control>
</nz-form-item>
<nz-form-item nz-row>
<nz-form-label nz-col [nzSm]="6" [nzXs]="24" nzRequired nzFor="EmailAddress">
{{ l('EmailAddress') }}
</nz-form-label>
<nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
<input
nz-input
name="EmailAddress"
#personEmailAddress="ngModel"
[(ngModel)]="entity.emailAddress"
placeholder="请输入邮箱地址"
type="email"
required
/>
</nz-form-control>
<nz-form-control nzExtra *ngIf="personEmailAddress.control.dirty && personEmailAddress.control.errors">
<ng-container *ngIf="personEmailAddress.control.hasError('required')"
>{{ l('ThisFieldIsRequired') }}
</ng-container>
</nz-form-control>
</nz-form-item>
</fieldset>
<!-- 模态框底部 -->
<div class="modal-footer">
<button nz-button [nzType]="'default'" type="button" (click)="close()">
<i class="iconfont icon-close-circle-o"></i> {{ l('Cancel') }}
</button>
<button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.form.valid" [nzLoading]="saving">
<i class="iconfont icon-save"></i> {{ l('Save') }}
</button>
</div>
</form>
edit-person.component.ts的代码如下：
import { Component, Injector, OnInit } from '@angular/core';
import { ModalComponentBase } from '@shared/component-base';
import { PersonServiceProxy } from '@shared/service-proxies';
import { finalize } from 'rxjs/operators';
import { PersonEditDto } from '../../../../shared/service-proxies/service-proxies';
@Component({
selector: 'app-edit-person',
templateUrl: './edit-person.component.html',
styleUrls: ['./edit-person.component.less'],
})
export class EditPersonComponent extends ModalComponentBase implements OnInit {
/**
* 构造函数，在此处配置依赖注入
*/
constructor(injector: Injector, private _PersonService: PersonServiceProxy) {
super(injector);
}
entity: PersonEditDto = new PersonEditDto();
personId: any = null;
ngOnInit() {
if (this.personId) {
this._PersonService.getPersonForEdit(this.personId).subscribe((result) => {
this.entity = result.person;
});
}
}
/**
* 保存方法,提交form表单
*/
submitForm(): void {
this.saving = true;
console.log(this.entity);
this._PersonService
.editPerson(this.entity)
.pipe(finalize(() => (this.saving = false)))
.subscribe(() => {
this.notify.success(this.l('SavedSuccessfully'));
this.saving = false;
this.success();
});
}
}
然后在main.module.ts组件中注册组件
@NgModule({
imports: [CommonModule, HttpClientModule, SharedModule, AbpModule, CustomNgZorroModule, MainRoutingModule],
declarations: [DashboardComponent, AboutComponent, AdvertisingComponent, PhoneBookComponent, EditPersonComponent, CreatePersonComponent, AddphoneComponent],
entryComponents: [AdvertisingComponent, CreatePersonComponent, AddphoneComponent, EditPersonComponent],
providers: [],
})
在视图组件phonebook.component.ts中添加editPerson方法，如下
// 编辑联系人
editPerson(entity: PersonListDto) {
console.log(entity);
this.modalHelper.static(EditPersonComponent, { personId: entity.id }).subscribe(res => {
if (res) {
this.getPeople();
}
});
}
这样我们的编辑联系人功能就完成了。
最后的一个疑问
我们现在实现编辑联系人的功能，我们创建了一个EditPerson组件来实现。我们在一些复用性很强的环境下，其实是可以实现一个组件完成编辑和添加功能的。
因为我们可以使用一个组件实现添加和编辑联系人的功能，添加和编辑人的信息的时候，只需要去判断Id是否存在即可。
这个功能我们在后面配合我们的代码生成器来进行实现，平时需要半天一天的工作量，使用代码生成器10分钟完成一个需要2天的功能
