src/views/trials/trials-panel/reading/medical-feedback/components/ChatForm.vue

@@ -29,22 +29,11 @@
                   {{ $t('trials:medicalFeedback:message:msg2') }}
                   <ol>
                     <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;">
-                      <viewer
+                      <el-button
-                        v-if="file.ImagePath"
+                        type="text"
-                        :ref="file.ImagePath"
+                        size="mini"
-                        style="margin:0 10px;"
+                        @click="previewImage(file.ImagePath)"
-                        :images="[`${OSSclientConfig.basePath}${file.ImagePath}`]"
+                      >{{ file.FileName }}</el-button>
-                      >
-                        <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>
@@ -108,6 +97,22 @@
       </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"
@@ -132,7 +137,6 @@ 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 },
@@ -166,7 +170,6 @@ export default {
     }
   },
   mounted() {
-    this.initializeViewer()
     this.getMessageList()
   },
   methods: {
@@ -201,12 +204,6 @@ 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 }
-      })
     }
   }
 

src/views/trials/trials-panel/reading/mim-medical-audit/components/ChatForm.vue

@@ -28,23 +28,12 @@
                   <!-- 本次医学审核相关截图（如适用）如下： -->
                   {{ $t('trials:medicalFeedback:message:msg2') }}
                   <ol>
-                    <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;"> 
+                    <li v-for="file in record.FileList" :key="file.ImagePath" style="list-style: none;">
-                      <viewer
+                      <el-button
-                        v-if="file.ImagePath"
+                        type="text"
-                        :ref="file.ImagePath"
+                        size="mini"
-                        style="margin:0 10px;"
+                        @click="previewImage(file.ImagePath)"
-                        :images="[`${OSSclientConfig.basePath}${file.ImagePath}`]"
+                      >{{ file.FileName }}</el-button>
-                      >
-                        <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>
@@ -136,6 +125,19 @@
       </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"
@@ -152,7 +154,6 @@
         @close="irFeedbackForm.visible = false"
       />
     </el-dialog>
-    
   </div>
 </template>
 <script>
@@ -160,7 +161,6 @@ 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,7 +196,6 @@ export default {
     }
   },
   mounted() {
-    this.initializeViewer()
     this.getMessageList()
   },
   methods: {
@@ -243,18 +242,12 @@ 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 }
-      })
     }
   }
 

src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue

@@ -116,23 +116,22 @@
             </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"
@@ -171,7 +170,6 @@
 import { saveMedicalReviewInfo } from '@/api/trials'
 import ChatForm from './ChatForm'
 import CloseQC from './CloseQC'
-import Viewer from 'v-viewer'
 export default {
   name: 'AuditConclusions',
   components: {
@@ -226,7 +224,6 @@ export default {
     }
   },
   mounted() {
-    this.initializeViewer()
     this.initForm()
   },
   methods: {
@@ -384,18 +381,12 @@ 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 }
-      })
     }
   }
 }