JG-CLIENT-TEMP/src/views/pro-operation/drawing/index.vue

<template>
  <el-drawer
    v-model="drawerVisible"
    :close-on-click-modal="false"
    destroy-on-close
    direction="rtl"
    size="990px"
  >
    <template #header>
      <div class="drawerTitle">图纸资料</div>
    </template>
    <el-scrollbar>
      <!-- <div class="grid-container">
        <div v-for="(box, index) in drawingData" :key="index" class="suit-box">
          <div class="pdf-box" @click="toShowPDF(box)">
            <el-image class="pdf-box" :src="baseUrl + box.pdfPath + '.jpg'">
              <template #error>
                <el-image class="pdf-box" :src="DefaultPDF" fit="cover" />
              </template>
            </el-image>
    
          </div>
          <div class="suit-title">{{ box?.drawingTitle }}</div>
          <div class="suit-desc">{{ box?.created }}</div>
          <el-button
            class="download-btn"
            type="primary"
            @click="download(box)"
            :key="box.drawingPath"
            >下载</el-button
          >
        </div>
      </div> -->
      <avue-crud
        ref="crudRef"
        v-model:search="search"
        v-model="form"
        :data="data"
        :option="option"
        v-model:page="page"
        @row-save="createRow"
        @row-update="updateRow"
        @row-del="deleteRow"
        @search-change="searchChange"
        @search-reset="resetChange"
        @size-change="dataList"
        @current-change="dataList"
        @selection-change="selectionChange"
      >
        <template #img="{ row }">
          <el-image class="pdf-box" :src="baseUrl + row.drawingPath">
            <template #error>
              <el-image class="pdf-box" :src="DefaultPDF" fit="cover" />
            </template>
          </el-image>
        </template>
        <template #menu="{ row, index, type }">
          <el-button @click="toShowPDF(row)" link type="primary" size="small"
            >查看</el-button
          >
          <el-button
            class="download-btn"
            row
            link
            type="info"
            @click="download(row)"
            :key="row.drawingPath"
            >下载</el-button
          >
        </template>
      </avue-crud>
    </el-scrollbar>
    <PDFDrawerView ref="PDFDrawerViewRef"></PDFDrawerView>
  </el-drawer>
</template>

<script lang="ts" setup>
import { drawingList } from "@/api/process/reportBreak";
import { useProcessStore } from "@/store/modules/processView";
import { useCrud } from "@/hooks/userCrud";
import PDFView from "@/components/PDFView/index.vue";
import DefaultPDF from "@/assets/images/default-pdf.png";

const processStore = useProcessStore();
const drawingData = ref<any>([]);

const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;

const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/base/drawing",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils;
option.value = Object.assign(option.value, {
  selection: false,
  addBtn: false,
  delBtn: false,
  editBtn: false,
  viewBtn: false,
  indexWidth: 80,
  grid: true,
  gridSpan: 8,
  gridBackground: (row, index) => {
    if (index === 1) {
      return "linear-gradient(to right, rgba(255,255,255,255.2), rgba(255,0,0,0.2))";
    } else {
      return "linear-gradient(to right, rgba(255,255,255,255.2), rgba(0,255,0,0.2))";
    }
  },
  column: [
    {
      label: "编号",
      prop: "drawingCode",
      search: true,
      gridRow: true,
    },
    {
      label: "标题",
      prop: "drawingTitle",
      gridRow: true,
    },
    {
      label: "文件名",
      prop: "fileName",
      gridRow: true,
    },
    {
      label: "图片",
      className: "imgbox",
      prop: "img",
      align: "center",
    },
  ],
});
const getListData = () => {
  search.value.materialCode = processStore.scanInfo.materialCode;
  dataList();
};
onMounted(() => {
  // drawingList({ materialCode: processStore.scanInfo.materialCode }).then(
  //   (res) => {
  //     console.log("res", res);
  //     drawingData.value = res.data;
  //   }
  // );
});
const drawerVisible = ref<boolean>(false);
const openDrawer = () => {
  getListData();
  drawerVisible.value = true;
};

const downloadBtnLoading = ref(false);
const download = async (row: any) => {
  downloadBtnLoading.value = true;
  let url = import.meta.env.VITE_APP_UPLOAD_URL + row.drawingPath;

  // 1. 获取资源并转为Blob
  const response = await fetch(url);
  const blob = await response.blob();

  // 2. 创建临时对象URL
  const tempUrl = URL.createObjectURL(blob);

  // 3. 创建隐藏a标签触发下载
  const link = document.createElement("a");
  link.href = tempUrl;
  link.download = row.fileName;
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();

  // 4. 清理内存
  URL.revokeObjectURL(tempUrl);
  document.body.removeChild(link);
  downloadBtnLoading.value = false;
};

const PDFDrawerViewRef = ref(null);
const toShowPDF = (row) => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + row.pdfPath;
  PDFDrawerViewRef.value && PDFDrawerViewRef.value.showPdf(url);
};
defineExpose({
  openDrawer,
});
</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 - 100px);

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