优化ESOP。

src/views/pro-steps/components/ESOP.vue

@@ -1,75 +1,34 @@
 <template>
-  <div class="espoViewStyle">
-    <div class="header">
-      <!-- <div class="imgView">
-        <el-image class="img" :src="getImgurl(srcList[selectImgIndex]?.imgUrl)" :initial-index="selectImgIndex"
-          :preview-src-list="showSrcList" fit="cover" />
-      </div> -->
-      <div class="imgView">
-        <el-scrollbar ref="scrollbarRef" class="pdmView">
-          <!-- <PDFView :need-to-show-pdf="true" :show-pdf-number="3" :is-link="true"
-            pdf-source="http://192.168.101.4:9000/jgfile/2024/04/20/%E7%AC%AC08%E7%AB%A0_%E8%81%9A%E5%90%88%E5%87%BD%E6%95%B0.pdf" /> -->
-          <PDFView
-            :need-to-show-pdf="true"
-            :pageNumber="srcList[selectImgIndex]?.showAppointPageNum"
-            :is-link="true"
-            :pdf-source="baseUrl + srcList[selectImgIndex]?.filePath"
-          />
-          <Empty v-if="srcList.length < 1" />
-        </el-scrollbar>
-      </div>
-      <!-- <div class="textBox">
-        <el-scrollbar :max-height="scrollbarHeight">
-          <div class="title">{{ srcList[selectImgIndex]?.title }}</div>
-          <div class="describe">
-            {{ srcList[selectImgIndex]?.content }}
-          </div>
-        </el-scrollbar>
-      </div> -->
-    </div>
-
-    <div class="footer">
-      <el-scrollbar>
-        <div class="scrollbar-flex-content">
-          <div
-            :class="
-              selectImgIndex == index
-                ? 'scrollbar-demo-item '
-                : 'scrollbar-demo-item unScrollbarItemBorder'
-            "
-            v-for="(item, index) in srcList"
-            @click="setImgIndex(index)"
-          >
-            <span>{{ item.title }}</span>
-          </div>
+  <el-scrollbar>
+    <div class="grid-container">
+      <div v-for="(box, index) in srcList" :key="index" class="suit-box">
+        <div class="pdf-box" @click="toShowPDF(box)">
+          <el-image class="pdf-box" :src="baseUrl + box.filePath + '.jpg'">
+            <template #error>
+              <el-image class="pdf-box" :src="DefaultPDF" fit="cover" />
+            </template>
+          </el-image>
+          <!--          <PDFView :need-to-show-pdf="true" :pdf-source="baseUrl + box.pdfPath" />-->
         </div>
-      </el-scrollbar>
+        <div class="suit-title">{{ box?.title }}</div>
+        <div class="suit-desc">{{ box?.created }}</div>
+      </div>
+      <PDFDrawerView ref="PDFDrawerViewRef"></PDFDrawerView>
     </div>
-  </div>
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
 import { esopData } from "@/api/prosteps/espo";
 import { useProcessStore } from "@/store";
-import PDFView from "@/components/PDFView/index.vue";
+
+import DefaultPDF from "@/assets/images/default-pdf.png";
 const store = useProcessStore();
 const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;
 defineOptions({
   name: "Esop",
 });
-//配置当前div高度
-const scrollbarHeight = ref(0);
-const scrollbarRef = ref(null);
-//选取的图片索引
-const selectImgIndex = ref(0);
-const setImgIndex = (index: number) => {
-  selectImgIndex.value = index;
-  toTop();
-};
-const setScrollbarHeight = () => {
-  const viewportHeight = window.innerHeight;
-  scrollbarHeight.value = viewportHeight - 300;
-};
+
 const srcList = ref([]);
 const getPdfListData = async () => {
   const { data } = await esopData({
@@ -79,105 +38,67 @@ const getPdfListData = async () => {
   });
   srcList.value = data.records;
 };
-const toTop = () => {
-  scrollbarRef.value!.setScrollTop(0);
-};
-onMounted(async () => {
-  setScrollbarHeight();
-  await getPdfListData();
+
+onMounted(() => {
+  getPdfListData();
 });
+
+const PDFDrawerViewRef = ref(null);
+const toShowPDF = (row) => {
+  let url = import.meta.env.VITE_APP_UPLOAD_URL + row.filePath;
+  PDFDrawerViewRef.value && PDFDrawerViewRef.value.showPdf(url);
+};
 </script>
 
 <style lang="scss" scoped>
-.espoViewStyle {
-  display: flex;
-  max-height: calc(100vh - 234px);
-  width: calc(100vw / 6 * 5 - 50px);
-  flex-direction: column;
-}
-
-.header {
-  flex: 1;
-  display: flex;
-  position: relative;
-
-  .imgView {
-    flex: 1;
-    height: calc(100vh - 368px);
-    padding: $p10 0;
-
-    .pdmView {
-      width: 60%;
-      padding: $p20;
-    }
-
-    .img {
-      height: 100%;
-      border: 0px solid;
-    }
-  }
-
-  .textBox {
-    width: 30%;
-    min-width: 250px;
-    padding: $p5 $p20;
-    right: 0;
+.grid-container {
+  display: grid;
+  /*行间距*/
+  grid-row-gap: 24px;
+  /*列间距*/
+  grid-column-gap: 24px;
+
+  overflow-y: auto;
+  //padding: 24px;
+  width: calc(100% - 48px);
+  grid-template-columns: 1fr 1fr 1fr;
+  height: calc(100vh - 260px);
+
+  .suit-box {
+    height: 343px;
+    background-color: white;
+    border-radius: 16px 16px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    position: relative;
 
-    .title {
-      font-size: $f24;
-      font-weight: $Medium;
+    .pdf-box {
+      height: 263px;
       width: 100%;
+      overflow: hidden;
     }
 
-    .describe {
-      font-size: $f20;
-      color: $font-default-60;
+    .suit-title {
+      font-weight: 500;
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.9);
+      text-align: left;
+      margin-left: 24px;
     }
-  }
-}
-
-.footer {
-  height: 20%;
-  min-height: 110px;
-  padding: 0 $p10;
-
-  .scrollbar-flex-content {
-    display: flex;
-
-    .scrollbar-demo-item {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 110px;
-      height: 110px;
-      margin-right: 10px;
-      @include flex;
-      border: 2px solid #0a59f7;
-      border-radius: 16px;
-      box-sizing: border-box;
-      color: #0a59f7;
-
-      span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding: 5px;
-      }
 
-      .bottomImgBox {
-        width: 90px;
-        height: 90px;
-        border-radius: 16px;
-        background-color: white;
-        @include flex;
-      }
+    .suit-desc {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.6);
+      text-align: left;
+      margin-left: 24px;
     }
 
-    .unScrollbarItemBorder {
-      border: 2px solid black;
-      color: black;
-      background-color: transparent;
+    .download-btn {
+      position: absolute;
+      right: 20px;
+      top: 20px;
     }
   }
 }