非dicom预览样式调整

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

@@ -6,7 +6,12 @@
       </div>
       <div class="left-content">
         <!-- 检查层级 -->
-        <div v-for="(study, i) in studyList" :key="study.CodeView">
+        <el-collapse v-model="activeNames" @change="handleChange">
+          <el-collapse-item
+            v-for="(study, i) in studyList"
+            :key="study.CodeView"
+            :name="study.CodeView"
+            ><template slot="title">
               <div class="study-desc">
                 <span>{{ study.CodeView }}</span>
                 <span v-if="OtherInfo.IsShowStudyName" style="margin-left: 5px">
@@ -15,6 +20,7 @@
                 <span style="margin: 0 5px">{{ study.Modality }}</span>
                 <span>{{ getBodyPart(study.BodyPart) }}</span>
               </div>
+            </template>
             <!-- 文件层级 -->
             <div
               v-if="study.NoneDicomStudyFileList.length === 0"
@@ -33,10 +39,22 @@
                   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">
+                  <el-tooltip
+                    v-else
+                    :content="item.FileName"
+                    placement="bottom"
+                  >
                     <div class="img-text">
                       {{ `${j + 1}. ${item.FileName}` }}
                     </div>
@@ -66,7 +84,8 @@
                 </div>
               </template>
             </div>
-        </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>