Edge-host-maintenance/src/app/system-management/organization/organization.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';
import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
@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();
  }

  refresh() {
    this.http.put('/api/Organizations/SyncAllOrganizations', null).subscribe({
      next: (data) => {
        this.message.success('同步组织机构成功');
        this.getAllOrganization();
      },
      error: (err) => {
        this.message.error('同步组织机构失败');
      },
    });
    this.http.put('/api/GasStations/SyncAllGasStations', null).subscribe({
      next: (data) => {
        this.message.success('同步油站成功');
        this.getAllOrganization();
      },
      error: (err) => {
        this.message.error('同步油站失败');
      },
    });
  }

  deleteRouteSnapshot() {
    CustomReuseStrategy.deleteRouteSnapshot('/system/host');
  }
  //搜索框提交
  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 = '';
    let params = {
      // OrganizationUnitId: OrganizationUnitId,
      // IsContainsChildren: "true"
      ContainsChildren: true,
      pageSize: 9999,
    };
    this.http
      .get('/api/Organizations', {
        params: params,
      })
      .subscribe((data: any) => {
        console.log('组织机构列表', data);
        this.totalCount = data.totalCount;
        data.items.forEach((element) => {
          element.key = element.id;
          element.title = element.name;
          element.selectable = false;
          if (element.isGasStation) {
            element.isLeaf = true;
          }
        });
        this.allOrList = data.items;
        this.nodes = [...this.toTree.toTree(data.items)];
        this.defaultExpandedKeys.length == 0
          ? (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.key)
    const modal = this.modal.create({
      nzTitle: node ? '新增组织机构' : '新增一级组织机构',
      nzContent: AddorComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 288,
      nzComponentParams: {},
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise((resolve) => {
            let body = {
              name: instance.validateForm.value.name,
              parentId: node ? node.key : null,
              isGasStation: instance.validateForm.value.isGasStation,
            };
            this.http.post('/api/Organizations', body).subscribe((data) => {
              resolve(data);
              this.message.create('success', '创建成功！');
              this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
                this.defaultExpandedKeys.push(item.key);
              });
              this.getAllOrganization();
              return true;
            });
          });
        } 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 () => {
        if (instance.validateForm.valid) {
          await new Promise((resolve) => {
            let body = {
              name: instance.validateForm.value.name,
              isGasStation: instance.validateForm.value.isGasStation,
              parentId: node.origin.parentId,
            };
            this.http
              .put(`/api/Organizations/${node.origin.id}`, body)
              .subscribe((data) => {
                resolve(data);
                this.message.create('success', '编辑成功！');
                this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
                  this.defaultExpandedKeys.push(item.key);
                });
                this.getAllOrganization();
                return true;
              });
          });
        } 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: 'primary',
        nzOnOk: () => {
          this.http
            .delete(`/api/Organizations/${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 = {
        parentId: parentId,
        name: event.dragNode.origin.name,
        isGasStation: event.dragNode.origin.isGasStation,
      };
      this.http
        .put(`/api/Organizations/${event.dragNode.origin.id}`, body)
        .subscribe((data) => {
          this.message.create('success', '拖拽成功！');
          this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
            this.defaultExpandedKeys.push(item.key);
          });
          this.getAllOrganization();
          return true;
        });
    }
  }
  isDrag; //是否可以拖动
  pos; //放置位置
  beforeDrop = (arg: NzFormatBeforeDropEvent) => {
    console.log('arg', arg);
    if (arg.pos != 0 && arg.node.level === 0) {
      //如果为数据节点则不允许拖到一级节点
      this.message.create('warning', '不允许拖拽到一级节点');
      this.isDrag = false;
      return of(false);
    } else {
      return of(true);
    }
  };
}