[完善]角色管理

src/app/CustomReuseStrategy.ts

@@ -14,7 +14,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
 
     /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        console.log('shouldDetach======>', route);
+        // console.log('shouldDetach======>', route);
         if (route.routeConfig.path == 'basicInfo' || route.routeConfig.path == '') {
             return false;
         } else {
@@ -25,8 +25,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
 
     /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-        console.log('store======>route', route);
-        // console.log('store======>handle', handle);
+        // console.log('store======>route', route);
         if (route.routeConfig.path == 'unit') {
             CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
         }

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

@@ -8,13 +8,13 @@
                 </nz-input-group>
             </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-select formControlName="power" nzPlaceHolder="请选择权限" nzMode="multiple">
                     <nz-option *ngFor="let o of optionList" [nzValue]="o.name" [nzLabel]="o.displayName"></nz-option>
                 </nz-select>
             </nz-form-control>
-        </nz-form-item>
+        </nz-form-item> -->
     </form>
 </div>

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

@@ -12,21 +12,14 @@ import { NzTreeComponent } from 'ng-zorro-antd/tree';
 export class AddroleComponent implements OnInit {
 
   @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
-  @Input() data?: any;
-  @Input() nodes?: any;
-  @Input() title?: string;
-  @Input() subtitle?: string;
 
   validateForm!: FormGroup;
   constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
 
 
   ngOnInit(): void {
-    this.loadMore();
     this.validateForm = this.fb.group({
-      name: [null, [Validators.required]],
-      power: [null],
-      menus: [null]
+      name: [null, [Validators.required]]
     });
   }
 
@@ -37,14 +30,6 @@ export class AddroleComponent implements OnInit {
   }
   optionList = [];
   isLoading = false;
-  //获取权限列表
-  loadMore() {
-    this.isLoading = true;
-    this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data: any) => {
-      this.isLoading = false;
-      this.optionList = data.result.items
-      console.log('所有权限', data)
-    })
-  }
+
 
 }

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

@@ -8,13 +8,13 @@
                 </nz-input-group>
             </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-select [(ngModel)]="multipleValue" formControlName="power" nzPlaceHolder="请选择权限" nzMode="multiple">
                     <nz-option *ngFor="let o of optionList" [nzValue]="o.name" [nzLabel]="o.displayName"></nz-option>
                 </nz-select>
             </nz-form-control>
-        </nz-form-item>
+        </nz-form-item> -->
     </form>
 </div>

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

@@ -12,22 +12,14 @@ import { TreeService } from 'src/app/service/tree.service';
 export class EditroleComponent implements OnInit {
 
   @Input() data?: any;
-  @Input() optionList?: any;
-  @Input() nodes?: any;
   validateForm!: FormGroup;
   constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
 
   multipleValue: any
   ngOnInit(): void {
-    this.multipleValue = this.data.grantedPermissions
     this.validateForm = this.fb.group({
-      name: [null, [Validators.required]],
-      power: [null],
-      menus: [null]
+      name: [null, [Validators.required]]
     });
-    if (this.optionList.length == 0) {
-      this.loadMore()
-    }
   }
 
   totalCount
@@ -36,14 +28,4 @@ export class EditroleComponent implements OnInit {
     this.modal.destroy({ data: 'this the result data' });
   }
 
-  // optionList = [];
-  //获取权限列表
-  loadMore() {
-    this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data: any) => {
-      this.optionList = data.result.items
-      this.modal.containerInstance.config.nzOkLoading = false
-      // console.log('所有权限',data)
-    })
-  }
-
 }

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

@@ -6,21 +6,39 @@
         <button nz-button nzType="primary" (click)="addRole()">创建角色</button>
     </div>
     <div class="content">
-        <nz-table #colSpanTable [nzData]="listOfData" nzBordered nzSize="small" [nzShowPagination]="false">
+        <nz-table [nzLoading]="isLoading" [nzPageSize]="1000" #colSpanTable [nzData]="listOfData" nzBordered nzSize="small" [nzShowPagination]="false">
             <thead>
                 <tr>
                     <th nzWidth="18%">角色名称</th>
                     <th nzWidth="18%">创建/修改时间</th>
+                    <th>状态</th>
                     <th>操作</th>
                 </tr>
             </thead>
             <tbody>
                 <tr *ngFor="let item of colSpanTable.data; index as i">
-                    <td>访客</td>
-                    <td>2021-11-19</td>
+                    <td>{{item.name}}</td>
+                    <td>{{item.creationTime | date:"yyyy-MM-dd"}}</td>
+                    <td>
+                        <ng-container *ngIf="item.enabled; else elseTemplate">
+                            <span style="color: rgb(77, 192, 77);">已启用</span>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            <span style="color: rgb(226, 25, 58);">已禁用</span>
+                        </ng-template>
+                    </td>
                     <td class="operation">
                         <span class="blue" (click)="editRole(item)">编辑</span>
-                        <span class="blue" (click)="forbidRole(item)">禁用</span>
+                        <ng-container *ngIf="item.enabled; else elseTemplate2">
+                            <span class="blue" (click)="forbidRole(item,false)">
+                                禁用
+                            </span>
+                        </ng-container>
+                        <ng-template #elseTemplate2>
+                            <span class="green" (click)="forbidRole(item,true)">
+                                启用
+                            </span>
+                        </ng-template>
                         <span class="red" (click)="deleteRole(item)">删除</span>
                     </td>
                 </tr>

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

@@ -14,47 +14,61 @@ import { EditroleComponent } from './editrole/editrole.component';
 export class RoleComponent implements OnInit {
 
   constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient, private toTree: TreeService) { }
