From ba3cae7a402cb6cf937c3be8f24227d64ed18b57 Mon Sep 17 00:00:00 2001
From: "DESKTOP-6C3NK6N\\WXS" <815034831@qq.com>
Date: Tue, 20 Aug 2024 11:24:43 +0800
Subject: [PATCH] =?UTF-8?q?mim=E5=8C=BB=E5=AD=A6=E5=AE=A1=E6=A0=B8?=
 =?UTF-8?q?=E6=88=AA=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Conclusions.vue                | 355 ++++++++++--------
 1 file changed, 200 insertions(+), 155 deletions(-)

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 2fcdbf54..a19998b7 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
@@ -1,6 +1,5 @@
 <template>
   <div class="conclusions">
-
     <el-form
       ref="conclusionsForm"
       v-loading="loading"
@@ -12,13 +11,15 @@
       <el-form-item
         :label="$t('trials:medicalFeedback:button:isQuestions')"
         prop="IsHaveQuestion"
-        :rules="[
-          { required: true, message: $t('common:ruleMessage:select')},
-        ]"
+        :rules="[{ required: true, message: $t('common:ruleMessage:select') }]"
       >
         <el-radio-group
           v-model="form.IsHaveQuestion"
-          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
+          :disabled="
+            isSendMessage ||
+            auditState === 2 ||
+            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
+          "
           @change="isHaveQuestionChange"
         >
           <el-radio
@@ -38,16 +39,18 @@
         maxlength="500"
         autosize
         show-word-limit
-        :rules="[
-          { required: true, message: $t('common:ruleMessage:specify')},
-        ]"
+        :rules="[{ required: true, message: $t('common:ruleMessage:specify') }]"
       >
         <el-input
           v-model="form.Questioning"
           type="textarea"
-          :autosize="{ minRows: 3, maxRows: 5}"
+          :autosize="{ minRows: 3, maxRows: 5 }"
           maxlength="500"
-          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
+          :disabled="
+            isSendMessage ||
+            auditState === 2 ||
+            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
+          "
         />
       </el-form-item>
       <!-- 审核建议 -->
@@ -55,13 +58,15 @@
         v-if="form.IsHaveQuestion === true"
         :label="$t('trials:medicalFeedback:title:auditAdviceEnum')"
         prop="AuditAdviceEnum"
-        :rules="[
-          { required: true, message: $t('common:ruleMessage:select')},
-        ]"
+        :rules="[{ required: true, message: $t('common:ruleMessage:select') }]"
       >
         <el-radio-group
           v-model="form.AuditAdviceEnum"
-          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
+          :disabled="
+            isSendMessage ||
+            auditState === 2 ||
+            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
+          "
         >
           <el-radio
             v-for="item of $d.AuditAdvice"
@@ -79,26 +84,40 @@
       >
         <el-upload
           :action="accept"
-          :class="{disabled:isSendMessage}"
+          :class="{ disabled: isSendMessage }"
           :on-preview="handlePictureCardPreview"
           :before-upload="handleBeforeUpload"
           :http-request="uploadScreenshot"
           list-type="picture-card"
           :on-remove="handleRemove"
           :file-list="fileList"
-
-          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
-          style="width:300px"
+          :disabled="
+            isSendMessage ||
+            auditState === 2 ||
+            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
+          "
+          style="width: 300px"
         >
           <i slot="default" class="el-icon-plus" />
-          <div slot="file" slot-scope="{file}">
-            <viewer :ref="file.url" :images="images">
+          <div slot="file" slot-scope="{ file }" style="width: 100%; height: 100%">
+            <viewer
+              :ref="file.url"
+              :images="images"
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+              "
+            >
               <img
                 class="el-upload-list__item-thumbnail"
                 :src="OSSclientConfig.basePath + file.url"
                 crossOrigin="anonymous"
                 alt=""
-              >
+                style="max-width: 100%; max-height: 100%"
+              />
               <span class="el-upload-list__item-actions">
                 <span
                   class="el-upload-list__item-preview"
@@ -108,7 +127,7 @@
                 </span>
 
                 <span
-                  v-if="!isSendMessage && auditState!==2"
+                  v-if="!isSendMessage && auditState !== 2"
                   class="el-upload-list__item-delete"
                   @click="handleRemove(file)"
                 >
