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

245 lines
6.7 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
import {NzMessageService} from "ng-zorro-antd/message";
11 months ago
import {DATA} from "../../../data/login/localStorage.namespace";
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,
11 months ago
private fb: NonNullableFormBuilder,
private message: NzMessageService) {
11 months ago
this.queryMenuData();
11 months ago
this.queryMenuTree2();
11 months ago
11 months ago
this.editMenuForm = this.fb.group({
11 months ago
id: [],
11 months ago
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
queryMenuTree2() {
this.menuService.queryRoleMenuTree2('', (data: any) => {
this.menuTree = data['return_data'];
});
}
11 months ago
/**
*
*/
queryMenuData() {
this.menuService.queryMenuList((data: any) => {
this.menuData = data['return_data'];
// 获取菜单树形结构
11 months ago
// this.queryMenuTree();
11 months ago
});
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;
}
11 months ago
/**
*
*/
11 months ago
submitEditMenuForm() {
11 months ago
if (this.editMenuForm.valid) {
console.log('submit', this.editMenuForm.value);
11 months ago
this.menuService.editMenu(this.editMenuForm.value, (data: any) => {
if (data['return_code'] == '000000') {
11 months ago
console.log("获取数据", data);
11 months ago
// 刷新数据
11 months ago
this.queryMenuTree2();
11 months ago
this.message.create('success', '操作成功');
11 months ago
this.editMenuVisible = false;
11 months ago
// 关闭弹窗
this.closeEditMenu();
} else {
this.message.create('error', data['return_msg']);
}
});
11 months ago
} 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
}