提交代码

src/app/pages/account/sys-role/sys-role.component.html

@@ -12,7 +12,7 @@
             <div class="search-area">
                 <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
                 <button nz-button (click)="searchFormReset()">重置</button>
-                <button nz-button [nzType]="'primary'">创建</button>
+                <button nz-button [nzType]="'primary'" (click)="showEditRole(true, null)">创建</button>
             </div>
         </div>
     </div>
@@ -20,11 +20,13 @@
 
 
 <nz-table #basicTable
-          [nzScroll]="{ x: '1100px' }"
+          [nzBordered]="true"
           [nzFrontPagination]="false"
           [nzShowQuickJumper]="true"
+          [nzScroll]="{ x: '1100px' }"
           [nzShowTotal]="totalTemplate"
-          (nzPageIndexChange)="queryData($event)"
+          [(nzPageIndex)]="tablePageNum"
+          (nzPageIndexChange)="queryData()"
           [nzTotal]="tableData.total"
           [nzData]="tableData.list" >
     <thead>
@@ -43,14 +45,60 @@
         <td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
         <td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
         <td>
-            <a>修改</a>
+            <a (click)="showEditRole(false, data)">修改</a>
             <nz-divider nzType="vertical"></nz-divider>
-            <a>分配菜单</a>
+            <a (click)="showAssignRoleMenu(data.id)">分配菜单</a>
             <nz-divider nzType="vertical"></nz-divider>
-            <a>删除</a>
+            <a (click)="showDelData(data.id)">删除</a>
         </td>
     </tr>
     </tbody>
     <ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
 </nz-table>
 
+
+<nz-modal [(nzVisible)]="editRoleVisible" nzTitle="{{editRoleTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditRole()">
+    <ng-container *nzModalContent>
+        <form nz-form [formGroup]="editRoleForm" (ngSubmit)="submitEditRoleForm()">
+            <nz-form-item>
+                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>角色名称</nz-form-label>
+                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色名称填写有误！">
+                    <input nz-input formControlName="roleName"/>
+                </nz-form-control>
+            </nz-form-item>
+
+            <nz-form-item>
+                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>角色描述</nz-form-label>
+                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色描述填写有误！">
+                    <input nz-input formControlName="roleDesc"/>
+                </nz-form-control>
+            </nz-form-item>
+
+            <div nz-flex [nzJustify]="'center'">
+                <button nz-button nzType="primary" class="submit-btn">保存</button>
+            </div>
+
+        </form>
+    </ng-container>
+</nz-modal>
+
+
+<nz-modal [(nzVisible)]="assignRoleMenuVisible" nzTitle="角色菜单权限" [nzFooter]="null" (nzOnCancel)="closeAssignRoleMenu()">
+    <ng-container *nzModalContent>
+        <nz-tree
+            #nzTreeComponent
+            *ngIf="menuTree.length"
+            [nzData]="menuTree"
+            [nzCheckedKeys]="menuTreeCheckedKeys"
+            [nzShowLine]="true"
+            [nzExpandAll]="true"
+            [nzMultiple]="false"
+            [nzCheckable]="true"
+            nzVirtualHeight="500px"
+        ></nz-tree>
+        <nz-divider nzOrientation="right"></nz-divider>
+        <div nz-flex [nzJustify]="'center'">
+            <button nz-button nzType="primary" class="submit-btn" (click)="submitAssignRoleMenu()">保存</button>
+        </div>
+    </ng-container>
+</nz-modal>

src/app/pages/account/sys-role/sys-role.component.less