@@ -130,7 +149,6 @@
           </el-image>
         </el-dialog> -->
       </el-form-item>
-
     </el-form>
     <!-- <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer">
       <img :src="imageUrl"  crossorigin="anonymous" alt="">
@@ -140,7 +158,9 @@
       :visible.sync="chatVisible"
       :close-on-click-modal="false"
       width="800px"
-      :title="`${$t('trials:medicalFeedback:title:qaRecord')} (${subjectCode} ${taskBlindName})`"
+      :title="`${$t(
+        'trials:medicalFeedback:title:qaRecord'
+      )} (${subjectCode} ${taskBlindName})`"
       append-to-body
     >
       <ChatForm
@@ -170,260 +190,285 @@
   </div>
 </template>
 <script>
-import { saveMedicalReviewInfo } from '@/api/trials'
-import ChatForm from './ChatForm'
-import CloseQC from './CloseQC'
-import Viewer from 'v-viewer'
+import { saveMedicalReviewInfo } from "@/api/trials";
+import ChatForm from "./ChatForm";
+import CloseQC from "./CloseQC";
+import Viewer from "v-viewer";
 export default {
-  name: 'AuditConclusions',
+  name: "AuditConclusions",
   components: {
     ChatForm,
-    CloseQC
+    CloseQC,
   },
   props: {
     medicalReviewInfo: {
       type: Object,
       default() {
-        return {}
-      }
+        return {};
+      },
     },
     auditState: {
       type: Number,
-      required: true
+      required: true,
     },
     visitTaskId: {
       type: String,
-      required: true
+      required: true,
     },
     subjectCode: {
       type: String,
-      required: true
+      required: true,
     },
     taskBlindName: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       form: {
-        TaskMedicalReviewId: '',
+        TaskMedicalReviewId: "",
         IsHaveQuestion: null,
-        Questioning: '',
+        Questioning: "",
         AuditAdviceEnum: null,
-        FileList: []
+        FileList: [],
       },
 
       loading: false,
-      accept: '.png,.jpg,.jpeg',
+      accept: ".png,.jpg,.jpeg",
       imgVisible: false,
-      imageUrl: '',
+      imageUrl: "",
       uploadDisabled: false,
       fileList: [],
       chatVisible: false,
-      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
+      userTypeEnumInt: zzSessionStorage.getItem("userTypeEnumInt") * 1,
       isClosedDialog: false,
       isSendMessage: false,
       closeQuestionVisible: false,
-      images: []
-    }
+      images: [],
+    };
   },
   mounted() {
-    this.initializeViewer()
-    this.initForm()
+    this.initializeViewer();
+    this.initForm();
   },
   methods: {
     initForm() {
       if (Object.keys(this.medicalReviewInfo).length > 0) {
         for (const k in this.form) {
           if (this.medicalReviewInfo.hasOwnProperty(k)) {
-            this.form[k] = this.medicalReviewInfo[k]
+            this.form[k] = this.medicalReviewInfo[k];
           }
         }
-        this.fileList = []
+        this.fileList = [];
         if (this.form.FileList) {
-          this.form.FileList.map(file => {
-            this.fileList.push({ name: file.FileName, url: file.ImagePath })
-          })
+          this.form.FileList.map((file) => {
+            this.fileList.push({ name: file.FileName, url: file.ImagePath });
+          });
         }
-        this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog
-        this.isSendMessage = this.medicalReviewInfo.IsSendMessage
+        this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog;
+        this.isSendMessage = this.medicalReviewInfo.IsSendMessage;
       }
     },
     handleSave(isPrompt) {
       return new Promise((resolve, reject) => {
-        this.$refs['conclusionsForm'].validate((valid) => {
+        this.$refs["conclusionsForm"].validate((valid) => {
           if (!valid) {
-            reject()
+            reject();
           } else {
-            this.form.IsSendDialog = this.form.IsHaveQuestion
-            var files = []
-            this.fileList.map(file => {
-              files.push({ FileName: file.name, ImagePath: file.url })
-            })
-            this.form.FileList = files
-            saveMedicalReviewInfo(this.form).then(res => {
-              if (isPrompt) {
-                this.$message.success(this.$t('common:message:savedSuccessfully'))
-                this.$emit('getMedicalAuditList')
-              }
-              this.isSendMessage = this.form.IsHaveQuestion
-              resolve()
-            }).catch(() => {
-              reject()
-            })
+            this.form.IsSendDialog = this.form.IsHaveQuestion;
+            var files = [];
+            this.fileList.map((file) => {
+              files.push({ FileName: file.name, ImagePath: file.url });
+            });
+            this.form.FileList = files;
+            saveMedicalReviewInfo(this.form)
+              .then((res) => {
+                if (isPrompt) {
+                  this.$message.success(
+                    this.$t("common:message:savedSuccessfully")
+                  );
+                  this.$emit("getMedicalAuditList");
+                }
+                this.isSendMessage = this.form.IsHaveQuestion;
+                resolve();
+              })
+              .catch(() => {
+                reject();
+              });
           }
-        })
-      })
+        });
+      });
     },
     save() {
       return new Promise((resolve, reject) => {
-        this.$refs['conclusionsForm'].validate((valid) => {
+        this.$refs["conclusionsForm"].validate((valid) => {
           if (!valid) {
-            resolve(false)
+            resolve(false);
           } else {
-            this.loading = true
-            this.form.IsSendDialog = this.form.IsHaveQuestion
-            var files = []
-            this.fileList.map(file => {
-              files.push({ FileName: file.name, ImagePath: file.url })
-            })
-            this.form.FileList = files
-            saveMedicalReviewInfo(this.form).then(res => {
-              this.$emit('getMedicalAuditList')
-              this.isSendMessage = this.form.IsHaveQuestion
-              this.loading = false
-              resolve(true)
-            }).catch(() => {
-              this.loading = false
-              reject()
-            })
+            this.loading = true;
+            this.form.IsSendDialog = this.form.IsHaveQuestion;
+            var files = [];
+            this.fileList.map((file) => {
+              files.push({ FileName: file.name, ImagePath: file.url });
+            });
+            this.form.FileList = files;
+            saveMedicalReviewInfo(this.form)
+              .then((res) => {
+                this.$emit("getMedicalAuditList");
+                this.isSendMessage = this.form.IsHaveQuestion;
+                this.loading = false;
+                resolve(true);
+              })
+              .catch(() => {
+                this.loading = false;
+                reject();
+              });
           }
-        })
-      })
+        });
+      });
     },
     validForm() {
       return new Promise((resolve) => {
-        this.$refs['conclusionsForm'].validate((valid) => {
-          resolve(valid)
-        })
-      })
+        this.$refs["conclusionsForm"].validate((valid) => {
+          resolve(valid);
+        });
+      });
     },
     handleReply() {
-      this.chatVisible = true
+      this.chatVisible = true;
     },
     handleCloseReply() {
-      this.closeQuestionVisible = true
+      this.closeQuestionVisible = true;
     },
     isHaveQuestionChange(val) {
-      this.$emit('setIsHaveQuestion', val)
+      this.$emit("setIsHaveQuestion", val);
     },
     refresh() {
-      this.isClosedDialog = true
-      this.$emit('getMedicalAuditList')
-      this.$refs['chatForm'].getMessageList()
-      this.$emit('handleSign')
+      this.isClosedDialog = true;
+      this.$emit("getMedicalAuditList");
+      this.$refs["chatForm"].getMessageList();
+      this.$emit("handleSign");
     },
     convertBase64ToBlob(imageEditorBase64) {
-      var base64Arr = imageEditorBase64.split(',')
-      var imgtype = ''
-      var base64String = ''
+      var base64Arr = imageEditorBase64.split(",");
+      var imgtype = "";
+      var base64String = "";
       if (base64Arr.length > 1) {
         // 如果是图片base64，去掉头信息
-        base64String = base64Arr[1]
+        base64String = base64Arr[1];
         imgtype = base64Arr[0].substring(
-          base64Arr[0].indexOf(':') + 1,
-          base64Arr[0].indexOf(';')
-        )
+          base64Arr[0].indexOf(":") + 1,
+          base64Arr[0].indexOf(";")
+        );
       }
       // 将base64解码
-      var bytes = atob(base64String)
+      var bytes = atob(base64String);
       // var bytes = base64;
-      var bytesCode = new ArrayBuffer(bytes.length)
+      var bytesCode = new ArrayBuffer(bytes.length);
       // 转换为类型化数组
-      var byteArray = new Uint8Array(bytesCode)
+      var byteArray = new Uint8Array(bytesCode);
 
       // 将base64转换为ascii码
       for (var i = 0; i < bytes.length; i++) {
-        byteArray[i] = bytes.charCodeAt(i)
+        byteArray[i] = bytes.charCodeAt(i);
       }
 
       // 生成Blob对象（文件对象）
-      return new Blob([bytesCode], { type: imgtype })
+      return new Blob([bytesCode], { type: imgtype });
     },
     async uploadScreenshot(param) {
-      this.loading = true
+      this.loading = true;
       try {
-        var file = await this.fileToBlob(param.file)
-        var trialId = this.$route.query.trialId
-        const res = await this.OSSclient.put(`/${trialId}/MedicalReview/${param.file.name}`, file)
-        this.fileList.push({ name: param.file.name, url: this.$getObjectName(res.url) })
-        this.loading = false
+        var file = await this.fileToBlob(param.file);
+        var trialId = this.$route.query.trialId;
+        const res = await this.OSSclient.put(
+          `/${trialId}/MedicalReview/${param.file.name}`,
+          file
+        );
+        this.fileList.push({
+          name: param.file.name,
+          url: this.$getObjectName(res.url),
+        });
+        this.loading = false;
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     },
     handleBeforeUpload(file) {
       // 检测文件类型是否符合要求
       if (this.checkFileSuffix(file.name)) {
-        return true
+        return true;
       } else {
-        var msg = this.$t('trials:medicalFeedback:message:format')
-        msg = msg.replace('xxx', this.accept)
-        this.$alert(msg)
-        return false
+        var msg = this.$t("trials:medicalFeedback:message:format");
+        msg = msg.replace("xxx", this.accept);
+        this.$alert(msg);
+        return false;
       }
     },
     checkFileSuffix(fileName) {
-      var index = fileName.lastIndexOf('.')
-      var suffix = fileName.substring(index + 1, fileName.length)
-      if (this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
-        return false
+      var index = fileName.lastIndexOf(".");
+      var suffix = fileName.substring(index + 1, fileName.length);
+      if (
+        this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) ===
+        -1
+      ) {
+        return false;
       } else {
-        return true
+        return true;
       }
     },
     // 预览图片
     handlePictureCardPreview(file) {
-      this.images = this.fileList.map(f => this.OSSclientConfig.basePath + f.url)
+      this.images = this.fileList.map(
+        (f) => this.OSSclientConfig.basePath + f.url
+      );
       // this.imageUrl = this.OSSclientConfig.basePath + file.url
-      this.$refs[file.url].$viewer.show()
+      this.$refs[file.url].$viewer.show();
     },
     // 删除图片
     handleRemove(file, fileList) {
-      var idx = this.fileList.findIndex(i => i.url === file.url)
-      if (idx === -1) return
-      this.fileList.splice(idx, 1)
+      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 }
-      })
-    }
-  }
-}
+        toolbar: {
+          zoomIn: true,
+          zoomOut: true,
+          rotateLeft: true,
+          rotateRight: true,
+          flipHorizontal: true,
+          flipVertical: true,
+        },
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-.conclusions{
-  .disabled{
+.conclusions {
+  .disabled {
     /deep/ .el-upload--picture-card {
       display: none;
-
     }
   }
-  /deep/  .el-upload-list__item {
+  /deep/ .el-upload-list__item {
     transition: none !important;
-    width:140px;
+    width: 140px;
     height: 140px;
     margin: 0 10px 5px 0;
   }
-  /deep/  .el-upload-list__item-thumbnail {
-      /* 图片在方框内显示长边 */
-      object-fit: scale-down !important;
+  /deep/ .el-upload-list__item-thumbnail {
+    /* 图片在方框内显示长边 */
+    object-fit: scale-down !important;
   }
-  .el-radio-group,.el-textarea,.el-input,.el-select{
-    width:300px;
+  .el-radio-group,
+  .el-textarea,
+  .el-input,
+  .el-select {
+    width: 300px;
   }
-
 }
 </style>