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实现角色管理功能

目录结构

目录结构

roles.module.ts

import { NgModule } from '@angular/core';
import { SharedModule } from '@shared/shared.module';
import { RolesRoutingModule } from './roles-routing.module';
import { RolesListComponent } from './list/list.component';
import { RolesCreateRoleComponent } from './create-role/create-role.component';
import { RolesEditRoleComponent } from './edit-role/edit-role.component';

const COMPONENTS = [
  RolesListComponent];
const COMPONENTS_NOROUNT = [
  RolesCreateRoleComponent,
  RolesEditRoleComponent];

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

roles-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RolesListComponent } from './list/list.component';
import { AppRouteGuard } from '@shared/auth/auth-route-guard';

const routes: Routes = [

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

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

list.component.html

<page-header></page-header>
<!--
<nz-card>
  <sf mode="search" [schema]="searchSchema" [formData]="params" (formSubmit)="st.reset($event)" (formReset)="st.reset(params)"></sf>
  <div class="my-sm">
    <button (click)="add()" nz-button nzType="primary">新建</button>
  </div>
  <simple-table #st [data]="url" [columns]="columns" [extraParams]="params"></simple-table>
</nz-card>
-->

<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("RoleName")}}</span>
        </th>
        <th nz-th>
          <span>{{l("DisplayName")}}</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.name}}
          </span>

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

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

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 { RoleServiceProxy, RoleDto, PagedResultDtoOfRoleDto } from "@shared/service-proxies/service-proxies";

import { RolesCreateRoleComponent } from "./../create-role/create-role.component";
import { RolesEditRoleComponent } from "./../edit-role/edit-role.component";

@Component({
  selector: 'roles-list',
  templateUrl: './list.component.html',
})
export class RolesListComponent extends AppComponentBase implements OnInit {
  pageInfo: PageInfo;

  list = [];
  loading = false;

  constructor(injector: Injector,
    private _appModalService: AppModalService, private http: _HttpClient, private modal: ModalHelper
    , private _roleService: RoleServiceProxy) {
    super(injector);
    this.pageInfo = new PageInfo();
  }

  ngOnInit() {
    console.log("123");
    this.load();
  }


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

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

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

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

  delete(role: RoleDto): void {
    abp.message.confirm(
      "Remove Users from Role and delete Role '"+ role.displayName +"'?"
    ).then((result: boolean) => {
      console.log(result);
      if (result) {
        this._roleService.delete(role.id)
          .finally(() => {
            abp.notify.info("Deleted Role: " + role.displayName );
            this.load();
          })
          .subscribe(() => { });
      }
    });
  }

}

---

添加模块加载

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

---

运行结果

角色列表

---

我的公众号

我的公众号

---

源代码

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