diff --git a/ant-design-vue-jeecg/src/mixins/JeecgListMixin.js b/ant-design-vue-jeecg/src/mixins/JeecgListMixin.js index 95a8c46..51782da 100644 --- a/ant-design-vue-jeecg/src/mixins/JeecgListMixin.js +++ b/ant-design-vue-jeecg/src/mixins/JeecgListMixin.js @@ -439,6 +439,60 @@ export const JeecgListMixin = { // 移除创建的元素 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 + }, } } \ No newline at end of file diff --git a/ant-design-vue-jeecg/src/views/tms/carinout/deliveryplan/DeliveryPlanList.vue b/ant-design-vue-jeecg/src/views/tms/carinout/deliveryplan/DeliveryPlanList.vue index 81998af..1dd79a9 100644 --- a/ant-design-vue-jeecg/src/views/tms/carinout/deliveryplan/DeliveryPlanList.vue +++ b/ant-design-vue-jeecg/src/views/tms/carinout/deliveryplan/DeliveryPlanList.vue @@ -119,7 +119,10 @@ 车辆预约 - 下载二维码 + 查看二维码 + + + 下载二维码 @@ -130,6 +133,16 @@ + + + @@ -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(){ diff --git a/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/VehicleDemandCountList.vue b/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/VehicleDemandCountList.vue index e621890..03840bf 100644 --- a/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/VehicleDemandCountList.vue +++ b/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/VehicleDemandCountList.vue @@ -10,8 +10,8 @@ - - + + @@ -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:'送货区域'}) diff --git a/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/modules/TakePhoneForm.vue b/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/modules/TakePhoneForm.vue index dfccf42..d207295 100644 --- a/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/modules/TakePhoneForm.vue +++ b/ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/modules/TakePhoneForm.vue @@ -45,7 +45,8 @@ - + + @@ -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: '请选择时间!'}], },