更新

package.json

@@ -13,6 +13,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@xkeshi/vue-barcode": "^1.0.0",
     "axios": "0.18.0",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "2.4.6",

src/main.js

@@ -19,6 +19,8 @@ import time from 'time-formater'
 import htmlToPdf from '@/vendor/htmlToPdf'
 import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
+import VueBarcode from '@xkeshi/vue-barcode'
+Vue.component('barcode', VueBarcode)
 
 Vue.use(curd)
 Vue.use(htmlToPdf)

src/views/Assembly/PrintingAssemblyProcessCard/index.vue

@@ -70,14 +70,15 @@
             <tr class="trHeight2">
               <td colspan="3" style="text-align: center;font-size: 30px;font-weight: bold;width: 10.25%;">GAOJING</td>
               <td colspan="13" style="text-align:center;font-size: 30px;font-weight: bold">专机装配工艺过程卡</td>
+              <td colspan="2"><img id="img" alt=""></td>
             </tr>
             <tr class="tbodyHead">
               <td colspan="2" style="font-weight: bold" width="7.25%" align="center">机床编号:</td>
               <td colspan="3" width="16%" align="center">{{ MachineNum }}</td>
               <td colspan="1" style="font-weight: bold" width="8.25%" align="center">机床名称:</td>
-              <td colspan="5" width="35%" align="center">{{ MachineName }}</td>
+              <td colspan="5" width="30%" align="center">{{ MachineName }}</td>
               <td colspan="1" style="font-weight: bold" width="7.25%" align="center">客户名称:</td>
-              <td colspan="4" width="26.25%" align="center">{{ CustomerName }}</td>
+              <td colspan="6" width="31.25%" align="center">{{ CustomerName }}</td>
             </tr>
             <tr id="tableHead" class="trHeight">
               <th class="tg-0pky" width="4%">序号</th>
@@ -88,11 +89,12 @@
               <th class="tg-0lax">完成情况/装配工</th>
               <th class="tg-0lax">检验情况/检验员</th>
               <th class="tg-0lax" width="100px">备注</th>
+              <th class="tg-0lax" colspan="2" width="200px">条码</th>
             </tr>
           </thead>
           <tbody v-for="(item, index) in dataAll" :key="index">
             <tr class="trHeight">
-              <td colspan="16" style="font-weight: bold">{{ item.table1 }}</td>
+              <td colspan="18" style="font-weight: bold">{{ item.table1 }}</td>
             </tr>
             <tr v-for="(list, index) in item.table2" :key="index" class="trHeight1">
               <td align="center"> {{ list.序号 }}</td>
@@ -103,6 +105,7 @@
               <td/>
               <td/>
               <td width="100px"/>
+              <td colspan="2" width="200px"><barcode :value="list.装配工序流水号" :options="barcode_option" tag="svg"/></td>
             </tr>
           </tbody>
         </table>
@@ -114,11 +117,20 @@
 <script>
 import { initProject, searchMachine, searchDetail, searchProcess, searchTable } from '@/api/Assembly/PrintingAssemblyProcessCard'
 import $ from 'jquery'
-// import QRCode from 'qrcode'
+import QRCode from 'qrcode'
 
 export default {
   data() {
     return {
+      barcode_option: {
+        displayValue: false,
+        background: '#fff',
+        valid: function(valid) {
+          console.log(valid)
+        },
+        width: '2px',
+        height: '25px'
+      },
       dataAll: [],
       tableData: [],
       radio: 0,
@@ -171,6 +183,18 @@ export default {
       this.MachineName = row.机床名称
       this.MachineNum = row.机床图号
       this.CustomerName = row.客户名称
+      const opts = {
+        errorCorrectionLevel: 'H',
+        type: 'image/jpeg',
+        rendererOpts: {
+          quality: 0.3
+        }
+      }
+      QRCode.toDataURL(row.机床流水号, opts, function(err, url) {
+        if (err) throw err
+        const img = document.getElementById('img')
+        img.src = url
+      })
       const response = await searchDetail(row.机床流水号)
       const data = response.data
       for (let i = 0; i < data.length; i++) {
@@ -212,16 +236,16 @@ export default {
     margin: 10px 0 10px 10px;
   }
   .trHeight{
-    height: 45px;
+    height: 65px;
   }
   .trHeight1{
     height: 30px;
   }
   .trHeight2{
-    height: 100px;
+    height: 120px;
   }
   .tbodyHead{
-    height: 50px;
+    height: 70px;
   }
 </style>
 <style>