[完成]数字油站档案类证照页面；审批之通知时间页面

src/app/pages/audit/audit-inform-time/audit-inform-time.component.html

@@ -23,14 +23,14 @@
             <tbody id="table">
                 <tr *ngFor="let item of headerTable.data;let key = index">
                     <td>
-                        营业执照
+                        {{item.licenseName}}
                     </td>
-                    <td>90天</td>
+                    <td>{{item.handleRemindDaysDefault}}天</td>
-                    <td>90天</td>
+                    <td>{{item.handleRemindDays}}天</td>
-                    <td>90天</td>
+                    <td>{{item.closingRemindDaysDefault}}天</td>
-                    <td>90天</td>
+                    <td>{{item.closingRemindDays}}天</td>
-                    <td>时间</td>
+                    <td>{{item.commitTime ? (item.commitTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}</td>
-                    <td>审批状态</td>
+                    <td>{{item.auditStatus | auditStatus}}</td>
                     <td class="operation">
                         <span class="blueColor" (click)="edit(item)">编辑</span>
                         <span class="blueColor" (click)="details(item)">审核详情</span>

src/app/pages/audit/audit-inform-time/audit-inform-time.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewContainerRef } from '@angular/core';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { Observable, fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -13,19 +14,49 @@ import { EditInformTimeComponent } from './edit-inform-time/edit-inform-time.com
 })
 export class AuditInformTimeComponent implements OnInit {
 
-  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
+  constructor(private http: HttpClient, private element: ElementRef, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
   tableSpin = false
-  list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+  list = []
 
   tableScrollHeight
   ngOnInit(): void {
-    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 85) + 'px'
     // 页面监听
+    this.tableScrollHeight = '0px'
     fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
-      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 85) + 'px'
+      let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader) + 'px'
     });
