[新增]完成更新类证件的编辑弹出框和详情弹出框

src/app/pages/license/update-category/details-update-category/details-update-category.component.html

@@ -1 +1,52 @@
-<p>details-update-category works!</p>
+<div class="box" id="detailsupdatecategory">
+    <div class="title">
+        <div class="titlecontent">
+            编辑
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+
+    <div class="content">
+        <p>证件名称: 营业执照</p>
+        <div class="cutoffrule"></div>
+        <p>证件编号: Z201800041501</p>
+        <div class="cutoffrule"></div>
+        <p>证件有效期: 2018.12.02—2025.01.12</p>
+        <div class="cutoffrule"></div>
+        <p>办理类型: 年度公示</p>
+        <div class="cutoffrule"></div>
+        <p>有效期类型: 1523天</p>
+        <div class="cutoffrule"></div>
+        <p>是否年检: 是</p>
+        <div class="cutoffrule"></div>
+        <p>证件图片: <img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt=""
+                (click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p>
+        <div class="cutoffrule"></div>
+        <p>审核记录</p>
+        <nz-timeline>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+        </nz-timeline>
+        <ng-template #soccerTemplate>
+            <div class="circle">
+
+            </div>
+        </ng-template>
+    </div>
+
+
+</div>

src/app/pages/license/update-category/details-update-category/details-update-category.component.scss

@@ -0,0 +1,54 @@
+.box {
+  .title {
+    font-family: sybold;
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .titlecontent {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+      text-align: center;
+      color: #91CCFF;
+      font-size: 16px;
+    }
+
+    i {
+      position: absolute;
+      right: 12px;
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    box-sizing: border-box;
+    padding: 0 15px;
+    max-height: 580px;
+    overflow-y: auto;
+    .circle {
+      width: 8px;
+      height: 8px;
+      background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%);
+      opacity: 1;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+
+    img {
+      width: 88px;
+      height: 56px;
+      cursor: pointer;
+    }
+  }
+}

src/app/pages/license/update-category/details-update-category/details-update-category.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
 
 @Component({
   selector: 'app-details-update-category',
@@ -6,10 +11,35 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./details-update-category.component.scss']
 })
 export class DetailsUpdateCategoryComponent implements OnInit {
+  @Input() data?: any;
+  constructor(private modal: NzModalRef) { }
 
-  constructor() { }
 
   ngOnInit(): void {
   }
 
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
 }

src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html

@@ -1 +1,68 @@
-<p>edit-update-category works!</p>
+<div class="box" id="editupdatecategory">
+    <div class="title">
+        <div class="titlecontent">
+            编辑
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+    <form nz-form [formGroup]="validateForm" class="form">
+        <p>证件名称: 营业执照</p>
+
+        <div class="cutoffrule"></div>
+
+        <p>证件编号<span style="color: red;">*</span></p>
+        <nz-form-item>
+            <nz-form-control>
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="number" placeholder="请输入证件编号" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+
+        <p>证件有效期<span style="color: red;">*</span></p>
+
+        <div class="validity">
+            <label nz-checkbox (ngModelChange)="validityChange($event)" formControlName="isLongTerm">
+                <span>长期</span>
+            </label>
+            <nz-date-picker *ngIf="isLongTerm" nzPlaceHolder="请选择开始日期"></nz-date-picker>
+            <nz-range-picker *ngIf="!isLongTerm"></nz-range-picker>
+        </div>
+
+        <p>
+            <span style="margin-right: 12px;">有效期类型: 1456天</span>
+            <span>是否年检: 是</span>
+        </p>
+
+        <p>办理类型</p>
+
+        <nz-form-item>
+            <nz-form-control>
+                <nz-select formControlName="type">
+                    <nz-option nzValue="0" nzLabel="年度公示"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
+
+        <p>证件图片</p>
+
+        <div class="uploadDivbox">
+            <div class="uploadDiv" style="margin-right: 12px;">
+                <img *ngIf="imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="imageUrl" alt=""  (click)="viewImg(imageUrl)">
+                <input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name=""
+                    id="">
+                <button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
+                        nzTheme="outline"></i>上传图片</button>
+            </div>
+            <div class="uploadDiv" *ngIf="imageUrl">
+                <input (change)="filechange($event)" class="fileinput" type="file" name="" id="">
+                <button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button>
+            </div>
+        </div>
+
+        <div class="btnbox">
+            <button nz-button type="submit" class="ok" (click)="ok()">确定</button>
+            <button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button>
+        </div>
+    </form>
+</div>

src/app/pages/license/update-category/edit-update-category/edit-update-category.component.scss

@@ -0,0 +1,127 @@
+.box {
+  .title {
+    font-family: sybold;
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .titlecontent {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+      text-align: center;
+      color: #91CCFF;
+      font-size: 16px;
+    }
+
+    i {
+      position: absolute;
+      right: 12px;
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+  }
+
+  .form {
+    box-sizing: border-box;
+    padding: 0 17px;
+
+    label {
+      color: #C4E2FC;
+      margin-right: 6px;
+    }
+
+
+
+    .validity {
+      display: flex;
+      align-items: center;
+    }
+
+    nz-date-picker {
+      flex: .5;
+    }
+
+    nz-range-picker {
+      flex: 1;
+    }
+
+    .btnbox {
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 17px;
+      display: flex;
+      justify-content: flex-end;
+
+      button {
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+
+      button:nth-child(2) {
+        margin-left: 16px;
+      }
+
+      .ok {
+        background: rgba(0, 129, 255, 0.4);
+      }
+
+      .cancel {
+        border: 1px solid #C4E2FC;
+        background: #0c1e38;
+        color: rgba(99, 102, 105, 0.6);
+        box-shadow: 0 0 3px 0 #fff inset;
+      }
+    }
+  }
+
+  .uploadDivbox {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin: 5px 0;
+
+    .uploadDiv {
+      width: 120px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .fileinput {
+        width: 114px;
+        height: 32px;
+        position: absolute;
+        z-index: 100;
+        opacity: 0;
+        top: 23px;
+        cursor: pointer;
+      }
+
+      button {
+        z-index: 99;
+        width: 114px;
+        height: 32px;
+        background: rgba(0, 129, 255, 0.3);
+        border: 1px solid #36A2FF;
+        opacity: 1;
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+    }
+  }
+}

src/app/pages/license/update-category/edit-update-category/edit-update-category.component.ts

@@ -1,5 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
-
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-edit-update-category',
   templateUrl: './edit-update-category.component.html',
@@ -7,9 +11,106 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EditUpdateCategoryComponent implements OnInit {
 
-  constructor() { }
+  @Input() data?: any;
+
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { }
+
 
+  data2
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      number: [null, [Validators.required]],
+      isLongTerm: [null, [Validators.required]],
+      type: [null, [Validators.required]]
+    });
+    this.data2 = JSON.parse(JSON.stringify(this.data))
+  }
+
+  isLongTerm = false
+  imageUrl = '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg'
+  validityChange($event) {
+    console.log($event)
+    this.isLongTerm = $event
+  }
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+  ok() {
+    this.modal.triggerOk()
+  }
+
+
+
+  isLoadingSave: boolean = false
+  uploadIndex: string
+  filechange(e) {
+    let oilStationId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id
+    let file = e.target.files[0] || null //获取上传的文件
+    this.openFileSelect(file, `stationPhotos/${oilStationId}/`)
+  }
+  //设置文件路径并上传
+  postFilePath
+  async openFileSelect(file: File, extensionPath: string) {
+    this.postFilePath = extensionPath;
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
+    if (fileSize >= shardSize) //  超过5MB要分块上传
+    {
+      await this.postFileByMul(file);
+    }
+    else //普通上传
+    {
+      await this.postFile(file);
+    }
+  }
+  //上传文件
+  async postFile(file: File) {
+    await new Promise((resolve, reject) => {
+      this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => {
+        let dataObj = data as any;
+        let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName;
+        this.imageUrl = filePath
+        console.log('上传成功', filePath)
+        resolve('success')
+      });
+    })
+  }
+
+  /**
+   * 分块上传
+   * @param file 
+   */
+  postFileByMul(file: File) {
+    this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
+      let dataObj = value as any;
+      let filePath = dataObj.filePath
+      this.imageUrl = filePath
+      console.log('上传成功', filePath)
+    });
+
+  }
+
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
   }
 
 }

