jingNing_H5_Mobile/src/pages/officialDocumentManager/documentLibrary/detail/documentDetail/index.vue

<script setup>
import { closeToast, showLoadingToast } from 'vant'
import Pdfh5 from 'pdfh5'

const { currentRoute } = useRouter()
const route = currentRoute.value
const gw_id = route.query.gw_id
const detailData = ref({})
let pdfHeight = $ref('')
showLoadingToast({
  message: '加载中...',
  forbidClick: true,
})
request({
  url: '/jdbg/gwgl_gw/detail',
  data: {
    gw_id,
  },
}).then((res) => {
  closeToast()


  detailData.value = res.data.one_info
  const appendUrl = res.data.one_info.gw_content.split('|')[0]
  const curFileShowUrl = window.globalVariables.api
    + appendUrl.replace(/\.\w+$/, '.pdf')
  const pdfh5 = new Pdfh5('#pdfContent', {
    pdfurl: curFileShowUrl,
    scrollEnable: false,
    zoomEnable: false,
  })
  pdfh5.on('complete', (status, msg) => {
    const height = document.getElementsByClassName("pageContainer")[0].style['min-height'];
    const num = document.getElementsByClassName("pageContainer").length
    pdfHeight = parseFloat(height) * num + 50
  });
})
</script>

<template>
  <div>
    <div class="tableContainer">
      <div class="topPart">
        <table class="Tb" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td class="titleOpt">
              类型：
            </td>
            <td>{{ detailData.lb_name }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              标题：
            </td>
            <td>{{ detailData.gw_title }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              发文字号：
            </td>
            <td>{{ detailData.gw_zh }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              发起人：
            </td>
            <td>{{ detailData.gw_fqr_name }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              发起科室：
            </td>
            <td>{{ detailData.gw_fqks_name }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              发起时间：
            </td>
            <td>{{ detailData.create_dateline }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              当前步骤：
            </td>
            <td>{{ detailData.gw_bz }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              当前审核人：
            </td>
            <td>{{ detailData.gw_shr }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              状态：
            </td>
            <td>{{ detailData.gw_status_option_n }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="pdfContent" :style="{ height: pdfHeight + 'px' }" />
  </div>
</template>

<style lang="scss" scoped></style>