+
+    this.getTimeList()
   }
 
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+  async getTimeList() {
+    let params = {
+      OrganizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
+      IsContainsChildren: 'true',
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+    }
+    this.tableSpin = true
+    await new Promise((resolve, reject) => {
+      this.http.get('/api/services/app/OrganizationValidityLicenseRule/GetCurOrgRules', {
+        params: params
+      }).subscribe((data: any) => {
+        this.list = this.list.concat(data.result);
+        this.list = [...this.list]
+        console.log('时间表格', data)
+        this.tableSpin = false
+
+        setTimeout(() => {
+          let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+          this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader) + 'px'
+        }, 0);
+        resolve(data)
+      })
+    })
+  }
 
 
   edit(item) {

src/app/pages/audit/audit-nav/audit-nav.component.html

@@ -6,6 +6,8 @@
                 <div class="navitem">
                     <span *ngFor="let item of navList" [ngClass]="{'grey': selectedItem != item}"
                         (click)="selectNav(item)">{{item}}</span>
+                    <span *ngIf="isLevel == 2" [ngClass]="{'grey': selectedItem != '通知时间'}"
+                        (click)="selectNav('通知时间')">通知时间</span>
                 </div>
             </div>
         </div>
@@ -13,6 +15,6 @@
     <div class="content">
         <app-audit-ing *ngIf="selectedItem == navList[0]"></app-audit-ing>
         <app-audit-record *ngIf="selectedItem == navList[1]"></app-audit-record>
-        <app-audit-inform-time *ngIf="selectedItem == navList[2]"></app-audit-inform-time>
+        <app-audit-inform-time *ngIf="selectedItem == '通知时间'"></app-audit-inform-time>
     </div>
 </div>

src/app/pages/audit/audit-nav/audit-nav.component.ts

@@ -10,12 +10,16 @@ export class AuditNavComponent implements OnInit {
   constructor() { }
 
 
-  navList = ['审批', '历史纪录', '通知时间']
+  navList = ['审批', '历史纪录']
   selectedItem = '审批'
   selectNav(item) {
     this.selectedItem = item
   }
+
+
+  isLevel
   ngOnInit(): void {
+    this.isLevel = JSON.parse(sessionStorage.getItem('userdata')).organization.level
   }
 
 }

src/app/pages/plan-admin/file-license-list/file-license-list.component.html

@@ -1 +1,63 @@
-<p>file-license-list works!</p>
+<div class="box">
+    <div class="search">
+        <div class="legendbox">
+        </div>
+        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+            <nz-form-item class="searchParams">
+                <nz-form-control>
+                    <nz-input-group>
+                        <input required nz-input type="text" formControlName="name" placeholder="请输入加油站名称" />
+                    </nz-input-group>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item class="btn">
+                <nz-form-control>
+                    <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item class="btn">
+                <nz-form-control>
+                    <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
+                            [nzType]="'sync'"></i>重置</button>
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+    </div>
+    <div class="tablebox" id="tablebox">
+        <nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
+            [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
+            <thead>
+                <tr>
+                    <th style="text-align: center">序号</th>
+                    <th *ngFor="let item of headerTable.data[0]">
+                        {{item.name}}
+                    </th>
+
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td style="text-align: center">{{key + 1}}</td>
+
+                    <td *ngFor="let i of item">
+                        <ng-container *ngIf="i.value; else elseTemplate">
+                            <ng-container *ngIf="i.value.validityType; else elseTemplate">
+                                <span>
+                                    {{i.value.validityType}}
+                                </span>
+                            </ng-container>
+                            <ng-template #elseTemplate>
+                                {{i.value}}
+                            </ng-template>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                            /
+                        </ng-template>
+
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/plan-admin/file-license-list/file-license-list.component.scss

@@ -0,0 +1,79 @@
+.search {
+  box-sizing: border-box;
+  padding-left: 38px;
+  padding-right: 35px;
+  width: 100%;
+  height: 32px;
+  margin: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .legendbox {
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    flex: 1;
+
+    .legendItem {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+
+      div {
+        width: 8px;
+        height: 8px;
+        margin-right: 3px;
+      }
+    }
+  }
+
+  form {
+    flex: 1;
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+
+    input {
+      background: none;
+      border: 1px solid #91ccff;
+      color: #fff;
+    }
+
+    .searchParams {
+      width: 35%;
+    }
+
+    .btn {
+      margin-left: 16px;
+    }
+  }
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tablebox {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+
+
+.green {
+  color: #4BFFD4;
+}
+
+.yellow {
+  color: #FFBD4B;
+}
+
+.red {
+  color: #FF4B65;
+}

src/app/pages/plan-admin/file-license-list/file-license-list.component.ts

@@ -1,4 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+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';
 
 @Component({
   selector: 'app-file-license-list',
@@ -7,9 +19,166 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FileLicenseListComponent implements OnInit {
 
-  constructor() { }
+  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) { }
+
+  tableScrollHeight
 
   ngOnInit(): void {
+    this.tableScrollHeight = '100px'
+    console.log('tableScrollHeight', this.tableScrollHeight)
+    // 页面监听
+    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 - 30) + 'px'
+    });
+    this.validateForm = this.fb.group({
+      name: [null]
+    });
+
+    this.tableSpin = true
+  }
+  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.getStationLicenses()
+  }
+
+  tableSpin: boolean
+  totalCount: any //总数
+  //获取点击组织机构的所有加油站
+  SkipCount: string = '0'
+  MaxResultCount: string = '100'
+
+  orId
+  list: any = []
+  async getStationLicenses() {
+    let params = {
+      StationName: this.validateForm.value.name,
+      OrganizationUnitId: String(sessionStorage.getItem('planAdminOrid')),
+      IsContainsChildren: 'true',
+      SkipCount: this.SkipCount,
+      MaxResultCount: this.MaxResultCount,
+      // Sorting: ' BuildingBasicInfo.Id asc'
+    }
+    this.tableSpin = true
+    await new Promise((resolve, reject) => {
+      this.http.get('/api/services/app/StationFileLicense/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)
+
+        });
+
+
+        this.list = this.list.concat(arr);
+        this.list = [...this.list]
+        console.log('证照表格', this.list)
+        this.tableSpin = false
+
+        setTimeout(() => {
+          let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+          this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - tableHeader - 30) + 'px'
+        }, 0);
+
+
+
+        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 => { });
+    // })
+
+
+  }
 }

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.html

@@ -1,5 +1,6 @@
 <div class="box">
     <div class="search">
+        <div class="legendbox"></div>
         <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
             <nz-form-item class="searchParams">
                 <nz-form-control>

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.scss

