From 9193459fbb692abc227b1643ae52f65a2e782ebd Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 28 七月 2022 14:25:18 +0800
Subject: [PATCH] 1.自定义打印完成

---
 src/views/scgl/gd.vue |  363 +++++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 333 insertions(+), 30 deletions(-)

diff --git a/src/views/scgl/gd.vue b/src/views/scgl/gd.vue
index 07e2d5a..1c12268 100644
--- a/src/views/scgl/gd.vue
+++ b/src/views/scgl/gd.vue
@@ -467,11 +467,12 @@
           />
         </el-table>
       </el-dialog>
+
       <span slot="footer" class="dialog-footer">
         <div class="footerButton">
           <el-button @click="dialogVisibleCancel">鍙� 娑�</el-button>
-          <el-button v-if="operation==='add'" type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
-          <el-button v-else type="primary" @click="dialogVisibleConfirm">纭� 瀹�/鎵� 鍗�</el-button>
+          <!--          <el-button v-if="operation==='add'" type="primary" @click="dialogVisibleConfirmPreview('add')">棰勮</el-button>-->
+          <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
         </div>
       </span>
     </el-dialog>
@@ -484,7 +485,13 @@
       top="15vh"
       class="dialogVisibleSearch"
       :close-on-click-modal="false"
+      @close="dialogVisibleTaskClose"
     >
+      <el-button
+        style="margin-bottom: 15px"
+        type="primary"
+        @click="supplementClick"
+      >琛ユ墦</el-button>
       <el-table
         :data="taskTableData"
         border
@@ -548,6 +555,137 @@
       </span>
     </el-dialog>
 
+    <!--        鎵撳嵃棰勮瀵硅瘽妗�-->
+    <el-dialog
+      title=""
+      :visible.sync="dialogVisibleApprove"
+      width="812px"
+      class="dialogVisibleConfirmClass"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="dialogVisibleConfirmClose"
+    >
+      <!-- 瑕佹墦鍗扮殑鍖哄煙 -->
+      <div id="printMe" style="padding: 30px">
+        <div style="font-size: 26px; text-align: center">娴佺▼鍗�</div>
+
+        <div style="display: flex;justify-content: space-around;margin-top: 20px">
+          <div style="width: 78%">
+            <el-form
+              ref="formApprove"
+              :model="formApprove"
+              label-width="100px"
+              inline
+              style="display: flex;justify-content: space-between"
+            >
+              <div class="elForm">
+                <el-form-item label="宸ュ崟缂栧彿锛�" class="formContent">
+                  {{ formApprove.mesordercode }}
+                </el-form-item>
+                <el-form-item label="浜у搧缂栫爜锛�" class="formContent">
+                  {{ formApprove.partcode }}
+                </el-form-item>
+                <el-form-item label="浜у搧鍚嶇О锛�" class="formContent">
+                  {{ formApprove.partname }}
+                </el-form-item>
+                <el-form-item label="浜у搧瑙勬牸锛�" class="formContent">
+                  {{ formApprove.partspec }}
+                </el-form-item>
+                <el-form-item label="宸ュ崟鏁伴噺锛�" class="formContent">
+                  {{ formApprove.plan_qty }}
+                </el-form-item>
+                <el-form-item label="宸ヨ壓璺嚎锛�" class="formContent">
+                  {{ formApprove.routename }}
+                </el-form-item>
+                <el-form-item label="鎵撳嵃浜哄憳锛�" class="formContent">
+                  {{ username }}
+                </el-form-item>
+                <el-form-item label="鎵撳嵃鏃堕棿锛�" class="formContent">
+                  {{ formApprove.lm_date }}
+                </el-form-item>
+              </div>
+            </el-form>
+          </div>
+          <div style="width: 22%;display: flex;justify-content: center;align-items: center">
+            <!--            <div :id="'qrCode'+0" :ref="'qrCodeDiv'+0" />-->
+            <div />
+          </div>
+        </div>
+
+        <!--          <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />-->
+        <el-table
+          id="table"
+          :data="tableDataPrint"
+          border
+          class="tableDataPrint"
+          :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000',borderColor:'#000'}"
+          :cell-style="{textAlign: 'center',color:'#000',borderColor:'#000'}"
+          style="width: 100%;margin-top: 20px;text-align: center;border-color: #000"
+        >
+          <el-table-column
+            id="column0"
+            prop="seq"
+            label="宸ュ簭鍙�"
+            width="70"
+            align="center"
+          />
+          <el-table-column
+            id="column1"
+            prop="stepqrcode"
+            label="宸ュ簭浜岀淮鐮�"
+            width="100"
+            align="center"
+          >
+            <template slot-scope="{row}">
+              <div :id="'qrCode'+row.seq" :ref="'qrCodeDiv'+row.seq" class="tableColumn" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            id="column2"
+            prop="stepname"
+            label="宸ュ簭"
+            width="120"
+            align="center"
+          />
+          <el-table-column
+            id="column3"
+            prop="plan_qty"
+            label="鍔犲伐鏁伴噺"
+            width="100"
+            align="center"
+          />
+          <el-table-column
+            id="column4"
+            prop="good_qty"
+            width="100"
+            align="center"
+            label="鍚堟牸鏁伴噺"
+          />
+          <el-table-column
+            id="column5"
+            width="100"
+            prop="ng_qty"
+            align="center"
+            label="涓嶈壇鏁伴噺"
+          />
+          <el-table-column
+            id="column6"
+            prop="desc"
+            align="center"
+            width="120"
+            label="澶囨敞"
+          />
+        </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="footerButton">
+          <el-button @click="dialogVisibleBackPreview">杩� 鍥�</el-button>
+          <!--            <el-button v-if="operation==='add'" type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>-->
+          <!--            <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�/鎵� 鍗�</el-button>-->
+          <el-button v-print="printObj" type="primary">鎵� 鍗�</el-button>
+        </div>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -565,6 +703,7 @@
 import { getCookie } from '@/utils/auth'
 import { MesOrderPrintSearch1, PrintOrder } from '@/api/utils'
 import { urlAddRandomNo, webapp_ws_ajax_run, webapp_ws_autoupdate } from '@/utils/grwebapp'
