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

@@ -1,5 +1,6 @@
 <template>
   <div class="conclusions">
+
     <el-form
       ref="conclusionsForm"
       v-loading="loading"
@@ -11,15 +12,13 @@
       <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="
+          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
-            isSendMessage ||
-            auditState === 2 ||
-            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
-          "
           @change="isHaveQuestionChange"
         >
           <el-radio
@@ -39,18 +38,16 @@
         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="
+          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
-            isSendMessage ||
-            auditState === 2 ||
-            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
-          "
         />
       </el-form-item>
       <!-- 审核建议 -->
@@ -58,15 +55,13 @@
         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="
+          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
-            isSendMessage ||
-            auditState === 2 ||
-            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
-          "
         >
           <el-radio
             v-for="item of $d.AuditAdvice"
@@ -84,40 +79,26 @@
       >
         <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 ||
+          :disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])"
-            auditState === 2 ||
+          style="width:300px"
-            !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 }" style="width: 100%; height: 100%">
+          <div slot="file" slot-scope="{file}">
-            <viewer
+            <viewer :ref="file.url" :images="images">
-              :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"
@@ -127,7 +108,7 @@
                 </span>
 
                 <span
-                  v-if="!isSendMessage && auditState !== 2"
+                  v-if="!isSendMessage && auditState!==2"
                   class="el-upload-list__item-delete"
                   @click="handleRemove(file)"
                 >
@@ -149,6 +130,7 @@
           </el-image>
         </el-dialog> -->
       </el-form-item>
+
     </el-form>
     <!-- <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer">
       <img :src="imageUrl"  crossorigin="anonymous" alt="">
@@ -158,9 +140,7 @@
       :visible.sync="chatVisible"
       :close-on-click-modal="false"
       width="800px"
