菜单管理

src/app/system-management/role/addrole/addrole.component.html

@@ -19,20 +19,21 @@
         </ng-template>
       </nz-form-control>
     </nz-form-item>
-    <!-- <nz-form-item>
+    <nz-form-item>
       <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="菜单">菜单</nz-form-label>
       <nz-form-control>
-        <nz-tree-select formControlName="menus" [nzNodes]="nodes" nzShowSearch nzCheckable nzPlaceHolder="请选择菜单"
-          [nzExpandedIcon]="multiExpandedIconTpl">
-        </nz-tree-select>
+          <nz-tree-select [nzCheckStrictly]="true"  #nzTreeComponent formControlName="menus" [nzNodes]="nodes" nzShowSearch nzCheckable nzPlaceHolder="请选择菜单"
+              [nzExpandedIcon]="multiExpandedIconTpl">
+          </nz-tree-select>
       </nz-form-control>
       <ng-template #multiExpandedIconTpl let-node let-origin="origin">
-        <ng-container *ngIf="node.children.length == 0; else elseTemplate">
-        </ng-container>
-        <ng-template #elseTemplate>
-          <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i>
-        </ng-template>
+          <ng-container *ngIf="node.children.length == 0; else elseTemplate">
+          </ng-container>
+          <ng-template #elseTemplate>
+              <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
+                  class="ant-tree-switcher-line-icon"></i>
+          </ng-template>
       </ng-template>
-    </nz-form-item> -->
+  </nz-form-item>
   </form>
 </div>

src/app/system-management/role/addrole/addrole.component.ts

@@ -1,18 +1,21 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input,ViewChild } from '@angular/core';
 import { NzModalRef } from 'ng-zorro-antd/modal';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { TreeService } from 'src/app/service/tree.service';
+import { NzTreeComponent } from 'ng-zorro-antd/tree';
 @Component({
   selector: 'app-addrole',
   templateUrl: './addrole.component.html',
   styleUrls: ['./addrole.component.scss']
 })
 export class AddroleComponent implements OnInit {
-
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  @Input() data?: any;
+  @Input() nodes?: any;
   @Input() title?: string;
   @Input() subtitle?: string;
-  @Input() nodes?: any;
+
   validateForm!: FormGroup;
   constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
 
@@ -23,10 +26,10 @@ export class AddroleComponent implements OnInit {
     this.validateForm = this.fb.group({
       name: [null, [Validators.required]],
       power: [null, [Validators.required]],
-      // menus: [null]
+      menus: [null]
     });
   }
-
+  
   totalCount
   getAllMenus() {
     let params = {

src/app/system-management/role/editrole/editrole.component.html

@@ -16,21 +16,21 @@
         </nz-select>
       </nz-form-control>
     </nz-form-item>
-    <!-- <nz-form-item>
+    <nz-form-item>
       <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="菜单">菜单</nz-form-label>
       <nz-form-control>
-        <nz-tree-select formControlName="menus" [nzNodes]="nodes" nzShowSearch nzCheckable nzPlaceHolder="请选择菜单"
-          [nzExpandedIcon]="multiExpandedIconTpl">
-        </nz-tree-select>
-        <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+          <nz-tree-select [nzCheckStrictly]="true"  #nzTreeComponent formControlName="menus" [nzNodes]="nodes" nzShowSearch nzCheckable nzPlaceHolder="请选择菜单"
+              [nzExpandedIcon]="multiExpandedIconTpl">
+          </nz-tree-select>
+      </nz-form-control>
+      <ng-template #multiExpandedIconTpl let-node let-origin="origin">
           <ng-container *ngIf="node.children.length == 0; else elseTemplate">
           </ng-container>
           <ng-template #elseTemplate>
-            <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
-              class="ant-tree-switcher-line-icon"></i>
+              <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
+                  class="ant-tree-switcher-line-icon"></i>
           </ng-template>
-        </ng-template>
-      </nz-form-control>
-    </nz-form-item> -->
+      </ng-template>
+  </nz-form-item>
   </form>
 </div>

src/app/system-management/role/editrole/editrole.component.ts

@@ -20,15 +20,33 @@ export class EditroleComponent implements OnInit {
   ngOnInit(): void {
     this.nodes.length != 0 ? null : this.getAllMenus()
     this.multipleValue = this.data.grantedPermissions
+    this.getMenus()
     this.validateForm = this.fb.group({
       name: [null, [Validators.required]],
       power: [null, [Validators.required]],
-      // menus: [null]
+      menus: [null]
     });
     if (this.optionList.length == 0) {
       this.loadMore()
     }
   }
+  getMenus() {
+    let params = {
+      Id: this.data.id,
+    }
+    this.http.get('/api/services/app/Role/Get', {
+      params: params
+    }).subscribe((data: any) => {
+      // console.log(666, data)
+      let arr = []
+      data.result.menus.forEach(element => {
+        arr.push(element.id)
+      });
+      this.validateForm.patchValue({
+        menus: arr
+      });
+    })
+  }
   totalCount
   getAllMenus() {
     let params = {

src/app/system-management/role/role.component.ts

@@ -86,8 +86,21 @@ export class RoleComponent implements OnInit {
               DisplayName: instance.validateForm.value.name,
               grantedPermissions: arr
             }
+            let body2=instance.validateForm.value.menus
             this.http.post('/api/services/app/Role/Create', body).subscribe(data => {
               resolve(data)
+              this.http.post('/api/services/app/Role/SetRoleMenus', body2, {
+                params: {
+                  roleId: data.result.id
+                }
+              }).subscribe(data => {
+                resolve(data)
+                console.log(data,8252);
+                
+                // this.message.create('success', '分配成功！');
+
+                return true
+              })
               this.message.create('success', '创建成功！');
               this.getAllRoles()
               return true
@@ -103,7 +116,7 @@ export class RoleComponent implements OnInit {
     modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
     modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
   }
-
+  
   edit(item) {
     const modal = this.modal.create({
       nzTitle: '编辑角色',
@@ -131,8 +144,21 @@ export class RoleComponent implements OnInit {
               DisplayName: instance.validateForm.value.name,
               grantedPermissions: arr
             }
+            let body2=instance.validateForm.value.menus
             this.http.put('/api/services/app/Role/Update', body).subscribe(data => {
               resolve(data)
+              this.http.post('/api/services/app/Role/SetRoleMenus', body2, {
+                params: {
+                  roleId: data.result.id
+                }
+              }).subscribe(data => {
+                resolve(data)
+                console.log(data,8252);
+                
+                // this.message.create('success', '分配成功！');
+
+                return true
+              })
               this.message.create('success', '修改成功！');
               this.getAllRoles()
               return true