<template>
|
<TableLayout >
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<ul class="toolbar" v-permissions="['business:category:create', 'business:category:delete']">
|
<li><el-button type="primary" @click="handlePageChange">刷新</el-button></li>
|
</ul>
|
<el-table
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column prop="name" label="表单入口名称" min-width="100px"></el-table-column>
|
<el-table-column prop="url" label="二维码" min-width="100px">
|
<template slot-scope="{ row }">
|
<div :id="`qrcode${row.id}`" :ref="`qrcode${row.id}`"></div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
min-width="120" >
|
<template slot-scope="{row}">
|
<el-button type="text" @click="download(row)" >下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<canvas id="QRCode_header" ref="canvas" title="扫描二维码"></canvas>
|
</template>
|
<!-- 新建/修改 -->
|
</TableLayout>
|
</template>
|
|
<script>
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import QRCode from 'qrcodejs2'
|
export default {
|
name: 'Category',
|
extends: BaseTable,
|
components: { TableLayout },
|
data () {
|
return {
|
// 搜索
|
searchForm: {
|
id: '',
|
creator: '',
|
createDate: '',
|
editor: '',
|
editDate: '',
|
isdeleted: '',
|
name: '',
|
remark: '',
|
status: '',
|
sortnum: '',
|
imgurl: '',
|
type: '',
|
parentId: null,
|
namePath: '',
|
idPath: ''
|
}
|
}
|
},
|
created () {
|
this.config({
|
module: '二维码管理',
|
api: '/system/dict'
|
})
|
this.handlePageChange()
|
},
|
methods: {
|
handlePageChange () {
|
this.isWorking.search = true
|
var that = this
|
this.api.qrcodeList({})
|
.then(data => {
|
that.tableData.list = data
|
setTimeout(function () {
|
that.tableData.list.forEach(row => {
|
that.$refs['qrcode' + row.id].innerHTML = ''
|
row.qrcodeImg = that.crateQrcodeShow('qrcode' + row.id, row.url)
|
})
|
}, 1000)
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
download (row) {
|
const nodeList = Array.prototype.slice.call(row.qrcodeImg._el.children)
|
const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')// 选出图片类型
|
// 构建画布
|
const canvas = document.createElement('canvas')
|
canvas.width = 220
|
canvas.height = 220
|
const ctx = canvas.getContext('2d')
|
ctx.fillStyle = 'white'
|
ctx.fillRect(0, 0, canvas.width, canvas.height) // 填充整个画布区域，确保背景色覆盖整个画布
|
ctx.drawImage(img, 10,10,200,200)
|
// 构造url
|
const url = canvas.toDataURL('image/png')
|
|
const a = document.createElement('a')
|
a.href = url
|
a.download = `${row.name}-二维码.png`
|
a.click()
|
a.remove()
|
},
|
crateQrcodeShow (div, qrcode1) {
|
if (qrcode1 == null || qrcode1 == '') {
|
return
|
}
|
return new QRCode(div, {
|
width: 120,
|
height: 120,
|
text: qrcode1
|
})
|
}
|
}
|
}
|
</script>
|
