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

242 lines
6.3 KiB

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