查看二维码
This commit is contained in:
王帅
parent
c621ce2050
commit
0a6088db0d
@ -439,6 +439,60 @@ export const JeecgListMixin = {
|
||||
// 移除创建的<a>元素
|
||||
document.body.removeChild(link);
|
||||
},
|
||||
generateQRCode() {
|
||||
const canvas = this.$refs.qrCodeCanvas;
|
||||
QRCode.toCanvas(canvas, this.qrCodeValue, (error) => {
|
||||
if (error) console.error('生成二维码失败', error);
|
||||
console.log('二维码生成成功！');
|
||||
});
|
||||
},
|
||||
// url:this.qrCodeValue 二维码内容链接 size 二维码大小（高宽） qrText 底部描述文字 color 二维码颜色
|
||||
async initCanvas(id, size, qrText, color = '#000'){
|
||||
let url = this.qrCodeValue + '?id=' + id
|
||||
const canvas = await QRCode.toCanvas(this.$refs.qrCodeCanvas,url, {
|
||||
errorCorrectionLevel: 'H',
|
||||
margin: 1, // 设置padding 二维码的padding
|
||||
height: size,
|
||||
width: size,
|
||||
scal: 177,
|
||||
color: {dark: color},
|
||||
rendererOpts: {quality: 0.9}
|
||||
})
|
||||
const fontWeight='bold' // 字体 粗体 格式
|
||||
const fontSize = 14 // 字体大小
|
||||
const tb = 5 // 底部文字上下间距
|
||||
const realHeight = size + fontSize + 2*tb //实际高度
|
||||
// 画布上下文对象
|
||||
const ctx = canvas.getContext("2d");
|
||||
// 获取二维码数据
|
||||
const data = ctx.getImageData(0, 0, size, size);
|
||||
ctx.fillStyle = "#fff"
|
||||
canvas.setAttribute('height', realHeight); // 重设画布像素高度
|
||||
canvas.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
|
||||
ctx.fillRect(0, 0, size, realHeight)
|
||||
ctx.putImageData(data, 0, 0)// 填充二维码数据
|
||||
ctx.font = `${fontWeight} ${fontSize}px Arial`;
|
||||
const textWidth = ctx.measureText(qrText).width; //文字真实宽度
|
||||
const ftop = size + tb; //文字距顶部位置
|
||||
const fleft = (size - textWidth) / 2; //根据字体大小计算文字left
|
||||
const textPadding = fontSize / 2; //字体边距为字体大小的一半可以自己设置
|
||||
// 设置底部背景色
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.fillRect(0, size, size, realHeight - 2*tb);
|
||||
// 设置字体填充位置
|
||||
ctx.fillRect(
|
||||
fleft - textPadding / 2,
|
||||
ftop - textPadding / 2,
|
||||
textWidth + textPadding,
|
||||
fontSize + textPadding
|
||||
);
|
||||
ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
|
||||
ctx.fillStyle = "#333";// 字体颜色
|
||||
ctx.fillText(qrText, fleft, ftop);
|
||||
ctx.fillText(qrText, fleft, ftop);
|
||||
console.log(canvas.toDataURL())
|
||||
return canvas
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
@ -119,7 +119,10 @@
|
||||
<a @click="handleTake(record)">车辆预约</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="handleDownloadQRCode(record.id, '送货.png')">下载二维码</a>
|
||||
<a @click="viewQRCode(record)">查看二维码</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="handleDownloadQRCode(record.id, '车辆预约.png')">下载二维码</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
@ -130,6 +133,16 @@
|
||||
<DeliveryPlanDetailList ref="deliveryPlanDetailList"></DeliveryPlanDetailList>
|
||||
<delivery-plan-modal ref="modalForm" @ok="modalFormOk"></delivery-plan-modal>
|
||||
<TakeModal ref="takeModal" @ok="takeModalOk"/>
|
||||
<j-modal
|
||||
title="查看二维码"
|
||||
:width="300"
|
||||
:visible="qrCodeVisible"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<canvas ref="qrCodeCanvas"></canvas>
|
||||
</j-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
@ -154,6 +167,7 @@
|
||||
return {
|
||||
description: '送货计划管理页面',
|
||||
qrCodeForm: 'takeDeliverPhoneForm',
|
||||
qrCodeVisible: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
@ -284,6 +298,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
handleOk(){this.qrCodeVisible = false},
|
||||
handleCancel(){this.qrCodeVisible = false},
|
||||
viewQRCode(record){
|
||||
const qrText = record.artName + '-' + record.artTel
|
||||
this.qrCodeVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.initCanvas(record.id, 200, qrText);
|
||||
});
|
||||
},
|
||||
initDictConfig(){
|
||||
},
|
||||
getSuperFieldList(){
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="发货类型">
|
||||
<a-input placeholder="请输入发货类型" v-model="queryParam.shipType"></a-input>
|
||||
<a-form-item label="运输类型">
|
||||
<a-input placeholder="请输入运输类型" v-model="queryParam.shipType"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="toggleSearchStatus">
|
||||
@ -132,6 +132,9 @@
|
||||
<a-menu-item v-if="record.auditResult == 1">
|
||||
<a @click="handleTake(record)">提货</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="record.auditResult == 1">
|
||||
<a @click="viewQRCode(record)">查看二维码</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="record.auditResult == 1">
|
||||
<a @click="handleDownloadQRCode(record.id, '提货.png')">下载二维码</a>
|
||||
</a-menu-item>
|
||||
@ -144,6 +147,17 @@
|
||||
|
||||
<vehicle-demand-count-modal ref="modalForm" @ok="modalFormOk"></vehicle-demand-count-modal>
|
||||
<TakeModal ref="takeModal" @ok="takeModalOk"/>
|
||||
<j-modal
|
||||
title="查看二维码"
|
||||
:width="300"
|
||||
:visible="qrCodeVisible"
|
||||
switchFullscreen
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<canvas ref="qrCodeCanvas"></canvas>
|
||||
</j-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
@ -167,6 +181,7 @@
|
||||
return {
|
||||
description: '用车需求计算管理页面',
|
||||
totalPallets: 0, // 总费用
|
||||
qrCodeVisible: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
@ -186,7 +201,7 @@
|
||||
// width: 120
|
||||
// },
|
||||
{
|
||||
title:'发货类型',
|
||||
title:'运输类型',
|
||||
align:"center",
|
||||
dataIndex: 'shipType_dictText',
|
||||
width: 80
|
||||
@ -340,13 +355,22 @@
|
||||
takeModalOk(){
|
||||
this.$message.success("操作成功，请到车辆出入厂流程管理中查询数据");
|
||||
},
|
||||
handleOk(){this.qrCodeVisible = false},
|
||||
handleCancel(){this.qrCodeVisible = false},
|
||||
viewQRCode(record){
|
||||
const qrText = record.pickUpHub+'-'+record.deliveryAddress+'-'+record.carLong
|
||||
this.qrCodeVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.initCanvas(record.id, 200, qrText);
|
||||
});
|
||||
},
|
||||
loadData(){},
|
||||
initDictConfig(){
|
||||
},
|
||||
getSuperFieldList(){
|
||||
let fieldList=[];
|
||||
fieldList.push({type:'string',value:'vdNo',text:'用车需求编号'})
|
||||
fieldList.push({type:'string',value:'shipType',text:'发货类型'})
|
||||
fieldList.push({type:'string',value:'shipType',text:'运输类型'})
|
||||
fieldList.push({type:'string',value:'carType',text:'车型'})
|
||||
fieldList.push({type:'int',value:'carLong',text:'车长'})
|
||||
fieldList.push({type:'string',value:'deliveryArea',text:'送货区域'})
|
||||
|
||||
@ -45,7 +45,8 @@
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-form-model-item label="物流公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logistics">
|
||||
<a-auto-complete v-model="model.logistics" placeholder="请输入物流公司" @select="logisticsSelect" @change="logisticsChange" :dataSource="logisticsList"></a-auto-complete>
|
||||
<a-auto-complete v-model="model.logistics" placeholder="请输入物流公司"></a-auto-complete>
|
||||
<!-- <a-auto-complete v-model="model.logistics" placeholder="请输入物流公司" @select="logisticsSelect" @change="logisticsChange" :dataSource="logisticsList"></a-auto-complete> -->
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
@ -121,7 +122,7 @@
|
||||
carNum :[{required: true, message: '请输入车牌号!'}],
|
||||
logistics :[{required: true, message: '请输入物流公司!'}],
|
||||
driverName :[{required: true, message: '请输入司机姓名!'}],
|
||||
driverIdCard :[{required: true, message: '请输入身份证!'}],
|
||||
// driverIdCard :[{required: true, message: '请输入身份证!'}],
|
||||
driverTel :[{required: true, message: '请输入电话!'}],
|
||||
etaTime :[{required: true, message: '请选择时间!'}],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user