2023-11-9

package.json

@@ -29,6 +29,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qrcodejs2": "^0.0.2",
     "tinymce": "^5.10.7",
     "view-design": "^4.7.0",
     "vue": "2.6.10",

src/permission.js

@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login','/h5/login'] // no redirect whitelist
+const whiteList = ['/login','/h5/login','/print'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
@@ -20,6 +20,12 @@ router.beforeEach(async(to, from, next) => {
   // determine whether the user has logged in
   const hasToken = getToken()
 
+  if (whiteList.indexOf(to.path) !== -1) {
+    // in the free login whitelist, go directly
+    next()
+    return
+  }
+
   if (hasToken) {
     if (to.path === '/login' || to.path === '/h5/login') {
       // if is logged in, redirect to the home page

src/router/index.js

@@ -47,6 +47,11 @@ export const constantRoutes = [
     component: () => import("@/views/component/test.vue"),
     hidden: true,
   },
+  {
+    path: '/print',
+    component:() => import("@/views/print/index.vue"),
+    hidden: true
+  },
   {
     path: "/info",
     component: Layout,

src/views/print/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="page">
+    <div class="box" ref="box">
+      <div class="container" ref="container" :style="{ 'transform': `translate(${container.offsetX}px,${container.offsetY}px) scale(${container.scale},${container.scale})` }">
+        <div class="no">
+          序列号：{{ info.bianma }}
+        </div>
+        <div class="qrcode">
+          <div ref="qrcode"></div>
+          <div>扫码核验</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-panel">
+      <Button type="info" icon="md-download">下载</Button>
+      <Button type="info" icon="md-print">打印</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2';
+
+
+import { show } from "@/api/system/baseForm";
+export default {
+  data() {
+    return {
+      id: '',
+      info: {},
+      container: {
+        w: 0,
+        h: 0,
+        offsetX: 0,
+        offsetY: 0,
+        lastX: 0,
+        lastY: 0,
+        scale: 1
+      }
+    }
+  },
+  methods: {
+    creatQrCode() {
+      new QRCode(this.$refs.qrcode, {
+        text: window.location.href, // 二维码的内容
+        width: 74,
+        height: 74,
+        colorDark: '#000',
+        colorLight: '#fff',
+        correctLevel: QRCode.CorrectLevel.H
+      });
+    },
+
+    init () {
+      const box = this.$refs['box'];
+      const container = this.$refs['container'];
+      const { width,height } = box.getBoundingClientRect();
+      this.container.w = width;
+      this.container.h = height;
+
+      //
+      box.ontouchstart = box.onmousedown = event => {
+        event.preventDefault();
+        if (event.type === 'touchstart') {
+          let touch = event.touches[0];
+          this.container.lastX = touch.clientX;
+          this.container.lastY = touch.clientY;
+        } else {
+          this.container.lastX = event.clientX;
+          this.container.lastY = event.clientY;
+        }
+        box.ontouchmove = box.onmousemove = e => {
+          let currentX,currentY;
+          if (e.type === 'touchmove') {
+            let touch = e.touches[0];
+            currentX = touch.clientX;
+            currentY = touch.clientY;
+          } else {
+            currentX = e.clientX;
+            currentY = e.clientY;
+          }
+          this.container.offsetX += currentX - this.container.lastX;
+          this.container.offsetY += currentY - this.container.lastY;
+          this.container.lastX = currentX;
+          this.container.lastY = currentY;
+        }
+      }
+      box.ontouchend = box.onmouseup = e => {
+        box.ontouchmove = box.onmousemove = null;
+      }
+      box.onwheel = e => {
+        e.preventDefault();
+        this.container.scale *= Math.exp(e.deltaY / -100);
+      }
+    },
+  },
+  computed: {},
+  created() {
+    if (this.$route.query.d) {
+      this.id = window.atob(this.$route.query.d).split('=')[1]
+
+      show({
+        table_name: 'records',
+        id: this.id
+      }).then(res => {
+        console.log(res)
+        this.info = res;
+
+        this.init();
+        this.creatQrCode();
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.page {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(80,80,80);
+}
+.box {
+  width: 100vw;
+  height: 100vh;
+  max-width: 600px;
+  max-height: 800px;
+  background: #fff;
+  overflow: hidden;
+
+  margin: auto;
+
+  .container {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+
+    & > div {
+      position: absolute;
+    }
+    .no {
+      transform: translate(20px,20px);
+    }
+    .qrcode {
+      transform: translate(0px,20px);
+      right: 20px
+    }
+  }
+}
+.bottom-panel {
+  height: 50px;
+  background: rgba(55,55,55,.6);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  transition: all .2s;
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  & > Button {
+    min-width: 90px;
+    max-width: 150px;
+    width: 16%;
+  }
+}
+</style>

src/views/record/index.vue

@@ -261,7 +261,7 @@
       "
     >
       <template #print="{ row }">
-        <Button size="small" type="primary">打印</Button>
+        <Button size="small" type="primary" @click="toPrint(row)">打印</Button>
       </template>
     </xy-table>
 
@@ -335,6 +335,18 @@ export default {
     };
   },
   methods: {
+    toPrint (row) {
+      console.log(row);
+      const url = this.$router.resolve({
+        path: '/print',
+        query: {
+          d: window.btoa(`id=${row.id}`)
+        }
+      })
+      window.open(url.href)
+    },
+
+
     index,
     destroy,
     download,