import { Component } from '@angular/core'; import {NzTreeComponent} from "ng-zorro-antd/tree"; import {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"; import { NzTreeNodeCheckboxComponent, NzTreeNodeComponent, NzTreeNodeOptionComponent, NzTreeViewComponent } from "ng-zorro-antd/tree-view"; import {NzCardComponent} from "ng-zorro-antd/card"; import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid"; import {NzButtonComponent} from "ng-zorro-antd/button"; import {NzDescriptionsComponent, NzDescriptionsItemComponent} from "ng-zorro-antd/descriptions"; 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 { NzModalModule } from 'ng-zorro-antd/modal'; @Component({ selector: 'app-menu', standalone: true, imports: [ NzTreeComponent, NgIf, NzIconDirective, NzDropdownMenuComponent, NzTreeViewComponent, NzTreeNodeComponent, NzTreeNodeCheckboxComponent, NzTreeNodeOptionComponent, NzCardComponent, NzRowDirective, NzColDirective, NzButtonComponent, NzDescriptionsComponent, NzDescriptionsItemComponent, MenuTypePipe, NzFormDirective, ReactiveFormsModule, NzInputDirective, NzFormLabelComponent, NzModalModule ], templateUrl: './menu.component.html', styleUrl: './menu.component.less' }) export class MenuComponent { // 菜单数据 menuData: any = []; // 菜单树形数据 menuTree: any = []; // 菜单详情 menuDetail: any = {}; // 编辑菜单弹出框 editMenuVisible = false; // 编辑菜单表单 editMenuForm: FormGroup; constructor(private menuService: MenuService, private fb: NonNullableFormBuilder) { this.queryMenuData(); this.editMenuForm = this.fb.group({ menuName: ['', [Validators.required]], menuType: ['', [Validators.required]], menuUrl: ['', [Validators.required]], menuPSid: [''], menuUrlImg: [''], menuSort: ['', [Validators.required]], menuDesc: [''], }); } /** * 查询菜单数据 */ queryMenuData() { this.menuService.queryMenuList((data: any) => { this.menuData = data['return_data']; // 获取菜单树形结构 this.queryMenuTree(); }); } /** * 查询菜单树形结构数据 */ queryMenuTree() { this.menuService.queryRoleMenuTree('', (data: any) => { const menuList = data['return_data']; for (const parent of menuList) { this.menuTree.push({ key: parent['id'], title: parent['menuName'], children: this.recursionChildMenu(this.menuData, parent['id']), }); } }); } /** * 点击树节点 * @param nodeData */ 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); this.menuDetail = menuObj; } } /** * 递归获取子菜单 * @param dataSource 菜单数据 * @param parentMenuId 父级菜单id */ public recursionChildMenu(dataSource: [], parentMenuId: number) { let dataTree: any = []; let collect: any = []; // 筛选子菜单 collect = dataSource.filter((o: any) => o.menuPSid == parentMenuId); for (const data of collect) { const childMenuData = this.recursionChildMenu(dataSource, data['id']); if (childMenuData.length > 0) { dataTree.push({ key: data['id'], title: data['menuName'], children: childMenuData, }); } else { dataTree.push({ key: data['id'], title: data['menuName'], isLeaf: true }); } } return dataTree; } /** * 编辑菜单 */ openEditMenu() { this.editMenuVisible = true; } submitEditMenuForm() { } /** * 关闭菜单 */ closeEditMenu() { this.editMenuVisible = false; } }