bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二维码问题

This commit is contained in:
bb_pan 2025-08-27 15:06:47 +08:00
parent 4b1b42d709
commit f0b86c9095
4 changed files with 238 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/business/exitPermit/index.vue
View File

@ -70,7 +70,6 @@
<div style="text-align: center; font-weight: 600; font-size: 36px; margin-bottom: 40px"> <div style="text-align: center; font-weight: 600; font-size: 36px; margin-bottom: 40px">
出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div> </div>
<div style="text-align: end">{{ passCode }}</div>
<div style="line-height: 1.96;margin-right: 65px;"> <div style="line-height: 1.96;margin-right: 65px;">
<div>门卫:</div> <div>门卫:</div>
<div> <div>
@ -242,6 +241,10 @@ export default {
const options = { year: 'numeric', month: 'long', day: 'numeric' }; const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(date).toLocaleDateString('zh-CN', options); return new Date(date).toLocaleDateString('zh-CN', options);
}, },
handleAdd() {
this.resetForm();
this.open = true;
},
// 重置表单 // 重置表单
resetForm() { resetForm() {

96
src/views/material/code/index.vue
View File

@ -157,10 +157,10 @@
<div class="uploadImg"> <div class="uploadImg">
<div id="qrcode" class="qrcode" ref="codeItem"></div> <div id="qrcode" class="qrcode" ref="codeItem"></div>
</div> </div>
<div class="boxCode">编号：{{ rowObj.qrCode }}</div> <div class="boxCode">{{ rowObj.maCode }}</div>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="downloadCode">下 载</el-button> <el-button type="primary" @click="downloadQrCode(rowObj)">下 载</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -312,19 +312,87 @@ export default {
}, 500) }, 500)
}, },
//二维码下载 //二维码下载
downloadCode(e) { downloadQrCode(row) {
if (document.getElementById('qrcode').childNodes[0]) { const qrContainer = document.createElement('div')
let element = this.$refs.codeBox document.body.appendChild(qrContainer)
html2canvas(element).then((canvas) => {
// 将canvas转换为图片URL const qrSize = 512 // 放大二维码
const image = canvas.toDataURL('image/png') const padding = 20 // 边距也放大
const alink = document.createElement('a') const fontSize = 68 // 放大文字
alink.href = image const maxTextWidth = qrSize
alink.download = this.qrCode
alink.click() const qrcode = new QRCode(qrContainer, {
text: 'http://ahjj.jypxks.com:9988/imw/backstage/machine/qrCodePage?qrcode=' + row.qrCode,
width: qrSize,
height: qrSize,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
}) })
setTimeout(() => {
const img = qrContainer.querySelector('img') || qrContainer.querySelector('canvas')
const text = row.maCode || ''
// 计算换行
const ctxMeasure = document.createElement('canvas').getContext('2d')
ctxMeasure.font = `${fontSize}px Arial`
const words = text.split('')
let line = ''
const lines = []
for (let i = 0; i < words.length; i++) {
const testLine = line + words[i]
if (ctxMeasure.measureText(testLine).width > maxTextWidth) {
lines.push(line)
line = words[i]
} else {
line = testLine
} }
}
lines.push(line)
// 动态计算画布高度
const lineHeight = fontSize + 10
const qrCanvas = document.createElement('canvas')
qrCanvas.width = qrSize + padding * 2
qrCanvas.height = qrSize + padding * 2 + lines.length * lineHeight
const ctx = qrCanvas.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, qrCanvas.width, qrCanvas.height)
ctx.drawImage(img, padding, padding, qrSize, qrSize)
// 绘制文字
ctx.fillStyle = '#000'
ctx.font = `${fontSize}px Arial`
ctx.textAlign = 'center'
lines.forEach((ln, index) => {
ctx.fillText(ln, qrCanvas.width / 2, qrSize + padding + fontSize / 1.2 + index * lineHeight)
})
// 下载
const a = document.createElement('a')
a.href = qrCanvas.toDataURL('image/png')
a.download = text + '.png'
a.click()
document.body.removeChild(qrContainer)
}, 500)
}, },
// downloadCode(e) {
// if (document.getElementById('qrcode').childNodes[0]) {
// let element = this.$refs.codeBox
// html2canvas(element).then((canvas) => {
// // 将canvas转换为图片URL
// const image = canvas.toDataURL('image/png')
// const alink = document.createElement('a')
// alink.href = image
// alink.download = this.qrCode
// alink.click()
// })
// }
// },
/** 物资厂家-下拉选 */ /** 物资厂家-下拉选 */
supplierInfoList() { supplierInfoList() {
let param = { let param = {
@ -494,7 +562,9 @@ export default {
.boxCode { .boxCode {
margin-top: 10px; margin-top: 10px;
padding-bottom: 20px; padding-bottom: 20px;
font-size: 18px; font-size: 33px;
font-weight: bold;
color: #000;
} }
::v-deep.el-table .fixed-width .el-button--mini { ::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important; width: 60px !important;

129
src/views/material/ma/device/index.vue
View File

@ -398,7 +398,7 @@
<div class="boxCode">{{ rowObj.maCode }}</div> <div class="boxCode">{{ rowObj.maCode }}</div>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="downloadCode">下 载</el-button> <el-button type="primary" @click="downloadQrCode(rowObj)">下 载</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -904,77 +904,88 @@ export default {
}, },
downloadQrCode(row) { downloadQrCode(row) {
try { const qrContainer = document.createElement('div')
// 创建外层容器 document.body.appendChild(qrContainer)
const codeQrContainer = document.createElement('div')
codeQrContainer.style.textAlign = 'center'
document.body.appendChild(codeQrContainer)
// 创建二维码容器 const qrSize = 512 // 放大二维码
const uploadImgContainer = document.createElement('div') const padding = 20 // 边距也放大
uploadImgContainer.className = 'uploadImg' const fontSize = 68 // 放大文字
codeQrContainer.appendChild(uploadImgContainer) const maxTextWidth = qrSize
// 创建二维码显示容器 const qrcode = new QRCode(qrContainer, {
const qrcodeContainer = document.createElement('div')
qrcodeContainer.className = 'qrcode'
uploadImgContainer.appendChild(qrcodeContainer)
// 使用 qrcodejs2 生成二维码
new QRCode(qrcodeContainer, {
text: 'http://ahjj.jypxks.com:9988/imw/backstage/machine/qrCodePage?qrcode=' + row.qrCode, text: 'http://ahjj.jypxks.com:9988/imw/backstage/machine/qrCodePage?qrcode=' + row.qrCode,
width: 256, width: qrSize,
height: 256, height: qrSize,
colorDark: '#000000', colorDark: '#000000',
colorLight: '#ffffff', colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H correctLevel: QRCode.CorrectLevel.H
}) })
// 创建设备编号容器 setTimeout(() => {
const boxCodeContainer = document.createElement('div') const img = qrContainer.querySelector('img') || qrContainer.querySelector('canvas')
boxCodeContainer.style.fontSize = '35px' const text = row.maCode || ''
boxCodeContainer.className = 'boxCode'
boxCodeContainer.innerText = `${row.maCode || '未知'}`
codeQrContainer.appendChild(boxCodeContainer)
// 为了保证页面不被遮挡，可以通过一些 CSS 来调整布局 // 计算换行
codeQrContainer.style.display = 'flex' const ctxMeasure = document.createElement('canvas').getContext('2d')
codeQrContainer.style.flexDirection = 'column' ctxMeasure.font = `${fontSize}px Arial`
codeQrContainer.style.alignItems = 'center' const words = text.split('')
codeQrContainer.style.justifyContent = 'center' let line = ''
codeQrContainer.style.width = '400px' const lines = []
codeQrContainer.style.height = '400px' for (let i = 0; i < words.length; i++) {
console.log(codeQrContainer) const testLine = line + words[i]
html2canvas(codeQrContainer).then((canvas) => { if (ctxMeasure.measureText(testLine).width > maxTextWidth) {
// 将canvas转换为图片URL lines.push(line)
const image = canvas.toDataURL('image/png') line = words[i]
const alink = document.createElement('a') } else {
alink.href = image line = testLine
alink.download = row.qrCode }
alink.click() }
lines.push(line)
// 动态计算画布高度
const lineHeight = fontSize + 10
const qrCanvas = document.createElement('canvas')
qrCanvas.width = qrSize + padding * 2
qrCanvas.height = qrSize + padding * 2 + lines.length * lineHeight
const ctx = qrCanvas.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, qrCanvas.width, qrCanvas.height)
ctx.drawImage(img, padding, padding, qrSize, qrSize)
// 绘制文字
ctx.fillStyle = '#000'
ctx.font = `${fontSize}px Arial`
ctx.textAlign = 'center'
lines.forEach((ln, index) => {
ctx.fillText(ln, qrCanvas.width / 2, qrSize + padding + fontSize / 1.2 + index * lineHeight)
}) })
this.$message.success('二维码下载成功') // 下载
} catch (error) { const a = document.createElement('a')
console.error('二维码生成失败:', error) a.href = qrCanvas.toDataURL('image/png')
this.$message.error('二维码下载失败，请重试') a.download = text + '.png'
} a.click()
document.body.removeChild(qrContainer)
}, 500)
}, },
//二维码下载 //二维码下载
downloadCode(e) { // downloadCode(e) {
if (document.getElementById('qrcode').childNodes[0]) { // if (document.getElementById('qrcode').childNodes[0]) {
let element = this.$refs.codeQr // let element = this.$refs.codeQr
html2canvas(element).then((canvas) => { // html2canvas(element).then((canvas) => {
// 将canvas转换为图片URL // // 将canvas转换为图片URL
const image = canvas.toDataURL('image/png') // const image = canvas.toDataURL('image/png')
const alink = document.createElement('a') // const alink = document.createElement('a')
alink.href = image // alink.href = image
alink.download = this.qrCode // alink.download = this.qrCode
alink.click() // alink.click()
}) // })
} // }
}, // },
handleViewBuyTask(row) { handleViewBuyTask(row) {
this.$router.push({ this.$router.push({
path: '/purchase/goodsEntry', path: '/purchase/goodsEntry',
@ -1102,6 +1113,8 @@ export default {
margin-top: 10px; margin-top: 10px;
padding-bottom: 20px; padding-bottom: 20px;
font-size: 33px; font-size: 33px;
font-weight: bold;
color: #000;
} }
.qrcode-container img { .qrcode-container img {

128
src/views/material/standardBox/index.vue
View File

@ -125,7 +125,7 @@
<div class="boxCode">{{ rowObj.boxCode }}</div> <div class="boxCode">{{ rowObj.boxCode }}</div>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="downloadCode">下 载</el-button> <el-button type="primary" @click="downloadQrCode(rowObj)">下 载</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -236,77 +236,87 @@ export default {
}, 500) }, 500)
}, },
downloadQrCode(row) { downloadQrCode(row) {
console.log('🚀 ~ downloadQrCode ~ row:', row) const qrContainer = document.createElement('div')
try { document.body.appendChild(qrContainer)
// 创建外层容器
const codeQrContainer = document.createElement('div')
codeQrContainer.style.textAlign = 'center'
document.body.appendChild(codeQrContainer)
// 创建二维码容器 const qrSize = 512 // 放大二维码
const uploadImgContainer = document.createElement('div') const padding = 20 // 边距也放大
uploadImgContainer.className = 'uploadImg' const fontSize = 59 // 放大文字
codeQrContainer.appendChild(uploadImgContainer) const maxTextWidth = qrSize
// 创建二维码显示容器 const qrcode = new QRCode(qrContainer, {
const qrcodeContainer = document.createElement('div')
qrcodeContainer.className = 'qrcode'
uploadImgContainer.appendChild(qrcodeContainer)
// 使用 qrcodejs2 生成二维码
new QRCode(qrcodeContainer, {
text: row.boxCode, text: row.boxCode,
width: 256, width: qrSize,
height: 256, height: qrSize,
colorDark: '#000000', colorDark: '#000000',
colorLight: '#ffffff', colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H correctLevel: QRCode.CorrectLevel.H
}) })
// 创建设备编号容器 setTimeout(() => {
const boxCodeContainer = document.createElement('div') const img = qrContainer.querySelector('img') || qrContainer.querySelector('canvas')
boxCodeContainer.style.fontSize = '30px' const text = row.boxCode
boxCodeContainer.className = 'boxCode'
boxCodeContainer.innerText = `${row.boxCode || '未知'}`
codeQrContainer.appendChild(boxCodeContainer)
// 为了保证页面不被遮挡，可以通过一些 CSS 来调整布局 // 计算换行
codeQrContainer.style.display = 'flex' const ctxMeasure = document.createElement('canvas').getContext('2d')
codeQrContainer.style.flexDirection = 'column' ctxMeasure.font = `${fontSize}px Arial`
codeQrContainer.style.alignItems = 'center' const words = text.split('')
codeQrContainer.style.justifyContent = 'center' let line = ''
codeQrContainer.style.width = '400px' const lines = []
codeQrContainer.style.height = '400px' for (let i = 0; i < words.length; i++) {
console.log(codeQrContainer) const testLine = line + words[i]
html2canvas(codeQrContainer).then((canvas) => { if (ctxMeasure.measureText(testLine).width > maxTextWidth) {
// 将canvas转换为图片URL lines.push(line)
const image = canvas.toDataURL('image/png') line = words[i]
const alink = document.createElement('a') } else {
alink.href = image line = testLine
alink.download = row.boxCode }
alink.click() }
lines.push(line)
// 动态计算画布高度
const lineHeight = fontSize + 10
const qrCanvas = document.createElement('canvas')
qrCanvas.width = qrSize + padding * 2
qrCanvas.height = qrSize + padding * 2 + lines.length * lineHeight
const ctx = qrCanvas.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, qrCanvas.width, qrCanvas.height)
ctx.drawImage(img, padding, padding, qrSize, qrSize)
// 绘制文字
ctx.fillStyle = '#000'
ctx.font = `${fontSize}px Arial`
ctx.textAlign = 'center'
lines.forEach((ln, index) => {
ctx.fillText(ln, qrCanvas.width / 2, qrSize + padding + fontSize / 1.2 + index * lineHeight)
}) })
this.$message.success('二维码下载成功') // 下载
} catch (error) { const a = document.createElement('a')
console.error('二维码生成失败:', error) a.href = qrCanvas.toDataURL('image/png')
this.$message.error('二维码下载失败，请重试') a.download = text + '.png'
} a.click()
document.body.removeChild(qrContainer)
}, 500)
}, },
//二维码下载 //二维码下载
downloadCode(e) { // downloadCode(e) {
if (document.getElementById('qrcode').childNodes[0]) { // if (document.getElementById('qrcode').childNodes[0]) {
let element = this.$refs.codeBox // let element = this.$refs.codeBox
html2canvas(element).then((canvas) => { // html2canvas(element).then((canvas) => {
// 将canvas转换为图片URL // // 将canvas转换为图片URL
const image = canvas.toDataURL('image/png') // const image = canvas.toDataURL('image/png')
const alink = document.createElement('a') // const alink = document.createElement('a')
alink.href = image // alink.href = image
alink.download = this.boxCode // alink.download = this.boxCode
alink.click() // alink.click()
}) // })
} // }
}, // },
// 设备明细 // 设备明细
handleDetail(row) { handleDetail(row) {
this.open=true; this.open=true;