提交代码

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

@@ -37,13 +37,11 @@ export class TabComponent {
           // const activatedRoutePath = thisEvt.snapshot.routeConfig?.path;
           const activatedRoutePath = this.router.url;
           // console.log(activatedRoutePath);
-          /* if (activatedRoutePath == '/admin/index') {
-             return;
-           }*/
           const routeData = thisEvt.snapshot.queryParams;
           let menuTitle = '新标签页';
           if(routeData) {
             menuTitle = routeData['title'];
+          }
 
           // 该路由是否已激活，激活过则直接打开
           let isExist = false;

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

@@ -19,7 +19,7 @@
                        [nzSize]="'small'"
                        [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }"
       >
-        <nz-descriptions-item nzTitle="父级菜单">{{menuDetail.parentMenu?menuDetail.parentMenu.menuName:'无'}}</nz-descriptions-item>
+        <nz-descriptions-item nzTitle="父级菜单">{{menuDetail?.parentMenu?menuDetail.parentMenu.menuName:'无'}}</nz-descriptions-item>
         <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>
@@ -29,44 +29,54 @@
     </nz-card>
     <ng-template #extraTemplate>
       <div nz-row [nzGutter]="12">
-        <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu()">添加</button></div>
+        <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu(true)">添加</button></div>
-        <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu()">修改</button></div>
+        <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu(false)">修改</button></div>
-        <div nz-col nzSpan="8"><button nz-button nzType="primary">删除</button></div>
+        <div nz-col nzSpan="8"><button nz-button nzType="primary" nzDanger>删除</button></div>
       </div>
     </ng-template>
   </div>
 </div>
 
+<nz-modal [(nzVisible)]="editMenuVisible" nzTitle="{{editMenuTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditMenu()">
+  <ng-container *nzModalContent>
+    <form nz-form [formGroup]="editMenuForm" (ngSubmit)="submitEditMenuForm()">
+      <nz-form-item>
+        <nz-form-label [nzSm]="6" [nzXs]="24">父级菜单</nz-form-label>
+        <nz-form-control [nzSm]="14" [nzXs]="24">
+          <nz-select formControlName="menuPSid" nzShowSearch nzAllowClear>
+            <nz-option *ngFor="let item of menuData" nzValue="{{item.id}}" nzLabel="{{item.menuName}}"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
 
-
-
-<nz-modal [(nzVisible)]="editMenuVisible" [nzFooter]="null" nzTitle="菜单" (nzOnCancel)=closeEditMenu()>
-<!--  <form nz-form [formGroup]="editMenuForm" (ngSubmit)="submitEditMenuForm()">
       <nz-form-item>
         <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单名称</nz-form-label>
-      <nz-form-control [nzSm]="14" [nzXs]="24">
+        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单名称填写有误！">
           <input nz-input formControlName="menuName"/>
         </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">
+        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单类型选择有误！">
-        <input nz-input formControlName="menuType"/>
+          <nz-select formControlName="menuType" nzShowSearch>
+            <nz-option nzValue="1" nzLabel="菜单"></nz-option>
+            <nz-option nzValue="2" nzLabel="按钮"></nz-option>
+          </nz-select>
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item>
         <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单URL</nz-form-label>
-      <nz-form-control [nzSm]="14" [nzXs]="24">
+        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单URL填写有误！">
           <input nz-input formControlName="menuUrl"/>
         </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">
+        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单顺序填写有误！">
-        <input nz-input formControlName="menuSort"/>
+          <nz-input-number [nzMin]="1" [nzMax]="999" [nzStep]="1" formControlName="menuSort"></nz-input-number>
         </nz-form-control>
       </nz-form-item>
 
@@ -84,5 +94,10 @@
         </nz-form-control>
       </nz-form-item>
 
-  </form>-->
+      <div nz-flex [nzJustify]="'center'">
+        <button nz-button nzType="primary" class="submit-btn">保存</button>
+      </div>
+
+    </form>
+  </ng-container>
 </nz-modal>

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

@@ -0,0 +1,6 @@
+.submit-btn {
+  width: 150px;
+}
+nz-input-number {
+  width: 100%;
+}

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import {NzTreeComponent} from "ng-zorro-antd/tree";
-import {NgIf} from "@angular/common";
+import {NgForOf, NgIf} from "@angular/common";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzDropdownMenuComponent} from "ng-zorro-antd/dropdown";
 import {MenuService} from "../../../servies/menu/menu.service";
