查看二维码

ant-design-vue-jeecg/src/mixins/JeecgListMixin.js

@@ -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
+    },
   }
 
 }

ant-design-vue-jeecg/src/views/tms/carinout/deliveryplan/DeliveryPlanList.vue

@@ -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(){

ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/VehicleDemandCountList.vue

@@ -10,8 +10,8 @@
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="发货类型">
+            <a-form-item label="运输类型">
-              <a-input placeholder="请输入发货类型" v-model="queryParam.shipType"></a-input>
+              <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:'送货区域'})

ant-design-vue-jeecg/src/views/tms/outbound/vehicledemandcount/modules/TakePhoneForm.vue

@@ -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: '请选择时间!'}],
         },