Angular：实现为角色授权操作，先选择角色有权限的组织，再选择对当前组织的控制维度

 

按照要求，实现以下操作：

1. 首先点选操作列中的授权按钮，弹出角色授权弹窗； 

   

2. 在弹窗中首先选择要为当前用户赋权的某个组织机构；

   

3. 选中某个组织机构维度，加载权限列表树，勾选后表示为当前用户赋予了该组织机构下的这个操作权限；

   

首先，弹窗中的当前角色字段，是从父列表在加载弹窗的时候传入的参数中取出来的：

@Input()
  set data(value: any) {
    this._bizType = value.bizType;
    if (this._bizType === 'user') {
      this.isAuthority = false;
      this._userId = value.id;
    } else {
      this._authorityId = value.id;
    }
    this._showName = value.showName;
  }

  <div nz-row>
    <div nz-col [nzSpan]="6">
      当前{{isAuthority? '角色' : '用户'}}
    </div>
    <div nz-col [nzSpan]="18">
      <input nz-input [(ngModel)]="_showName" readonly="readonly">
    </div>
  </div>

在插值表达式中，作一个简单的判断，控制字段label显示为“当前角色”还是“当前用户”；

接下来，在下拉选项中加载控制维度：

  <div nz-row>
    <div nz-col [nzSpan]="6">
      控制维度
    </div>
    <div nz-col [nzSpan]="18">
      <nz-select style="width: 100%" [(ngModel)]="_selectedValue" 
       (ngModelChange)="selectChange($event)">
        <ng-container *ngFor="let group of controlOrgs">
          <nz-option [nzValue]="group.type" [nzLabel]="group.name" *ngIf="group.type === 
           '0'"></nz-option>
          <nz-option-group [nzLabel]="group.name" *ngIf="group.type !== '0'">
            <nz-option *ngFor="let option of group.orgs" [nzValue]="group.type + '_' + 
             option.orgId" [nzLabel]="option.name"></nz-option>
          </nz-option-group>
        </ng-container>
      </nz-select>
    </div>
  </div>

其中当已选选项时，通过selectChange($event)方法取得当前控制维度类型和机构id，比如行政组织的维度类型是“1”，采购组织类型是“2”，再根据控制维度类型和机构id调用后端接口，加载权限列表树

<div style="height: 300px; overflow: auto;">
    <nz-tree #nzTree [nzData]="nodes" nzCheckable="true" nzMultiple="true" 
     [(nzCheckedKeys)]="defaultCheckedKeys" [nzExpandedKeys]="defaultExpandedKeys" 
     (nzCheckBoxChange)="mouseAction('check',$event)" [nzExpandAll]="true"
      *ngIf="nodes.length > 0">
    </nz-tree>
</div>

 /**
   * 控制维度下拉列表change事件
   * @param value
   */
  selectChange(value) {
    const controlOrg = value.split('_');
    this._controlType = controlOrg[0];       // 控制维度类型行政组织or采购组织
    if (controlOrg.length > 1) {
      this._orgId = controlOrg[1];           // 机构id
    } else {
      this._orgId = null;
    }
    this.getAllAuthMenus();
  }


 /**
   * 查询当前登录用户在某控制维度下可以查询到的菜单
   */
  getAllAuthMenus() {
    if (helper.IsEmpty(this._controlType)) {
      this.isSpinning = false;
      return;
    }
    this.isSpinning = true;
    const param = {
      controlType: this._controlType
    };
    if (!helper.IsEmpty(this._orgId)) {
      param['orgId'] = this._orgId;
    }
    this.commonProvider.getAllAuthMenus(param).subscribe(data2 => {     
      this.nodes = data2;             // 页面上权限树的数据来源
      this.getMenus();  
    });
  }


 /**
   * 查询该角色/用户已设置的菜单功能
   */
  getMenus() {
    this.isSpinning = true;
    const param = {
      controlType: this._controlType
    };
    if (!helper.IsEmpty(this._orgId)) {
      param['orgId'] = this._orgId;
    }
    if (this.isAuthority) {
      // 角色菜单查询
      param['authorityId'] = this._authorityId;
      this.rolerProvider.getMenuAuthorityList(param).subscribe(data => {
        this.authorityData = data;
        this.defaultCheckedKeys = [];
        data.forEach(item => {
          if (item.isDel !== '1') {
            this.defaultCheckedKeys.push(item.menuId);     // 如果已选，选项前打上选择标记
          }
        });
        this.isSpinning = false;
      });
    } else {
      // 用户菜单查询
      param['userId'] = this._userId;
      this.sysUserProvider.getMenuUserList(param).subscribe(data => {
        this.authorityData = data;
        this.defaultCheckedKeys = [];
        data.forEach(item => {
          if (item.isDel !== '1') {
            this.defaultCheckedKeys.push(item.menuId);
          }
        });
        this.isSpinning = false;
      });
    }
  }

