From ab6f1c68659063ed036577d898e4cfc7fe8ae608 Mon Sep 17 00:00:00 2001
From: Taric Xin <LincolnLin@swireproperties.com>
Date: Wed, 2 Mar 2022 14:30:37 +0800
Subject: [PATCH] edit

---
 .../captain-detail.component.html             | 111 ++++---------
 .../captain-detail.component.ts               |   7 +-
 .../driver/detail/detail.component.html       |   2 +-
 .../driver/detail/detail.component.ts         |  10 +-
 .../enterprise-audit/view/view.component.ts   |  11 +-
 .../freight/user/detail/detail.component.ts   |  11 +-
 .../usercenter/services/usercenter.service.ts |  11 +-
 .../audit/detail/detail.component.ts          | 124 +++++++-------
 .../list/detail/detail.component.ts           | 154 +++++++++---------
 .../components/imagelist/image-list.module.ts |   5 +-
 .../imagelist/imagelist.component.html        |   4 +-
 .../imagelist/imagelist.component.ts          |  19 ++-
 src/app/shared/shared-zorro.module.ts         |   6 +-
 13 files changed, 232 insertions(+), 243 deletions(-)

diff --git a/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.html b/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.html
index c570f528..2e0189b6 100644
--- a/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.html
+++ b/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.html
@@ -11,34 +11,17 @@
         <img [src]="userDetail?.avatar" />
         <div style="flex: 1">
           <div style="display: flex; width: 100%; justify-content: space-between">
-            <p style="padding-right: 80px; width: 400px"
-              >{{ userDetail?.name }}
+            <p style="padding-right: 80px; width: 400px">{{ userDetail?.name }}
               <nz-badge nzStatus="success" nzText="正常" *ngIf="!userDetail?.stateLocked" class="ml-xl"> </nz-badge>
               <nz-badge nzStatus="warning" nzText="冻结" *ngIf="userDetail?.stateLocked" class="ml-xl"> </nz-badge>
             </p>
             <div style="margin-right: 24px">
