import { HttpClient } from '@angular/common/http'; import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core'; import { TreeService } from 'src/app/service/tree.service'; import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { NzModalService } from 'ng-zorro-antd/modal'; import { NzMessageService } from 'ng-zorro-antd/message'; import { AddmenuComponent } from './addmenu/addmenu.component'; import { EditmenuComponent } from './editmenu/editmenu.component'; import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree'; import { Observable, of } from 'rxjs'; import { delay } from 'rxjs/operators'; @Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.scss'] }) export class MenuComponent implements OnInit { validateForm!: FormGroup; constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { } ngOnInit(): void { this.validateForm = this.fb.group({ search: [null] }); this.getAllOrganization() } //搜索框提交 submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } } //获取所有组织机构 searchValue = ''; nzExpandAll = false; totalCount: string allOrList: any getAllOrganization() { let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id let params = { OrganizationUnitId: OrganizationUnitId, IsContainsChildren: "true", MaxResultCount:"999" } this.http.get('/api/services/app/Menu/GetAll', { params: params }).subscribe((data: any) => { this.totalCount = data.result.totalCount data.result.items.forEach(element => { element.key = element.id element.title = element.name element.selectable = false }); this.allOrList = data.result.items this.nodes = [...this.toTree.toTree(data.result.items)] this.defaultExpandedKeys = [this.nodes[0].id] this.defaultExpandedKeys = [...this.defaultExpandedKeys] }) } @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; defaultExpandedKeys = []; nodes: any[] = [] addOr(node?: any) { console.log(node) const modal = this.modal.create({ nzTitle: node ? '新增子菜单' : '新增一级菜单', nzContent: AddmenuComponent, nzViewContainerRef: this.viewContainerRef, nzWidth: 288, nzComponentParams: {}, nzOnOk: async () => { if (instance.validateForm.valid) { await new Promise(resolve => { let body = { parentId: node ? Number(node.key) : null, // code: instance.validateForm.value.code, name: instance.validateForm.value.name, // isGasStation: instance.validateForm.value.isGasStation } this.http.post('/api/services/app/Menu/Create', body).subscribe(data => { resolve(data) this.message.create('success', '创建成功!'); this.nzTreeComponent.getExpandedNodeList().forEach((item) => { this.defaultExpandedKeys.push(item.key) }) this.getAllOrganization() return true }, err => { resolve(err) this.message.create('warning', '创建失败'); return false }) }) } else { this.message.create('warning', '请填写完整!'); return false } } }); const instance = modal.getContentComponent(); } editOr(node) { console.log(node) const modal = this.modal.create({ nzTitle: '编辑组织机构', nzContent: EditmenuComponent, nzViewContainerRef: this.viewContainerRef, nzWidth: 288, nzComponentParams: { data: node.origin, }, nzOnOk: async () => { console.log('hhhhhhh', instance.validateForm) if (instance.validateForm.valid) { await new Promise(resolve => { let body = { id: node.origin.id, parentId: node.origin.parentId, // code: instance.validateForm.value.code, name: instance.validateForm.value.name, // isGasStation: instance.validateForm.value.isGasStation } this.http.put('/api/services/app/Menu/Update', body).subscribe(data => { resolve(data) this.message.create('success', '编辑成功!'); this.nzTreeComponent.getExpandedNodeList().forEach((item) => { this.defaultExpandedKeys.push(item.key) }) this.getAllOrganization() return true }, err => { resolve(err) this.message.create('warning', '编辑失败'); return false }) }) } else { this.message.create('warning', '请填写完整!'); return false } } }); const instance = modal.getContentComponent(); } deleteOr(item) { console.log(item) if (item.origin.children && item.origin.children.length != 0) { this.message.create('warning', '请先删除所有子节点'); } else { this.modal.confirm({ nzTitle: `确定要删除${item.title}这个菜单吗?`, nzOkText: '确定', nzOkType: 'danger', nzOnOk: () => { this.http.delete('/api/services/app/Menu/Delete', { params: { Id: item.origin.id } }).subscribe(data => { this.nzTreeComponent.getExpandedNodeList().forEach((item) => { this.defaultExpandedKeys.push(item.key) }) this.getAllOrganization() this.message.create('success', '删除成功!'); }) }, nzCancelText: '取消', nzOnCancel: () => { } }); } } }