其中this.commonProvider.getAllAuthMenus(param)方法，是写在provider中，用于加载控制维度树的，它的实现结果就是我们页面上控制权限维度的树的数据来源！也就是页面上nz-tree绑定的数据[nzData]="nodes"

这里我们主要是要注意树的组装的方法：

/**
   * 获取系统菜单
   * @param parentId
   */
  public getAllAuthMenus(param): Observable<any> {
    return new Observable(observable$ => {
      this.menuProvider.getAllAuthMenu(param).subscribe(res => {
        const newData = new NzTreeNode({
          title: '功能菜单',
          key: '-1',
          children: []
        });
        const getJsonTree = function (data) {                 // 定义方法来组装树结构的数据
          const childrens = [];
          for (let i = 0; i < data.length; i++) {
            const treeNode = new NzTreeNode({
              title: data[i].name,
              key: data[i].id,
            });
            if (data[i].children && data[i].children.length > 0) {  // 组装树每级子节点数据
              treeNode.addChildren(getJsonTree(data[i].children));
            } else {
              treeNode.isLeaf = true;
            }
            childrens.push(treeNode);
          }
          return childrens;
        };
        const _childrens = getJsonTree(res);                        // 调用组装树的方法
        newData.addChildren(_childrens);                    // 给树组装一个父节点：功能菜单
        observable$.next([newData]);
      });
    });
  }

下面我们可以看到，原本的数组，经过树的组装之后，变成了什么样的结构： 

 我们还要对权限维度树进行勾选和取消勾选的操作：

/**
   * 操作事件
   */
  mouseAction(name: string, event: NzFormatEmitEvent): void {
    const nodeData = event.node;              // 点选当前节点的操作
    const isChecked = nodeData.isChecked;
    if (isChecked) {
      this.addItem(nodeData);
    } else {
      //  删除节点
      this.removeItem(nodeData);
    }
  }


/**
   * 新建数据
   * @param node
   */
  addItem(node) {
    const filterList = this.authorityData.filter(item => {
      return item.menuId === node.key;
    });

    if (filterList.length === 0) {
      this.authorityData = [                // 组装勾选的节点数据
        ...this.authorityData, {
          id: null,
          menuId: node.key,
          authorityId: this._authorityId,
          userId: this._userId,
          controlType: this._controlType,
          orgId: this._orgId,
          isDel: '0'
        }
      ];
    } else {
      for (let i = 0; i < this.authorityData.length; i++) {
        if (node.key === this.authorityData[i].menuId) {
          this.authorityData[i].isDel = '0';
          break;
        }
      }
    }
  }


  /**
   * 删除数据,实际上更新isDel的值
   * @param item
   */
  removeItem(node) {
    for (let i = 0; i < this.authorityData.length; i++) {
      const elementItem = this.authorityData[i];
      //  移除新建的记录
      if (node.key === elementItem.menuId) {
        if (elementItem.id === null) {
          this.authorityData = this.authorityData.filter(_item => {
            return node.key !== _item.menuId;
          });
        } else {
          this.authorityData[i].isDel = '1';
        }
      }
    }
  }

这样就实现了我们想要的用户进行权限控制的功能！