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

217 lines
5.9 KiB

11 months ago
import { Component } from '@angular/core';
import {NzTreeComponent} from "ng-zorro-antd/tree";
11 months ago
import {NgForOf, NgIf} from "@angular/common";
11 months ago
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzDropdownMenuComponent} from "ng-zorro-antd/dropdown";
import {MenuService} from "../../../servies/menu/menu.service";
11 months ago
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";
11 months ago
import { NzFormModule } from 'ng-zorro-antd/form';
import {NzInputDirective, NzInputGroupComponent} from "ng-zorro-antd/input";
11 months ago
import { NzModalModule } from 'ng-zorro-antd/modal';
11 months ago
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
11 months ago
@Component({
selector: 'app-menu',
standalone: true,
imports: [
NzTreeComponent,
NgIf,
NzIconDirective,
11 months ago
NzDropdownMenuComponent,
NzTreeViewComponent,
NzTreeNodeComponent,
NzTreeNodeCheckboxComponent,
NzTreeNodeOptionComponent,
NzCardComponent,
NzRowDirective,
NzColDirective,
NzButtonComponent,
MenuTypePipe,
11 months ago
NzModalModule,
11 months ago
NzFormDirective,
ReactiveFormsModule,
NzFormLabelComponent,
11 months ago
NzInputDirective,
NzDescriptionsItemComponent,
NzDescriptionsComponent,
NzInputGroupComponent,
NzFormModule,
NzFlexDirective,
NzSelectComponent,
NzOptionComponent,
NgForOf,
NzInputNumberComponent
11 months ago
],
templateUrl: './menu.component.html',
styleUrl: './menu.component.less'
})
export class MenuComponent {
11 months ago
// 菜单数据
menuData: any = [];
// 菜单树形数据
menuTree: any = [];
// 菜单详情
menuDetail: any = {};
// 编辑菜单弹出框
editMenuVisible = false;
// 编辑菜单表单
editMenuForm: FormGroup;
11 months ago
// 编辑菜单标题
editMenuTitle = '';
11 months ago
constructor(private menuService: MenuService,
private fb: NonNullableFormBuilder) {
this.queryMenuData();
11 months ago
11 months ago
this.editMenuForm = this.fb.group({
menuName: ['', [Validators.required]],
11 months ago
menuType: ['1', [Validators.required]],
11 months ago
menuUrl: ['', [Validators.required]],
menuPSid: [''],
menuUrlImg: [''],
menuSort: ['', [Validators.required]],
menuDesc: [''],
});
}
11 months ago
11 months ago
/**
*
*/
queryMenuData() {
this.menuService.queryMenuList((data: any) => {
this.menuData = data['return_data'];
// 获取菜单树形结构
this.queryMenuTree();
});
11 months ago
}
11 months ago
/**
*
*/
queryMenuTree() {
11 months ago
this.menuService.queryRoleMenuTree('', (data: any) => {
11 months ago
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']),
});
}
11 months ago
});
}
11 months ago
/**
*
* @param nodeData
*/
clickNode(nodeData: any) {
const menuId = nodeData['keys'][0];
11 months ago
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);
}
11 months ago
this.menuDetail = menuObj;
11 months ago
console.log(this.menuDetail);
11 months ago
}
}
/**
*
* @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;
}
/**
*
11 months ago
* @param edit true false
11 months ago
*/
11 months ago
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);
11 months ago
this.editMenuVisible = true;
}
submitEditMenuForm() {
11 months ago
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 });
}
});
}
11 months ago
}
11 months ago
11 months ago
/**
*
*/
closeEditMenu() {
this.editMenuVisible = false;
}
11 months ago
}