|
|
|
|
@ -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>
|
|
|
|
|
|
