介绍

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

功能

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

新增租户

编辑租户

删除租户

页面修改

新建页面结构如下所示

目录结果

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

新增租户

create-tenant-modal.component.html

<div class="modal-header">
    <div class="modal-title">{{l("CreateNewTenant")}}</div>
</div>


<div nz-row>
    <div nz-col class="mt-sm">
            {{l("TenancyName")}}
    </div>
    <div ng-col class="mt-sm">
        <input nz-input  [(ngModel)]="tenant.tenancyName" />
    </div>
</div>

<div nz-row>
        <div nz-col class="mt-sm">
                {{l("Name")}}
        </div>
        <div ng-col class="mt-sm">
            <input nz-input  [(ngModel)]="tenant.name" />
        </div>
    </div>

    <div nz-row>
            <div nz-col class="mt-sm">
                    {{l("DatabaseConnectionString")}}
            </div>
            <div ng-col class="mt-sm">
                <input nz-input  [(ngModel)]="tenant.connectionString" />
            </div>
        </div>

        <div nz-row>
                <div nz-col class="mt-sm">
                        {{l("AdminEmailAddress")}}
                </div>
                <div ng-col class="mt-sm">
                    <input nz-input  [(ngModel)]="tenant.adminEmailAddress" />
                </div>
            </div>

            <div nz-row>
                    <div nz-col class="mt-sm">
                            {{l("IsActive")}}
                    </div>
                    <div ng-col class="mt-sm">
                            <nz-switch [(ngModel)]="tenant.isActive"></nz-switch>
                    </div>
                </div>

                <div nz-row>
                        <div ng-col class="mt-sm">
                                {{l("DefaultPasswordIs","123qwe")}}
                              </div>
                    </div>

             

<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-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

<div class="modal-header">
    <div class="modal-title">{{l("CreateNewTenant")}}</div>
</div>


<div nz-row>
    <div nz-col class="mt-sm">
        {{l("TenancyName")}}
    </div>
    <div ng-col class="mt-sm">
        <input nz-input [(ngModel)]="tenant.tenancyName" />
    </div>
</div>

<div nz-row>
    <div nz-col class="mt-sm">
        {{l("Name")}}
    </div>
    <div ng-col class="mt-sm">
        <input nz-input [(ngModel)]="tenant.name" />
    </div>
</div>


<div nz-row>
    <div nz-col class="mt-sm">
        {{l("IsActive")}}
    </div>
    <div ng-col class="mt-sm">
        <nz-switch [(ngModel)]="tenant.isActive"></nz-switch>
    </div>
</div>

<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-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(() => { });
      }
    });
  }