From 6ce9cd150c900d370dba6c5726e423888610e254 Mon Sep 17 00:00:00 2001 From: hurui <177768073@qq.com> Date: Wed, 17 Apr 2024 14:45:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/body/tab/tab.component.ts | 4 +- src/app/pages/system/menu/menu.component.html | 103 ++++++++++-------- src/app/pages/system/menu/menu.component.less | 6 + src/app/pages/system/menu/menu.component.ts | 77 ++++++++++--- 4 files changed, 129 insertions(+), 61 deletions(-) diff --git a/src/app/pages/body/tab/tab.component.ts b/src/app/pages/body/tab/tab.component.ts index 7ab20b8..a36a5f3 100644 --- a/src/app/pages/body/tab/tab.component.ts +++ b/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; diff --git a/src/app/pages/system/menu/menu.component.html b/src/app/pages/system/menu/menu.component.html index fa3694c..1f569db 100644 --- a/src/app/pages/system/menu/menu.component.html +++ b/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 }" > - {{menuDetail.parentMenu?menuDetail.parentMenu.menuName:'无'}} + {{menuDetail?.parentMenu?menuDetail.parentMenu.menuName:'无'}} {{menuDetail.menuName?menuDetail.menuName:'无'}} {{menuDetail.menuType| menuType}} {{menuDetail.menuUrl?menuDetail.menuUrl:'无'}} @@ -29,60 +29,75 @@
-
-
-
+
+
+
+ + +
+ + 父级菜单 + + + + + + + + 菜单名称 + + + + + + 菜单类型 + + + + + + + - - + +
diff --git a/src/app/pages/system/menu/menu.component.less b/src/app/pages/system/menu/menu.component.less index e69de29..749f89a 100644 --- a/src/app/pages/system/menu/menu.component.less +++ b/src/app/pages/system/menu/menu.component.less @@ -0,0 +1,6 @@ +.submit-btn { + width: 150px; +} +nz-input-number { + width: 100%; +} diff --git a/src/app/pages/system/menu/menu.component.ts b/src/app/pages/system/menu/menu.component.ts index 9dc8bbd..cde6ec3 100644 --- a/src/app/pages/system/menu/menu.component.ts +++ b/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]; - 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); + 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 }); + } + }); + } } /**