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

246 lines
6.6 KiB

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";
import {NzTreeSelectComponent} from "ng-zorro-antd/tree-select";
@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,
NzTreeSelectComponent
],
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: [null],
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'];
console.log("父类菜单数据" , this.menuData);
});
}
/**
* 点击树节点
* @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;
console.log(this.editMenuForm.value['menuPSid']);
this.editMenuForm.value['menuPSid']!=null?this.editMenuForm.value['menuPSid']:null;
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']);
}
});
}
}