From 37529cef3381d1b22cd47bc908d33d282d3e0cef Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Sat, 14 Sep 2024 10:39:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=9EDicom=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uploadDicomAndNonedicom/nonedicomFile.vue | 71 +++++++++++++------
 .../components/uploadNonDicomFiles.vue        | 40 ++++++++---
 .../qc-check/components/qualityAssurance.vue  | 37 ++++++----
 3 files changed, 105 insertions(+), 43 deletions(-)

diff --git a/src/components/uploadDicomAndNonedicom/nonedicomFile.vue b/src/components/uploadDicomAndNonedicom/nonedicomFile.vue
index 9642f150..1ba2b9fd 100644
--- a/src/components/uploadDicomAndNonedicom/nonedicomFile.vue
+++ b/src/components/uploadDicomAndNonedicom/nonedicomFile.vue
@@ -61,16 +61,28 @@
               <el-table-column :label="$t('common:action:action')" width="120">
                 <template slot-scope="files">
                   <!-- 预览 -->
-                  <el-button
-                    circle
-                    icon="el-icon-view"
-                    :title="$t('upload:nonedicom:button:preview')"
-                    :disabled="
-                      files.row.FileType &&
-                      files.row.FileType.indexOf('zip') >= 0
-                    "
-                    @click.native.prevent="previewFile(files.row)"
-                  />
+                  <viewer
+                    :ref="files.row.Path"
+                    style="margin:0 10px;"
+                    :images="[`${OSSclientConfig.basePath}${files.row.Path}`]"
+                  >
+                    <el-button
+                      circle
+                      icon="el-icon-view"
+                      :title="$t('upload:nonedicom:button:preview')"
+                      :disabled="
+                        files.row.FileType &&
+                        files.row.FileType.indexOf('zip') >= 0
+                      "
+                      @click.native.prevent="previewFile(files.row)"
+                    />
+                    <img
+                      v-show="false"
+                      crossorigin="anonymous"
+                      :src="`${OSSclientConfig.basePath}${files.row.Path}`"
+                      alt="Image"
+                    >
+                  </viewer>
                 </template>
               </el-table-column>
             </el-table>
@@ -108,16 +120,28 @@
               <el-table-column :label="$t('common:action:action')" width="120">
                 <template slot-scope="files">
                   <!-- 预览 -->
-                  <el-button
-                    circle
-                    icon="el-icon-view"
-                    :title="$t('upload:nonedicom:button:preview')"
-                    :disabled="
-                      files.row.FileType &&
-                      files.row.FileType.indexOf('zip') >= 0
-                    "
-                    @click.native.prevent="previewFile(files.row)"
-                  />
+                  <viewer
+                    :ref="files.row.Path"
+                    style="margin:0 10px;"
+                    :images="[`${OSSclientConfig.basePath}${files.row.Path}`]"
+                  >
+                    <el-button
+                      circle
+                      icon="el-icon-view"
+                      :title="$t('upload:nonedicom:button:preview')"
+                      :disabled="
+                        files.row.FileType &&
+                        files.row.FileType.indexOf('zip') >= 0
+                      "
+                      @click.native.prevent="previewFile(files.row)"
+                    />
+                    <img
+                      v-show="false"
+                      crossorigin="anonymous"
+                      :src="`${OSSclientConfig.basePath}${files.row.Path}`"
+                      alt="Image"
+                    >
+                  </viewer>
                 </template>
               </el-table-column>
             </el-table>