+import QRCode from 'qrcodejs2'
 
 const SER_HZ = /^[\u4e00-\u9fa5]+$/
 export default {
@@ -588,6 +727,7 @@
       isFullscreen: false,
       mainHeight: 0,
       tableHeight: 0,
+      username: '',
       form: {
         mesorderstus: '', // 宸ュ崟鐘舵�佺爜
         mesordercode: '', // 宸ュ崟缂栧彿
@@ -673,26 +813,42 @@
       },
       dialogVisibleTask: false,
       taskTableData: [],
-      // dialogFormTask: {
-      //   partname: '', // 浜у搧鍚嶇О
-      //   partspec: '', // 浜у搧瑙勬牸
-      //   wkshopname: '', // 鐢熶骇杞﹂棿鍚嶇О
-      //   routename: '', // 宸ヨ壓璺嚎鍚嶇О
-      //
-      //   mesorderstusName: '', // 宸ュ崟鐘舵�佸悕绉�
-      //   mesorderstus: '', // 宸ュ崟鐘舵�佺爜
-      //   mesordercode: '', // 宸ュ崟缂栧彿
-      //   partcode: '', // 浜у搧缂栫爜
-      //   mesqty: '', // 宸ュ崟鏁伴噺
-      //
-      //   routecode: '', // 宸ヨ壓璺嚎缂栫爜
-      //   wkshopcode: '', // 鐢熶骇杞﹂棿缂栫爜
-      //   planstartdate: '', // 璁″垝寮�濮嬫椂闂�
-      //   planenddate: '', // 璁″垝瀹屾垚鏃堕棿
-      //   orderlev: '' // 宸ュ崟绛夌骇
-      // },
+
       dialogVisibleSearch: false,
-      searchTableData: []
+      searchTableData: [],
+      dialogVisibleApprove: false,
+      tableDataPrint: [], // 鎵撳嵃椤甸潰鍐呭
+      printObj: {
+        id: 'printMe',
+        popTitle: '鎵撳嵃妯℃澘',
+        preview: false,
+        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
+        closeCallback(vue) { // 鍏抽棴鎵撳嵃鐨勫洖璋冧簨浠讹紙鏃犳硶纭畾鐐瑰嚮鐨勬槸纭杩樻槸鍙栨秷锛�
+          console.log('11212', vue)
+          // vue.dialogVisible = false
+          vue.dialogVisibleApprove = false
+        },
+        beforeOpenCallback(vue) {
+          vue.printLoading = true
+          console.log('鎵撳紑涔嬪墠')
+          console.log()
+        },
+        openCallback(vue) {
+          vue.printLoading = false
+          console.log('鎵ц浜嗘墦鍗�')
+        }
+      },
+
+      formApprove: {
+        mesordercode: '',
+        partcode: '',
+        partname: '',
+        partspec: '',
+        plan_qty: '',
+        routename: '',
+        lm_date: ''
+      },
+      number: ''
     }
   },
   created() {
@@ -703,7 +859,8 @@
     window.addEventListener('resize', this.getHeight)
     this.getHeight()
     // webapp_urlprotocol_startup()
-    webapp_ws_autoupdate(true)
+    // webapp_ws_autoupdate(true)
+    this.username = getCookie('username')
   },
   methods: {
     async getMesOrderSearch() {
@@ -819,6 +976,7 @@
       this.dialogVisibleTask = true
       const { data: res } = await SearchWorkStep({ wo_code: row.wo_code })
       this.taskTableData = res
+      this.dialogForm.mesordercode = res[0].wo_code
     },
     dialogVisibleBack() {
       this.dialogVisibleTask = false
@@ -972,13 +1130,15 @@
             orderlev: this.dialogForm.orderlev, // 宸ュ崟绛夌骇
             OperType: this.operation === 'add' ? 'Add' : 'Update'
           }
+
           AddUpdateMesOrder(data).then(res => {
             if (res.code === '200') {
-              if (this.operation !== 'add') {
-                this.sendPrint()
-              }
-              this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '娲惧彂鎴愬姛锛�')
               this.dialogVisible = false
+
+              this.handlePrint()
+
+              this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '娲惧彂鎴愬姛锛�')
+              // this.dialogVisible = false
               this.getMesOrderSearch()
             } else {
               this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '娲惧彂澶辫触锛�')
@@ -990,12 +1150,12 @@
     // 娲惧彂鎵撳嵃
     async sendPrint() {
       const data = {
-        // username: getCookie('admin'),
-        username: getCookie('username'),
+        username: getCookie('admin'),
+        // username: getCookie('username'),
         mesordercode: this.dialogForm.mesordercode
       }
-      // const res = await MesOrderPrintSearch1(data)
-      const res = await PrintOrder(data)
+      const res = await MesOrderPrintSearch1(data)
+      // const res = await PrintOrder(data)
       if (res.code === '200') {
         // 鍙傛暟鍏蜂綋璇存槑璇峰弬鑰冨府鍔╂枃妗d腑鐨勨�淲EB鎶ヨ〃(B/S鎶ヨ〃)->WEB鎶ヨ〃瀹㈡埛绔�->鍚姩鍙傛暟璇存槑鈥濋儴鍒�
         var args = {
@@ -1007,6 +1167,7 @@
         webapp_ws_ajax_run(args)
       }
     },
+
     // 鑾峰彇椤甸潰楂樺害
     getHeight() {
       this.$nextTick(() => {
@@ -1029,7 +1190,108 @@
     },
     dialogVisibleSearchBack() {
       this.dialogVisibleSearch = false
+    },
+    // 澶勭悊鎵撳嵃
+    handlePrint() {
+      // const number = Math.random() * Math.random()
+      // this.number = number === 0 ? (10 + Math.random()) : number
+      // console.log(number)
+      this.dialogVisibleApprove = true
+      const data2 = {
+        username: getCookie('admin'),
+        mesordercode: this.dialogForm.mesordercode
+      }
+      MesOrderPrintSearch1(data2).then(res2 => {
+        if (res2.code === '200') {
+          const res3 = res2.data.recordset
+
+          this.tableDataPrint = res3
+          this.formApprove.mesordercode = res3[0].wo_code
+          this.formApprove.partcode = res3[0].partcode
+          this.formApprove.partname = res3[0].partname
+          this.formApprove.partspec = res3[0].partspec
+          this.formApprove.plan_qty = res3[0].plan_qty
+          this.formApprove.routename = res3[0].routename
+          this.formApprove.lm_date = res3[0].lm_date
+
+          this.$nextTick(() => {
+            // this.bindQRCode(0, this.formApprove.mesordercode, 'big')
+            res3.forEach(i => {
+              this.bindQRCode(i.seq, i.stepqrcode, 'small')
+            })
+          })
+        }
+      })
+    },
+    dialogVisibleTaskClose() {
+      this.dialogForm.mesordercode = ''
+    },
+    /*
+  * 鎵嬪姩鐐瑰嚮鎵撳嵃
+  * */
+    // 杩斿洖鎸夐挳
+    dialogVisibleBackPreview() {
+      this.dialogVisibleApprove = false
+    },
+    // dialogVisibleConfirmPreview(param) {
+    //   this.$refs.dialogForm.validate(valid => {
+    //     if (valid) {
+    //       const data = {
+    //         username: getCookie('admin'),
+    //         mesordercode: this.dialogForm.mesordercode
+    //       }
+    //       MesOrderPrintSearch1(data).then(res => {
+    //         if (res.code === '200') {
+    //           this.dialogVisibleApprove = true
+    //           console.log(res, 11)
+    //         }
+    //       })
+    //     }
+    //   })
+    // },
+    // 鐢熸垚浜岀淮鐮�
+    bindQRCode(seq, text, size) {
+      new QRCode(this.$refs['qrCodeDiv' + seq], {
+        text: text,
+        width: size === 'big' ? 90 : 60,
+        height: size === 'big' ? 90 : 60,
+        // colorDark: '#333333', // 浜岀淮鐮侀鑹�
+        colorDark: '#000', // 浜岀淮鐮侀鑹�
+        colorLight: '#ffffff', // 浜岀淮鐮佽儗鏅壊
+        correctLevel: QRCode.CorrectLevel.L// 瀹归敊鐜囷紝L/M/H
+      })
+    },
+
+    dialogVisibleConfirmClose() {
+      // this.dialogForm.mesordercode = ''
+      this.formApprove.mesordercode = ''
+      this.formApprove.partcode = ''
+      this.formApprove.partname = ''
+      this.formApprove.partspec = ''
+      this.formApprove.plan_qty = ''
+      this.formApprove.routename = ''
+      this.formApprove.lm_date = ''
+      // this.$refs.qrCodeDiv0 = ''
+      // this.$refs.qrCodeDiv1 = ''
+      // this.$refs.qrCodeDiv2 = ''
+      // this.$refs.qrCodeDiv3 = ''
+
+      // // this.$ref['qrCodeDiv'].clearable()
+      // this.tableDataPrint.forEach((item, index) => {
+      //   this.$ref[('qrCodeDiv' + index).toString()] = ''
+      // //   this.bindQRCode(item.seq, '')
+      // })
+      // // this.bindQRCode(this.tableDataPrint.length, '')
+      // this.$ref[('qrCodeDiv' + this.tableDataPrint.length).toString()] = ''
+      // // this.bindQRCode()
+      this.tableDataPrint = []
+    },
+    // 琛ユ墦鎸夐挳
+    supplementClick() {
+      this.dialogVisibleTask = false
+      this.handlePrint()
     }
+
   }
 }
 </script>
@@ -1088,6 +1350,10 @@
 }
 
 .dialogVisibleSearch ::v-deep .el-dialog__body {
+  padding: 20px 20px !important;
+}
+
+.dialogVisibleConfirmClass ::v-deep .el-dialog__body {
   padding: 20px 20px !important;
 }
 
@@ -1182,6 +1448,10 @@
   margin-bottom: 0;
 }
 
+.elForm ::v-deep .el-form-item {
+  margin-bottom: 0;
+}
+
 ::v-deep .el-input__inner:focus {
   border-color: $main_color;
 }
@@ -1207,4 +1477,37 @@
     display: none;
   }
 }
+
+.el-table::before {
+  height: 0;
+}
+
+//.dialogVisibleConfirmClass >>>.el-table--border, .el-table--fit {
+//  border-bottom: 2px solid #000 ;
+//  //outline: #000 solid 2px !important;
+//}
+
+.tableDataPrint ::v-deep div.cell{
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.formContent{
+  width: 240px;
+}
+
+</style>
+
+<style media="print">
+/*@media print {*/
+@page {
+  size: auto;
+  margin: 3mm;
+}
+
+</style>
+<style>
+.formContent .el-form-item__label{
+color: #000 !important;
+}
 </style>

--
Gitblit v1.9.3