非dicom预览样式调整

src/views/none-dicom-show/index.vue

@@ -6,67 +6,86 @@
       </div>
       <div class="left-content">
         <!-- 检查层级 -->
-        <div v-for="(study, i) in studyList" :key="study.CodeView">
+        <el-collapse v-model="activeNames" @change="handleChange">
-          <div class="study-desc">
+          <el-collapse-item
-            <span>{{ study.CodeView }}</span>
+            v-for="(study, i) in studyList"
-            <span v-if="OtherInfo.IsShowStudyName" style="margin-left: 5px">
+            :key="study.CodeView"
-              {{ study.StudyName }}
+            :name="study.CodeView"
-            </span>
+            ><template slot="title">
-            <span style="margin: 0 5px">{{ study.Modality }}</span>
+              <div class="study-desc">
-            <span>{{ getBodyPart(study.BodyPart) }}</span>
+                <span>{{ study.CodeView }}</span>
-          </div>
+                <span v-if="OtherInfo.IsShowStudyName" style="margin-left: 5px">
-          <!-- 文件层级 -->
+                  {{ study.StudyName }}
-          <div
+                </span>
-            v-if="study.NoneDicomStudyFileList.length === 0"
+                <span style="margin: 0 5px">{{ study.Modality }}</span>
-            class="empty-text"
+                <span>{{ getBodyPart(study.BodyPart) }}</span>
-          >
-            <slot name="empty">{{ $t('trials:audit:message:noData') }}</slot>
-          </div>
-          <div v-else id="imgList" style="height: 100%; overflow: hidden">
-            <template v-for="(item, j) in study.NoneDicomStudyFileList">
-              <div
-                :id="`img${item.Id}`"
-                :key="item.Id"
-                :class="{
-                  'is-boxActive': item.Id === currentFileId,
-                }"
-                class="img-box"
-                @click="selected(item, i, j, true)"
-              >
-                <div v-if="item.FileName.length < 15" class="img-text">
-                  {{ `${j + 1}. ${item.FileName}` }}
-                </div>
-                <el-tooltip v-else :content="item.FileName" placement="bottom">
-                  <div class="img-text">
-                    {{ `${j + 1}. ${item.FileName}` }}
-                  </div>
-                </el-tooltip>
-                <div v-if="isQcCheck" class="switchBox">
-                  <div class="item">
-                    <span>{{ $t('trials:audit:table:isReading') }}</span>
-                    <el-switch
-                      v-model="item.IsReading"
-                      :disabled="item.IsDeleted || isAudit"
-                      @change="changeReadingStatus($event, study, item)"
-                      :active-text="$fd('YesOrNo', true)"
-                      :inactive-text="$fd('YesOrNo', false)"
-                    />
-                  </div>
-                  <div class="item">
-                    <span>{{ $t('trials:audit:table:isDelete') }}</span>
-                    <el-switch
-                      v-model="item.IsDeleted"
-                      :disabled="isAudit"
-                      @change="changeDeleteStatus($event, study, item)"
-                      :active-text="$fd('YesOrNo', true)"
-                      :inactive-text="$fd('YesOrNo', false)"
-                    />
-                  </div>
-                </div>
               </div>
             </template>