src/app/pages/license/update-category/update-category.component.ts

@@ -1,7 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { NzModalService } from 'ng-zorro-antd/modal';
 import { Observable, fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import Viewer from 'viewerjs';
+import { EditUpdateCategoryComponent } from './edit-update-category/edit-update-category.component';
+import * as moment from 'moment';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { DetailsUpdateCategoryComponent } from './details-update-category/details-update-category.component';
 @Component({
   selector: 'app-update-category',
   templateUrl: './update-category.component.html',
@@ -9,7 +15,7 @@ import Viewer from 'viewerjs';
 })
 export class UpdateCategoryComponent implements OnInit {
 
-  constructor() { }
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
   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]
 
@@ -47,9 +53,73 @@ export class UpdateCategoryComponent implements OnInit {
   }
 
   edit(item) {
-    
+    console.log('item', item)
+    const modal = this.modal.create({
+      nzContent: EditUpdateCategoryComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 750,
+      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: item
+      },
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+              id: item.id,
+              name: instance.validateForm.value.name,
+              storageLocation: instance.validateForm.value.storageLocation,
+              productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'),
+              maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'),
+              validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'),
+              organizationUnitId: item.organizationUnitId
+            }
+            // this.http.put('/api/services/app/FireEquipment/Update', body).subscribe(data => {
+            //   resolve(data)
+            //   this.message.create('success', '修改成功！');
+            //   return true
+            // })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
   }
   details(item) {
+    console.log('item', item)
+    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: item
+      },
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
 
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
   }
 }

