From ac1761b7e5b1f95ce5f21d2df17997613d2f9ccd Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Thu, 9 Apr 2026 17:04:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   1 +
 src/views/visit/component/addCommon.vue |  12 +--
 src/views/visit/record.vue              | 107 +++++++++++++++++++++++-
 3 files changed, 114 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 14f1721..38f97b7 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qrcode": "^1.5.4",
     "tinymce": "^5.10.7",
     "view-design": "^4.7.0",
     "vue": "2.6.10",
diff --git a/src/views/visit/component/addCommon.vue b/src/views/visit/component/addCommon.vue
index 9ca0105..8c8f3e6 100644
--- a/src/views/visit/component/addCommon.vue
+++ b/src/views/visit/component/addCommon.vue
@@ -149,7 +149,7 @@
       <template v-slot:idcard>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>证件号码：
+            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>证件号码：
           </div>
           <div class="xy-table-item-content">
             <el-input v-model="form.idcard" placeholder="请输入证件号码"></el-input>
@@ -825,20 +825,22 @@
       submit() {
         let that = this
         this.syncCarsToForm()
-        if(that.form.credent==1){
+        const idcardValue = (that.form.idcard || '').trim()
+        if(that.form.credent==1 && idcardValue){
           const regtest = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
-          if(!regtest.test(that.form.idcard)){
+          if(!regtest.test(idcardValue)){
             this.$successMessage('身份证格式错误', '','warning')
             return
           }
         }
-        if(that.form.credent==2){
+        if(that.form.credent==2 && idcardValue){
           const regtest = /^([a-zA-z]|[0-9]){5,17}$/
-          if(!regtest.test(that.form.idcard)){
+          if(!regtest.test(idcardValue)){
             this.$successMessage('护照格式错误', '','warning')
             return
           }
         }
+        that.form.idcard = idcardValue
         that.form.follw_people = that.followList
         this.syncCarsToForm()
         console.log("this.form.cars",this.form.cars)
diff --git a/src/views/visit/record.vue b/src/views/visit/record.vue
index 9ce7b59..c55fb89 100644
--- a/src/views/visit/record.vue
+++ b/src/views/visit/record.vue
@@ -25,7 +25,7 @@
             <el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询
             </el-button>
             <template>
-              <el-popover placement="right" width="250" v-model="visible" trigger='click'>
+              <el-popover placement="right" width="350" v-model="visible" trigger='click'>
                 <p style="margin-bottom:10px">选择访客类型:</p>
                 <div style="display: flex;align-items: center;">
                   <el-button size="mini" type="primary"
@@ -51,11 +51,14 @@
     </div>
 
     <xy-table :table-item="table" :list="data" :total="total"
+      :default-btn-width="260"
+      :btn-width="220"
       :auths="['view','edit','delete']"
       @pageSizeChange="e => {select.page_size = e;select.page = 1;getList()}"
       @pageIndexChange="e => {select.page = e;getList()}" @delete="deleteStudy" @editor="editorStudy">
       <template v-slot:view="scope">
         <Button size="small" type="primary" ghost @click="viewDetail(scope.row)">查看</Button>
+        <Button size="small" type="primary" ghost style="margin-left: 8px;margin-right: 8px" @click="openQrDialog(scope.row)">二维码</Button>
       </template>
     </xy-table>
     <addCommon ref="addCommon" @refresh="getList"></addCommon>
@@ -143,6 +146,20 @@
         </el-card>
       </div>
     </el-dialog>
+    <el-dialog title="访客二维码" :visible.sync="qrDialogVisible" width="460px" @open="renderQrCode">
+      <div v-if="qrRecord" class="qr-wrap">
+        <div class="qr-line"><span class="qr-label">访客姓名：</span>{{ qrRecord.name || '-' }}</div>
+        <div class="qr-line"><span class="qr-label">到访日期：</span>{{ qrRecord.date || '-' }}</div>
+        <div class="qr-line"><span class="qr-label">核销码：</span>{{ qrRecord.code || '-' }}</div>
+        <div class="qr-preview">
+          <img v-if="qrDataUrl" :src="qrDataUrl" alt="访客二维码" />
+        </div>
+      </div>
+      <span slot="footer">
+        <el-button @click="qrDialogVisible = false">关闭</el-button>
+        <el-button type="primary" :disabled="!qrDataUrl" @click="downloadQrPoster">下载合成图</el-button>
+      </span>
+    </el-dialog>
     <!-- <addBuild ref="addBuild" @refresh="getList"></addBuild>
     <addPark ref="addPark" @refresh="getList"></addPark> -->
   </div>
@@ -158,6 +175,7 @@
   import {
     download
   } from '@/utils/downloadRequest'
+  import QRCode from 'qrcode'
   import store from "@/store/modules/user.js"
   export default {
     components: {
@@ -216,6 +234,9 @@
         data: [],
         viewDialogVisible: false,
         viewDetailData: null,
+        qrDialogVisible: false,
+        qrRecord: null,
+        qrDataUrl: '',
         table: [{
             label: '序号',
             type: "index",
@@ -446,6 +467,66 @@
       },
       formatArray(val) {
         return Array.isArray(val) && val.length ? val.join('、') : '-'
+      },
+      openQrDialog(row) {
+        this.qrRecord = {
+          name: row.name || '',
+          date: row.date || '',
+          code: row.code || '',
+        }
+        this.qrDataUrl = ''
+        this.qrDialogVisible = true
+      },
+      async renderQrCode() {
+        if (!this.qrRecord || !this.qrRecord.code) {
+          this.$message.warning('当前记录没有核销码')
+          return
+        }
+        try {
+          this.qrDataUrl = await QRCode.toDataURL(this.qrRecord.code, {
+            width: 260,
+            margin: 2,
+          })
+        } catch (e) {
+          this.$message.error('二维码生成失败')
+        }
+      },
+      triggerDownloadByDataUrl(dataUrl, filename) {
+        const link = document.createElement('a')
+        link.href = dataUrl
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      },
+      buildFileName(suffix) {
+        const name = (this.qrRecord?.name || '访客').replace(/[\\/:*?"<>|]/g, '_')
+        const date = (this.qrRecord?.date || '').replace(/[\\/:*?"<>|]/g, '_')
+        return `${name}_${date || '无日期'}_${suffix}.png`
+      },
+      downloadQrPoster() {
+        if (!this.qrDataUrl) return
+        const canvas = document.createElement('canvas')
+        canvas.width = 800
+        canvas.height = 980
+        const ctx = canvas.getContext('2d')
+        ctx.fillStyle = '#ffffff'
+        ctx.fillRect(0, 0, canvas.width, canvas.height)
+        ctx.fillStyle = '#303133'
+        ctx.font = 'bold 40px Arial'
+        ctx.fillText('访客二维码', 40, 70)
+        ctx.font = '30px Arial'
+        ctx.fillText(`访客姓名：${this.qrRecord?.name || '-'}`, 40, 130)
+        ctx.fillText(`到访日期：${this.qrRecord?.date || '-'}`, 40, 180)
+        ctx.fillText(`核销码：${this.qrRecord?.code || '-'}`, 40, 230)
+
+        const img = new Image()
+        img.onload = () => {
+          ctx.drawImage(img, 180, 300, 440, 440)
+          const url = canvas.toDataURL('image/png')
+          this.triggerDownloadByDataUrl(url, this.buildFileName('二维码信息图'))
+        }
+        img.src = this.qrDataUrl
       }
     },
   }
@@ -514,4 +595,28 @@
     color: #909399;
     padding: 20px 0;
   }
+  .qr-wrap {
+    padding: 8px 0;
+  }
+  .qr-line {
+    margin-bottom: 8px;
+    color: #303133;
+    word-break: break-all;
+  }
+  .qr-label {
+    color: #606266;
+  }
+  .qr-preview {
+    margin-top: 16px;
+    display: flex;
+    justify-content: center;
+  }
+  .qr-preview img {
+    width: 260px;
+    height: 260px;
+    border: 1px solid #ebeef5;
+    padding: 8px;
+    box-sizing: border-box;
+    background: #fff;
+  }
 </style>