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 { AddorComponent } from './addor/addor.component'; import { EditorComponent } from './editor/editor.component'; @Component({ selector: 'app-organization', templateUrl: './organization.component.html', styleUrls: ['./organization.component.scss'] }) export class OrganizationComponent 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 { console.log(12345) for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } } //获取所有组织机构 searchValue = ''; nzExpandAll = false; totalCount: string getAllOrganization() { this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => { this.totalCount = data.result.totalCount // console.log('组织机构',data.result.totalCount) data.result.items.forEach(element => { element.key = element.id element.title = element.displayName element.selectable = false }); this.nodes = [...this.toTree.toTree(data.result.items)] this.defaultExpandedKeys = [...this.defaultExpandedKeys] }) } @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; defaultExpandedKeys = []; nodes: any[] = [] nzClick(event: NzFormatEmitEvent): void { // console.log(event); console.log('展开节点', this.nzTreeComponent.getExpandedNodeList()) } nzCheck(event: NzFormatEmitEvent): void { console.log(event); } // nzSelectedKeys change nzSelect(keys: string[]): void { console.log(keys, this.nzTreeComponent.getSelectedNodeList()); } ngAfterViewInit(): void { // get node by key: '10011' console.log(this.nzTreeComponent.getTreeNodeByKey('10011')); // use tree methods console.log( this.nzTreeComponent.getTreeNodes(), this.nzTreeComponent.getCheckedNodeList(), this.nzTreeComponent.getSelectedNodeList(), this.nzTreeComponent.getExpandedNodeList() ); } addOr(node?: any) { // console.log(node) const modal = this.modal.create({ nzTitle: node ? '新增组织机构' : '新增一级组织机构', nzContent: AddorComponent, nzViewContainerRef: this.viewContainerRef, nzWidth: 288, nzComponentParams: {}, nzOnOk: async () => { console.log('hhhhhhh', instance.validateForm) if (instance.validateForm.valid) { await new Promise(resolve => { let body = { parentId: node ? Number(node.key) : null, code: instance.validateForm.value.code, displayName: instance.validateForm.value.name, isGasStation: instance.validateForm.value.isGasStation } this.http.post('/api/services/app/Organization/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: EditorComponent, 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, displayName: instance.validateForm.value.name, isGasStation: instance.validateForm.value.isGasStation } this.http.put('/api/services/app/Organization/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) this.modal.confirm({ nzTitle: `确定要删除${item.title}这个机构吗?`, nzOkText: '确定', nzOkType: 'danger', nzOnOk: () => { this.http.delete('/api/services/app/Organization/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: () => { } }); } }