上传图片预览样式修改1

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

@@ -1,14 +1,15 @@
 <template>
   <div class="ad_review_wrapper">
     <div style="text-align: left">
-      <el-button v-if="auditInfo.IsExistsClinicalData" type="text" @click="previewCD">
-        {{ $t('trials:adReview:title:clinicalData') }}
+      <el-button
+        v-if="auditInfo.IsExistsClinicalData"
+        type="text"
+        @click="previewCD"
+      >
+        {{ $t("trials:adReview:title:clinicalData") }}
       </el-button>
     </div>
-    <el-table
-      :data="adInfo.VisitInfoList"
-      style="width: 100%"
-    >
+    <el-table :data="adInfo.VisitInfoList" style="width: 100%">
       <!-- 访视名称 -->
       <el-table-column
         prop="VisitName"
@@ -36,28 +37,83 @@
             width="150"
           >
             <template slot-scope="scope">
-              <div v-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].QuestionType===1">
-                <span v-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].DictionaryCode">{{ $fd(scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].DictionaryCode, parseInt(scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer )) }}</span>
-                <span v-else>{{ scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer }}</span>
+              <div
+                v-if="
+                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                    .QuestionType === 1
+                "
+              >
+                <span
+                  v-if="
+                    scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                      .DictionaryCode
+                  "
+                  >{{
+                    $fd(
+                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                        .DictionaryCode,
+                      parseInt(
+                        scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[
+                          i
+                        ].Answer
+                      )
+                    )
+                  }}</span
+                >
+                <span v-else>{{
+                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                    .Answer
+                }}</span>
               </div>
-              <div v-else-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].QuestionType===2">
-                <div v-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer">
-                  <span>{{ $fd('YesOrNo', scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer ) }}</span>
+              <div
+                v-else-if="
+                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                    .QuestionType === 2
+                "
+              >
+                <div
+                  v-if="
+                    scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                      .Answer
+                  "
+                >
+                  <span>{{
+                    $fd(
+                      "YesOrNo",
+                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                        .Answer
+                    )
+                  }}</span>
                   <!-- 查看详情 -->
                   <el-button
                     type="text"
-                    style="margin-left:5px;"
-                    @click="handleViewDetail(scope.row.VisitTaskInfoList[j.index].GlobalVisitTaskId)"
+                    style="margin-left: 5px"
+                    @click="
+                      handleViewDetail(
+                        scope.row.VisitTaskInfoList[j.index].GlobalVisitTaskId
+                      )
+                    "
                   >
-                    {{ $t('trials:adReview:table:view') }}
+                    {{ $t("trials:adReview:table:view") }}
                   </el-button>
                 </div>
 
                 <div v-else>
-                  {{ $fd('YesOrNo', scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer ) }}
+                  {{
+                    $fd(
+                      "YesOrNo",
+                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                        .Answer
+                    )
+                  }}
                 </div>
               </div>
-              <div v-else>{{ scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer }}</div>
+              <div v-else>
+                {{
+                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
+                    .Answer
+                }}
+              </div>
             </template>
           </el-table-column>
         </template>
@@ -88,7 +144,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <h3>{{ $t('trials:adReview:title:adResult') }}</h3>
+    <h3>{{ $t("trials:adReview:title:adResult") }}</h3>
     <el-form
       ref="adForm"
       :model="adForm"
@@ -100,16 +156,13 @@
         :label="$t('trials:adReview:title:choseReader')"
         prop="judgeResultTaskId"
       >
-        <el-radio-group
-          v-model="adForm.judgeResultTaskId"
-          disabled
-        >
+        <el-radio-group v-model="adForm.judgeResultTaskId" disabled>
           <el-radio
             v-for="t in visitTaskArmList"
             :key="t.VisitTaskId"
             :label="t.VisitTaskId"
           >
-            {{ $fd('ArmEnum', t.ArmEnum) }}
+            {{ $fd("ArmEnum", t.ArmEnum) }}
           </el-radio>
         </el-radio-group>
       </el-form-item>
@@ -126,9 +179,7 @@
         />
       </el-form-item>
       <!-- 截图说明 -->
