提交代码

src/app/pages/account/account.routes.ts

@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router';
 import {SysAccountComponent} from "./sys-account/sys-account.component";
+import {SysRoleComponent} from "./sys-role/sys-role.component";
 
 export const ACCOUNT_ROUTES: Routes = [
-  { path: 'sys_account', component: SysAccountComponent}
+  { path: 'sys_account', component: SysAccountComponent},
+  { path: 'sys_role', component: SysRoleComponent}
 ];

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

@@ -0,0 +1,46 @@
+<form nz-form [formGroup]="searchForm">
+    <div nz-row [nzGutter]="24">
+        <div nz-col [nzSpan]="8">
+            <nz-form-item>
+                <nz-form-label>角色名称</nz-form-label>
+                <nz-form-control>
+                    <input nz-input formControlName="roleName" />
+                </nz-form-control>
+            </nz-form-item>
+        </div>
+        <div nz-col [nzSpan]="8">
+            <div class="search-area">
+                <button nz-button [nzType]="'primary'">搜索</button>
+                <button nz-button (click)="resetForm()">重置</button>
+            </div>
+        </div>
+    </div>
+</form>
+
+
+<nz-table #basicTable
+          [nzShowQuickJumper]="true"
+          [nzShowTotal]="totalTemplate"
+          [nzData]="tableData.list" >
+    <thead>
+    <tr>
+        <th>角色名称</th>
+        <th>角色描述</th>
+        <th>创建时间</th>
+        <th>修改时间</th>
+        <th>操作</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of basicTable.data">
+        <td>{{data.roleName}}</td>
+        <td>{{data.roleStatus}}</td>
+        <td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
+        <td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
+        <td>
+        </td>
+    </tr>
+    </tbody>
+    <ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
+</nz-table>
+

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