-              <button
-                *ngIf="userDetail?.stateLocked"
-                [nzLoading]="service.http.loading"
-                nz-button
-                nzType="primary"
-                nzGhost
-                (click)="userAction(1)"
-                acl
-                [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-lock']"
-              >
+              <button *ngIf="userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button nzType="primary"
+                nzGhost (click)="userAction(1)" acl [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-lock']">
                 启用
               </button>
-              <button
-                *ngIf="!userDetail?.stateLocked"
-                [nzLoading]="service.http.loading"
-                nz-button
-                nzDanger
-                nzGhost
-                (click)="userAction(0)"
-                acl
-                [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-lock']"
-              >
+              <button *ngIf="!userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button nzDanger nzGhost
+                (click)="userAction(0)" acl [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-lock']">
                 冻结
               </button>
             </div>
@@ -56,13 +39,12 @@
 <nz-card [nzLoading]="service.http.loading">
   <div [class]="isEditUser ? 'edit-box' : 'readOnly-box'">
     <sv-container col="2">
-      <sv-title
-        >个人信息
-        <label *ngIf="userIdentityDetail?.certificationStatus === 1" style="color: #52c41a" class="ml-md"
-          ><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
+      <sv-title>个人信息
+        <label *ngIf="userIdentityDetail?.certificationStatus === 1" style="color: #52c41a" class="ml-md"><i nz-icon
+            nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
         </label>
-        <label *ngIf="userIdentityDetail?.certificationStatus === 2" style="color: #ff4d4f" class="ml-md"
-          ><i nz-icon nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
+        <label *ngIf="userIdentityDetail?.certificationStatus === 2" style="color: #ff4d4f" class="ml-md"><i nz-icon
+            nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
         </label>
         <div style="float: right">
           <ng-container *ngIf="isEditUser; else elseTemplate">
@@ -70,40 +52,28 @@
             <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="saveUser()"> 保存 </button>
           </ng-container>
           <ng-template #elseTemplate>
-            <button nz-button nzType="default" nzDanger (click)="approveUser()" *ngIf="userIdentityDetail?.certificationStatus === 0"
-            acl  [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-audit']">审核通过</button
-            >
-            <button nz-button nzType="default" nzDanger (click)="rejectedUser()" *ngIf="userIdentityDetail?.certificationStatus === 0"
-            acl  [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-audit']" >驳回审核</button
-            >
-            <button nz-button nzType="default" nzDanger (click)="ratify()" acl  [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-edit']">修改</button>
+            <button nz-button nzType="default" nzDanger (click)="approveUser()"
+              *ngIf="userIdentityDetail?.certificationStatus === 0" acl
+              [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-audit']">审核通过</button>
+            <button nz-button nzType="default" nzDanger (click)="rejectedUser()"
+              *ngIf="userIdentityDetail?.certificationStatus === 0" acl
+              [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-audit']">驳回审核</button>
+            <button nz-button nzType="default" nzDanger (click)="ratify()" acl
+              [acl-ability]="['USERCENTER-DRIVER-CAPTAIN-DETAIL-edit']">修改</button>
           </ng-template>
         </div>
       </sv-title>
       <sv label="姓名">
-        <input
-          nz-input
-          type="text"
-          [(ngModel)]="userIdentityDetail.name"
-          [readonly]="!isEditUser"
-          [nzBorderless]="!isEditUser"
-          [placeholder]="isEditUser ? '' : '-'"
-        />
+        <input nz-input type="text" [(ngModel)]="userIdentityDetail.name" [readonly]="!isEditUser"
+          [nzBorderless]="!isEditUser" [placeholder]="isEditUser ? '' : '-'" />
       </sv>
       <sv label="身份证号">
-        <input
-          nz-input
-          type="text"
-          [(ngModel)]="userIdentityDetail.certificateNumber"
-          [readonly]="!isEditUser"
-          [nzBorderless]="!isEditUser"
-          [placeholder]="isEditUser ? '' : '-'"
-        />
+        <input nz-input type="text" [(ngModel)]="userIdentityDetail.certificateNumber" [readonly]="!isEditUser"
+          [nzBorderless]="!isEditUser" [placeholder]="isEditUser ? '' : '-'" />
       </sv>
       <sv label="身份证照" col="1">
         <div class="d-flex">
-          <ng-container
-            *ngTemplateOutlet="
+          <ng-container *ngTemplateOutlet="
               uploadTemplate;
               context: {
                 data: userIdentityDetail,
@@ -112,11 +82,9 @@
                 key2: 'certificatePhotoFront',
                 hover: 'certificateBackFront'
               }
-            "
-          >
+            ">
           </ng-container>
-          <ng-container
-            *ngTemplateOutlet="
+          <ng-container *ngTemplateOutlet="
               uploadTemplate;
               context: {
                 data: userIdentityDetail,
@@ -125,8 +93,7 @@
                 key2: 'certificatePhotoBack',
                 hover: 'certificateBack'
               }
-            "
-          >
+            ">
           </ng-container>
         </div>
       </sv>
@@ -158,28 +125,16 @@
 </ng-template>
 
 <ng-template #uploadTemplate let-data="data" let-status="status" let-key="key" let-key2="key2" let-hover="hover">
-  <nz-upload
-    class="avatar-uploader"
-    [nzAction]="uploadURl"
-    nzName="multipartFile"
-    nzListType="picture-card"
-    [nzShowUploadList]="false"
-    nzFileType="image/png,image/jpeg,image/jpg,image/gif"
-    [nzDisabled]="!status || disabledUpload"
-    (nzChange)="changeUpload($event, data, key, key2)"
-  >
+  <nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
+    [nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
+    [nzDisabled]="!status || disabledUpload" (nzChange)="changeUpload($event, data, key, key2)">
     <ng-container *ngIf="!data[key] && status">
       <i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
       <div class="ant-upload-text">上传</div>
     </ng-container>
-    <div
-      *ngIf="data[key]"
-      (mouseover)="data[hover] = true"
-      (mouseleave)="data[hover] = false"
-      (click)="$event.cancelBubble = true"
-      class="image-hover"
-    >
-      <img [src]="data[key]" style="width: 200px; height: 160px" (click)="showImg(data[key])" />
+    <div *ngIf="data[key]" (mouseover)="data[hover] = true" (mouseleave)="data[hover] = false"
+      (click)="$event.cancelBubble = true" class="image-hover">
+      <img nz-image [nzSrc]="data[key]" style="width: 200px; height: 160px" />
       <div class="mask" *ngIf="data[hover] && status"></div>
       <div class="mask-over" *ngIf="data[hover] && status">
         <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(data, key, key2)"></i>
@@ -189,4 +144,4 @@
       </div>
     </div>
   </nz-upload>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.ts b/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.ts
index 9ee9acf7..9335ba47 100644
--- a/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.ts
+++ b/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.ts
@@ -2,6 +2,7 @@ import { DatePipe } from '@angular/common';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { apiConf } from '@conf/api.conf';
+import { NzImageService } from 'ng-zorro-antd/image';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { UsermanageService } from 'src/app/routes/usercenter/services/usercenter.service';
 import { ImageViewComponent } from 'src/app/shared/components/imagelist';
@@ -31,7 +32,8 @@ export class CaptainDetailComponent implements OnInit {
     private nzModalService: NzModalService,
     public service: UsermanageService,
     private route: ActivatedRoute,
-    private datePipe: DatePipe
+    private datePipe: DatePipe,
+    private nzImageService: NzImageService
   ) {}
 
   ngOnInit() {
@@ -192,7 +194,8 @@ export class CaptainDetailComponent implements OnInit {
       imgList: [url],
       index: 0
     };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
+    // this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
 
   deleteImg(data: any, key: string, key2: string) {
diff --git a/src/app/routes/usercenter/components/driver/detail/detail.component.html b/src/app/routes/usercenter/components/driver/detail/detail.component.html
index ebe48e95..362e4952 100644
--- a/src/app/routes/usercenter/components/driver/detail/detail.component.html
+++ b/src/app/routes/usercenter/components/driver/detail/detail.component.html
@@ -318,7 +318,7 @@
     </ng-container>
     <div *ngIf="data[key]" (mouseover)="data[hover]=true" (mouseleave)="data[hover]=false"
       (click)="$event.cancelBubble=true" class="image-hover">
-      <img [src]="data[key]" style="width: 200px;height: 160px;" (click)="showImg(data[key])" />
+      <img nz-image [nzSrc]="data[key]" style="width: 200px;height: 160px;"  />
       <div class="mask" *ngIf="data[hover] && status"></div>
       <div class="mask-over" *ngIf="data[hover] && status">
         <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(data,key,key2)"></i>
diff --git a/src/app/routes/usercenter/components/driver/detail/detail.component.ts b/src/app/routes/usercenter/components/driver/detail/detail.component.ts
index 893d5c5b..df824556 100644
--- a/src/app/routes/usercenter/components/driver/detail/detail.component.ts
+++ b/src/app/routes/usercenter/components/driver/detail/detail.component.ts
@@ -5,6 +5,7 @@ import { apiConf } from '@conf/api.conf';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFTagWidgetSchema, SFTextWidgetSchema, SFUISchema } from '@delon/form';
 import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzImageService } from 'ng-zorro-antd/image';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ImageViewComponent } from 'src/app/shared/components/imagelist';
@@ -65,7 +66,8 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
     private nzModalService: NzModalService,
     public service: UsermanageService,
     public route: ActivatedRoute,
-    private datePipe: DatePipe
+    private datePipe: DatePipe,
+    private nzImageService: NzImageService
   ) {}
 
   ngOnInit() {
@@ -423,11 +425,7 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
   }
 
   showImg(url: any) {
-    const params = {
-      imgList: [url],
-      index: 0
-    };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
   }
 
   deleteImg(data: any, key: string, key2: string) {
diff --git a/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts b/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts
index 9ac10fbc..891b1f83 100644
--- a/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts
+++ b/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts
@@ -19,6 +19,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
 import { apiConf } from '@conf/api.conf';
 import { ImageViewComponent } from 'src/app/shared/components/imagelist';
 import { NzCascaderOption } from 'ng-zorro-antd/cascader';
+import { NzImageService } from 'ng-zorro-antd/image';
 @Component({
   selector: 'app-Freight-components-EnterpriseAudit-view',
   templateUrl: './view.component.html',
@@ -49,7 +50,12 @@ export class FreightComponentsEnterpriseAuditViewComponent implements OnInit {
 
   values: string[] | null = null;
   ltdId: any[] = [];
-  constructor(private nzModalService: NzModalService, public service: UsermanageService, private route: ActivatedRoute) {}
+  constructor(
+    private nzModalService: NzModalService,
+    public service: UsermanageService,
+    private route: ActivatedRoute,
+    private nzImageService: NzImageService
+  ) {}
 
   ngOnInit() {
     this.initData();
@@ -127,7 +133,8 @@ export class FreightComponentsEnterpriseAuditViewComponent implements OnInit {
       imgList: [url],
       index: 0
     };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
+    // this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
 
   deleteImg(key: string) {
diff --git a/src/app/routes/usercenter/components/freight/user/detail/detail.component.ts b/src/app/routes/usercenter/components/freight/user/detail/detail.component.ts
index 71990623..67e0fe6d 100644
--- a/src/app/routes/usercenter/components/freight/user/detail/detail.component.ts
+++ b/src/app/routes/usercenter/components/freight/user/detail/detail.component.ts
@@ -4,6 +4,7 @@ import { apiConf } from '@conf/api.conf';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
 import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzImageService } from 'ng-zorro-antd/image';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ImageViewComponent } from 'src/app/shared/components/imagelist';
@@ -34,7 +35,12 @@ export class FreightComponentsUserDetailComponent implements OnInit {
   isEditUser = false;
   uploadURl = apiConf.waterFileUpload;
   disabledUpload = false;
-  constructor(private nzModalService: NzModalService, public service: UsermanageService, public route: ActivatedRoute) {}
+  constructor(
+    private nzModalService: NzModalService,
+    public service: UsermanageService,
+    public route: ActivatedRoute,
+    private nzImageService: NzImageService
+  ) {}
 
   ngOnInit() {
     this.initData();
@@ -170,7 +176,8 @@ export class FreightComponentsUserDetailComponent implements OnInit {
       imgList: [url],
       index: 0
     };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
+    // this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
 
   deleteImg(data: any, key: string, key2: string) {
diff --git a/src/app/routes/usercenter/services/usercenter.service.ts b/src/app/routes/usercenter/services/usercenter.service.ts
index 9b281198..57dda698 100644
--- a/src/app/routes/usercenter/services/usercenter.service.ts
+++ b/src/app/routes/usercenter/services/usercenter.service.ts
@@ -10,6 +10,7 @@ import { Injectable, Injector } from '@angular/core';
 import { cacheConf } from '@conf/cache.conf';
 import { _HttpClient } from '@delon/theme';
 import { EACacheService, ShipperBaseService } from '@shared';
+import { NzImageService } from 'ng-zorro-antd/image';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ImageViewComponent } from 'src/app/shared/components/imagelist';
 @Injectable({
@@ -144,7 +145,12 @@ export class UsermanageService extends ShipperBaseService {
   // 查询司机配置列表
   $api_configPage = '/api/mdc/cuc/driver/list/configPage';
 
-  constructor(public injector: Injector, private nzModalService: NzModalService, public eaCacheSrv: EACacheService) {
+  constructor(
+    public injector: Injector,
+    private nzModalService: NzModalService,
+    public eaCacheSrv: EACacheService,
+    private nzImageService: NzImageService
+  ) {
     super(injector, eaCacheSrv);
   }
 
@@ -153,6 +159,7 @@ export class UsermanageService extends ShipperBaseService {
       imgList: [url],
       index: 0
     };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
+    // this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
 }
diff --git a/src/app/routes/vehicle/components/audit/detail/detail.component.ts b/src/app/routes/vehicle/components/audit/detail/detail.component.ts
index dc7565a0..b2dc3bba 100644
--- a/src/app/routes/vehicle/components/audit/detail/detail.component.ts
+++ b/src/app/routes/vehicle/components/audit/detail/detail.component.ts
@@ -14,6 +14,7 @@ import { VehicleService } from '../../../services/vehicle.service';
 import { EADateUtil } from '@shared';
 import { VehicleImgViewComponent } from '../../list/img-view/img-view.component';
 import { VehicleComponentsListEditComponent } from '../../list/edit/edit.component';
+import { NzImageService } from 'ng-zorro-antd/image';
 
 @Component({
   selector: 'app-Vehicle-components-Audit-detail',
@@ -25,7 +26,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
   @ViewChild('redectModal', { static: false }) redectModal!: any;
   columns!: STColumn[];
   detailData: any = this.initData();
-  tempalateData :any;
+  tempalateData: any;
   contenCarNoColor: any;
   contencarModel: any;
   contenCarLength: any;
@@ -33,21 +34,26 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
   approvalOpinion = '';
   uploadURl = apiConf.waterFileUpload;
   disabledUpload = false;
-  constructor(public service: VehicleService, private route: ActivatedRoute, private nzModalService: NzModalService, private modal: ModalHelper,) {}
+  constructor(
+    public service: VehicleService,
+    private route: ActivatedRoute,
+    private nzModalService: NzModalService,
+    private modal: ModalHelper,
+    private nzImageService: NzImageService
+  ) {}
 
   ngOnInit() {
     this.getSelectList();
-    console.log(this.route.snapshot.params)
     this.getDetailList();
     this.initST();
   }
 
   initST() {
     this.columns = [
-      { title: '司机姓名', index: 'name',  className: 'text-center' },
-      { title: '司机手机号', index: 'mobile',  className: 'text-center' },
-      { title: '身份证号', index: 'idCardNo',  className: 'text-center' },
-      { title: '挂靠协议', render: 'auditStatusEnum',  className: 'text-center' },
+      { title: '司机姓名', index: 'name', className: 'text-center' },
+      { title: '司机手机号', index: 'mobile', className: 'text-center' },
+      { title: '身份证号', index: 'idCardNo', className: 'text-center' },
+      { title: '挂靠协议', render: 'auditStatusEnum', className: 'text-center' },
       {
         title: '车主申明/挂靠协议',
         fixed: 'right',
@@ -56,21 +62,20 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
         buttons: [
           {
             text: '查看协议',
-            click: (_record) => this.viewEvaluate(_record),
-            iif: item => item.auditStatusEnum == 10 || item.auditStatusEnum == 20,
+            click: _record => this.viewEvaluate(_record),
+            iif: item => item.auditStatusEnum == 10 || item.auditStatusEnum == 20
           },
           {
             text: '上传协议',
-            click: (_record) => this.updateEvaluate(_record),
-            iif: item => item.auditStatusEnum == -1,
-          },
+            click: _record => this.updateEvaluate(_record),
+            iif: item => item.auditStatusEnum == -1
+          }
         ]
       }
     ];
   }
 
   getDetailList() {
-    console.log(this.route.snapshot.queryParams.carId);
     const params = {
       id: this.route.snapshot?.params?.id
     };
@@ -88,7 +93,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
         this.adjuctUser(
           {
             approvalStatus: 20,
-            id: this.route.snapshot?.params?.id,
+            id: this.route.snapshot?.params?.id
           },
           '审核成功'
         );
@@ -125,23 +130,21 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
 
   save() {
     this.isEdit = false;
-    this.detailData.driverLicenseRegisterTime = EADateUtil.yearToDate(this.detailData?.driverLicenseRegisterTime)
+    this.detailData.driverLicenseRegisterTime = EADateUtil.yearToDate(this.detailData?.driverLicenseRegisterTime);
 
-    this.detailData.driverLicenseEndTime = EADateUtil.yearToDate(this.detailData?.driverLicenseEndTime)
+    this.detailData.driverLicenseEndTime = EADateUtil.yearToDate(this.detailData?.driverLicenseEndTime);
 
-    this.detailData.driverLicenseGetTime = EADateUtil.yearToDate(this.detailData?.driverLicenseGetTime)
+    this.detailData.driverLicenseGetTime = EADateUtil.yearToDate(this.detailData?.driverLicenseGetTime);
 
-    this.detailData.roadTransportStartTime = EADateUtil.yearToDate(this.detailData?.roadTransportStartTime)
+    this.detailData.roadTransportStartTime = EADateUtil.yearToDate(this.detailData?.roadTransportStartTime);
 
-    this.detailData.roadTransportEndTime = EADateUtil.yearToDate(this.detailData?.roadTransportEndTime)
-    console.log(this.detailData)
-    this.service.request(this.service.$api_get_update_audit, this.detailData).subscribe((res)=>{
-      console.log(res)
-      if(res) {
-        this.getDetailList()
-        this.service.msgSrv.success('修改成功！')
+    this.detailData.roadTransportEndTime = EADateUtil.yearToDate(this.detailData?.roadTransportEndTime);
+    this.service.request(this.service.$api_get_update_audit, this.detailData).subscribe(res => {
+      if (res) {
+        this.getDetailList();
+        this.service.msgSrv.success('修改成功！');
       }
-    })
+    });
   }
 
   ratify() {
@@ -149,7 +152,6 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
   }
 
   changeUpload({ file, fileList, type }: any, key: string) {
-    console.log({ file, fileList, type });
     if (type === 'success') {
       this.detailData[key] = file.response.data.fullFileWatermarkPath;
     }
@@ -158,18 +160,19 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
   goBack() {
     window.history.go(-1);
   }
-   /**
+  /**
    * 查询参数
    */
-    get reqParams() {
-      return { id: this.route.snapshot.queryParams.carId };
-    }
+  get reqParams() {
+    return { id: this.route.snapshot.queryParams.carId };
+  }
   showImg(url: any) {
     const params = {
       imgList: [url],
       index: 0
     };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
+    // this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
 
   deleteImg(key: string) {
@@ -218,38 +221,39 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
       carFrontPhotoWatermark: ''
     };
   }
-    // 获取录单员 
-    getSelectList() {
-      this.Serveice("car:color")
-      this.Serveice("car:model")
-      this.Serveice("car:length")
-    }
-    Serveice(param :any) {
-      let value: any;
-      this.service.request(`${this.service.$api_get_getDictValue}`, 
-      {
+  // 获取录单员
+  getSelectList() {
+    this.Serveice('car:color');
+    this.Serveice('car:model');
+    this.Serveice('car:length');
+  }
+  Serveice(param: any) {
+    let value: any;
+    this.service
+      .request(`${this.service.$api_get_getDictValue}`, {
         dictKey: param
-      }).subscribe((res) => {
-        if(param === 'car:color') {
+      })
+      .subscribe(res => {
+        if (param === 'car:color') {
           this.contenCarNoColor = res;
-        } else if(param === 'car:model') {
+        } else if (param === 'car:model') {
           this.contencarModel = res;
-        } else if(param === 'car:length') {
+        } else if (param === 'car:length') {
           this.contenCarLength = res;
         }
-      })
-      return value;
-    }
-    viewEvaluate(item: any) {
-      this.modal.createStatic(VehicleImgViewComponent, { i: item } ).subscribe((i) => {
-        this.st.reload();
-        this.getDetailList()
       });
-    }
-    updateEvaluate(item: any) {
-      this.modal.createStatic(VehicleComponentsListEditComponent, { i: item }).subscribe((i) => {
-        this.st.reload();
-        this.getDetailList()
-      });
-    }
+    return value;
+  }
+  viewEvaluate(item: any) {
+    this.modal.createStatic(VehicleImgViewComponent, { i: item }).subscribe(i => {
+      this.st.reload();
+      this.getDetailList();
+    });
+  }
+  updateEvaluate(item: any) {
+    this.modal.createStatic(VehicleComponentsListEditComponent, { i: item }).subscribe(i => {
+      this.st.reload();
+      this.getDetailList();
+    });
+  }
 }
diff --git a/src/app/routes/vehicle/components/list/detail/detail.component.ts b/src/app/routes/vehicle/components/list/detail/detail.component.ts
index b702a239..880d69ea 100644
--- a/src/app/routes/vehicle/components/list/detail/detail.component.ts
+++ b/src/app/routes/vehicle/components/list/detail/detail.component.ts
@@ -11,11 +11,12 @@ import { apiConf } from '@conf/api.conf';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ImageViewComponent } from 'src/app/shared/components/imagelist';
 import { EADateUtil } from '@shared';
+import { NzImageService } from 'ng-zorro-antd/image';
 
 @Component({
   selector: 'app-supplier-components-list-view',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.less'],
+  styleUrls: ['./detail.component.less']
 })
 export class VehicleComponentsListDetailComponent implements OnInit {
   i: any;
@@ -36,7 +37,7 @@ export class VehicleComponentsListDetailComponent implements OnInit {
   suppliersData: any = {};
   disabledUpload = false;
   detailData: any = this.initData();
-  tempalateData :any;
+  tempalateData: any;
   contenCarNoColor: any;
   contencarModel: any;
   contenCarLength: any;
@@ -49,6 +50,7 @@ export class VehicleComponentsListDetailComponent implements OnInit {
     private modalHelper: ModalHelper,
     private msgSrv: NzMessageService,
     private nzModalService: NzModalService,
+    private nzImageService: NzImageService
   ) {}
 
   ngOnInit() {
@@ -57,14 +59,13 @@ export class VehicleComponentsListDetailComponent implements OnInit {
     this.initSF();
     this.initSF1();
     this.initST();
-
   }
-    /**
+  /**
    * 查询参数
    */
-     get reqParams() {
-      return { id: this.route.snapshot?.params?.id };
-    }
+  get reqParams() {
+    return { id: this.route.snapshot?.params?.id };
+  }
   /**
    * 初始化查询表单
    */
@@ -77,17 +78,17 @@ export class VehicleComponentsListDetailComponent implements OnInit {
           type: 'string',
           ui: {
             widget: 'date',
-            format: 'yyyy-MM-dd 00:00:00',
+            format: 'yyyy-MM-dd 00:00:00'
             // hidden: this.modalName === 'effectiveDate' ? false : true,
-          } as SFDateWidgetSchema,
-        },
+          } as SFDateWidgetSchema
+        }
       },
-      required: ['effectiveDate'],
+      required: ['effectiveDate']
     };
     this.ui = { '*': { spanLabelFixed: 120, grid: { span: 24 } } };
   }
   initST() {
-    this.columns =[
+    this.columns = [
       { title: '司机姓名', index: 'name', width: 300, className: 'text-center' },
       { title: '司机手机号', index: 'mobile', width: 300, className: 'text-center' },
       { title: '挂靠协议', render: 'auditStatusEnum', className: 'text-center' },
@@ -100,17 +101,17 @@ export class VehicleComponentsListDetailComponent implements OnInit {
         buttons: [
           {
             text: '查看协议',
-            click: (_record) => this.viewEvaluate(_record),
-            iif: item => item.auditStatusEnum == 10 || item.auditStatusEnum == 20,
+            click: _record => this.viewEvaluate(_record),
+            iif: item => item.auditStatusEnum == 10 || item.auditStatusEnum == 20
           },
           {
             text: '上传协议',
-            click: (_record) => this.updateEvaluate(_record),
-            iif: item => item.auditStatusEnum == -1,
-          },
-        ],
-      },
-    ]
+            click: _record => this.updateEvaluate(_record),
+            iif: item => item.auditStatusEnum == -1
+          }
+        ]
+      }
+    ];
   }
   initSF1() {
     this.schema1 = {
@@ -121,7 +122,7 @@ export class VehicleComponentsListDetailComponent implements OnInit {
           title: '类型',
           enum: [
             { label: '非外部供应商', value: 0 },
-            { label: '外部供应商', value: 1 },
+            { label: '外部供应商', value: 1 }
           ],
           default: '',
           ui: {
@@ -136,85 +137,81 @@ export class VehicleComponentsListDetailComponent implements OnInit {
                 this.suppliersData.externalSuppliersId = '';
               }
               this.initSF1();
-            },
-          },
+            }
+          }
         },
         externalSuppliersId: {
           title: '外部供应商id',
           type: 'string',
           default: '',
           ui: {
-            visibleIf: { suppliersType: (value: any) => value === 1 },
-          },
-        },
+            visibleIf: { suppliersType: (value: any) => value === 1 }
+          }
+        }
       },
-      required: this.validData,
+      required: this.validData
     };
   }
-  // 获取录单员 
+  // 获取录单员
   getSelectList() {
-    this.Serveice("car:color")
-    this.Serveice("car:model")
-    this.Serveice("car:length")
+    this.Serveice('car:color');
+    this.Serveice('car:model');
+    this.Serveice('car:length');
   }
-  Serveice(param :any) {
+  Serveice(param: any) {
     let value: any;
-    this.service.request(`${this.service.$api_get_getDictValue}`, 
-    {
-      dictKey: param
-    }).subscribe((res) => {
-      if(param === 'car:color') {
-        this.contenCarNoColor = res;
-      } else if(param === 'car:model') {
-        this.contencarModel = res;
-      } else if(param === 'car:length') {
-        this.contenCarLength = res;
-      }
-    })
+    this.service
+      .request(`${this.service.$api_get_getDictValue}`, {
+        dictKey: param
+      })
+      .subscribe(res => {
+        if (param === 'car:color') {
+          this.contenCarNoColor = res;
+        } else if (param === 'car:model') {
+          this.contencarModel = res;
+        } else if (param === 'car:length') {
+          this.contenCarLength = res;
+        }
+      });
     return value;
   }
-  // 
+  //
   getDetailList() {
-   console.log( this.route.snapshot?.params?.id)
+    console.log(this.route.snapshot?.params?.id);
     const params = {
       id: this.route.snapshot?.params?.id
     };
-   this.service.request(`${this.service.$api_get_operate_get}`, params).subscribe((res) => {
+    this.service.request(`${this.service.$api_get_operate_get}`, params).subscribe(res => {
       this.detailData = res;
       this.tempalateData = res;
-    })
+    });
   }
 
   goBack() {
     window.history.go(-1);
   }
- 
 
-  handleCancel(name: any) {
-
-  }
+  handleCancel(name: any) {}
 
   /**
-  *查看评价
-  */
+   *查看评价
+   */
   viewEvaluate(item: any) {
-    this.modal.createStatic(VehicleImgViewComponent, { i: item } ).subscribe(() => {
+    this.modal.createStatic(VehicleImgViewComponent, { i: item }).subscribe(() => {
       this.st.reload();
-    this.getDetailList();
+      this.getDetailList();
     });
   }
   /**
-  *查看评价
-  */
+   *查看评价
+   */
   updateEvaluate(item: any) {
     this.modal.createStatic(VehicleComponentsListEditComponent, { i: item }).subscribe(() => {
       this.st.reload();
-    this.getDetailList();
+      this.getDetailList();
     });
   }
-  handleOK() {
-    
-  }
+  handleOK() {}
   ratify() {
     this.isEdit = true;
   }
@@ -225,7 +222,7 @@ export class VehicleComponentsListDetailComponent implements OnInit {
     }
   }
   deleteImg(key: string) {
-    console.log(key)
+    console.log(key);
     this.nzModalService.warning({
       nzTitle: '是否确认删除该图片',
       nzOnOk: () => {
@@ -242,7 +239,8 @@ export class VehicleComponentsListDetailComponent implements OnInit {
       imgList: [url],
       index: 0
     };
-    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+    this.nzImageService.preview([{ src: url }]);
+    // this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
 
   reset() {
@@ -252,26 +250,26 @@ export class VehicleComponentsListDetailComponent implements OnInit {
 
   save() {
     this.isEdit = false;
-    console.log(this.detailData)
-      this.detailData.driverLicenseRegisterTime = EADateUtil.yearToDate(this.detailData?.driverLicenseRegisterTime)
+    console.log(this.detailData);
+    this.detailData.driverLicenseRegisterTime = EADateUtil.yearToDate(this.detailData?.driverLicenseRegisterTime);
 
-      this.detailData.driverLicenseEndTime = EADateUtil.yearToDate(this.detailData?.driverLicenseEndTime)
+    this.detailData.driverLicenseEndTime = EADateUtil.yearToDate(this.detailData?.driverLicenseEndTime);
 
-      this.detailData.driverLicenseGetTime = EADateUtil.yearToDate(this.detailData?.driverLicenseGetTime)
+    this.detailData.driverLicenseGetTime = EADateUtil.yearToDate(this.detailData?.driverLicenseGetTime);
 
-      this.detailData.roadTransportStartTime = EADateUtil.yearToDate(this.detailData?.roadTransportStartTime)
+    this.detailData.roadTransportStartTime = EADateUtil.yearToDate(this.detailData?.roadTransportStartTime);
 
-      this.detailData.roadTransportEndTime = EADateUtil.yearToDate(this.detailData?.roadTransportEndTime)
-    console.log(this.detailData)
-    this.service.request(this.service.$api_get_update, this.detailData).subscribe((res)=>{
-      console.log(res)
-      if(res) {
-        this.getDetailList()
-        this.service.msgSrv.success('修改成功！')
+    this.detailData.roadTransportEndTime = EADateUtil.yearToDate(this.detailData?.roadTransportEndTime);
+    console.log(this.detailData);
+    this.service.request(this.service.$api_get_update, this.detailData).subscribe(res => {
+      console.log(res);
+      if (res) {
+        this.getDetailList();
+        this.service.msgSrv.success('修改成功！');
       }
-    })
+    });
   }
-  
+
   private initData() {
     return {
       carNo: '',
diff --git a/src/app/shared/components/imagelist/image-list.module.ts b/src/app/shared/components/imagelist/image-list.module.ts
index 88665d93..1e59374b 100644
--- a/src/app/shared/components/imagelist/image-list.module.ts
+++ b/src/app/shared/components/imagelist/image-list.module.ts
@@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ImageListComponent } from './imagelist.component';
 import { ImageViewComponent } from './imageview/imageview.component';
+import { NzImageModule } from 'ng-zorro-antd/image';
 
 const COMPONENTS = [ImageListComponent, ImageViewComponent];
 
 @NgModule({
   declarations: COMPONENTS,
-  imports: [CommonModule],
-  exports: COMPONENTS,
+  imports: [CommonModule, NzImageModule],
+  exports: COMPONENTS
 })
 export class ImageListModule {}
diff --git a/src/app/shared/components/imagelist/imagelist.component.html b/src/app/shared/components/imagelist/imagelist.component.html
index 8faf6fab..b3bddafd 100644
--- a/src/app/shared/components/imagelist/imagelist.component.html
+++ b/src/app/shared/components/imagelist/imagelist.component.html
@@ -1,3 +1,3 @@
 <div class="imgBox">
-  <img *ngFor="let item of imgList; let i = index" [src]="item" (click)="showImg(i)" />
-</div>
+  <img *ngFor="let item of imgList; let i = index" nz-image [nzSrc]="item" />
+</div>
\ No newline at end of file
diff --git a/src/app/shared/components/imagelist/imagelist.component.ts b/src/app/shared/components/imagelist/imagelist.component.ts
index c019afd7..40bb7f37 100644
--- a/src/app/shared/components/imagelist/imagelist.component.ts
+++ b/src/app/shared/components/imagelist/imagelist.component.ts
@@ -8,25 +8,32 @@
  */
 import { Component, Input, OnInit } from '@angular/core';
 import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzImageService } from 'ng-zorro-antd/image';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { ImageViewComponent } from './imageview/imageview.component';
 
 @Component({
   selector: 'app-imagelist',
   templateUrl: './imagelist.component.html',
-  styleUrls: ['./imagelist.less'],
+  styleUrls: ['./imagelist.less']
 })
 export class ImageListComponent implements OnInit {
   @Input() imgList: any = [];
-  constructor(private modal: ModalHelper, public msgSrv: NzMessageService, public http: _HttpClient) {}
+  constructor(
+    private modal: ModalHelper,
+    public msgSrv: NzMessageService,
+    public http: _HttpClient,
+    private nzImageService: NzImageService
+  ) {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
   showImg(index: any) {
     const params = {
       imgList: this.imgList,
-      index,
+      index
     };
-    this.modal.create(ImageViewComponent, { params }).subscribe((res) => {});
+    const images = this.imgList.map((url: string) => ({ src: url }));
+    this.nzImageService.preview(images);
+    // this.modal.create(ImageViewComponent, { params }).subscribe(res => {});
   }
 }
diff --git a/src/app/shared/shared-zorro.module.ts b/src/app/shared/shared-zorro.module.ts
index ab105080..2682add7 100644
--- a/src/app/shared/shared-zorro.module.ts
+++ b/src/app/shared/shared-zorro.module.ts
@@ -44,8 +44,9 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 import { NzAffixModule } from 'ng-zorro-antd/affix';
-import { NzTypographyModule  } from 'ng-zorro-antd/typography';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzImageModule } from 'ng-zorro-antd/image';
 export const SHARED_ZORRO_MODULES = [
   NzButtonModule,
   NzGridModule,
@@ -85,5 +86,6 @@ export const SHARED_ZORRO_MODULES = [
   NzAnchorModule,
   NzAffixModule,
   NzTypographyModule,
-  NzSwitchModule 
+  NzSwitchModule,
+  NzImageModule
 ];