From be96158a73d81a04e81d4edae512d80c94826abd Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Tue, 16 Jul 2024 11:22:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BB=E5=AD=A6=E5=AE=A1=E6=A0=B8=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../medical-feedback/components/ChatForm.vue  | 45 ++++++++++---------
 .../mim-medical-audit/components/ChatForm.vue | 45 +++++++++++--------
 .../components/Conclusions.vue                | 17 +++++--
 3 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue b/src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue
index d618c1c9..35d7bb17 100644
--- a/src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue
+++ b/src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue
@@ -29,11 +29,22 @@
                   {{ $t('trials:medicalFeedback:message:msg2') }}
                   <ol>
                     <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;">
-                      <el-button
-                        type="text"
-                        size="mini"
-                        @click="previewImage(file.ImagePath)"
-                      >{{ file.FileName }}</el-button>
+                      <viewer
+                        v-if="file.ImagePath"
+                        :ref="file.ImagePath"
+                        style="margin:0 10px;"
+                        :images="[`${OSSclientConfig.basePath}${file.ImagePath}`]"
+                      >
+                        <el-button type="text" @click="previewImage(file.ImagePath)">
+                          {{ file.FileName }}
+                        </el-button>
+                        <img
+                          v-show="false"
+                          crossorigin="anonymous"
+                          :src="`${OSSclientConfig.basePath}${file.ImagePath}`"
+                          alt="Image"
+                        >
+                      </viewer>
                     </li>
                   </ol>
                 </div>
@@ -97,22 +108,6 @@
       </div>
 
     </div>
-    <el-dialog
-      v-if="previewDialog"
-      append-to-body
-      :close-on-click-modal="false"
-      :visible.sync="previewDialog"
-      width="600px"
-    >
-      <!-- <img width="100%" :src="imagePath" alt="图片未找到"> -->
-      <el-image :src="imagePath" crossorigin="anonymous" width="100%">
-        <div slot="placeholder" class="image-slot">
-          <!-- 加载中 -->
-          {{ $t('trials:medicalFeedback:message:loading') }}<span class="dot">...</span>
-        </div>
-      </el-image>
-
-    </el-dialog>
 
     <el-dialog
       v-if="irFeedbackForm.visible"
@@ -137,6 +132,7 @@ import { getMedicalReviewDialog } from '@/api/trials'
 import FeedbackForm from './FeedbackForm'
 import mimAvatar from '@/assets/MIM.png'
 import irAvatar from '@/assets/IR.png'
