|
|
|
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";
|
|
|
|
|
|
|
|
@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
|
|
|
|
],
|
|
|
|
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: [''],
|
|
|
|
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'];
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 点击树节点
|
|
|
|
* @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;
|
|
|
|
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']);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|