From c8901fba0dbcf05406b1a689d3ebe4bb39d7fbcc Mon Sep 17 00:00:00 2001
From: zhaoxiaolin <khd@123>
Date: Tue, 6 Aug 2024 10:12:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E8=AF=86=E5=8D=A1=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/plan/workorder.js            |  12 +-
 src/layout/components/Navbar.vue     |   4 +-
 src/views/plan/workorder/index.vue   |  37 ++++--
 src/views/plan/workorder/printID.vue | 181 +++++++++++++++++++++++++++
 4 files changed, 222 insertions(+), 12 deletions(-)
 create mode 100644 src/views/plan/workorder/printID.vue

diff --git a/src/api/plan/workorder.js b/src/api/plan/workorder.js
index 7d5a83e..298c59c 100644
--- a/src/api/plan/workorder.js
+++ b/src/api/plan/workorder.js
@@ -180,4 +180,14 @@ export function getProdLineList() {
 		method: 'get',
         params: {}
 	});
-}
\ No newline at end of file
+}
+export function getIdCardList(workorderCode){
+	const data={
+		workorderCode
+	}
+	return request({
+	  url:'/plan/pro/workorder/getIdCardList',
+	  method:'post',
+	  data:data
+	})
+  }
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index ef12da5..a438160 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -313,14 +313,14 @@ export default {
     setInterval(() => this.getAlarmData(), 1000 * 60);
     this.poolNameList = JSON.parse(localStorage.getItem("POOL_NAME_LIST"));
     this.poolName = localStorage.getItem("USER_POOL_NAME_CURRENT");
-    
+    /**
     //先执行一次
     this.getUnReadList();
     // 实现轮询
     this.timer = setInterval(() => {
       setTimeout(this.getUnReadList(), 30000);
     }, 30000);
-    
+    **/
   },
   components: {
     Breadcrumb,
diff --git a/src/views/plan/workorder/index.vue b/src/views/plan/workorder/index.vue
index 40af233..4d4defe 100644
--- a/src/views/plan/workorder/index.vue
+++ b/src/views/plan/workorder/index.vue
@@ -187,6 +187,18 @@
         >批次编辑
         </el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-printer"
+          size="mini"
+          :disabled="single"
+          @click="printIdCard"
+          v-hasPermi="['mes:pro:workorder:edit']"
+        >打印标识卡
+        </el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -719,6 +731,8 @@
         <el-button @click="batchCancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!--标识卡打印-->
+    <ItemPrintID ref="printID" @onSelected="printIdFunc"/>
   </div>
 </template>
 
@@ -740,12 +754,16 @@ import {
   getProdLineList
 } from '@/api/plan/workorder'
 import moment from 'moment';
+import ItemPrintID from './printID.vue';
 import { getProEquipment, getProRoutes, getProShifts,selectMaterielList} from '@/api/plan/order'
 import {prototype} from "clipboard";
 
 export default {
   name: "Workorder",
   dicts: ['product_type', 'workorder_type'],
+  components: {
+    ItemPrintID
+  },
   data() {
     return {
       // 拆分车数换算值
@@ -1967,15 +1985,16 @@ export default {
       }, 222);
     },
 
-    // @expand-change="getOpenNextLevel"
-    // 点击展开节点
-    //getOpenNextLevel(row, column, event) {
-    //  alert("1755getOpenNextLevel")
-    //  getNextLevelWorkOrderList(tree.workorderCode).then((data) => {
-    //      return resolve(data);
-    //    });
-    //}
-
+    /**打印标识卡弹出框**/
+    printIdCard() {
+      this.$refs.printID.printDialogVisible = true;
+      this.$refs.printID.init("20021221552");
+    },
+    //标识卡选择确认
+    printIdFunc(obj) {
+      this.form.userName = obj.code;
+      this.form.nickName = obj.name;
+    },
   }
 };
 </script>