@@ -0,0 +1,33 @@
+.ant-advanced-search-form {
+  padding: 24px;
+  background: #fbfbfb;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+.search-result-list {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+
+[nz-form-label] {
+  overflow: visible;
+}
+
+button {
+  margin-left: 8px;
+}
+
+.collapse {
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+.search-area {
+  text-align: right;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SysRoleComponent } from './sys-role.component';
+
+describe('SysRoleComponent', () => {
+  let component: SysRoleComponent;
+  let fixture: ComponentFixture<SysRoleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SysRoleComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SysRoleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,83 @@
+import { Component } from '@angular/core';
+import {NzTableComponent, NzTbodyComponent, NzTheadComponent} from "ng-zorro-antd/table";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzFormDirective, NzFormModule} from "ng-zorro-antd/form";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {
+  FormGroup,
+  NonNullableFormBuilder,
+  ReactiveFormsModule,
+} 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 {RoleService} from "../../../servies/role/role.service";
+
+@Component({
+  selector: 'app-sys-role',
+  standalone: true,
+  imports: [
+    NzTableComponent,
+    NzTheadComponent,
+    NzDividerComponent,
+    NzTbodyComponent,
+    NzFormDirective,
+    NzRowDirective,
+    ReactiveFormsModule,
+    NzColDirective,
+    NzButtonComponent,
+    NzIconDirective,
+    NzInputDirective,
+    NzFormModule,
+    NzFlexDirective,
+    NgForOf,
+    DatePipe,
+  ],
+  templateUrl: './sys-role.component.html',
+  styleUrl: './sys-role.component.less'
+})
+export class SysRoleComponent {
+  // 表单数据
+  tableData: any = {
+    total: 0,
+    list: [],
+  };
+
+  searchForm: FormGroup;
+
+  constructor(private fb: NonNullableFormBuilder,
+              private roleService: RoleService) {
+    // 初始化搜索框
+    this.searchForm = this.fb.group({
+      roleName: [''],
+    });
+
+    this.queryData();
+  }
+
+  /**
+   * 获取数据
+   */
+  queryData() {
+    this.searchForm.value.pageNum = 1;
+    this.searchForm.value.pageSize = 10;
+    this.roleService.queryList(this.searchForm.value, (data: any) => {
+      console.log(data);
+      this.tableData = data['return_data'];
+
+        if (data['return_code'] == '000000') {
+
+        }
+    });
+  }
+
+  /**
+   * 搜索框重置
+   */
+  resetForm(): void {
+    this.searchForm.reset();
+  }
+
+}

src/app/pages/body/index/index.component.html

@@ -30,10 +30,10 @@
       <!-- start 菜单内容 end-->
       <div>
         <ul nz-menu nzMode="inline">
-          <li nz-submenu *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" >
+          <li nz-submenu nzOpen *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" >
             <ul>
-              <li nz-menu-item *ngFor="let childMenu of item['childMenuList']">
+              <li nz-menu-item nzMatchRouter *ngFor="let childMenu of item['childMenuList']">
-                <a [routerLink]="[item['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: item['menuName']}">{{childMenu['menuName']}}</a>
+                <a [routerLink]="[item['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: childMenu['menuName']}">{{childMenu['menuName']}}</a>
               </li>
             </ul>
           </li>

src/app/pages/body/index/index.component.ts

@@ -61,7 +61,8 @@ export class IndexComponent {
   // 侧边菜单展示开关
   isCollapse = true;
 
-  constructor(private storage: BrowserStorageService) {
+  constructor(private storage: BrowserStorageService,
+              private router: Router) {
     this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']);
   }
 
@@ -70,7 +71,13 @@ export class IndexComponent {
     this.menuData.map((data: any) => {
       data.selected = data.menuName === item.menuName;
     });
+    if (item.menuName === '首页') {
+      // 激活首页路由
+      this.router.navigateByUrl('/admin/index').finally();
+    }
+
     this.leftMenuData = item['childMenuList'];
     this.isCollapse = item['menuName'] === '首页';
+
   }
 }

src/app/pages/body/tab/tab.component.ts

@@ -30,13 +30,11 @@ export class TabComponent {
     // 监听路由事件，只订阅 ActivationEnd 事件
     this.router.events.pipe(filter(e => e instanceof ActivationEnd))
       .subscribe((e) => {
-        // 这里不强转VS Code编译通不过，有没有大佬有解决方法
         const thisEvt = <ActivationEnd>e;
         if (thisEvt.snapshot.routeConfig?.loadChildren) {
           // 当前激活的路由
           // const activatedRoutePath = thisEvt.snapshot.routeConfig?.path;
           const activatedRoutePath = this.router.url;
-          // console.log(activatedRoutePath);
           const routeData = thisEvt.snapshot.queryParams;
           let menuTitle = '新标签页';
           if(routeData) {

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

@@ -2,9 +2,10 @@
 
   <div nz-col nzSpan="12">
     <nz-card nzTitle="系统菜单">
+      <nz-spin [nzSpinning]="!treeView"></nz-spin>
       <nz-tree
         #nzTreeComponent
-        *ngIf="menuTree.length > 0"
+        *ngIf="menuTree.length > 0 && treeView"
         [nzData]="menuTree"
         [nzShowLine]="true"
         [nzExpandAll]="true"
@@ -25,7 +26,7 @@
         <nz-descriptions-item nzTitle="菜单名称">{{menuDetail.menuName?menuDetail.menuName:'无'}}</nz-descriptions-item>
         <nz-descriptions-item nzTitle="菜单类型">{{menuDetail.menuType| menuType}}</nz-descriptions-item>
         <nz-descriptions-item nzTitle="菜单URL">{{menuDetail.menuUrl?menuDetail.menuUrl:'无'}}</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="菜单图标">{{menuDetail.name?menuDetail.name:'无'}}</nz-descriptions-item>
+        <nz-descriptions-item nzTitle="菜单图标">{{menuDetail.menuUrlImg?menuDetail.menuUrlImg:'无'}}</nz-descriptions-item>
         <nz-descriptions-item nzTitle="菜单描述">{{menuDetail.menuDesc?menuDetail.menuDesc:'无'}}</nz-descriptions-item>
       </nz-descriptions>
     </nz-card>

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

@@ -1,5 +1,5 @@
-import {Component, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
-import {NzTreeComponent} from "ng-zorro-antd/tree";
+import {NzFormatEmitEvent, NzTreeComponent, NzTreeNode, NzTreeService} from "ng-zorro-antd/tree";
 import {NgForOf, NgIf} from "@angular/common";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzDropdownMenuComponent} from "ng-zorro-antd/dropdown";
@@ -23,7 +23,7 @@ import {NzFlexDirective} from "ng-zorro-antd/flex";
 import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
 import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
 import {NzMessageService} from "ng-zorro-antd/message";
-import {NzTreeNode} from "ng-zorro-antd/core/tree/nz-tree-base-node";
+import {NzSpinComponent} from "ng-zorro-antd/spin";
 
 @Component({
   selector: 'app-menu',
@@ -55,7 +55,8 @@ import {NzTreeNode} from "ng-zorro-antd/core/tree/nz-tree-base-node";
     NzSelectComponent,
     NzOptionComponent,
     NgForOf,
-    NzInputNumberComponent
+    NzInputNumberComponent,
+    NzSpinComponent
   ],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.less'
@@ -64,7 +65,7 @@ export class MenuComponent {
   // 菜单数据
   menuData: any = [];
   // 菜单树形数据
-  menuTree: any = [];
+  menuTree: any[] = [];
   // 菜单详情
   menuDetail: any = {};
   // 编辑菜单弹出框
@@ -73,7 +74,9 @@ export class MenuComponent {
   editMenuForm: FormGroup;
   // 编辑菜单标题
   editMenuTitle = '';
-  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  // 树视图展示状态
+  treeView= false;
+
   constructor(private menuService: MenuService,
               private fb: NonNullableFormBuilder,
               private modal: NzModalService,
@@ -98,6 +101,7 @@ export class MenuComponent {
   queryMenuTree() {
     this.menuService.queryRoleMenuTreeCustomized('', (data: any) => {
       this.menuTree = data['return_data'];
+      this.treeView = true;
       this.queryMenuData();
     });
   }
@@ -124,7 +128,6 @@ export class MenuComponent {
         menuObj['parentMenu'] = this.menuData.find((o: any) => o.id == menuObj.menuPSid);
       }
       this.menuDetail = menuObj;
-      console.log(this.menuDetail);
     }
   }
 
@@ -141,6 +144,14 @@ export class MenuComponent {
       menuType: '1'
     };
 
+    if (edit == false && this.menuDetail?.id == null) {
+      this.modal.confirm({
+        nzTitle: '提示',
+        nzContent: '请点击需要修改的菜单',
+      });
+      return;
+    }
+
     if (this.menuDetail != null) {
       if (edit) {
         // 增加
@@ -165,6 +176,7 @@ export class MenuComponent {
    */
   submitEditMenuForm() {
     if (this.editMenuForm.valid) {
+      this.treeView = false;
       this.menuService.editMenu(this.editMenuForm.value, (data: any) => {
         if (data['return_code'] == '000000') {
           // 刷新数据
@@ -213,14 +225,14 @@ export class MenuComponent {
     const param = {
       menuId: this.menuDetail.id
     }
+    this.treeView = false;
     this.menuService.delMenu(param, (data: any) => {
         if (data['return_code'] == '000000') {
           // 刷新数据
-          const s = this.nzTreeComponent.getTreeNodeByKey(""+this.menuDetail.menuPSid)
+          this.queryMenuTree();
-
-
           this.message.create('success', '操作成功');
         } else {
+          this.treeView = true;
           this.message.create('error', data['return_msg']);
         }
     });

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

@@ -39,7 +39,7 @@ export class MenuService {
    * @param callBack
    */
   public queryMenuList(callBack:any) {
-    this.http.get(environment.baseUrl + 'secMenu/queryMenuList').subscribe(data => {
+    this.http.post(environment.baseUrl + 'secMenu/queryMenuList', null).subscribe(data => {
       callBack(data);
     });
   }

src/app/servies/role/role.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../environments/environment";
+import {ObjectData} from "../../utils/objectData.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RoleService {
+
+  constructor(private http: HttpClient) { }
+
+  /**
+   * 编辑角色
+   * @param params
+   * @param callBack
+   */
+  public editRole(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secRole/editRole', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 删除角色
+   * @param params
+   * @param callBack
+   */
+  public delRole(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secRole/delRole', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询详情
+   * @param roleId
+   * @param callBack
+   */
+  public queryDetail(roleId: number, callBack:any) {
+    this.http.get(environment.baseUrl + 'secRole/queryDetail?roleId='+roleId).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询列表
+   * @param params
+   * @param callBack
+   */
+  public queryList(params: object, callBack:any) {
+    this.http.get(environment.baseUrl + 'secRole/queryList?'+ObjectData.objectByString(params)).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+}