|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
import { Component } from '@angular/core'; |
|
|
|
|
import {NzTreeComponent} from "ng-zorro-antd/tree"; |
|
|
|
|
import {NgIf} from "@angular/common"; |
|
|
|
|
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"; |
|
|
|
|
@ -17,8 +17,12 @@ import {NzDescriptionsComponent, NzDescriptionsItemComponent} from "ng-zorro-ant |
|
|
|
|
import {MenuTypePipe} from "../../../pipes/menu/menu-type.pipe"; |
|
|
|
|
import {NzFormDirective, NzFormLabelComponent} from "ng-zorro-antd/form"; |
|
|
|
|
import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; |
|
|
|
|
import {NzInputDirective} from "ng-zorro-antd/input"; |
|
|
|
|
import { NzFormModule } from 'ng-zorro-antd/form'; |
|
|
|
|
import {NzInputDirective, NzInputGroupComponent} from "ng-zorro-antd/input"; |
|
|
|
|
import { NzModalModule } 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"; |
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
|
selector: 'app-menu', |
|
|
|
|
@ -36,14 +40,21 @@ import { NzModalModule } from 'ng-zorro-antd/modal'; |
|
|
|
|
NzRowDirective, |
|
|
|
|
NzColDirective, |
|
|
|
|
NzButtonComponent, |
|
|
|
|
NzDescriptionsComponent, |
|
|
|
|
NzDescriptionsItemComponent, |
|
|
|
|
MenuTypePipe, |
|
|
|
|
NzModalModule, |
|
|
|
|
NzFormDirective, |
|
|
|
|
ReactiveFormsModule, |
|
|
|
|
NzInputDirective, |
|
|
|
|
NzFormLabelComponent, |
|
|
|
|
NzModalModule |
|
|
|
|
NzInputDirective, |
|
|
|
|
NzDescriptionsItemComponent, |
|
|
|
|
NzDescriptionsComponent, |
|
|
|
|
NzInputGroupComponent, |
|
|
|
|
NzFormModule, |
|
|
|
|
NzFlexDirective, |
|
|
|
|
NzSelectComponent, |
|
|
|
|
NzOptionComponent, |
|
|
|
|
NgForOf, |
|
|
|
|
NzInputNumberComponent |
|
|
|
|
], |
|
|
|
|
templateUrl: './menu.component.html', |
|
|
|
|
styleUrl: './menu.component.less' |
|
|
|
|
@ -60,13 +71,15 @@ export class MenuComponent { |
|
|
|
|
editMenuVisible = false; |
|
|
|
|
// 编辑菜单表单
|
|
|
|
|
editMenuForm: FormGroup; |
|
|
|
|
// 编辑菜单标题
|
|
|
|
|
editMenuTitle = ''; |
|
|
|
|
constructor(private menuService: MenuService, |
|
|
|
|
private fb: NonNullableFormBuilder) { |
|
|
|
|
this.queryMenuData(); |
|
|
|
|
|
|
|
|
|
this.editMenuForm = this.fb.group({ |
|
|
|
|
menuName: ['', [Validators.required]], |
|
|
|
|
menuType: ['', [Validators.required]], |
|
|
|
|
menuType: ['1', [Validators.required]], |
|
|
|
|
menuUrl: ['', [Validators.required]], |
|
|
|
|
menuPSid: [''], |
|
|
|
|
menuUrlImg: [''], |
|
|
|
|
@ -108,11 +121,14 @@ export class MenuComponent { |
|
|
|
|
*/ |
|
|
|
|
clickNode(nodeData: any) { |
|
|
|
|
const menuId = nodeData['keys'][0]; |
|
|
|
|
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); |
|
|
|
|
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; |
|
|
|
|
console.log(this.menuDetail); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -146,16 +162,49 @@ export class MenuComponent { |
|
|
|
|
return dataTree; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 编辑菜单 |
|
|
|
|
* @param edit 编辑状态 true：增加 false：修改 |
|
|
|
|
*/ |
|
|
|
|
openEditMenu() { |
|
|
|
|
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); |
|
|
|
|
this.editMenuVisible = true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
submitEditMenuForm() { |
|
|
|
|
|
|
|
|
|
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 }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