@@ -31,3 +31,6 @@ button {
 .search-area {
   text-align: right;
 }
+.submit-btn {
+  width: 150px;
+}

src/app/pages/account/sys-role/sys-role.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {NzTableComponent, NzTbodyComponent, NzTheadComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {NzFormDirective, NzFormModule} from "ng-zorro-antd/form";
@@ -6,16 +6,21 @@ import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
 import {
   FormGroup,
   NonNullableFormBuilder,
-  ReactiveFormsModule,
+  ReactiveFormsModule, Validators,
 } from "@angular/forms";
 import {NzButtonComponent} from "ng-zorro-antd/button";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzInputDirective} from "ng-zorro-antd/input";
 import {NzFlexDirective} from "ng-zorro-antd/flex";
-import {DatePipe, NgForOf} from "@angular/common";
+import {DatePipe, NgForOf, NgIf} from "@angular/common";
 import {RoleService} from "../../../servies/role/role.service";
-import {NzModalService} from "ng-zorro-antd/modal";
+import {NzModalComponent, NzModalModule, NzModalService} from "ng-zorro-antd/modal";
 import {NzMessageService} from "ng-zorro-antd/message";
+import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {DATA} from "../../../data/login/localStorage.namespace";
+import {MenuService} from "../../../servies/menu/menu.service";
+import {NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions} from "ng-zorro-antd/tree";
 
 @Component({
   selector: 'app-sys-role',
@@ -37,42 +42,79 @@ import {NzMessageService} from "ng-zorro-antd/message";
     NgForOf,
     DatePipe,
     NzThMeasureDirective,
+    NzInputNumberComponent,
+    NzModalComponent,
+    NzOptionComponent,
+    NzSelectComponent,
+    NzModalModule,
+    NgIf,
+    NzTreeComponent,
   ],
   templateUrl: './sys-role.component.html',
   styleUrl: './sys-role.component.less'
 })
 export class SysRoleComponent {
+  // 表单页数
+  tablePageNum = 1;
   // 表单数据
   tableData: any = {
     total: 0,
     list: [],
   };
-
+  // 搜索表单
   searchForm: FormGroup;
+  // 编辑角色弹出框
+  editRoleVisible = false;
+  // 编辑角色表单
+  editRoleForm: FormGroup;
+  // 编辑角色标题
+  editRoleTitle = '';
+  // 分配角色菜单弹出框
+  assignRoleMenuVisible = false;
+
+  // 当前需要分配权限角色
+  currentAssignRoleId: any = null;
+  // 菜单树
+  menuTree: any = [];
+  // 菜单已勾选数据
+  menuTreeCheckedKeys: any = [];
+
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
 
   constructor(private fb: NonNullableFormBuilder,
               private roleService: RoleService,
-              private message: NzMessageService) {
+              private menuService: MenuService,
+              private message: NzMessageService,
+              private modal: NzModalService) {
     // 初始化搜索框
     this.searchForm = this.fb.group({
       roleName: [''],
     });
 
-    this.queryData(1);
+    // 初始化表单
+    this.editRoleForm = this.fb.group({
+      id: [''],
+      roleName: ['', [Validators.required]],
+      roleDesc: [''],
+    });
+
+    this.menuService.queryMenuTree((data: any) => {
+        this.menuTree = data['return_data'];
+    });
+
+    this.queryData();
   }
 
   /**
    * 获取数据
    */
-  queryData(pageNum: number) {
-    this.searchForm.value.pageNum = pageNum;
+  queryData() {
+    this.searchForm.value.pageNum = this.tablePageNum;
     this.searchForm.value.pageSize = 10;
+    this.searchForm.value.time = new Date().getTime();
     this.roleService.queryList(this.searchForm.value, (data: any) => {
-      console.log(data);
-      this.tableData = data['return_data'];
-
         if (data['return_code'] == '000000') {
-
+          this.tableData = data['return_data'];
         }
     });
   }
@@ -81,7 +123,7 @@ export class SysRoleComponent {
    * 搜索表单提交
    */
   searchFormSubmit(): void {
-    this.queryData(1);
+    this.queryData();
   }
 
   /**
@@ -91,4 +133,151 @@ export class SysRoleComponent {
     this.searchForm.reset();
   }
 
+  /**
+   * 打开编辑角色模态框
+   * @param edit
+   * @param data
+   */
+  showEditRole(edit: boolean, data: any) {
+      if (edit) {
+        this.editRoleTitle = '创建角色';
+      } else {
+        this.editRoleTitle = '修改角色';
+        this.editRoleForm.patchValue(data);
+      }
+      this.editRoleVisible = true;
+  }
+
+  /**
+   * 打开编辑角色模态框
+   * @param edit
+   */
+  submitEditRoleForm() {
+    if (this.editRoleForm.valid) {
+      this.roleService.editRole(this.editRoleForm.value, (data: any) => {
+        if (data['return_code'] == '000000') {
+          // 刷新数据
+          this.queryData();
+
+          this.message.create('success', '操作成功');
+
+          // 关闭弹窗
+          this.closeEditRole();
+        } else {
+          this.message.create('error', data['return_msg']);
+        }
+      });
+    } else {
+      Object.values(this.editRoleForm.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });
+    }
+  }
+
+  /**
+   * 关闭编辑角色模态框
+   */
+  closeEditRole() {
+    this.editRoleVisible = false;
+  }
+
+  /**
+   * 展示删除数据
+   */
+  showDelData(dataId: number) {
+    this.modal.confirm({
+      nzTitle: '提示',
+      nzContent: '确实删除数据？',
+      nzOnOk: () => this.delData(dataId)
+    });
+  }
+
+  /**
+   * 删除数据
+   */
+  delData(dataId: number) {
+    const param = {
+      id: dataId
+    }
+    this.roleService.delRole(param, (data: any) => {
+      if (data['return_code'] == '000000') {
+        // 刷新数据
+        this.queryData();
+        this.message.create('success', '操作成功');
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
+
+  /**
+   * 打开分配角色菜单模态框
+   * @param roleId
+   */
+  showAssignRoleMenu(roleId: number) {
+    this.currentAssignRoleId = roleId;
+    this.menuService.queryRoleMenuArray(roleId, (data: any) => {
+        this.menuTreeCheckedKeys = data['return_data'];
+        console.log(this.menuTreeCheckedKeys);
+    });
+    this.assignRoleMenuVisible = true;
+  }
+
+  /**
+   * 菜单递归
+   * @param data
+   * @param merIds
+   */
+  recursionData(data: any, merIds: any): any {
+    for (let node of data.children) {
+      merIds.push(node.key)
+      if (node.children != null) {
+        this.recursionData(node,merIds);
+      }
+    }
+  }
+
+  /**
+   * 提交分配角色菜单权限
+   */
+  submitAssignRoleMenu() {
+    let menuIds: any = [];
+    // 已勾选的菜单
+    const checkedNodeList = this.nzTreeComponent.getCheckedNodeList();
+    for (let node of checkedNodeList) {
+      menuIds.push(node.origin.key);
+      if (node.origin.children != null) {
+        menuIds.concat(this.recursionData(node.origin, menuIds))
+      }
+    };
+
+    // 半选状态的菜单
+    const halfCheckedNodeList = this.nzTreeComponent.getHalfCheckedNodeList();
+    for (let node of halfCheckedNodeList) {
+      menuIds.push(node.key);
+    }
+
+    const param= {
+      roleId: this.currentAssignRoleId,
+      menuIds: menuIds
+    };
+    this.menuService.assignMenu(param, (data: any) => {
+      if (data['return_code'] == '000000') {
+        this.message.create('success', '操作成功');
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
+
+  /**
+   * 关闭分配角色菜单模态框
+   */
+  closeAssignRoleMenu() {
+    this.menuTreeCheckedKeys = [];
+    this.assignRoleMenuVisible = false;
+  }
 }

src/app/pages/system/menu/menu.component.html

@@ -4,7 +4,6 @@
     <nz-card nzTitle="系统菜单">
       <nz-spin [nzSpinning]="!treeView"></nz-spin>
       <nz-tree
-        #nzTreeComponent
         *ngIf="menuTree.length > 0 && treeView"
         [nzData]="menuTree"
         [nzShowLine]="true"

src/app/pages/system/menu/menu.component.ts

@@ -99,7 +99,7 @@ export class MenuComponent {
    * 获取菜单树
    */
   queryMenuTree() {
-    this.menuService.queryRoleMenuTreeCustomized('', (data: any) => {
+    this.menuService.queryMenuTree((data: any) => {
       this.menuTree = data['return_data'];
       this.treeView = true;
       this.queryMenuData();

src/app/servies/menu/menu.service.ts

@@ -12,7 +12,7 @@ export class MenuService {
   constructor(private http: HttpClient) { }
 
   /**
-   * 分盘菜单
+   * 分配菜单
    * @param params
    * @param callBack
    */
@@ -71,16 +71,27 @@ export class MenuService {
   }
 
   /**
-   * 分配菜单
+   * 查询菜单树
    * @param roleId
    * @param callBack
    */
-  public queryRoleMenuTreeCustomized(roleId: string, callBack:any) {
-    let paramStr = '';
-    if (roleId != null && roleId != '') {
-      paramStr = '?roleId=' + roleId;
+  public queryMenuTree(callBack:any) {
+    this.http.post(environment.baseUrl + 'secMenu/queryMenuTree', null).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询角色菜单权限数组
+   * @param roleId
+   * @param callBack
+   */
+  public queryRoleMenuArray(roleId: number, callBack:any) {
+    const param = {
+      roleId: roleId,
+      t: new Date().getTime() // 时间戳避免缓存
     }
-    this.http.post(environment.baseUrl + 'secMenu/queryRoleMenuTreeCustomized'+paramStr, null).subscribe(data => {
+    this.http.get(environment.baseUrl + 'secMenu/queryRoleMenuArray?' + ObjectData.objectByString(param)).subscribe(data => {
       callBack(data);
     });
   }