You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
puhui-go-web/src/app/pages/system/menu/menu.component.ts

167 lines
4.3 KiB

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;
}
}