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

  
    
      More
      
    
    

      
刷新
    
  






  

    新建
  

  
    
      
        
          序号
        
        
          {{l("RoleName")}}
        
        
          {{l("DisplayName")}}
        
        
          {{l('Actions')}}
        

      
    
    
      

        
          
            {{(i+1)+pageInfo.skipCount}}
          

        
        
          
            {{data.name}}
          

        
        
          
            {{data.displayName}}
          

        

        

          
            
              
              操作
              
            
            

              
修改
              

                删除
              

            
          
        

      
    
  

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