-      <el-form-item
-        :label="$t('trials:adReview:title:screenShot')"
-      >
+      <el-form-item :label="$t('trials:adReview:title:screenShot')">
         <el-upload
           action=".png,.jpg,.jpeg"
           list-type="picture-card"
@@ -137,14 +188,29 @@
           class="disabled"
         >
           <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"
                 alt=""
                 crossorigin="anonymous"
-                >
+                style="max-width: 100%; max-height: 100%"
+              />
               <span class="el-upload-list__item-actions">
                 <span
                   class="el-upload-list__item-preview"
@@ -156,11 +222,7 @@
             </viewer>
           </div>
         </el-upload>
-        <el-dialog
-          append-to-body
-          :visible.sync="imgVisible"
-          width="600px"
-        >
+        <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">
@@ -173,127 +235,155 @@
   </div>
 </template>
 <script>
-import { getToken } from '@/utils/auth'
+import { getToken } from "@/utils/auth";
 export default {
-  name: 'AReview',
+  name: "AReview",
   props: {
     auditInfo: {
       type: Object,
       default() {
-        return {}
-      }
+        return {};
+      },
     },
     rowData: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
       adInfo: {},
       adForm: {},
       imgVisible: false,
-      imageUrl: '',
+      imageUrl: "",
       fileList: [],
       visitTaskArmList: [],
       judgeQuestion: [],
-      isFixed: false
-    }
+      isFixed: false,
+    };
   },
   mounted() {
-    this.initPage()
+    this.initPage();
   },
   methods: {
     initPage() {
-      var JudgeInfo = this.auditInfo.JudgeInfo
-      var judgeQS = []
+      var JudgeInfo = this.auditInfo.JudgeInfo;
+      var judgeQS = [];
       if (JudgeInfo.VisitInfoList.length > 0) {
         JudgeInfo.VisitInfoList[0].VisitTaskInfoList.map((v, index) => {
-          var qsObj = { armEnum: v.ArmEnum, judgeQuestionList: [], index: index }
-          v.JudgeQuestionList.map(q => {
+          var qsObj = {
+            armEnum: v.ArmEnum,
+            judgeQuestionList: [],
+            index: index,
+          };
+          v.JudgeQuestionList.map((q) => {
             if (q.QuestionType === 1) {
-              qsObj.judgeQuestionList.push(q.QuestionName)
+              qsObj.judgeQuestionList.push(q.QuestionName);
             } else {
-              qsObj.judgeQuestionList.push(this.$fd('JudgeReadingQuestionType', q.QuestionType))
+              qsObj.judgeQuestionList.push(
+                this.$fd("JudgeReadingQuestionType", q.QuestionType)
+              );
             }
-          })
-          judgeQS.push(qsObj)
-        })
+          });
+          judgeQS.push(qsObj);
+        });
       }
-      this.judgeQuestion = judgeQS
-      this.isFixed = this.judgeQuestion.length > 0 && this.judgeQuestion[0].judgeQuestionList.length > 4
+      this.judgeQuestion = judgeQS;
+      this.isFixed =
+        this.judgeQuestion.length > 0 &&
+        this.judgeQuestion[0].judgeQuestionList.length > 4;
 
-      this.adInfo = JudgeInfo
-      this.adForm.judgeResultTaskId = JudgeInfo.JudgeResultTaskId
+      this.adInfo = JudgeInfo;
+      this.adForm.judgeResultTaskId = JudgeInfo.JudgeResultTaskId;
 