@@ -548,9 +572,10 @@ export default {
     // 预览文件
     previewFile(row) {
       // window.open(row.FullFilePath, '_blank')
-      this.imgObj.url = row.FullFilePath || row.Path
-      this.imgObj.loading = true
-      this.imgObj.visible = true
+      // this.imgObj.url = row.FullFilePath || row.Path
+      // this.imgObj.loading = true
+      // this.imgObj.visible = true
+      this.$refs[row.Path].$viewer.show()
     },
     // 预览单个检查下非Dicom文件
     handlePreviewNoneDicomFiles(row) {
diff --git a/src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue b/src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue
index 5e6e0137..49ab8de9 100644
--- a/src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue
+++ b/src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue
@@ -69,7 +69,33 @@
               <el-table-column :label="$t('common:action:action')" width="120">
                 <template slot-scope="files">
                   <!-- 预览 -->
+                  <viewer
+                    v-if="files.row.type !== 'MP4'"
+                    :ref="files.row.FullFilePath"
+                    style="margin:0 10px;"
+                    :images="[`${OSSclientConfig.basePath}${files.row.FullFilePath}`]"
+                  >
+                    <el-button
+                      icon="el-icon-view"
+                      circle
+                      :title="$t('trials:uploadNonDicoms:action:preview')"
+                      size="small"
+                      :disabled="
+                        files.row.FileType &&
+                        files.row.FileType.indexOf('zip') >= 0
+                      "
+                      @click.native.prevent="handlePreviewImg(files.row)">
+                    </el-button>
+                    <img
+                      v-show="false"
+                      crossorigin="anonymous"
+                      :src="`${OSSclientConfig.basePath}${files.row.FullFilePath}`"
+                      alt="Image"
+                    >
+                  </viewer>
+                  
                   <el-button
+                    v-if="files.row.type === 'MP4'"
                     icon="el-icon-view"
                     circle
                     :title="$t('trials:uploadNonDicoms:action:preview')"
@@ -78,11 +104,7 @@
                       files.row.FileType &&
                       files.row.FileType.indexOf('zip') >= 0
                     "
-                    @click.native.prevent="
-                      files.row.type === 'MP4'
-                        ? handleLookVideo(scope.row)
-                        : handlePreviewImg(files.row)
-                    "
+                    @click.native.prevent="handleLookVideo(scope.row)"
                   />
                   <!-- 删除 -->
                   <el-button
@@ -495,6 +517,7 @@
           style="height: 500px; width: 500px"
           @error="imageLoading = false"
           @load="imageLoading = false"
+          :preview-src-list="[`${OSSclientConfig.basePath}${imgUrl}`]"
         />
       </div>
     </el-dialog>
@@ -866,9 +889,10 @@ export default {
       })
     },
     handlePreviewImg(row) {
-      this.imgUrl = row.FullFilePath
-      this.previewImgVisible = true
-      this.imageLoading = true
+      // this.imgUrl = row.FullFilePath
+      // this.previewImgVisible = true
+      // this.imageLoading = true
+      this.$refs[row.FullFilePath].$viewer.show()
     },
     beginScanFolder(e) {
       var files = e.target.files
diff --git a/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue b/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue
index 8432df14..9922a3e2 100644
--- a/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue
+++ b/src/views/trials/trials-panel/visit/qc-check/components/qualityAssurance.vue
@@ -417,16 +417,28 @@
                       >
                         <template slot-scope="files">
                           <!-- 预览 -->
-                          <el-button
-                            type="text"
-                            :disabled="
-                              files.row.FileType &&
-                              files.row.FileType.indexOf('zip') >= 0
-                            "
-                            @click.native.prevent="previewFile(files.row)"
+                          <viewer
+                            :ref="files.row.FullFilePath"
+                            style="margin:0 10px;"
+                            :images="[`${OSSclientConfig.basePath}${files.row.FullFilePath}`]"
                           >
-                            {{ $t('trials:audit:button:nonDicomsPreview') }}
-                          </el-button>
+                            <el-button
+                              type="text"
+                              :disabled="
+                                files.row.FileType &&
+                                files.row.FileType.indexOf('zip') >= 0
+                              "
+                              @click.native.prevent="previewFile(files.row)"
+                            >
+                              {{ $t('trials:audit:button:nonDicomsPreview') }}
+                            </el-button> 
+                            <img
+                              v-show="false"
+                              crossorigin="anonymous"
+                              :src="`${OSSclientConfig.basePath}${files.row.FullFilePath}`"
+                              alt="Image"
+                            >
+                          </viewer>
                         </template>
                       </el-table-column>
                     </el-table>
@@ -2335,9 +2347,10 @@ export default {
     // 预览文件
     previewFile(row) {
       // window.open(row.FullFilePath, '_blank')
-      this.imgObj.url = row.FullFilePath
-      this.imgObj.loading = true
-      this.imgObj.visible = true
+      // this.imgObj.url = row.FullFilePath
+      // this.imgObj.loading = true
+      // this.imgObj.visible = true
+      this.$refs[row.FullFilePath].$viewer.show()
     },
     // 预览所有影像
     handleViewImages() {