JG-CLIENT-TEMP/src/views/pro-steps/components/ESOP.vue

<template>
  <el-scrollbar>
    <Empty v-if="srcList.length < 1" />
    <div class="grid-container" v-else>
      <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>
        <div class="suit-title">{{ box?.title }}</div>
        <div class="suit-desc">{{ box?.created }}</div>
      </div>
      <PDFDrawerView ref="PDFDrawerViewRef"></PDFDrawerView>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { esopData } from "@/api/prosteps/espo";
import { useProcessStore } from "@/store";

import DefaultPDF from "@/assets/images/401.gif";
const store = useProcessStore();
const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;
defineOptions({
  name: "Esop",
});

const srcList = ref([]);
const getPdfListData = async () => {
  const { data } = await esopData({
    operationId: store.odersData.operationId,
    pageNo: 1,
    pageSize: 999,
  });
  srcList.value = data.records;
};

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>
.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;

    .pdf-box {
      height: 263px;
      width: 100%;
      overflow: hidden;
    }

    .suit-title {
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      margin-left: 24px;
    }

    .suit-desc {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      margin-left: 24px;
    }

    .download-btn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
}
</style>