abp & ng-alain 改造前端八 —— 租户管

2018-06-30 本文已影响321人诸葛_小亮

介绍

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

功能

租户管理功能主要是管理平台租户信息，包括显示列表、新增、编辑、删除
abp模板自带界面如下

abp tenants

本章主要介绍租户管理中的列表显示

创建模块和页面文件

在routes文件夹下，执行如下命令

ng g ng-alain:module tenants
ng g ng-alain:list list -m=tenants
命令1表示创建 tenants模块，命令2表示在tenants模块中创建list页面，执行成功后的目录结构如下
tenants结构

1. tenants.module.ts

import { NgModule } from '@angular/core';
import { SharedModule } from '@shared/shared.module';
import { TenantsRoutingModule } from './tenants-routing.module';
import { TenantsListComponent } from './list/list.component';

import { CreateTenantModalComponent } from './list/create-tenant-modal.component';
import { EditTenantModalComponent } from './list/edit-tenant-modal.component';

const COMPONENTS = [
  TenantsListComponent];
const COMPONENTS_NOROUNT = [
  CreateTenantModalComponent,
  EditTenantModalComponent
];

@NgModule({
  imports: [
    SharedModule,
    TenantsRoutingModule
  ],
  declarations: [
    ...COMPONENTS,
    ...COMPONENTS_NOROUNT
  ],
  entryComponents: COMPONENTS_NOROUNT
})
export class TenantsModule { }

2. tenants-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TenantsListComponent } from './list/list.component';