-          </div>
+            <!-- 文件层级 -->
-        </div>
+            <div
+              v-if="study.NoneDicomStudyFileList.length === 0"
+              class="empty-text"
+            >
+              <slot name="empty">{{ $t('trials:audit:message:noData') }}</slot>
+            </div>
+            <div v-else id="imgList" style="height: 100%; overflow: hidden">
+              <template v-for="(item, j) in study.NoneDicomStudyFileList">
+                <div
+                  :id="`img${item.Id}`"
+                  :key="item.Id"
+                  :class="{
+                    'is-boxActive': item.Id === currentFileId,
+                  }"
+                  class="img-box"
+                  @click="selected(item, i, j, true)"
+                >
+                  <div v-if="item.FileType === 'image/jpeg'" class="file-image">
+                    <el-image
+                      style="width: 100%; height: 100%"
+                      :src="`${OSSclientConfig.basePath}${item.Path}?x-oss-process=image/resize,w_50,h_50/format,png`"
+                      fit="contain"
+                      crossorigin="anonymous"
+                    />
+                  </div>
+                  <div v-if="item.FileName.length < 15" class="img-text">
+                    {{ `${j + 1}. ${item.FileName}` }}
+                  </div>
+                  <el-tooltip
+                    v-else
+                    :content="item.FileName"
+                    placement="bottom"
+                  >
+                    <div class="img-text">
+                      {{ `${j + 1}. ${item.FileName}` }}
+                    </div>
+                  </el-tooltip>
+                  <div v-if="isQcCheck" class="switchBox">
+                    <div class="item">
+                      <span>{{ $t('trials:audit:table:isReading') }}</span>
+                      <el-switch
+                        v-model="item.IsReading"
+                        :disabled="item.IsDeleted || isAudit"
+                        @change="changeReadingStatus($event, study, item)"
+                        :active-text="$fd('YesOrNo', true)"
+                        :inactive-text="$fd('YesOrNo', false)"
+                      />
+                    </div>
+                    <div class="item">
+                      <span>{{ $t('trials:audit:table:isDelete') }}</span>
+                      <el-switch
+                        v-model="item.IsDeleted"
+                        :disabled="isAudit"
+                        @change="changeDeleteStatus($event, study, item)"
+                        :active-text="$fd('YesOrNo', true)"
+                        :inactive-text="$fd('YesOrNo', false)"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
       </div>
     </el-card>
     <!-- 预览图像 -->
@@ -136,6 +155,8 @@ export default {
       },
       isQcCheck: false,
       isAudit: false,
+
+      activeNames: [],
     }
   },
   async created() {
@@ -153,6 +174,7 @@ export default {
     // 默认选择第一个文件
   },
   methods: {
+    handleChange() {},
     changeReadingStatus(callback, row, file) {
       let statusStr = ''
       if (callback) {
@@ -282,6 +304,8 @@ export default {
           const studyIndex = this.studyList.findIndex((item) => {
             return item.NoneDicomStudyFileList.length > 0
           })
+          this.activeNames = this.studyList.map((item) => item.CodeView)
+          console.log(this.activeNames)
           if (studyIndex > -1) {
             var fileObj = this.studyList[studyIndex]['NoneDicomStudyFileList']
             this.selected(fileObj[0], studyIndex, 0, true)
@@ -364,7 +388,7 @@ export default {
   }
 }
 .study-desc {
-  padding: 15px 5px;
+  padding: 10px 5px;
   line-height: 20px;
   background-color: #d5d5d5;
   font-weight: 500;
@@ -409,6 +433,11 @@ export default {
     display: inline-block;
     box-sizing: border-box;
     border-bottom: 2px solid #f3f3f3;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 5px 10px;
 
     cursor: pointer;
     // margin-bottom: 5px;
@@ -416,7 +445,8 @@ export default {
   }
   .img-text {
     display: inline-block;
-    width: 200px;
+    width: calc(100% - 60px);
+    margin-left: 5px;
     height: 50px;
     line-height: 50px;
     overflow: hidden;
@@ -444,7 +474,8 @@ export default {
   }
 }
 .switchBox {
-  margin-bottom: 5px;
+  width: 100%;
+  margin: 5px 0;
   color: #4e4e4e;
   .item {
     display: flex;
@@ -453,4 +484,15 @@ export default {
     margin-bottom: 5px;
   }
 }
+.file-image {
+  width: 50px;
+  height: 50px;
+}
+::v-deep .el-collapse-item__header {
+  background-color: #d5d5d5;
+}
+::v-deep .el-collapse-item__header {
+  min-height: 48px;
+  height: auto;
+}
 </style>