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

---

功能

用户列表主要显示系统用户信息

用户列表

---

页面改造

实现 ng-alain 框架下的页面

目录结构

目录

users.module.ts

import { NgModule } from '@angular/core';
import { SharedModule } from '@shared/shared.module';
import { UsersRoutingModule } from './users-routing.module';
import { UsersListComponent } from './list/list.component';
import { UsersCreateUserComponent } from './create-user/create-user.component';
import { UsersEditUserComponent } from './edit-user/edit-user.component';

const COMPONENTS = [
  UsersListComponent
  ];
const COMPONENTS_NOROUNT = [
  UsersCreateUserComponent,
  UsersEditUserComponent
];

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

users-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersListComponent } from './list/list.component';
import { AppRouteGuard } from '@shared/auth/auth-route-guard';
const routes: Routes = [

  { path: '', component: UsersListComponent,
  canActivate: [AppRouteGuard]
 }
];

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

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("UserName")}}</span>
        </th>
        <th nz-th>
            <span>{{l("FullName")}}</span>
        </th>
        <th nz-th>
          <span>{{l("EmailAddress")}}</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.userName}}
            </span>

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

        </td>
        <td nz-td>
          <span>
              {{data.emailAddress}}
          </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>

list.component.ts

import { Component, OnInit, ViewChild, Injector } from '@angular/core';
import { _HttpClient, ModalHelper } from '@delon/theme';

import { AppComponentBase } from '@shared/app-component-base';

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

import { UserServiceProxy, UserDto, PagedResultDtoOfUserDto } from '@shared/service-proxies/service-proxies';

import { UsersCreateUserComponent } from './../create-user/create-user.component';
import { UsersEditUserComponent } from './../edit-user/edit-user.component';

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

  pageInfo: PageInfo;

  list = [];
  loading = false;

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

    this.pageInfo = new PageInfo();
  }

  ngOnInit() {
    this.load();
  }

  add() {
    this._appModalService.show(UsersCreateUserComponent).subscribe(res => {
      this.load();
    });
  }

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

  userList() {
    const skipCount = this.pageInfo.skipCount;
    const maxResultCount = this.pageInfo.maxResultCount;
    this.loading = true;
    this._userService.getAll(skipCount, maxResultCount)
      .finally(() => {
        this.loading = false;
      })
      .subscribe((result: PagedResultDtoOfUserDto) => {
        console.log(result);
        this.list = result.items;
        this.pageInfo.total = result.totalCount;
      });
  }

  edit(id: number): void {
    this._appModalService.show(UsersEditUserComponent, {
      userId: id
    }).subscribe(res => {
      this.load();
    });
  }

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

}

列表和分页使用和tenants列表页面一样的功能

---

添加模块加载

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

---

运行结果

用户列表

---

我的公众号

我的公众号

---

源代码

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