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

---

功能

新增、更新、删除系统的角色信息

新增
编辑
删除

页面改造

目录结构

create-role 存放创建角色组件
edit-role 存放编辑角色组件

新增角色

调用方式

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

create-role.component.ts

import { Component, OnInit, Injector } from '@angular/core';
import { NzModalRef, NzMessageService } from 'ng-zorro-antd';
import { _HttpClient } from '@delon/theme';
import { RoleServiceProxy, CreateRoleDto, ListResultDtoOfPermissionDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/app-component-base';

import * as _ from 'lodash';

@Component({
  selector: 'roles-create-role',
  templateUrl: './create-role.component.html',
})
export class RolesCreateRoleComponent extends AppComponentBase implements OnInit {
  permissions: ListResultDtoOfPermissionDto = null;
  role: CreateRoleDto = null;

  saving: boolean = false;

  checkOptionsOne: Array<any> = [];
  constructor(
    injector: Injector,
    private modal: NzModalRef,
    public msgSrv: NzMessageService,
    public http: _HttpClient,
    private _roleService: RoleServiceProxy
  ) {
    super(injector);

    this.role = new CreateRoleDto();
    this.role.init({ isStatic: false });
    this.permissions = new ListResultDtoOfPermissionDto();
  }

  ngOnInit(): void {
    this._roleService.getAllPermissions()
      .subscribe((permissions: ListResultDtoOfPermissionDto) => {
        this.permissions = permissions;
        this.initPermissions(this.permissions);
      });
    // this.http.get(`/user/${this.record.id}`).subscribe(res => this.i = res);
  }


  initPermissions(permissions: ListResultDtoOfPermissionDto): void {
    this.checkOptionsOne = _.map(permissions.items, c => {
      return {
        label: c.displayName,
        value: c.name,
        checked: true
      };
    }
    );
  }

  save(): void {

    const selected = _.filter(this.checkOptionsOne, c => c.checked);
    const permissions = _.map(selected, 'value');

    this.role.permissions = permissions;

    this.saving = true;
    this._roleService.create(this.role)
      .finally(() => { this.saving = false; })
      .subscribe(() => {
        this.notify.info(this.l('SavedSuccessfully'));
        this.close();
      });
  }


  close() {
    this.modal.destroy();
  }
}

create-role.component.html

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

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

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

<div nz-row>
  <div nz-col class="mt-sm">
    {{l("Role Description")}}
  </div>
  <div ng-col class="mt-sm">
    <input nz-input [(ngModel)]="role.description" />
  </div>
</div>

<div nz-row>
  <div nz-col class="mt-sm">
    <nz-checkbox-group [(ngModel)]="checkOptionsOne"></nz-checkbox-group>
  </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(id: number): void {
    this._appModalService.show(RolesEditRoleComponent, {
      roleId: id
    }).subscribe(res => {
      this.load();
    });
  }

edit-role.component.ts

import { Component, OnInit ,Input,Injector} from '@angular/core';
  import { NzModalRef, NzMessageService } from 'ng-zorro-antd';
  import { _HttpClient } from '@delon/theme';
  import { RoleServiceProxy, RoleDto, ListResultDtoOfPermissionDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/app-component-base';
import * as _ from 'lodash';

  @Component({
    selector: 'roles-edit-role',
    templateUrl: './edit-role.component.html',
  })
  export class RolesEditRoleComponent extends AppComponentBase implements OnInit {
    

    @Input()
    roleId:number=null;

    permissions: ListResultDtoOfPermissionDto = null;
    role: RoleDto = null;

    saving:boolean=false;

    checkOptionsOne:Array<any> = [];

    constructor(
      injector:Injector,
      private modal: NzModalRef,
      public msgSrv: NzMessageService,
      public http: _HttpClient,
      private _roleService:RoleServiceProxy
    ) {
      super(injector);
      this.role = new RoleDto();
      this.role.permissions = [];
      this.permissions = new ListResultDtoOfPermissionDto();
     }

    ngOnInit(): void {
      this._roleService.getAllPermissions()
            .subscribe((permissions: ListResultDtoOfPermissionDto) => {
                this.permissions = permissions;
                this.initPermissions(this.permissions);
            });


            this._roleService.get(this.roleId)
            .finally(() => {
            })
            .subscribe((result: RoleDto) => {
                this.role = result;
                this.initPermissions(this.permissions);
            });
     // this.http.get(`/user/${this.record.id}`).subscribe(res => this.i = res);
    }

    initPermissions(permissions: ListResultDtoOfPermissionDto): void {
      this.checkOptionsOne = _.map(permissions.items, c => {
        return {
          label: c.displayName,
          value: c.name,
          checked:this.checkPermission(c.name)
        };
      }
      );
    }

    checkPermission(permissionName: string): boolean {
      if (this.role.permissions.indexOf(permissionName) != -1) {
          return true;
      }
      else {
          return false;
      }
  }


  
  save(): void {
    const selected = _.filter(this.checkOptionsOne,c=>c.checked);
    const permissions = _.map( selected,'value');
    
        this.role.permissions = permissions;
        this.saving = true;
        this._roleService.update(this.role)
            .finally(() => { this.saving = false; })
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
            });
    }

    close() {
      this.modal.destroy();
    }
  }

edit-role.component.html

<div class="modal-header">
  <div class="modal-title">
    {{l("EditRole")}}
    <span *ngIf="role.isStatic"> (<span style="color:red">static</span>)</span>
  </div>
</div>

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

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

<div nz-row>
  <div nz-col class="mt-sm">
    {{l("Role Description")}}
  </div>
  <div ng-col class="mt-sm">
    <input nz-input [(ngModel)]="role.description" />
  </div>
</div>

<div nz-row>
  <div nz-col class="mt-sm">
    <nz-checkbox-group [(ngModel)]="checkOptionsOne"></nz-checkbox-group>
  </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>

删除角色

调用方式

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

---

运行结果

新增
修改
删除

---

我的公众号

我的公众号

---

源代码

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