import {ChangeDetectorRef, Component, ViewChild} from '@angular/core'; 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"; 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, NzFormModule} from "ng-zorro-antd/form"; import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; import {NzInputDirective, NzInputGroupComponent} from "ng-zorro-antd/input"; import {NzModalModule, NzModalService} 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 {NzSpinComponent} from "ng-zorro-antd/spin"; @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, NzSpinComponent ], templateUrl: './menu.component.html', styleUrl: './menu.component.less' }) export class MenuComponent { // 菜单数据 menuData: any = []; // 菜单树形数据 menuTree: any[] = []; // 菜单详情 menuDetail: any = {}; // 编辑菜单弹出框 editMenuVisible = false; // 编辑菜单表单 editMenuForm: FormGroup; // 编辑菜单标题 editMenuTitle = ''; // 树视图展示状态 treeView= false; constructor(private menuService: MenuService, private fb: NonNullableFormBuilder, private modal: NzModalService, private message: NzMessageService) { this.queryMenuTree(); this.editMenuForm = this.fb.group({ id: [], menuName: ['', [Validators.required]], menuType: ['1', [Validators.required]], menuUrl: ['', [Validators.required]], menuPSid: [''], menuUrlImg: [''], menuSort: ['', [Validators.required]], menuDesc: [''], }); } /** * 获取菜单树 */ queryMenuTree() { this.menuService.queryMenuTree((data: any) => { this.menuTree = data['return_data']; this.treeView = true; this.queryMenuData(); }); } /** * 查询菜单原始数据 */ queryMenuData() { this.menuService.queryMenuList((data: any) => { this.menuData = data['return_data']; }); } /** * 点击树节点 * @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; } } /** * 编辑菜单 * @param edit 编辑状态 true:增加 false:修改 */ openEditMenu(edit: boolean) { // 初始化表单 this.editMenuTitle = '添加菜单'; this.editMenuForm.reset(); let menu = { menuPSid: "", menuType: '1' }; if (edit == false && this.menuDetail?.id == null) { this.modal.confirm({ nzTitle: '提示', nzContent: '请点击需要修改的菜单', }); return; } 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) { this.treeView = false; this.menuService.editMenu(this.editMenuForm.value, (data: any) => { if (data['return_code'] == '000000') { // 刷新数据 this.queryMenuTree(); 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; } /** * 删除菜单 */ showDelMenu() { this.modal.confirm({ nzTitle: '提示', nzContent: '确实删除数据?', nzOnOk: () => this.delMenu() }); } /** * 删除菜单 */ delMenu() { const param = { menuId: this.menuDetail.id } this.treeView = false; this.menuService.delMenu(param, (data: any) => { if (data['return_code'] == '000000') { // 刷新数据 this.queryMenuTree(); this.message.create('success', '操作成功'); } else { this.treeView = true; this.message.create('error', data['return_msg']); } }); } }