@@ -1,13 +1,35 @@
 .search {
   box-sizing: border-box;
-  padding-left: 22px;
+  padding-left: 38px;
-  padding-right: 33px;
+  padding-right: 35px;
   width: 100%;
   height: 32px;
   margin: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .legendbox {
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    flex: 1;
+
+    .legendItem {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+
+      div {
+        width: 8px;
+        height: 8px;
+        margin-right: 3px;
+      }
+    }
+  }
 
   form {
-    width: 100%;
+    flex: 1;
     height: 32px;
     display: flex;
     justify-content: flex-end;
@@ -19,21 +41,22 @@
     }
 
     .searchParams {
-      width: 22%;
+      width: 35%;
     }
 
     .btn {
-      width: 5%;
       margin-left: 16px;
     }
   }
 }
-.box{
+
+.box {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
+
 .tablebox {
   flex: 1;
   display: flex;

src/app/pages/plan-admin/plan-admin.component.ts

@@ -36,7 +36,6 @@ export class PlanAdminComponent implements OnInit {
     this.selectedTab = index
 
     if (this.selectedTab == 0) {
-      console.log('选择tab')
       setTimeout(() => {
         this.oilStationListComponent.list = []
         this.oilStationListComponent.SkipCount = '0'
@@ -44,13 +43,19 @@ export class PlanAdminComponent implements OnInit {
       }, 0);
     }
     if (this.selectedTab == 1) {
-      console.log('选择tab')
       setTimeout(() => {
         this.updateLicenseListComponent.list = []
         this.updateLicenseListComponent.SkipCount = '0'
         this.updateLicenseListComponent.onChildMethod()
       }, 0);
     }
+    if (this.selectedTab == 2) {
+      setTimeout(() => {
+        this.fileLicenseListComponent.list = []
+        this.fileLicenseListComponent.SkipCount = '0'
+        this.fileLicenseListComponent.onChildMethod()
+      }, 0);
+    }
   }
 
 
@@ -102,7 +107,6 @@ export class PlanAdminComponent implements OnInit {
     this.activatedNode = data.node!;
     sessionStorage.setItem('planAdminOrid', data.node.origin.id)
     if (this.selectedTab == 0) {
-      console.log('选择tab')
       setTimeout(() => {
         this.oilStationListComponent.list = []
         this.oilStationListComponent.SkipCount = '0'
@@ -110,13 +114,19 @@ export class PlanAdminComponent implements OnInit {
       }, 0);
     }
     if (this.selectedTab == 1) {
-      console.log('选择tab')
       setTimeout(() => {
         this.updateLicenseListComponent.list = []
         this.updateLicenseListComponent.SkipCount = '0'
         this.updateLicenseListComponent.onChildMethod()
       }, 0);
     }
+    if (this.selectedTab == 2) {
+      setTimeout(() => {
+        this.fileLicenseListComponent.list = []
+        this.fileLicenseListComponent.SkipCount = '0'
+        this.fileLicenseListComponent.onChildMethod()
+      }, 0);
+    }
   }
 
 

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

@@ -74,12 +74,6 @@ export class UpdateLicenseListComponent implements OnInit {
     this.getStationLicenses()
   }
 
-
-
-  look(item) {
-
-  }
-
   tableSpin: boolean
   totalCount: any //总数
   //获取点击组织机构的所有加油站
@@ -108,11 +102,30 @@ export class UpdateLicenseListComponent implements OnInit {
           let keyArr = Object.keys(element);
           let valueArr = Object.values(element);
           let newElement = (keyArr as any).zip(valueArr, (a, b) => { return { name: a, value: b } });
-          arr.push(newElement)
+
+          //修改排头
+          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)
+          
         });
 
-        //排序
+
-        
         this.list = this.list.concat(arr);
         this.list = [...this.list]
         console.log('证照表格', this.list)
@@ -141,7 +154,7 @@ export class UpdateLicenseListComponent implements OnInit {
     let params = {
       Id: i.licenseId
     }
-    this.http.get('/api/services/app/StationValidityLicense/Get', { params: params }).subscribe(data => {
+    this.http.get('/api/services/app/StationValidityLicense/Get', { params: params }).subscribe((data:any) => {
       console.log('证照信息', data)
       const modal = this.modal.create({
         nzContent: DetailsUpdateCategoryComponent,
@@ -155,7 +168,7 @@ export class UpdateLicenseListComponent implements OnInit {
           'background-image': 'linear-gradient(#003665, #000f25)'
         },
         nzComponentParams: {
-          data: data
+          data: data.result
         },
         nzFooter: null,
         nzClosable: false,

src/theme.less

@@ -418,6 +418,7 @@
     border-bottom: none;
     padding: 0;
     color: #23D9FF;
+    line-height: 28px;
   }
 
   .ant-table-tbody>tr {