abp & ng-alain 改造前端 九 —— 租户管理(新增、编辑、删除)

---

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

1. 目录:https://www.jianshu.com/p/589af988637c
2. 源代码:https://github.com/ZhaoRd/abp-alain

---

功能

新增、更新、删除租主信息
原UI功能

新增租户

编辑租户

删除租户

---

页面修改

新建页面结构如下所示

目录结果

create-tenant-modal组件是现新增租户组件，edit-tenant-modal组件是编辑租户组件

新增租户

create-tenant-modal.component.html

    
{{l("CreateNewTenant")}}




    

            {{l("TenancyName")}}
    
    

        
    



        

                {{l("Name")}}
        
        

            
        
    

    

            

                    {{l("DatabaseConnectionString")}}
            
            

                
            
        

        

                

                        {{l("AdminEmailAddress")}}
                
                

                    
                
            

            

                    

                            {{l("IsActive")}}
                    
                    

                            
                    
                

                

                        

                                {{l("DefaultPasswordIs","123qwe")}}
                              
                    

             


    
        {{l("Cancel")}}
    
    
        {{l("Save")}}
    

create-tenant-modal.component.ts

import {
  Component,
  OnInit,
  ViewChild,
  Injector,
  ElementRef,
  Input,
  AfterViewInit,
} from '@angular/core';
import { AppComponentBase } from '@shared/app-component-base';
import { AccountServiceProxy } from '@shared/service-proxies/service-proxies';
import { IsTenantAvailableInput } from '@shared/service-proxies/service-proxies';
import { AppTenantAvailabilityState } from '@shared/AppEnums';

import { NzModalRef, NzModalService, NzMessageService } from 'ng-zorro-antd';

import { TenantServiceProxy, CreateTenantDto, TenantDto, PagedResultDtoOfTenantDto } from '@shared/service-proxies/service-proxies';

@Component({
  selector: 'app-create-tenant-modal',
  templateUrl: './create-tenant-modal.component.html',
})
export class CreateTenantModalComponent extends AppComponentBase
  implements AfterViewInit, OnInit {

  active = false;
  saving = false;

  tenant: CreateTenantDto = null;

  /**
   * 租主名，使用@Input 传递参数
   */
  @Input() tenantId: number;

  constructor(
    private _tenantService: TenantServiceProxy,
    private _accountService: AccountServiceProxy,
    private modal: NzModalService,
    private subject: NzModalRef,
    injector: Injector,
  ) {
    super(injector);
  }

  ngAfterViewInit(): void {
  }

  ngOnInit(): void {
    this.tenant = new CreateTenantDto();
    this.tenant.init({ isActive: true });
  }

  /**
   * 保存操作
   */
  save(): void {

    this.saving = true;
    this._tenantService.create(this.tenant)
      .finally(() => {
        this.saving = false;
      })
      .subscribe((res) => {
        this.notify.info(this.l('SavedSuccessfully'));
        this.close();
      });
  }

  /**
   * 关闭弹出窗
   */
  close(): void {
    this.subject.destroy();
  }
}

编辑租户

编辑租户代码，需要传入tenantId参数到edit-tenant-modal组件，调用代码如下

  edit(tenantId) {
    this._appModalService.show(EditTenantModalComponent, { tenantId: tenantId })
      .subscribe(res => {
        this.load(this.pageInfo.pageIndex);
      });
  }

edit-tenant-modal.component.html

    
{{l("CreateNewTenant")}}




    

        {{l("TenancyName")}}
    
    

        
    



    

        {{l("Name")}}
    
    

        
    




    

        {{l("IsActive")}}
    
    

        
    



    
        {{l("Cancel")}}
    
    
        {{l("Save")}}
    

edit-tenant-modal.component.ts

import {
  Component,
  OnInit,
  ViewChild,
  Injector,
  ElementRef,
  Input,
  AfterViewInit,
} from '@angular/core';
import { AppComponentBase } from '@shared/app-component-base';
import { AccountServiceProxy } from '@shared/service-proxies/service-proxies';
import { IsTenantAvailableInput } from '@shared/service-proxies/service-proxies';
import { AppTenantAvailabilityState } from '@shared/AppEnums';

import { NzModalRef, NzModalService, NzMessageService } from 'ng-zorro-antd';

import { TenantServiceProxy, CreateTenantDto, TenantDto, PagedResultDtoOfTenantDto } from '@shared/service-proxies/service-proxies';

@Component({
  selector: 'app-edit-tenant-modal',
  templateUrl: './edit-tenant-modal.component.html',
})
export class EditTenantModalComponent extends AppComponentBase
  implements AfterViewInit, OnInit {

  active = false;
  saving = false;

  tenant: TenantDto = null;

  /**
   * 租主名，使用@Input 传递参数
   */
  @Input() tenantId: number;

  constructor(
    private _tenantService: TenantServiceProxy,
    private _accountService: AccountServiceProxy,
    private modal: NzModalService,
    private subject: NzModalRef,
    injector: Injector,
  ) {
    super(injector);
    this.tenant = new TenantDto();
  }

  ngAfterViewInit(): void {

    this.active = true;
    if (this.tenantId == null) {
      return;
    }


    this._tenantService.get(this.tenantId)
      .finally(() => {
        this.active = false;
      })
      .subscribe((res) => {
        abp.log.debug(res);
        this.tenant = res;
      });

  }

  ngOnInit(): void {
  }

  /**
   * 保存操作
   */
  save(): void {

    this.saving = true;
    this._tenantService.update(this.tenant)
      .finally(() => {
        this.saving = false;
      })
      .subscribe((res) => {
        this.notify.info(this.l('SavedSuccessfully'));
        this.close();
      });
  }

  /**
   * 关闭弹出窗
   */
  close(): void {
    this.subject.destroy();
  }
}

删除租户

删除租户需要询问是否删除，代码如下

  delete(tenant: TenantDto): void {
    abp.message.confirm(
      "Delete tenant '" + tenant.name + "'?"
    ).then((result: boolean) => {
      if (result) {
        this._tenantService.delete(tenant.id)
          .finally(() => {
            abp.notify.info("Deleted tenant: " + tenant.name);
            this.load();
          })
          .subscribe(() => { });
      }
    });
  }

---

运行结果

新增租户

编辑租户

删除租户

---

我的公众号

我的公众号

---

源代码

源代码:https://github.com/ZhaoRd/abp-alain