Sinopec-Anxin/src/app/pages/plan-admin/update-license-list/update-license-list.component.ts

import { Component, OnInit, ViewChild, ElementRef, ViewContainerRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TreeService } from 'src/app/service/tree.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree';
import { Router } from '@angular/router';
import { NavChangeService } from 'src/app/service/navChange.service';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import 'linqjs';
import { DetailsUpdateCategoryComponent } from '../../license/update-category/details-update-category/details-update-category.component';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'app-update-license-list',
  templateUrl: './update-license-list.component.html',
  styleUrls: ['./update-license-list.component.scss']
})
export class UpdateLicenseListComponent implements OnInit {

  validateForm!: FormGroup;
  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router, private message: NzMessageService) { }

  tableScrollHeight
  resizeListener
  async ngOnInit(): Promise<void> {


    this.tableScrollHeight = '100px'
    // 页面监听
    this.resizeListener = fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
      let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
    });


    this.validateForm = this.fb.group({
      organization: [null],
      name: [null]
    });

    this.tableSpin = true
    await this.getAllOrganization()
    this.getStationLicenses()

  }
  ngOnDestroy(): void {
    this.resizeListener.unsubscribe()
  }
  //获取所有组织机构
  nodes: any = []
  async getAllOrganization() {
    let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id
    let params = {
      OrganizationUnitId: OrganizationUnitId,
      IsContainsChildren: "true"
    }
    await new Promise((resolve, reject) => {
      this.http.get('/api/services/app/Organization/GetAll', {
        params: params
      }).subscribe((data: any) => {
        data.result.items.forEach(element => {
          if (element.id == OrganizationUnitId) {
            element.parentId = null
          }
          element.key = element.id
          element.title = element.displayName
        });
        this.nodes = [...this.toTree.toTree(data.result.items)]
        this.validateForm.patchValue({
          organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
        });
        resolve(data)
      })
    })

  }



  ngAfterViewInit(): void {
    fromEvent(this.element.nativeElement.querySelector(`.ant-table-body`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
      if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
        if (this.totalCount > this.list.length) {
          console.log('需要加载数据了', event)
          this.SkipCount = String(Number(this.SkipCount) + 50)
          await this.getStationLicenses()
        }
      }
    });
  }

  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
    this.list = []
    this.SkipCount = '0'
    this.getStationLicenses()
  }
  resetForm(e: MouseEvent): void {
    e.preventDefault();
    this.validateForm.reset();
    for (const key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsPristine();
      this.validateForm.controls[key].updateValueAndValidity();
    }
    this.list = []
    this.SkipCount = '0'
    this.validateForm.patchValue({
      organization: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
    });
    this.getStationLicenses()
  }

  tableSpin: boolean
  totalCount: any //总数
  //获取点击组织机构的所有加油站
  SkipCount: string = '0'
  MaxResultCount: string = '100'
  list: any = []
  async getStationLicenses() {
    let params = {
      StationName: this.validateForm.value.name,
      OrganizationUnitId: this.validateForm.value.organization,
      IsContainsChildren: 'true',
      SkipCount: this.SkipCount,
      MaxResultCount: this.MaxResultCount
    }
    this.tableSpin = true
    await new Promise((resolve, reject) => {
      this.http.get('/api/services/app/StationValidityLicense/GetStationLicenses', {
        params: params
      }).subscribe((data: any) => {
        this.totalCount = data.result.totalCount
        let arr = []
        data.result.data.forEach(element => {
          let keyArr = Object.keys(element);
          let valueArr = Object.values(element);
          let newElement = (keyArr as any).zip(valueArr, (a, b) => { return { name: a, value: b } });

          //修改排头
          let newArr = []
          for (let index = 0; index < newElement.length; index++) {
            const item = newElement[index];
            if (item.name == '省公司') {
              newArr[0] = item
              newElement.splice(index--, 1)
            }
            if (item.name == '区域') {
              newArr[1] = item
              newElement.splice(index--, 1)
            }
            if (item.name == '油站名称') {
              newArr[2] = item
              newElement.splice(index--, 1)
            }
          }
          let atLastArr = newArr.concat(newElement);
          arr.push(atLastArr)
          setTimeout(() => {
            let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
            this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
          }, 0);
        });

        setTimeout(() => {
          let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
          this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 10) + 'px'
        }, 0);

        this.list = this.list.concat(arr);
        this.list = [...this.list]
        console.log('证照表格', this.list)
        this.tableSpin = false
        resolve(data)
      })
    })
  }

  //父组件调用子组件方法
  public onChildMethod() {
    this.getStationLicenses()
  }


  lookDetails(i) {
    console.log(i)
    let params = {
      Id: i.licenseId
    }
    this.http.get('/api/services/app/StationValidityLicense/Get', { params: params }).subscribe((data: any) => {
      console.log('证照信息', data)
      const modal = this.modal.create({
        nzContent: DetailsUpdateCategoryComponent,
        nzViewContainerRef: this.viewContainerRef,
        nzWidth: 450,
        nzBodyStyle: {
          'border': '1px solid #91CCFF',
          'border-radius': '0px',
          'padding': '7px',
          'box-shadow': '0 0 8px 0 #fff',
          'background-image': 'linear-gradient(#003665, #000f25)'
        },
        nzComponentParams: {
          data: data.result
        },
        nzFooter: null,
        nzClosable: false,
        nzOnOk: async () => {

        }
      });
      const instance = modal.getContentComponent();
      modal.afterClose.subscribe(result => { });
    })


  }



  exportExcel() {
    // console.log(this.validateForm)
    const httpOptions = {
      responseType: 'blob' as 'json',
      params: {
        OrganizationUnitId: this.validateForm.value.organization
      }
    };
    this.http.get(`/api/services/app/StationValidityLicense/ExportStationLicenses`, httpOptions).subscribe((data: any) => {
      // console.log('导出成功')
      // 文件名中有中文 则对文件名进行转码
      const link = document.createElement('a');
      const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
      link.setAttribute('href', window.URL.createObjectURL(blob));
      link.setAttribute('download', '经营类证照' + '.xls');
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      this.message.create('success', `导出成功`);
    }, err => {
      this.message.create('error', `导出失败`);
    })
  }
}