-  listOfData = [11
-  ];
+  listOfData = [];
   ngOnInit(): void {
+    this.getAllRoles()
   }
-  getAllRoles() {
 
+
+
+  //获取角色列表
+  isLoading = false
+  async getAllRoles() {
+    this.isLoading = true
+    let params = {
+      PageNumber: 1,
+      PageSize: 100
+    }
+    await new Promise<void>((resolve, reject) => {
+      this.http.get('/api/Roles', {
+        params: params
+      }).subscribe((data: any) => {
+        this.isLoading = false
+        this.listOfData = data.items
+        resolve(data)
+      })
+    })
   }
+
+
   addRole() {
     const modal = this.modal.create({
       nzTitle: '新增角色',
       nzContent: AddroleComponent,
       nzViewContainerRef: this.viewContainerRef,
       nzWidth: 400,
-      nzComponentParams: {
-        nodes: null
-      },
       nzMaskClosable: false,
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
           await new Promise(resolve => {
-            console.log('表单信息', instance.validateForm)
             let body = {
-              name: instance.validateForm.value.name,
-              DisplayName: instance.validateForm.value.name,
-              grantedPermissions: instance.validateForm.value.power || []
+              name: instance.validateForm.value.name
             }
-            let body2 = instance.validateForm.value.menus || []
-            this.http.post('/api/services/app/Role/Create', body).subscribe({
-              next: (data) => {
+            this.http.post('/api/Roles', body).subscribe({
+              next: async (data) => {
+                await this.getAllRoles()
+                this.message.create('success', '创建成功');
                 resolve(data)
-                this.message.create('success', '创建成功！');
-                this.getAllRoles()
                 return true
               },
               error: (err) => {
-                this.message.create('warning', '分配菜单错误！');
+                this.isLoading = false
+                this.message.create('warning', '创建失败');
               }
             })
           })
         } else {
-          this.message.create('warning', '请填写完整！');
+          this.message.create('warning', '请填写完整');
           return false
         }
       }
@@ -76,28 +90,24 @@ export class RoleComponent implements OnInit {
       nzOnOk: async () => {
         if (instance.validateForm.valid) {
           await new Promise(resolve => {
-            console.log('表单信息', instance.validateForm)
             let body = {
-              id: item.id,
               name: instance.validateForm.value.name,
-              DisplayName: instance.validateForm.value.name,
-              grantedPermissions: instance.validateForm.value.power || []
             }
-            let body2 = instance.validateForm.value.menus || []
-            this.http.put('/api/services/app/Role/Update', body).subscribe({
-              next: (data) => {
+            this.http.patch(`/api/Roles/${item.id}`, body).subscribe({
+              next: async (data) => {
+                await this.getAllRoles()
                 resolve(data)
-                this.message.create('success', '修改成功！');
-                this.getAllRoles()
+                this.message.create('success', '修改成功');
                 return true
               },
               error: (err) => {
-                this.message.create('warning', '分配菜单错误！');
+                this.message.create('warning', '修改失败');
+                return false
               }
             })
           })
         } else {
-          this.message.create('warning', '请填写完整！');
+          this.message.create('warning', '请填写完整');
           return false
         }
       }
@@ -107,18 +117,37 @@ export class RoleComponent implements OnInit {
     // Return a result when closed
     modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
   }
-  forbidRole(item) {
-
+  forbidRole(item, type) {
+    this.isLoading = true
+    let body = {
+      enabled: type,
+    }
+    this.http.patch(`/api/Roles/${item.id}`, body).subscribe({
+      next: async (data) => {
+        await this.getAllRoles()
+        this.message.create('success', '修改成功');
+      },
+      error: (err) => {
+        this.isLoading = false
+        this.message.create('warning', '修改失败');
+      }
+    })
   }
   deleteRole(item) {
     this.modal.confirm({
-      nzTitle: `确定要删除${item.title}这个机构吗?`,
+      nzTitle: `确定要删除${item.name}这个机构吗?`,
       nzOkText: '确定',
       nzOkType: 'primary',
       nzOnOk: () => {
-        this.http.delete(`/api/Organizations/${item.origin.id}`).subscribe(data => {
-        
-          this.message.create('success', '删除成功！');
+        this.http.delete(`/api/Roles/${item.id}`).subscribe({
+          next: async (data) => {
+            await this.getAllRoles()
+            this.message.create('success', '删除成功');
+          },
+          error: (err) => {
+            this.isLoading = false
+            this.message.create('warning', '删除失败');
+          }
         })
       },
       nzCancelText: '取消',

src/app/pages/login/login.component.ts

@@ -97,20 +97,28 @@ export class LoginComponent implements OnInit {
       password: this.validateForm.value.password
     }).subscribe({
       next: (data: any) => {
-        this.isLoading = false;
-        this.rememberInfo()
-        this.autoLogin()
         sessionStorage.setItem("token", data.token);
         sessionStorage.setItem("refreshToken", data.refreshToken);
-        this.router.navigate(['/system'])
-        this.message.create('success', `登录成功`);
+        this.http.get('/api/Accounts/Profile').subscribe({
+          next: (data: any) => {
+            console.log('登录用户信息', data)
+            this.isLoading = false;
+            this.rememberInfo()
+            this.autoLogin()
+            this.router.navigate(['/system'])
+            this.message.create('success', `登录成功`);
+            sessionStorage.setItem("userData", JSON.stringify(data));
+          },
+          error: (err) => {
+            this.isLoading = false;
+          }
+        })
+
       },
       error: (err) => {
         this.isLoading = false;
       }
-    }
-
-    )
+    })
   }
 
   forget() {