const routes: Routes = [
  { path: '', component: TenantsListComponent},
  { path: 'list', component: TenantsListComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TenantsRoutingModule { }

3. routes-routing.module.ts

新增内容如下，针对tenants模块进行懒加载

{
    path: 'app',
    component: LayoutDefaultComponent,
    children: [
      { path: 'tenants', loadChildren: './tenants/tenants.module#TenantsModule' }
    ],
  }

4. list.component.html

<page-header>

</page-header>

<ng-template #extraTemplate>
    <nz-dropdown [nzTrigger]="'click'">
        <a nz-dropdown>
          More<i class="anticon anticon-down"></i>
        </a>
        <ul nz-menu>
          <li nz-menu-item (click)="load(pageInfo.pageIndex)">刷新</li>
        </ul>
      </nz-dropdown>
  </ng-template>

<nz-card  [nzExtra]="extraTemplate">

    
  
  <div class="my-sm">
    <button (click)="add()" nz-button nzType="primary">新建</button>
  </div>
  
  <nz-table #tenantListTable 
  [nzFrontPagination]="false"
  [nzData]="list" 
  [nzLoading]="loading" 
  [nzTotal]="pageInfo.total" 
  [(nzPageIndex)]="pageInfo.pageIndex"
  [(nzPageSize)]="pageInfo.pageSize" 
  (nzPageIndexChange)="load()" 
  (nzPageSizeChange)="load()"
  [nzShowSizeChanger]="true"
  >
  <thead nz-thead>
      <tr>
          <th nz-th>
              <span>序号</span>
          </th>
          <th nz-th>
              <span>{{l("TenancyName")}}</span>
          </th>
          <th nz-th>
              <span>{{l("Name")}}</span>
          </th>
          <th nz-th>
              <span>{{l('IsActive')}}</span>
          </th>
          <th nz-th>
              <span>{{l('Actions')}}</span>
          </th>

      </tr>
  </thead>
  <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of tenantListTable.data;let i=index;">
         
          <td nz-td>
              <span>
                {{(i+1)+pageInfo.skipCount}}
              </span>

          </td>
          <td nz-td>
              <span>
                  {{data.tenancyName}}
              </span>

          </td>
          <td nz-td>
              <span>
                  {{data.name}}
              </span>

          </td>
          <td nz-td>

              <nz-badge [nzStatus]="data.isActive?'success':'error'" [nzText]="data.isActive?'是':'否'"></nz-badge>

          </td>
          
          <td nz-td>

            <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                    <i class="anticon anticon-setting"></i>
                    操作
                    <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu>
                    <li nz-menu-item (click)="edit(data.id)">修改</li>
                    <li nz-menu-item (click)="delete(data)">
                        删除
                    </li>

                </ul>
            </nz-dropdown>
        </td>

      </tr>
  </tbody>
</nz-table>


</nz-card>

5. list.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 { AppComponentBase } from '@shared/app-component-base';

import { PageInfo } from '@shared/paging/PageInfo';
import { AppModalService } from '@shared/modal/appModalService';

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

import { CreateTenantModalComponent } from './create-tenant-modal.component';
import { EditTenantModalComponent } from './edit-tenant-modal.component';

@Component({
  selector: 'tenants-list',
  templateUrl: './list.component.html',
})
export class TenantsListComponent extends AppComponentBase implements OnInit {


  pageInfo: PageInfo;

  list = [];
  loading = false;

  constructor(
    injector: Injector,
    private http: _HttpClient,
    private modal: ModalHelper,
    private _tenantService: TenantServiceProxy,
    private _appModalService: AppModalService) {
    super(injector);

    this.pageInfo = new PageInfo();

  }

  load(pi?: number) {
    if (typeof pi !== 'undefined') {
      this.pageInfo.pageIndex = pi || 1;
    }
    this.getTenants();
  }

  getTenants() {
    const skipCount = this.pageInfo.skipCount;
    const maxResultCount = this.pageInfo.maxResultCount;

    this.loading = true;
    this._tenantService.getAll(skipCount, maxResultCount)
      .finally(() => {
        this.loading = false;
      })
      .subscribe((result: PagedResultDtoOfTenantDto) => {
        abp.log.debug(result);
        this.list = result.items;
        this.pageInfo.total = result.totalCount;
      });


  }

  ngOnInit() {
    this.getTenants();

  }

  add() {

  }


}

nz-table

列表使用 nz-table 组件，分页封装了vm类PageInfo
使用方式如下


  <nz-table #tenantListTable 
  [nzFrontPagination]="false"
  [nzData]="list" 
  [nzLoading]="loading" 
  [nzTotal]="pageInfo.total" 
  [(nzPageIndex)]="pageInfo.pageIndex"
  [(nzPageSize)]="pageInfo.pageSize" 
  (nzPageIndexChange)="load()" 
  (nzPageSizeChange)="load()"
  [nzShowSizeChanger]="true"
  >
  <thead nz-thead>
      <tr>
          <th nz-th>
              <span>序号</span>
          </th>
          <th nz-th>
              <span>{{l("TenancyName")}}</span>
          </th>
          <th nz-th>
              <span>{{l("Name")}}</span>
          </th>
          <th nz-th>
              <span>{{l('IsActive')}}</span>
          </th>
          <th nz-th>
              <span>{{l('Actions')}}</span>
          </th>

      </tr>
  </thead>
  <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of tenantListTable.data;let i=index;">
         
          <td nz-td>
              <span>
                {{(i+1)+pageInfo.skipCount}}
              </span>

          </td>
          <td nz-td>
              <span>
                  {{data.tenancyName}}
              </span>

          </td>
          <td nz-td>
              <span>
                  {{data.name}}
              </span>

          </td>
          <td nz-td>

              <nz-badge [nzStatus]="data.isActive?'success':'error'" [nzText]="data.isActive?'是':'否'"></nz-badge>

          </td>
          
          <td nz-td>

            <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                    <i class="anticon anticon-setting"></i>
                    操作
                    <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu>
                    <li nz-menu-item (click)="edit(data.id)">修改</li>
                    <li nz-menu-item (click)="delete(data)">
                        删除
                    </li>

                </ul>
            </nz-dropdown>
        </td>

      </tr>
  </tbody>
</nz-table>

分页pageinfo的代码

export class PageInfo{

    // 页码
    pageIndex = 1;

    // 每页条数
    pageSize = 10;

    // 总条数
    total = 1;
    
    /**
     * 跳过总数
     */
    get skipCount(){
        return (this.pageIndex - 1) * this.pageSize;
    }

    /**
     * 最大返回总数
     */
    get maxResultCount(){
        return this.pageSize;
    }

}

运行结果

我的公众号

源代码

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

abp & ng-alain 改造前端八 —— 租户管

介绍

功能

创建模块和页面文件

1. tenants.module.ts

2. tenants-routing.module.ts

3. routes-routing.module.ts

4. list.component.html

5. list.component.ts

nz-table

运行结果

我的公众号

源代码

猜你喜欢

热点阅读

abp & ng-alain 改造前端 八 —— 租户管

介绍

功能

创建模块和页面文件

1. tenants.module.ts

2. tenants-routing.module.ts

3. routes-routing.module.ts

4. list.component.html

5. list.component.ts

nz-table

运行结果

我的公众号

源代码

猜你喜欢

热点阅读

abp & ng-alain 改造前端八 —— 租户管