巡检图片上传

src/app/share/inspection-execute-detail/inspection-execute-detail.component.html

@@ -93,9 +93,13 @@
       <div class="content orders">
         <div class="inner">
           <div class="top" *ngFor="let item of valueList">
-            <div class="info" nz-row>
-              <div nz-col nzSpan="8" *ngFor="let value of item">
-                {{ value.name }}：<span [ngClass]="value.exception === 1 ? 'red': ''">{{ getValuex(value) }}</span>
+            <div class="info info_display" nz-row>
+              <div nz-col nzSpan="8" *ngFor="let value of item" [ngClass]="{ thumbs: value.inspectionFormItemDTO.type.value == 7 }">
+                {{ value.name }}：
+                <span *ngIf="value.inspectionFormItemDTO.type.value != 7" [ngClass]="value.exception === 1 ? 'red': ''">{{ getValuex(value) }}</span>
+                <div *ngIf="value.inspectionFormItemDTO.type.value == 7" class="thumbList">
+                  <div class="thumb" *ngFor="let item of value.valuex;let index = index;" (click)="previewImageHandler(value.valuex, index)"><img [src]="item.thumbFilePath" alt=""></div>
+                </div>
               </div>
             </div>
           </div>
@@ -143,3 +147,6 @@
 
 <!-- 遮罩 -->
 <app-mask *ngIf="maskFlag"></app-mask>
+
+<!-- 图片预览 -->
+<app-image-viewer [imageUrl]="imgs" hidden *ngIf="isPreview" [isPreviewNow]="true" [initialViewIndex]="initialViewIndex"></app-image-viewer>

src/app/share/inspection-execute-detail/inspection-execute-detail.component.less

@@ -97,6 +97,33 @@
           border: 1px solid #D9D9D9;
           overflow: hidden;
           padding: 10px 0;
+          .thumbs{
+            display: flex;
+            align-items: center;
+            .thumbList{
+              display: flex;
+              align-items: center;
+              flex-wrap: wrap;
+              gap: 8px;
+            }
+            .colName{
+              flex-shrink: 0;
+            }
+            .thumb{
+              width: 64px;
+              height: 64px;
+              padding: 4px;
+              border-radius: 4px;
+              border: 1px solid rgba(0,0,0,0.15);
+              img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                object-position: center;
+                cursor: pointer;
+              }
+            }
+          }
         }
       }
 
@@ -121,6 +148,10 @@
 
         .info {
           color: #666;
+          &.info_display{
+            display: flex;
+            align-items: center;
+          }
 
           .jiaji {
             margin: 0;

src/app/share/inspection-execute-detail/inspection-execute-detail.component.ts

@@ -47,6 +47,21 @@ export class InspectionExecuteDetailComponent implements OnInit {
     return value.formItemConfigList ? value.formItemConfigList.map(v => v.valuex).toString() : value.valuex;
   }
 
+  // 预览图片
+  imgs = [];
+  isPreview = false;
+  initialViewIndex:number = 0;
+  previewImageHandler(data = [], index = 0) {
+    this.initialViewIndex = index;
+    console.log(index)
+    this.isPreview = false;
+    data = data || [];
+    this.imgs = data.map((v) => location.origin + '/file' + v.relativeFilePath);
+    setTimeout(() => {
+      this.isPreview = true;
+    }, 0)
+  }
+
   // 获取详情
   hsLoading:boolean = false;
   getInfo() {
@@ -82,9 +97,51 @@ export class InspectionExecuteDetailComponent implements OnInit {
       .getFetchDataList("simple/data", "inspectionFormValues", postData)
       .subscribe((data) => {
         let valueList = data.list || [];
+        let imgFlag = valueList.some(v => v.inspectionFormItemDTO.type.value == 7);
+
+        if(imgFlag){
+          valueList.forEach(v => {
+            if(v.inspectionFormItemDTO.type.value == 7){
+              v.valuex = [];
+            }
+          })
+        }
+
         this.valueList = chunk(valueList, 3);
         this.message.remove(this.maskFlag);
         this.maskFlag = false;
+
+        if(imgFlag){
+          this.getImgList();
+        }
+      });
+  }
+
+  // 获取巡检图片
+  getImgList(){
+    this.mainService
+      .getPreviewImage('inspection', this.id)
+      .subscribe((res:any) => {
+        res.data = res.data || [];
+        res.data.forEach(v => {
+          v.previewUrl = location.origin + "/file" + v.relativeFilePath;
+          v.thumbFilePath = location.origin + "/file" + v.thumbFilePath;
+        })
+        let imgList = res.data || [];
+        this.valueList.forEach(v => {
+          v.forEach(vv => {
+            imgList.forEach(item => {
+              if(vv.itemId == item.recordId){
+                if(vv.valuex && vv.valuex.length){
+                  vv.valuex.push(item)
+                }else{
+                  vv.valuex = [item];
+                }
+              }
+            })
+          })
+        })
+        console.log(this.valueList);
       });
   }