+import Viewer from 'v-viewer'
 export default {
   name: 'ChatForm',
   components: { FeedbackForm },
@@ -170,6 +166,7 @@ export default {
     }
   },
   mounted() {
+    this.initializeViewer()
     this.getMessageList()
   },
   methods: {
@@ -204,6 +201,12 @@ export default {
     previewImage(path) {
       this.imagePath = `${this.OSSclientConfig.basePath}${path}`
       this.previewDialog = true
+      this.$refs[path][0].$viewer.show()
+    },
+    initializeViewer() {
+      Viewer.setDefaults({
+        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
+      })
     }
   }
 
diff --git a/src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue b/src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue
index 27dee3bf..a51c3169 100644
--- a/src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue
+++ b/src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue
@@ -28,12 +28,23 @@
                   <!-- 本次医学审核相关截图（如适用）如下： -->
                   {{ $t('trials:medicalFeedback:message:msg2') }}
                   <ol>
-                    <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;">
-                      <el-button
-                        type="text"
-                        size="mini"
-                        @click="previewImage(file.ImagePath)"
-                      >{{ file.FileName }}</el-button>
+                    <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;"> 
+                      <viewer
+                        v-if="file.ImagePath"
+                        :ref="file.ImagePath"
+                        style="margin:0 10px;"
+                        :images="[`${OSSclientConfig.basePath}${file.ImagePath}`]"
+                      >
+                        <el-button type="text" @click="previewImage(file.ImagePath)">
+                          {{ file.FileName }}
+                        </el-button>
+                        <img
+                          v-show="false"
+                          crossorigin="anonymous"
+                          :src="`${OSSclientConfig.basePath}${file.ImagePath}`"
+                          alt="Image"
+                        >
+                      </viewer>
                     </li>
                   </ol>
                 </div>
@@ -125,19 +136,6 @@
       </div>
     </div>
 
-    <el-dialog
-      append-to-body
-      :visible.sync="previewDialog"
-      width="600px"
-    >
-      <!-- <img width="100%" :src="imagePath" alt="图片未找到"> -->
-      <el-image :src="OSSclientConfig.basePath + imagePath" width="100%" crossorigin="anonymous">
-        <div slot="placeholder" class="image-slot">
-          {{ $t('trials:medicalFeedback:message:loading') }}<span class="dot">...</span>
-        </div>
-      </el-image>
-    </el-dialog>
-
     <el-dialog
       v-if="irFeedbackForm.visible"
       :visible.sync="irFeedbackForm.visible"
@@ -154,6 +152,7 @@
         @close="irFeedbackForm.visible = false"
       />
     </el-dialog>
+    
   </div>
 </template>
 <script>
@@ -161,6 +160,7 @@ import { getMedicalReviewDialog, sendMedicalReviewDialog } from '@/api/trials'
 import FeedbackForm from '@/views/trials/trials-panel/reading/medical-feedback/components/FeedbackForm'
 import mimAvatar from '@/assets/MIM.png'
 import irAvatar from '@/assets/IR.png'
+import Viewer from 'v-viewer'
 export default {
   name: 'ChatForm',
   components: {
@@ -196,6 +196,7 @@ export default {
     }
   },
   mounted() {
+    this.initializeViewer()
     this.getMessageList()
   },
   methods: {
@@ -242,12 +243,18 @@ export default {
     previewImage(path) {
       this.imagePath = `${path}`
       this.previewDialog = true
+      this.$refs[path][0].$viewer.show()
     },
     handleIRReply() {
       // '反馈'
       this.irFeedbackForm.title = this.$t('trials:medicalFeedback:title:feedback')
 
       this.irFeedbackForm.visible = true
+    },
+    initializeViewer() {
+      Viewer.setDefaults({
+        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
+      })
     }
   }
 
diff --git a/src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue b/src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue
index 07ed536d..99781199 100644
--- a/src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue
+++ b/src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue
@@ -116,22 +116,23 @@
             </span>
           </div>
         </el-upload>
-        <el-dialog
+        <!-- <el-dialog
           append-to-body
           :visible.sync="imgVisible"
           width="600px"
         >
-          <!-- <img width="100%" :src="imageUrl" alt="图片未找到"> -->
           <el-image :src="imageUrl" width="100%" crossorigin="anonymous">
             <div slot="placeholder" class="image-slot">
               {{ $t('trials:medicalFeedback:message:loading') }}<span class="dot">...</span>
             </div>
           </el-image>
-        </el-dialog>
+        </el-dialog> -->
       </el-form-item>
 
     </el-form>
-
+    <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer">
+      <img :src="imageUrl"  crossorigin="anonymous" alt="">
+    </viewer>
     <el-dialog
       v-if="chatVisible"
       :visible.sync="chatVisible"
@@ -170,6 +171,7 @@
 import { saveMedicalReviewInfo } from '@/api/trials'
 import ChatForm from './ChatForm'
 import CloseQC from './CloseQC'
+import Viewer from 'v-viewer'
 export default {
   name: 'AuditConclusions',
   components: {
@@ -224,6 +226,7 @@ export default {
     }
   },
   mounted() {
+    this.initializeViewer()
     this.initForm()
   },
   methods: {
@@ -381,12 +384,18 @@ export default {
     handlePictureCardPreview(file) {
       this.imageUrl = this.OSSclientConfig.basePath + file.url
       this.imgVisible = true
+      this.$refs.viewer.$viewer.show()
     },
     // 删除图片
     handleRemove(file, fileList) {
       var idx = this.fileList.findIndex(i => i.url === file.url)
       if (idx === -1) return
       this.fileList.splice(idx, 1)
+    },
+    initializeViewer() {
+      Viewer.setDefaults({
+        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
+      })
     }
   }
 }