添加单独查询报告单页面

web_admin/package.json

@@ -12,9 +12,9 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "husky": {
-  "hooks": {
-    "pre-commit": "lint-staged"
-    } 
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "lint-staged": {
     "src/**/*.{js,vue}": [
@@ -60,6 +60,7 @@
     "vue-cropper": "0.5.5",
     "vue-esign": "^1.1.4",
     "vue-meta": "2.4.0",
+    "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

web_admin/src/api/report.js

@@ -0,0 +1,8 @@
+import request from "@/utils/request";
+export function exportPdf(data) {
+  return request({
+    url: "/reportPDF",
+    method: "post",
+    data: data,
+  });
+}

web_admin/src/permission.js

@@ -8,7 +8,13 @@ import { isRelogin } from "@/utils/request";
 
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ["/login", "/register", "/hospitalSelection", "/largeScreen"];
+const whiteList = [
+  "/login",
+  "/register",
+  "/hospitalSelection",
+  "/largeScreen",
+  "/report/view",
+];
 
 router.beforeEach((to, from, next) => {
   NProgress.start();

web_admin/src/router/index.js

@@ -62,6 +62,12 @@ export const constantRoutes = [
     hidden: true,
   },
   // 大屏
+  {
+    path: "/report/view",
+    component: () => import("@/views/report/view.vue"),
+    hidden: true,
+  },
+  // 大屏
   {
     path: "/largeScreen",
     component: () => import("@/views/largeScreen.vue"),

web_admin/src/views/report/components/pdf.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="box" style="position: relative">
+    <div style="position: fixed; top: 20px; right: 20px">
+      <el-button
+        @click="handleDownload"
+        icon="el-icon-download"
+        type="warning"
+        plain
+        >下载</el-button
+      >
+    </div>
+    <div class="box-cent">
+      <div class="box-cent1">
+        <div class="div-pdf">
+          <pdf
+            v-for="i in loadedPages"
+            :key="i"
+            :src="filePdfUrl"
+            :page="i"
+          ></pdf>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pdf from "vue-pdf";
+export default {
+  name: "MeetingList",
+  props: ["pdfPath"],
+  components: {
+    pdf,
+  },
+  data() {
+    return {
+      filePdfUrl: "",
+      numPages: 0,
+      show: false,
+      loadedPages: [],
+      currentPage: 1,
+      loadInterval: null,
+      loadCount: 5, // 默认每次加载5页
+    };
+  },
+  created() {
+    this.filePdfUrl = this.pdfPath;
+    this.getNumPages(this.filePdfUrl);
+  },
+  beforeDestroy() {
+    if (this.loadInterval) {
+      clearInterval(this.loadInterval);
+    }
+  },
+  methods: {
+    handleDownload() {
+      window.open(this.filePdfUrl);
+    },
+    getNumPages(url) {
+      this.pdfSrc = url;
+      this.pdfSrc = pdf.createLoadingTask(this.pdfSrc);
+      this.pdfSrc.promise.then((pdf) => {
+        this.numPages = pdf.numPages;
+        this.startLoadingPages();
+      });
+    },
+
+    startLoadingPages() {
+      this.loadInterval = setInterval(() => {
+        if (this.currentPage <= this.numPages) {
+          // 每次加载loadCount页
+          const endPage = Math.min(
+            this.currentPage + this.loadCount - 1,
+            this.numPages
+          );
+          for (let i = this.currentPage; i <= endPage; i++) {
+            this.loadedPages.push(i);
+          }
+          this.currentPage = endPage + 1;
+        } else {
+          clearInterval(this.loadInterval);
+        }
+      }, 500);
+    },
+  },
+  onLoad() {},
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .u-modal__content {
+  text-align: center;
+}
+.popup-close {
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  z-index: 9999;
+
+  ::v-deep.uni-icons {
+    font-size: 40px !important;
+    color: #fff !important;
+  }
+}
+
+.div-gb {
+  max-width: 100px;
+  margin-left: 16px;
+}
+
+.div-li {
+  // padding-left: 10px;
+}
+
+.div-pdf {
+  max-width: 100%;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 26px;
+  left: 16px;
+  right: 16px;
+
+  uni-button {
+    font-size: 18px;
+    line-height: 44px;
+    height: 44px;
+    flex: 1;
+  }
+
+  .page {
+    line-height: 44px;
+    height: 44px;
+    width: 100px;
+    text-align: center;
+  }
+}
+
+.pathsName {
+  color: #fff;
+  font-size: 12px;
+}
+
+.pdfBox .el-button {
+  background: rgba(255, 255, 255, 0);
+  border: none;
+  /* width: 30px; */
+}
+
+.pdfBox >>> .el-icon-arrow-left,
+.pdfBox >>> .el-icon-arrow-right {
+  font-size: 18px;
+  color: #000;
+}
+
+.pdfBox .page {
+  margin: 0 10px;
+}
+
+.pdfBox .el-button-group {
+  width: 100%;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  padding-top: 20px;
+}
+
+.pdfBox {
+  padding-bottom: 20px;
+  margin-top: 20px;
+  background: #fff;
+  min-height: 300px;
+}
+
+.contLeft-pane >>> .el-form-item__label {
+  text-align: right;
+  margin-right: 10px !important;
+  padding: 0 !important;
+}
+
+.contLeft-pane >>> .el-form-item--medium .el-form-item__content {
+  flex: 1;
+}
+
+.li-item {
+  uni-div {
+    font-size: 20px;
+    line-height: 40px;
+
+    span {
+      font-size: 20px;
+    }
+  }
+
+  .li-title {
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 30px;
+  }
+}
+
+.div-box {
+  margin-top: 50px;
+}
+
+.div-none {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40px !important;
+}
+
+.div-ul {
+  text-align: left;
+  margin-bottom: 16px;
+
+  .div-li {
+    span {
+      font-size: 20px;
+      line-height: 40px;
+    }
+  }
+}
+
+.div-title {
+  display: inline-block;
+  border: 1px solid #000;
+  padding: 0 14px;
+  margin-bottom: 30px;
+  line-height: 50px;
+  border-radius: 6px;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.box {
+  width: 50vw;
+  height: 90vh;
+  background-size: cover;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .box-cent {
+    flex: 1;
+    position: relative;
+  }
+
+  .box-cent1 {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: scroll;
+  }
+}
+</style>
+<style></style>

web_admin/src/views/report/view.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="container" v-loading="loading">
+    <div v-if="pdfPath">
+      <pdf :pdfPath="pdfPath"></pdf>
+    </div>
+    <div v-else class="zw">未查询到报告单</div>
+  </div>
+</template>
+
+<script>
+import { exportPdf } from "@/api/report.js";
+import pdf from "./components/pdf.vue";
+export default {
+  components: {
+    pdf,
+  },
+  data() {
+    return {
+      loading: false,
+      qzUrl: process.env.VUE_APP_API_QZURL,
+      pdfPath: null,
+    };
+  },
+
+  methods: {
+    // 下载
+    handleDownload() {
+      if (this.pdfPath) {
+        window.open(this.pdfPath);
+      }
+    },
+    // 查询
+    async getExportPdf() {
+      this.loading = true;
+      exportPdf({
+        patientNo: this.$route.query.patient_no,
+        emplCode: this.$route.query.empl_code,
+      })
+        .then((res) => {
+          this.loading = false;
+          this.pdfPath = null;
+          if (res.data) {
+            this.$modal.msgSuccess("查询成功");
+            this.pdfPath = this.qzUrl + res.data;
+          }
+        })
+        .catch((error) => {
+          this.loading = false;
+          // this.$modal.msgError("查询失败");
+        });
+    },
+  },
+  created() {
+    // this.getExportPdf();
+  },
+};
+</script>
+
+<style scoped>
+.zw {
+  font-size: 100px;
+  color: #b0b0b0;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: 16px;
+  background: url("./back.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+</style>
+<style></style>