import { Component } from '@angular/core'; import {NzTreeComponent} 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"; 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 { 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"; import {NzMessageService} from "ng-zorro-antd/message"; import {DATA} from "../../../data/login/localStorage.namespace"; @Component({ selector: 'app-menu', standalone: true, imports: [ NzTreeComponent, NgIf, NzIconDirective, NzDropdownMenuComponent, NzTreeViewComponent, NzTreeNodeComponent, NzTreeNodeCheckboxComponent, NzTreeNodeOptionComponent, NzCardComponent, NzRowDirective, NzColDirective, NzButtonComponent, MenuTypePipe, NzModalModule, NzFormDirective, ReactiveFormsModule, NzFormLabelComponent, NzInputDirective, NzDescriptionsItemComponent, NzDescriptionsComponent, NzInputGroupComponent, NzFormModule, NzFlexDirective, NzSelectComponent, NzOptionComponent, NgForOf, NzInputNumberComponent ], templateUrl: './menu.component.html', styleUrl: './menu.component.less' }) export class MenuComponent { // 菜单数据 menuData: any = []; // 菜单树形数据 menuTree: any = []; // 菜单详情 menuDetail: any = {}; // 编辑菜单弹出框 editMenuVisible = false; // 编辑菜单表单 editMenuForm: FormGroup; // 编辑菜单标题 editMenuTitle = ''; constructor(private menuService: MenuService, private fb: NonNullableFormBuilder, private message: NzMessageService) { this.queryMenuData(); this.queryMenuTree2(); this.editMenuForm = this.fb.group({ id: [], menuName: ['', [Validators.required]], menuType: ['1', [Validators.required]], menuUrl: ['', [Validators.required]], menuPSid: [''], menuUrlImg: [''], menuSort: ['', [Validators.required]], menuDesc: [''], }); } queryMenuTree2() { this.menuService.queryRoleMenuTree2('', (data: any) => { this.menuTree = data['return_data']; }); } /** * 查询菜单数据 */ 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]; 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); } } /** * 递归获取子菜单 * @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; } /** * 编辑菜单 * @param edit 编辑状态 true:增加 false:修改 */ 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); this.menuService.editMenu(this.editMenuForm.value, (data: any) => { if (data['return_code'] == '000000') { console.log("获取数据", data); // 刷新数据 this.queryMenuTree2(); this.message.create('success', '操作成功'); // 关闭弹窗 this.closeEditMenu(); } else { this.message.create('error', data['return_msg']); } }); } else { Object.values(this.editMenuForm.controls).forEach(control => { if (control.invalid) { control.markAsDirty(); control.updateValueAndValidity({ onlySelf: true }); } }); } } /** * 关闭菜单 */ closeEditMenu() { this.editMenuVisible = false; } }