-      :title="`${$t(
+      :title="`${$t('trials:medicalFeedback:title:qaRecord')} (${subjectCode} ${taskBlindName})`"
-        'trials:medicalFeedback:title:qaRecord'
-      )} (${subjectCode} ${taskBlindName})`"
       append-to-body
     >
       <ChatForm
@@ -190,273 +170,250 @@
   </div>
 </template>
 <script>
-import { saveMedicalReviewInfo } from "@/api/trials";
+import { saveMedicalReviewInfo } from '@/api/trials'
-import ChatForm from "./ChatForm";
+import ChatForm from './ChatForm'
-import CloseQC from "./CloseQC";
+import CloseQC from './CloseQC'
-import Viewer from "v-viewer";
+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.initializeViewer()
-    this.initForm();
+    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.form.FileList.map(file => {
-            this.fileList.push({ name: file.FileName, url: file.ImagePath });
+            this.fileList.push({ name: file.FileName, url: file.ImagePath })
-          });
+          })
         }
-        this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog;
+        this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog
-        this.isSendMessage = this.medicalReviewInfo.IsSendMessage;
+        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;
+            this.form.IsSendDialog = this.form.IsHaveQuestion
-            var files = [];
+            var files = []
-            this.fileList.map((file) => {
+            this.fileList.map(file => {
-              files.push({ FileName: file.name, ImagePath: file.url });
+              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(() => {
+            this.form.FileList = files
-                reject();
+            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.loading = true
-            this.form.IsSendDialog = this.form.IsHaveQuestion;
+            this.form.IsSendDialog = this.form.IsHaveQuestion
-            var files = [];
+            var files = []
-            this.fileList.map((file) => {
+            this.fileList.map(file => {
-              files.push({ FileName: file.name, ImagePath: file.url });
+              files.push({ FileName: file.name, ImagePath: file.url })
-            });
+            })
-            this.form.FileList = files;
+            this.form.FileList = files
-            saveMedicalReviewInfo(this.form)
+            saveMedicalReviewInfo(this.form).then(res => {
-              .then((res) => {
+              this.$emit('getMedicalAuditList')
-                this.$emit("getMedicalAuditList");
+              this.isSendMessage = this.form.IsHaveQuestion
-                this.isSendMessage = this.form.IsHaveQuestion;
+              this.loading = false
-                this.loading = false;
+              resolve(true)
-                resolve(true);
+            }).catch(() => {
+              this.loading = false
+              reject()
             })
-              .catch(() => {
-                this.loading = false;
-                reject();
-              });
           }
-        });
+        })
-      });
+      })
     },
     validForm() {
       return new Promise((resolve) => {
-        this.$refs["conclusionsForm"].validate((valid) => {
+        this.$refs['conclusionsForm'].validate((valid) => {
-          resolve(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.isClosedDialog = true
-      this.$emit("getMedicalAuditList");
+      this.$emit('getMedicalAuditList')
-      this.$refs["chatForm"].getMessageList();
+      this.$refs['chatForm'].getMessageList()
-      this.$emit("handleSign");
+      this.$emit('handleSign')
     },
     convertBase64ToBlob(imageEditorBase64) {
-      var base64Arr = imageEditorBase64.split(",");
+      var base64Arr = imageEditorBase64.split(',')
-      var imgtype = "";
+      var imgtype = ''
-      var base64String = "";
+      var base64String = ''
       if (base64Arr.length > 1) {
         // 如果是图片base64，去掉头信息
-        base64String = base64Arr[1];
+        base64String = base64Arr[1]
         imgtype = base64Arr[0].substring(
-          base64Arr[0].indexOf(":") + 1,
+          base64Arr[0].indexOf(':') + 1,
-          base64Arr[0].indexOf(";")
+          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 file = await this.fileToBlob(param.file)
-        var trialId = this.$route.query.trialId;
+        var trialId = this.$route.query.trialId
-        const res = await this.OSSclient.put(
+        const res = await this.OSSclient.put(`/${trialId}/MedicalReview/${param.file.name}`, file)
-          `/${trialId}/MedicalReview/${param.file.name}`,
+        this.fileList.push({ name: param.file.name, url: this.$getObjectName(res.url) })
-          file
+        this.loading = false
-        );
-        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");
+        var msg = this.$t('trials:medicalFeedback:message:format')
-        msg = msg.replace("xxx", this.accept);
+        msg = msg.replace('xxx', this.accept)
-        this.$alert(msg);
+        this.$alert(msg)
-        return false;
+        return false
       }
     },
     checkFileSuffix(fileName) {
-      var index = fileName.lastIndexOf(".");
+      var index = fileName.lastIndexOf('.')
-      var suffix = fileName.substring(index + 1, fileName.length);
+      var suffix = fileName.substring(index + 1, fileName.length)
-      if (
+      if (this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
-        this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) ===
+        return false
-        -1
-      ) {
-        return false;
       } else {
-        return true;
+        return true
       }
     },
     // 预览图片
     handlePictureCardPreview(file) {
-      this.images = this.fileList.map(
+      this.images = this.fileList.map(f => this.OSSclientConfig.basePath + f.url)
-        (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);
+      var idx = this.fileList.findIndex(i => i.url === file.url)
-      if (idx === -1) return;
+      if (idx === -1) return
-      this.fileList.splice(idx, 1);
+      this.fileList.splice(idx, 1)
     },
     initializeViewer() {
       Viewer.setDefaults({
-        toolbar: {
+        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true }
-          zoomIn: true,
+      })
-          zoomOut: true,
+    }
-          rotateLeft: true,
+  }
-          rotateRight: true,
+}
-          flipHorizontal: true,
-          flipVertical: true,
-        },
-      });
-    },
-  },
-};
 </script>
 <style lang="scss" scoped>
-.conclusions {
+.conclusions{
-  .disabled {
+  .disabled{
     /deep/ .el-upload--picture-card {
       display: none;
+
     }
   }
   /deep/  .el-upload-list__item {
     transition: none !important;
-    width: 140px;
+    width:140px;
     height: 140px;
     margin: 0 10px 5px 0;
   }
@@ -464,11 +421,9 @@ export default {
       /* 图片在方框内显示长边 */
       object-fit: scale-down !important;
   }
-  .el-radio-group,
+  .el-radio-group,.el-textarea,.el-input,.el-select{
-  .el-textarea,
+    width:300px;
-  .el-input,
-  .el-select {
-    width: 300px;
   }
+
 }
 </style>