edit

src/app/routes/vehicle/components/audit/detail/detail.component.html

@@ -16,9 +16,8 @@
           </ng-container>
           <ng-container *ngIf="isEdit">
             <button nz-button nzType="default" (click)="reset()">取消</button>
-            <button nz-button nzType="default" nzDanger>保存</button>
+            <button nz-button nzType="default" (click)="save()" nzDanger>保存</button>
           </ng-container>
-
         </div>
       </sv-title>
       <sv label="申请时间">
@@ -62,17 +61,9 @@
   </sv-container>
   <sv-container col="1" class="mt-md">
     <sv label="车头照">
-      <nz-upload [nzAction]="uploadURl" nzListType="picture-card" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
-        nzName="multipartFile" [(nzFileList)]="carPhoto" [nzShowButton]="carPhoto?.length<2 && isEdit"
-        [nzPreview]="handlePreview"
-        (nzChange)="changeUpload($event,detailData?.carFrontPhotoWatermark?'carFrontPhotoWatermark':'carFrontPhotoWatermark')">
-        <div>
-          <i nz-icon nzType="plus"></i>
-          <div style="margin-top: 8px">上传</div>
-        </div>
-      </nz-upload>
-      <!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]">
-      </app-imagelist> -->
+      <ng-container
+        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark'}">
+      </ng-container>
     </sv>
   </sv-container>
   <nz-divider></nz-divider>
@@ -80,76 +71,86 @@
   <sv-container col="3">
     <sv-title style="font-weight: 700;">行驶证信息</sv-title>
     <sv label="档案编号">
-      {{ detailData?.archivesNo }}
+      <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="准驾车型">
-      {{ detailData?.carModel }}
+      <input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="行驶证注册日期">
-      {{ detailData?.driverLicenseRegisterTime }}
+      <nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
     </sv>
-  </sv-container>
-
-  <sv-container col="2">
-    <sv label="行驶证到期日">
-      {{ detailData?.driverLicenseEndTime }}
+    <sv label="行驶证到期日" col="3">
+      <nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
     </sv>
-    <sv label="行驶证签发机关">
-      {{ detailData?.driverLicenseSigningOrg }}
+    <sv label="行驶证签发机关" col="2">
+      <input nz-input type="text" [(ngModel)]="detailData.driverLicenseSigningOrg" [readonly]="!isEdit"
+        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
     </sv>
-  </sv-container>
-
-  <sv-container col="3">
     <sv label="行驶证发证日期">
-      {{ detailData?.driverLicenseGetTime }}
+      <nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
     </sv>
     <sv label="车辆识别代码">
-      {{ detailData?.carDistinguishCode }}
+      <input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
+        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="使用性质">
-      {{ detailData?.useNature === '1' ? '营运' : '非营运'}}
+      <nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
+        [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
+        <nz-option [nzValue]="1" nzLabel="营运"></nz-option>
+        <nz-option [nzValue]="0" nzLabel="非营运"></nz-option>
+      </nz-select>
     </sv>
-  </sv-container>
-
-  <sv-container col="3">
     <sv label="载重（吨）">
-      {{ detailData?.carLoad }}
+      <input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="整备质量">
-      {{ detailData?.curbWeight }}
+      <input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="所有人">
-      {{ detailData?.carOwner }}
+      <input nz-input type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        [placeholder]="isEdit?'':'-'">
     </sv>
-  </sv-container>
-  <sv-container col="1">
-    <sv label="自有载具">
-      {{ detailData?.contactsName }}
-    </sv>
-    <sv label="行驶证照片">
-      <app-imagelist
-        [imgList]="[detailData?.certificatePhotoFront,detailData?.certificatePhotoBack,detailData?.certificatePhotoFrontWatermark,detailData?.certificatePhotoBackWatermark]">
-      </app-imagelist>
+    <sv label="行驶证照片" col="1">
+      <div class="d-flex">
+        <ng-container
+          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFront,key:'certificatePhotoFront'}">
+        </ng-container>
+        <ng-container
+          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark'}">
+        </ng-container>
+      </div>
     </sv>
   </sv-container>
   <nz-divider></nz-divider>
   <sv-container col="3" class="mt16">
     <sv-title style="font-weight: 700;">道路运输证信息</sv-title>
     <sv label="道路运输证号">
-      {{ detailData?.roadTransportNo }}
+      <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
+        [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="经营许可证号">
-      {{ detailData?.roadTransportLicenceNo }}
+      <input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
+        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
     </sv>
     <sv label="发证日期">
-      {{ detailData?.roadTransportStartTime }}
+      <nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
     </sv>
     <sv label="有效期至">
-      {{detailData?.roadTransportEndTime}}
+      <nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
+        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
     </sv>
     <sv label="道路运输证照片">
-      <app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]">
-      </app-imagelist>
+      <ng-container
+        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.roadTransportPhoto,key:'roadTransportPhoto'}">
+      </ng-container>
     </sv>
   </sv-container>
   <nz-divider></nz-divider>
@@ -181,4 +182,26 @@
       </se>
     </div>
   </div>
+</ng-template>
+
+<ng-template #uploadTemplate let-image="image" let-key="key" 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]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
+    <ng-container *ngIf="!image && isEdit">
+      <i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
+      <div class="ant-upload-text">上传</div>
+    </ng-container>
+    <div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
+      (click)="$event.cancelBubble=true" class="image-hover">
+      <img [src]="image" style="width: 200px;height: 160px;" />
+      <div class="mask" *ngIf="detailData[hover] && isEdit"></div>
+      <div class="mask-over" *ngIf="detailData[hover] && isEdit">
+        <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
+        <div style="display: flex;align-items: center;">
+          <i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
+        </div>
+      </div>
+    </div>
+  </nz-upload>
 </ng-template>