-      this.adForm.judgeResultRemark = JudgeInfo.JudgeResultRemark
-      this.fileList = []
+      this.adForm.judgeResultRemark = JudgeInfo.JudgeResultRemark;
+      this.fileList = [];
       if (JudgeInfo.JudgeResultImagePathList) {
-        JudgeInfo.JudgeResultImagePathList.map(url => {
-          if (url) { this.fileList.push({ name: '', url: url }) }
-        })
-        this.adForm.judgeResultImagePathList = JudgeInfo.JudgeResultImagePathList
+        JudgeInfo.JudgeResultImagePathList.map((url) => {
+          if (url) {
+            this.fileList.push({ name: "", url: url });
           }
-      this.visitTaskArmList = JudgeInfo.VisitTaskArmList
+        });
+        this.adForm.judgeResultImagePathList =
+          JudgeInfo.JudgeResultImagePathList;
+      }
+      this.visitTaskArmList = JudgeInfo.VisitTaskArmList;
     },
     handlePictureCardPreview(file) {
-      this.images = this.fileList.map(f => this.OSSclientConfig.basePath + f.url)
-      this.$refs[file.url].$viewer.show()
+      this.images = this.fileList.map(
+        (f) => this.OSSclientConfig.basePath + f.url
+      );
+      this.$refs[file.url].$viewer.show();
     },
     handleViewDetail(visitTaskId) {
-      console.log(this.rowData)
-      var trialId = this.$route.query.trialId
-      var token = getToken()
-      var criterionType = this.rowData.CriterionType
-      var readingTool = this.rowData.ReadingTool
-      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool)
-      var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder
-      var trialReadingCriterionId = this.rowData.TrialReadingCriterionId
+      console.log(this.rowData);
+      var trialId = this.$route.query.trialId;
+      var token = getToken();
+      var criterionType = this.rowData.CriterionType;
+      var readingTool = this.rowData.ReadingTool;
+      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool);
+      var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder;
+      var trialReadingCriterionId = this.rowData.TrialReadingCriterionId;
 
-      var path = ''
+      var path = "";
       if (readingTool === 0) {
-        path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`
+        path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
+          this.rowData.SubjectCode
+        }&subjectId=${
+          this.rowData.SubjectId
+        }&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
       } else {
-        path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`
+        path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
+          this.rowData.SubjectCode
+        }&subjectId=${
+          this.rowData.SubjectId
+        }&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
       }
-      var routeData = this.$router.resolve({ path })
-      window.open(routeData.href, '_blank')
+      var routeData = this.$router.resolve({ path });
+      window.open(routeData.href, "_blank");
     },
     handleView(row, armEnum) {
-      var task = row.VisitTaskInfoList.find(item => item.ArmEnum === armEnum)
-      var trialId = this.$route.query.trialId
-      var token = getToken()
-      var criterionType = this.rowData.CriterionType
-      var readingTool = this.rowData.ReadingTool
-      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool)
-      var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder
-      var trialReadingCriterionId = this.rowData.TrialReadingCriterionId
+      var task = row.VisitTaskInfoList.find((item) => item.ArmEnum === armEnum);
+      var trialId = this.$route.query.trialId;
+      var token = getToken();
+      var criterionType = this.rowData.CriterionType;
+      var readingTool = this.rowData.ReadingTool;
+      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool);
+      var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder;
+      var trialReadingCriterionId = this.rowData.TrialReadingCriterionId;
 
-      var path = ''
+      var path = "";
       if (readingTool === 0) {
-        path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${task.VisitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`
+        path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
+          this.rowData.SubjectCode
+        }&subjectId=${this.rowData.SubjectId}&visitTaskId=${
+          task.VisitTaskId
+        }&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
       } else {
-        path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${task.VisitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`
+        path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
+          this.rowData.SubjectCode
+        }&subjectId=${this.rowData.SubjectId}&visitTaskId=${
+          task.VisitTaskId
+        }&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
       }
-      var routeData = this.$router.resolve({ path })
-      window.open(routeData.href, '_blank')
+      var routeData = this.$router.resolve({ path });
+      window.open(routeData.href, "_blank");
     },
     previewCD() {
-      var token = getToken()
-      var trialId = this.$route.query.trialId
+      var token = getToken();
+      var trialId = this.$route.query.trialId;
       const routeData = this.$router.resolve({
-        path: `/clinicalData?subjectId=${this.auditInfo.SubjectId}&trialId=${trialId}&visitTaskId=${this.auditInfo.VisitTaskId}&TokenKey=${token}`
-      })
-      window.open(routeData.href, '_blank')
-    }
-  }
-}
+        path: `/clinicalData?subjectId=${this.auditInfo.SubjectId}&trialId=${trialId}&visitTaskId=${this.auditInfo.VisitTaskId}&TokenKey=${token}`,
+      });
+      window.open(routeData.href, "_blank");
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .ad_review_wrapper {
-
   .disabled {
     /deep/ .el-upload--picture-card {
       display: none;

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

@@ -99,7 +99,11 @@
           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 }"
+            style="width: 100%; height: 100%"
+          >
             <viewer
               :ref="file.url"
               :images="images"