edit

2021-12-14 16:08:59 +08:00
parent a0e0199cee
commit 19fcbbed7c
3 changed files with 189 additions and 59 deletions
--- a/src/app/routes/vehicle/components/audit/detail/detail.component.html
+++ b/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>
--- a/src/app/routes/vehicle/components/audit/detail/detail.component.less
+++ b/src/app/routes/vehicle/components/audit/detail/detail.component.less
@ -10,11 +10,16 @@
      input {
        max-width: 250px;
      }
+
+      nz-date-picker {
+        min-width: 250px;
+      }
    }

    .readOnly-box {
      input {
        padding-left: 0;
+        color       : #000;
      }

      nz-select-top-control {
@ -30,5 +35,74 @@
        color : #000 !important;
      }
    }
+
+    // 图片展示工具样式改造
+    .ant-upload.ant-upload-disabled {
+      cursor: pointer;
+    }
+
+    .ant-upload.ant-upload-select-picture-card {
+      width : 200px;
+      height: 160px;
+    }
+
+    .ant-upload-picture-card-wrapper {
+      width: auto;
+    }
+  }
+}
+
+.image-hover {
+  .delete-icon {
+    border-radius   : 50%;
+    color           : #F55656;
+    font-size       : 28px;
+    position        : absolute;
+    top             : -15px;
+    right           : -15px;
+    background-color: #ffffff;
+    cursor          : pointer;
+  }
+
+  .show-icon {
+    color    : #ffffff;
+    font-size: 30px;
+    cursor   : pointer;
+  }
+}
+
+.image-hover:hover .mask {
+  opacity: 0.8;
+}
+
+.mask {
+  width              : 200px;
+  height             : 160px;
+  background-color   : #4F4F4F;
+  opacity            : 0;
+  position           : absolute;
+  // top             : 6px;
+  // left            : 12px;
+  border-radius      : 6px;
+  margin-top         : -160px;
+}
+
+.mask-over {
+  width                : 200px;
+  height               : 160px;
+  position             : absolute;
+  // top               : 6px;
+  // left           : 12px;
+  border-radius        : 6px;
+  display              : flex;
+  justify-content      : center;
+  align-items          : center;
+  margin-top           : -160px;
+
+  label {
+    font-size     : 20px;
+    line-height   : 24px;
+    letter-spacing: 0.7px;
+    color         : #FFFFFF;
  }
 }
--- a/src/app/routes/vehicle/components/audit/detail/detail.component.ts
+++ b/src/app/routes/vehicle/components/audit/detail/detail.component.ts
@ -7,6 +7,7 @@ import { ModalHelper, _HttpClient } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzUploadFile } from 'ng-zorro-antd/upload';
+import { ImageViewComponent } from 'src/app/shared/components/imagelist';
 import { VehicleService } from '../../../services/vehicle.service';
 // import { VehicleComponentsListEditComponent } from '../edit/edit.component';
 // import { VehicleImgViewComponent } from '../img-view/img-view.component';
@ -28,7 +29,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
  approvalOpinion = '';

  uploadURl = apiConf.waterFileUpload;
-  carPhoto: any = [];
+  disabledUpload = false;
  constructor(public service: VehicleService, private route: ActivatedRoute, private nzModalService: NzModalService) {}

  ngOnInit() {
@ -113,6 +114,10 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
    this.isEdit = false;
  }

+  save() {
+    this.isEdit = false;
+  }
+
  ratify() {
    this.isEdit = true;
  }
@ -128,13 +133,26 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
    window.history.go(-1);
  }

-  handlePreview = async (file: NzUploadFile): Promise<void> => {
-    // if (!file.url && !file.preview) {
-    //   file.preview = await getBase64(file.originFileObj!);
-    // }
-    // this.previewImage = file.url || file.preview;
-    // this.previewVisible = true;
-  };
+  showImg(url: any) {
+    const params = {
+      imgList: [url],
+      index: 0
+    };
+    this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
+  }
+
+  deleteImg(key: string) {
+    this.nzModalService.warning({
+      nzTitle: '是否确认删除该图片',
+      nzOnOk: () => {
+        this.disabledUpload = true;
+        this.detailData[key] = '';
+        setTimeout(() => {
+          this.disabledUpload = false;
+        }, 100);
+      }
+    });
+  }

  private adjuctUser(params: any, msg: string) {
    this.service.request(this.service.$api_get_operate_get, { ...params }).subscribe(res => {
@ -151,7 +169,22 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
      carNoColor: '',
      carModel: '',
      carLength: '',
-      isTrailer: null
+      archivesNo: '',
+      driverLicenseSigningOrg: '',
+      carDistinguishCode: '',
+      carLoad: '',
+      curbWeight: '',
+      roadTransportNo: '',
+      roadTransportLicenceNo: '',
+      carOwner: '',
+      isTrailer: null,
+      useNature: null,
+      driverLicenseRegisterTime: null,
+      driverLicenseGetTime: null,
+      driverLicenseEndTime: null,
+      roadTransportStartTime: null,
+      roadTransportEndTime: null,
+      carFrontPhotoWatermark: ''
    };
  }
 }