@@ -17,8 +17,12 @@ import {NzDescriptionsComponent, NzDescriptionsItemComponent} from "ng-zorro-ant
 import {MenuTypePipe} from "../../../pipes/menu/menu-type.pipe";
 import {NzFormDirective, NzFormLabelComponent} from "ng-zorro-antd/form";
 import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
-import {NzInputDirective} from "ng-zorro-antd/input";
+import { NzFormModule } from 'ng-zorro-antd/form';
+import {NzInputDirective, NzInputGroupComponent} from "ng-zorro-antd/input";
 import { NzModalModule } from 'ng-zorro-antd/modal';
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
 
 @Component({
   selector: 'app-menu',
@@ -36,14 +40,21 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
     NzRowDirective,
     NzColDirective,
     NzButtonComponent,
-    NzDescriptionsComponent,
-    NzDescriptionsItemComponent,
     MenuTypePipe,
+    NzModalModule,
     NzFormDirective,
     ReactiveFormsModule,
-    NzInputDirective,
     NzFormLabelComponent,
-    NzModalModule
+    NzInputDirective,
+    NzDescriptionsItemComponent,
+    NzDescriptionsComponent,
+    NzInputGroupComponent,
+    NzFormModule,
+    NzFlexDirective,
+    NzSelectComponent,
+    NzOptionComponent,
+    NgForOf,
+    NzInputNumberComponent
   ],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.less'
@@ -60,13 +71,15 @@ export class MenuComponent {
   editMenuVisible = false;
   // 编辑菜单表单
   editMenuForm: FormGroup;
+  // 编辑菜单标题
+  editMenuTitle = '';
   constructor(private menuService: MenuService,
               private fb: NonNullableFormBuilder) {
     this.queryMenuData();
 
     this.editMenuForm = this.fb.group({
       menuName: ['', [Validators.required]],
-      menuType: ['', [Validators.required]],
+      menuType: ['1', [Validators.required]],
       menuUrl: ['', [Validators.required]],
       menuPSid: [''],
       menuUrlImg: [''],
@@ -108,11 +121,14 @@ export class MenuComponent {
    */
   clickNode(nodeData: any) {
     const menuId = nodeData['keys'][0];
+    if (menuId != null) {
       const menuObj = this.menuData.find((o: any) => o.id == menuId);
       if (menuObj != null && menuObj.menuPSid != null) {
         // 获取父级菜单
         menuObj['parentMenu'] = this.menuData.find((o: any) => o.id == menuObj.menuPSid);
+      }
       this.menuDetail = menuObj;
+      console.log(this.menuDetail);
     }
   }
 
@@ -146,16 +162,49 @@ export class MenuComponent {
     return dataTree;
   }
 
-
   /**
    * 编辑菜单
+   * @param edit 编辑状态 true：增加  false：修改
    */
-  openEditMenu() {
+  openEditMenu(edit: boolean) {
+    // 初始化表单
+    this.editMenuTitle = '添加菜单';
+    this.editMenuForm.reset();
+    let menu = {
+      menuPSid: "",
+      menuType: '1'
+    };
+
+    if (this.menuDetail != null) {
+        if (edit) {
+          // 增加
+          menu = {
+            menuPSid: ""+this.menuDetail.id,
+            menuType: '1'
+          };
+        } else {
+          // 修改
+          this.editMenuTitle = '修改菜单';
+          menu = this.menuDetail;
+          menu['menuPSid'] = ""+menu['menuPSid']
+          menu['menuType'] = ""+menu['menuType']
+        }
+    }
+    this.editMenuForm.patchValue(menu);
     this.editMenuVisible = true;
   }
 
   submitEditMenuForm() {
-
+    if (this.editMenuForm.valid) {
+      console.log('submit', this.editMenuForm.value);
+    } else {
+      Object.values(this.editMenuForm.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });
+    }
   }
 
   /**