src/app/pages/pages.module.ts

@@ -68,6 +68,7 @@ import { EditUpdateCategoryComponent } from './license/update-category/edit-upda
 import { DetailsUpdateCategoryComponent } from './license/update-category/details-update-category/details-update-category.component';
 import { EditFileCategoryComponent } from './license/file-category/edit-file-category/edit-file-category.component';
 import { DetailsFileCategoryComponent } from './license/file-category/details-file-category/details-file-category.component';
+import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
@@ -112,9 +113,10 @@ import { DetailsFileCategoryComponent } from './license/file-category/details-fi
     NzPopconfirmModule,
     NzBadgeModule,
     NzRadioModule,
-    NzToolTipModule 
+    NzToolTipModule,
+    NzTimelineModule
   ],
-  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent],
+  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 
 })

src/styles.scss

@@ -81,7 +81,7 @@ ul,
 ol,
 li {
   list-style: none;
-  overflow-x: hidden;
+  // overflow-x: hidden;
 }
 
 .clearfn:after {

src/theme.less

@@ -169,7 +169,9 @@
 #login,
 #equipmentInfo,
 #addequipment,
-#disposeequipment {
+#disposeequipment,
+#editupdatecategory,
+#detailsupdatecategory {
 
   nz-input-group,
   input {
@@ -197,7 +199,9 @@
 #warningboxadmin,
 #addequipment,
 #stationPlanBox,
-#disposeequipment {
+#disposeequipment,
+#editupdatecategory,
+#detailsupdatecategory {
   ::-webkit-input-placeholder {
     /* WebKit browsers */
     color: #345d85;
@@ -238,6 +242,51 @@
 
 }
 
+//证件弹出框
+#editupdatecategory,
+#detailsupdatecategory {
+  nz-form-item {
+    margin-bottom: 0;
+
+    input,
+    select {
+      color: rgba(145, 204, 255, 0.95) !important;
+    }
+  }
+
+  nz-date-picker,
+  nz-range-picker,
+  nz-select {
+    background-color: #143c61;
+  }
+
+  nz-select {
+    color: rgba(145, 204, 255, 0.95) !important;
+  }
+
+  .ant-timeline-item-content {
+    color: rgba(145, 204, 255, 0.95);
+  }
+
+  .ant-timeline-item-tail {
+    border-left: 2px solid rgba(196, 226, 252, 0.4);
+  }
+
+  .ant-timeline-item-head {
+    border: 0;
+    background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%);
+  }
+}
+
+.cutoffrule {
+  width: 100%;
+  height: 1px;
+  background-color: rgba(196, 226, 252, 0.24);
+  border: 0;
+}
+
+
+
 
 #orbox {
   nz-tree {