Sinopec-Anxin/src/app/system-management/menu/menu.component.ts

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';

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"
    }
    this.http.get('/api/services/app/Organization/GetAll', {
      params: params
    }).subscribe((data: any) => {
      this.totalCount = data.result.totalCount
      data.result.items.forEach(element => {
        element.key = element.id
        element.title = element.displayName
        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: 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)
    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/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: () => {

        }
      });
    }

  }


  nzEvent(event: NzFormatEmitEvent): void {
    console.log('event', event)
    if (this.isDrag) {
      let parentId
      if (this.pos == 0) {//目标节点内部
        parentId = event.node.key
      } else {
        if (event.node.level == 0) {
          parentId = null
        } else {
          parentId = event.node.origin.parentId
        }
      }

      let body = {
        id: event.dragNode.key,
        parentId: parentId,
        // code: instance.validateForm.value.code,
        displayName: event.dragNode.origin.displayName,
        isGasStation: event.dragNode.origin.isGasStation
      }
      this.http.put('/api/services/app/Organization/Update', body).subscribe(data => {
        this.message.create('success', '拖拽成功！');
        this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
          this.defaultExpandedKeys.push(item.key)
        })
        this.getAllOrganization()
        return true
      }, err => {
        this.message.create('warning', '拖拽失败');
        return false
      })


      // console.log('this.allOrList', this.allOrList)
      // let orders = {}
      // let originalData = JSON.parse(JSON.stringify(this.allOrList || [])) //tree原始数据
      // let targetNodeData = []//拖动移入节点的数据，用于遍历求出放在该数组的第几位
      //找到需要重新排序的数组
      // if (this.pos == 0) {
      //   originalData.forEach(item => {
      //     if (item.parentId == event.node.key) {
      //       targetNodeData.push(item)
      //     }
      //   })
      // } else {
      //   if (event.node.origin.parentId) {//如果拖动目标为非一级节点
      //     originalData.forEach(item => {
      //       if (item.parentId == event.node.origin.parentId) {
      //         targetNodeData.push(item)
      //       }
      //     })
      //   } else {//如果拖动目标为一级节点
      //     originalData.forEach(item => {
      //       if (!item.parentId) {
      //         targetNodeData.push(item)
      //       }
      //     })
      //   }
      // }


      // let idArr = []
      // targetNodeData.forEach(i => {
      //   idArr.push(i.id)
      // })
      // if (this.pos == 0 && event.node.origin.children.length == 1) {
      //   // console.log("移入,没有兄弟")
      //   let key = event.dragNode.key
      //   orders[key] = 0
      //   parentId = event.node.key
      // } else {

      //   let array = []
      //   targetNodeData.forEach(item => {
      //     if (item.id != event.dragNode.key) { //将拖动项先移除掉
      //       array.push(item)
      //     }
      //   })
      //   if (event.dragNode.isEnd[event.dragNode.isEnd.length - 1]) { //如果移入到最后一个
      //     // console.log("最后")
      //     array.push(event.dragNode.origin)
      //   } else if (event.dragNode.isStart[event.dragNode.isStart.length - 1]) {//如果移入到第一个   
      //     // console.log("第一")
      //     array.unshift(event.dragNode.origin)
      //   } else {//如果移入中间位置
      //     // console.log("中间")
      //     array.splice(event.node.origin.order, 0, event.dragNode.origin)
      //   }
      //   array.forEach((item, key) => {
      //     orders[item.id] = key
      //   })
      //   console.log("移入,多个兄弟",orders)
      // }

      // let obj = {
      //   id: event.dragNode.origin.id,
      //   parentId: parentId,
      //   orders: orders
      // }

      // this.http.put("/api/DisposalNodes/Sort", obj).subscribe(data => {
      //   const config = new MatSnackBarConfig();
      //   config.verticalPosition = 'top';
      //   config.duration = 3000
      //   this.snackBar.open('排序成功', '确定', config)
      //   this.refurbishTreeData()
      // })



    }
  }
  isDrag //是否可以拖动
  pos//放置位置
  beforeDrop = (arg: NzFormatBeforeDropEvent) => {
    console.log('arg', arg)
    if (arg.node.level === 0) {//如果为数据节点则不允许拖到一级节点
      this.message.create('warning', '不允许拖拽到一级节点');
      this.isDrag = false
      return of(false);
    } else {
      this.isDrag = true
      this.pos = arg.pos
      return of(true)
    }
  }
}