diff --git a/src/views/plan/workorder/printID.vue b/src/views/plan/workorder/printID.vue
new file mode 100644
index 0000000..1832859
--- /dev/null
+++ b/src/views/plan/workorder/printID.vue
@@ -0,0 +1,181 @@
+<template>
+	<div class="app-container">
+		<!-- 打印预览弹出层 -->
+		<el-dialog title="" :visible.sync="printDialogVisible" width="990px">
+      <div>
+        <el-input v-model="idCardsNum" placeholder="请输入板次数量" style="width:100px"/>
+        <el-button type="primary" icon="el-icon-check" circle @click="showPrint()"/>
+      </div>
+			<div id="printFrom" class="my-print-box">
+       <div v-for="(item, index) in printData.idCardList" :key="index">
+          <el-form>
+            <!-- 表头-工单信息 -->
+            <el-row>
+              <el-col :span="7">
+                <img src="@/assets/logo/lanjv.png" class="report-logo" />
+              </el-col>
+              <el-col :span="10" class="center-text">
+                <span>产品标识卡</span>
+              </el-col>
+              
+            </el-row>
+            <el-row class="my-print-head">
+              <el-col><el-divider/></el-col>
+            </el-row>
+
+            <el-row class="my-print-foot">
+              <el-col :offset="1" :span="10">
+                <div>产品名称:{{ printData.factory }}</div><br/>
+                <div>批次号:{{ printData.factory }}</div><br/>
+                <div>生产日期:{{ printData.factory }}</div><br/>
+                <div>板次:{{ printData.factory }}</div><br/>
+                <div>数量:{{ printData.factory }}</div>
+              </el-col>
+              <el-col :offset="1" :span="10"> 
+                <canvas ref="qrCanvas"></canvas>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+			</div>
+			<span slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
+			</span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {
+  getIdCardList,
+} from '@/api/plan/workorder';
+import QRCode from 'qrcode';
+
+export default {
+  name: "printID",
+  components: {
+  },
+  data() {
+    return {
+      idCardsNum: 1,
+      optType: undefined,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      selectRow: {},
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      printDialogVisible: false,
+      // 打印
+      printData: {
+        printable: "printFrom",
+        ignore: ["no-print"],
+        workCenter: "暂无数据",
+        factory: null,
+        idCardList: []
+      },
+      workorderCode: '',
+      //工单重新渲染表格
+      refreshWorkerTable: true,
+      // 表单校验
+      rules: {
+       
+      },
+      tableIndex: "tableIndex",
+    };
+  },
+  created() {
+  },
+  methods: {
+      init(workorderCode){
+        this.workorderCode = workorderCode;
+      },
+
+    // 打印预览-浏览器打印
+    handlePrint(params) {
+      printJS({
+        printable: params.printable, // 'printFrom', // 标签元素id
+        type: params.type || "html",
+        maxWidth: 1500, // 最大宽度
+        font_size: "", // 设置字体大小
+        header: params.header, // '表单',
+        targetStyles: ["*"],
+        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
+        ignoreElements: params.ignore || [], // ['no-print']
+        properties: params.properties || null,
+      });
+    },
+    // 打印预览-点击打印预览按钮
+    showPrint() {
+      // 清楚缓存
+      //this.printData.workCenter = "暂无数据";
+      getIdCardList(this.workorderCode,this.idCardNum).then((response) => {
+        debugger
+        //this.reset();
+        this.printData.idCardList = response.idCards;
+        // 使用 Vue 的 nextTick 来确保 DOM 已经更新
+        this.$nextTick(() => {
+
+          //for(var i=0;0<response.idCards.length;i++){
+            let qrCanvasIndex = "qrCanvas"+0;
+            const canvas = this.$refs.qrCanvas;
+            const options = {
+              width: 350,  // 设定二维码的宽度
+              height: 350  // 设定二维码的高度
+            };
+            QRCode.toCanvas(canvas,response.idCards[0], options, error => {
+              if (error) console.error(error);
+            });
+          //}
+        });
+      });
+    }
+  },
+};
+</script>
+<style scoped>
+.print-btn {
+  margin-bottom: 15px;
+  margin-left: 10px;
+}
+
+.center-text {
+  text-align: left;
+  font-size: 63px;
+  font-weight: 800;
+}
+
+.report-logo {
+  margin-top: 15px;
+  margin-left: 15px;
+  height: 70px;
+}
+
+.button-container {
+  text-align: right;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+
+.my-print-table {
+  font-size: 20px;
+}
+
+.my-print-foot {
+  font-size: 17px;
+}
+.my-print-foot2 {
+  font-size: 19px;
+}
+
+.my-print-box{
+  width:100%
+}
+</style>