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

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

@ -157,10 +157,10 @@
<div class="uploadImg">
<div id="qrcode" class="qrcode" ref="codeItem"></div>
</div>
<div class="boxCode">编号：{{ rowObj.qrCode }}</div>
<div class="boxCode">{{ rowObj.maCode }}</div>
</div>
<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>
</el-dialog>
</div>
@ -312,19 +312,87 @@ export default {
}, 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()
downloadQrCode(row) {
const qrContainer = document.createElement('div')
document.body.appendChild(qrContainer)
const qrSize = 512 // 放大二维码
const padding = 20 // 边距也放大
const fontSize = 68 // 放大文字
const maxTextWidth = qrSize
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() {
let param = {
@ -494,7 +562,9 @@ export default {
.boxCode {
margin-top: 10px;
padding-bottom: 20px;
font-size: 18px;
font-size: 33px;
font-weight: bold;
color: #000;
}
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;

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

@ -398,7 +398,7 @@
<div class="boxCode">{{ rowObj.maCode }}</div>
</div>
<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>
</el-dialog>
@ -904,77 +904,88 @@ export default {
},
downloadQrCode(row) {
try {
// 创建外层容器
const codeQrContainer = document.createElement('div')
codeQrContainer.style.textAlign = 'center'
document.body.appendChild(codeQrContainer)
const qrContainer = document.createElement('div')
document.body.appendChild(qrContainer)
// 创建二维码容器
const uploadImgContainer = document.createElement('div')
uploadImgContainer.className = 'uploadImg'
codeQrContainer.appendChild(uploadImgContainer)
const qrSize = 512 // 放大二维码
const padding = 20 // 边距也放大
const fontSize = 68 // 放大文字
const maxTextWidth = qrSize
// 创建二维码显示容器
const qrcodeContainer = document.createElement('div')
qrcodeContainer.className = 'qrcode'
uploadImgContainer.appendChild(qrcodeContainer)
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
})
// 使用 qrcodejs2 生成二维码
new QRCode(qrcodeContainer, {
text: 'http://ahjj.jypxks.com:9988/imw/backstage/machine/qrCodePage?qrcode=' + row.qrCode,
width: 256,
height: 256,
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 boxCodeContainer = document.createElement('div')
boxCodeContainer.style.fontSize = '35px'
boxCodeContainer.className = 'boxCode'
boxCodeContainer.innerText = `${row.maCode || '未知'}`
codeQrContainer.appendChild(boxCodeContainer)
// 下载
const a = document.createElement('a')
a.href = qrCanvas.toDataURL('image/png')
a.download = text + '.png'
a.click()
// 为了保证页面不被遮挡，可以通过一些 CSS 来调整布局
codeQrContainer.style.display = 'flex'
codeQrContainer.style.flexDirection = 'column'
codeQrContainer.style.alignItems = 'center'
codeQrContainer.style.justifyContent = 'center'
codeQrContainer.style.width = '400px'
codeQrContainer.style.height = '400px'
console.log(codeQrContainer)
html2canvas(codeQrContainer).then((canvas) => {
// 将canvas转换为图片URL
const image = canvas.toDataURL('image/png')
const alink = document.createElement('a')
alink.href = image
alink.download = row.qrCode
alink.click()
})
this.$message.success('二维码下载成功')
} catch (error) {
console.error('二维码生成失败:', error)
this.$message.error('二维码下载失败，请重试')
}
document.body.removeChild(qrContainer)
}, 500)
},
//二维码下载
downloadCode(e) {
if (document.getElementById('qrcode').childNodes[0]) {
let element = this.$refs.codeQr
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()
})
}
},
// downloadCode(e) {
// if (document.getElementById('qrcode').childNodes[0]) {
// let element = this.$refs.codeQr
// 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()
// })
// }
// },
handleViewBuyTask(row) {
this.$router.push({
path: '/purchase/goodsEntry',
@ -1102,6 +1113,8 @@ export default {
margin-top: 10px;
padding-bottom: 20px;
font-size: 33px;
font-weight: bold;
color: #000;
}
.qrcode-container img {

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

@ -125,7 +125,7 @@
<div class="boxCode">{{ rowObj.boxCode }}</div>
</div>
<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>
</el-dialog>
</div>
@ -236,77 +236,87 @@ export default {
}, 500)
},
downloadQrCode(row) {
console.log('🚀 ~ downloadQrCode ~ row:', row)
try {
// 创建外层容器
const codeQrContainer = document.createElement('div')
codeQrContainer.style.textAlign = 'center'
document.body.appendChild(codeQrContainer)
const qrContainer = document.createElement('div')
document.body.appendChild(qrContainer)
// 创建二维码容器
const uploadImgContainer = document.createElement('div')
uploadImgContainer.className = 'uploadImg'
codeQrContainer.appendChild(uploadImgContainer)
const qrSize = 512 // 放大二维码
const padding = 20 // 边距也放大
const fontSize = 59 // 放大文字
const maxTextWidth = qrSize
// 创建二维码显示容器
const qrcodeContainer = document.createElement('div')
qrcodeContainer.className = 'qrcode'
uploadImgContainer.appendChild(qrcodeContainer)
const qrcode = new QRCode(qrContainer, {
text: row.boxCode,
width: qrSize,
height: qrSize,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
// 使用 qrcodejs2 生成二维码
new QRCode(qrcodeContainer, {
text: row.boxCode,
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
setTimeout(() => {
const img = qrContainer.querySelector('img') || qrContainer.querySelector('canvas')
const text = row.boxCode
// 计算换行
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 boxCodeContainer = document.createElement('div')
boxCodeContainer.style.fontSize = '30px'
boxCodeContainer.className = 'boxCode'
boxCodeContainer.innerText = `${row.boxCode || '未知'}`
codeQrContainer.appendChild(boxCodeContainer)
// 下载
const a = document.createElement('a')
a.href = qrCanvas.toDataURL('image/png')
a.download = text + '.png'
a.click()
// 为了保证页面不被遮挡，可以通过一些 CSS 来调整布局
codeQrContainer.style.display = 'flex'
codeQrContainer.style.flexDirection = 'column'
codeQrContainer.style.alignItems = 'center'
codeQrContainer.style.justifyContent = 'center'
codeQrContainer.style.width = '400px'
codeQrContainer.style.height = '400px'
console.log(codeQrContainer)
html2canvas(codeQrContainer).then((canvas) => {
// 将canvas转换为图片URL
const image = canvas.toDataURL('image/png')
const alink = document.createElement('a')
alink.href = image
alink.download = row.boxCode
alink.click()
})
this.$message.success('二维码下载成功')
} catch (error) {
console.error('二维码生成失败:', error)
this.$message.error('二维码下载失败，请重试')
}
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.boxCode
alink.click()
})
}
},
// 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.boxCode
// alink.click()
// })
// }
// },
// 设备明细
handleDetail(row) {
this.open=true;