gj-erp-kban-vue/src/components/ViewPDF/index.vue

<template>
  <!-- 查看pdf -->
  <div class="viewpdf-container">
    <!-- 筛选 -->
    <div class="formData-box">
      <el-select
        v-model="formData.dcCh"
        size="mini"
        placeholder="请选择船号"
        @change="dcChChange"
      >
        <el-option
          v-for="(item, index) in dcChOptions"
          :key="index"
          :label="item.dcCh"
          :value="item.dcCh"
        >
        </el-option>
      </el-select>
      <el-select v-model="formData.dcPl" size="mini" placeholder="请选择批次">
        <el-option
          v-for="(item, index) in dcPlOptions"
          :key="index"
          :label="item.dcPl"
          :value="item.dcPl"
        >
        </el-option>
      </el-select>
      <div class="query-btn" @click="queryBtn">确定</div>
    </div>
    <div class="viewpdf-box">
      <div class="border-out">
        <div class="border-inner">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in pdfDataList" :key="index">
              <dv-border-box-12>
                <div class="viewpdf-flex" @click="pdfChange(item)">
                  <img src="@/assets/image/KHCFDC_PDF.png" alt="" />
                  <div class="pdf-title">{{ item }}</div>
                </div>
              </dv-border-box-12>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- pdf预览 -->
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      :modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div v-if="dialogVisible">
        <pdf v-for="i in numPages" :key="i" :page="i" :src="pdfUrl"></pdf>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getProject, pdfList } from "@/api/viewPDF";
import pdf from "vue-pdf";
export default {
  name: "ViewPDF",
  components: {
    pdf,
  },
  data() {
    return {
      formData: {
        dcCh: "",
        dcPl: "",
      },
      sumOptions: [],
      dcChOptions: [],
      dcPlOptions: [],
      pdfDataList: [],
      dialogVisible: false,
      pdfUrl: "", //pdf文件地址
      pageCount: 0, //当前页
      numPages: 0, //总页数
    };
  },
  mounted() {
    this.getProject();
  },
  methods: {
    queryBtn() {
      this.pdfList();
    },
    getProject() {
      getProject().then((res) => {
        this.sumOptions = res.data;
        const uniqueArr = res.data.reduce((accumulator, current) => {
          const duplicate = accumulator.find(
            (item) => item.dcCh === current.dcCh
          );
          if (!duplicate) {
            return accumulator.concat([current]);
          }
          return accumulator;
        }, []);
        this.dcChOptions = uniqueArr;
      });
    },
    pdfList() {
      pdfList({
        dcCh: this.formData.dcCh,
        dcPl: this.formData.dcPl,
      }).then((res) => {
        this.pdfDataList = res.data;
      });
    },
    dcChChange(value) {
      this.formData.dcPl = "";
      this.dcPlOptions = this.sumOptions.filter((item) => {
        return item.dcCh == value;
      });
    },
    pdfChange(item) {
      this.pdfUrl = pdf.createLoadingTask(
        `http://kban.runpengsoft.com/upload/${this.formData.dcCh}/${this.formData.dcPl}/PDF/${item}.pdf`
      );
      this.pdfUrl.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        });
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.viewpdf-container {
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  .formData-box {
    width: 300px !important;
    margin-bottom: 18px;
  }
  .viewpdf-box {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 105px);
    .viewpdf-flex {
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #fff;
      margin-top: 4%;
      padding: 20px;
      cursor: pointer;
      img {
        width: 50px;
      }
      .pdf-title {
        margin-left: 10px;
      }
    }
  }

  .box-top {
    margin-top: 5px;
  }

  .border-out {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #0174f5 solid;
    padding: 1px;
    box-sizing: border-box;
  }
  .border-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
    padding: 0 1%;
  }
  .border-inner {
    background-color: rgba(2, 8, 23, 0.1);
  }
}
::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    background-color: #134094 !important;
    border: 1px solid #016ae0;
    padding-bottom: 20px;
  }
  .el-dialog__title {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff !important;
  }
  .el-dialog__body {
    overflow-y: auto;
    padding-top: 0 !important;
    .el-select,
    .el-date-editor.el-input {
      width: 100% !important;
    }
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
  }
}
</style>