From 51c7896fd8e45085dd5cdfff11e79a00ee0a7379 Mon Sep 17 00:00:00 2001
From: Houjie <714924425@qq.com>
Date: 星期五, 05 九月 2025 15:16:54 +0800
Subject: [PATCH] 上料/下料、报工/打印机配置/产线选择 、排产工单
---
pages/spare/spare.vue | 436 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 313 insertions(+), 123 deletions(-)
diff --git a/pages/spare/spare.vue b/pages/spare/spare.vue
index 6b2ca81..eda59a5 100644
--- a/pages/spare/spare.vue
+++ b/pages/spare/spare.vue
@@ -1,134 +1,324 @@
<template>
- <view>
- <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
- <block slot="backText">杩斿洖</block>
- <block slot="content">鎵竴鎵�</block>
- </cu-custom>
- <view class="scanCode">
- <mumu-get-qrcode :continue="true" @success='qrcodeSucess' @error="qrcodeError"
- :definition="true"></mumu-get-qrcode>
- </view>
- </view>
+ <view class="container">
+ <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
+ <block slot="backText">杩斿洖</block>
+ <block slot="content">绉诲簱鍗曟墦鍗�</block>
+ </cu-custom>
+
+ <view class="print-area">
+ <button @click="previewTransferOrder" class="btn test" :loading="isLoading">
+ {{ isLoading ? '鐢熸垚涓�...' : '棰勮绉诲簱鍗�' }}
+ </button>
+ </view>
+
+ <view class="status">
+ 棰勮鐘舵��: {{ isPreview ? '宸茬敓鎴愰瑙�' : '鏈敓鎴�' }}
+ </view>
+ <view class="log" v-if="logList.length > 0">
+ <text class="log-title">鎿嶄綔鏃ュ織:</text>
+ <view v-for="(log, index) in logList" :key="index" class="log-item">
+ {{ log }}
+ </view>
+ </view>
+ </view>
</template>
<script>
- import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue';
+export default {
+ name: 'TransferOrderPrinter',
+ data() {
+ return {
+ NavBarColor: '#007AFF',
+ isPreview: false,
+ logList: [],
+ isLoading: false,
+ // 绉诲簱鍗曟暟鎹紙瀹為檯椤圭洰涓彲浠庢帴鍙ｈ幏鍙栵級
+ orderData: {
+ productionOrderNo: '112379',
+ productModel: 'G-639',
+ customerName: '涓滄柟鏃ヤ骇',
+ materialNo: '120047854',
+ customerModel: '4200-51354',
+ productionBatch: '25159847',
+ factory: '鍙屾灄鏂扮伀鐐伐鍘�',
+ quantity: '73',
+ docCode: 'XHJ.QM.QMS009E',
+ qrCodeText: 'C2506080024'
+ }
+ };
+ },
+ methods: {
+ // 娣诲姞鎿嶄綔鏃ュ織
+ addLog(message) {
+ const time = new Date().toLocaleTimeString();
+ this.logList.unshift(`[${time}] ${message}`);
+ if (this.logList.length > 20) this.logList.pop();
+ },
- export default {
- components: {
- mumuGetQrcode // 娉ㄥ唽
- },
- name: 'spare',
- data() {
- return {
- NavBarColor: this.NavBarColor,
- hasNavigated: false // 鏍囪鏄惁宸茬粡璺宠浆
- };
- },
+ // 浣跨敤鍦ㄧ嚎API鐢熸垚浜岀淮鐮侊紙鏃燙anvas渚濊禆锛�
+ async generateQrCode(content) {
+ try {
+ this.addLog('寮�濮嬬敓鎴愪簩缁寸爜...');
+
+ // 鏂规1: 浣跨敤Base64缂栫爜鍐呭鐩存帴鐢熸垚浜岀淮鐮侊紙鎺ㄨ崘锛�
+ const base64Content = encodeURIComponent(content);
+ // 璇ラ摼鎺ヤ細鏍规嵁鍐呭鐢熸垚浜岀淮鐮侊紝鏃犻渶鍚庣鏀寔
+ return `https://api.qrserver.com/v1/create-qr-code/?data=${base64Content}&size=120x120`;
+ // 鏂规2: 澶囩敤API锛堣嫢鏂规1涓嶅彲鐢級
+ // return `https://chart.googleapis.com/chart?chs=120x120&cht=qr&chl=${base64Content}`;
+ } catch (error) {
+ this.addLog(`浜岀淮鐮佺敓鎴愬け璐�: ${error.message}`);
+ throw error;
+ }
+ },
- methods: {
- navigateToDeviceDetails(equipmentId) {
- this.hasNavigated = true; // 鏍囪宸茬粡璺宠浆
- uni.redirectTo({
- url: `/pages/device/deviceWebDeils/deviceWebDeils?equipmentId=${encodeURIComponent(equipmentId)}`,
- success: () => {
- console.log('Navigated to device details');
- },
- fail: (err) => {
- console.error('Navigation failed:', err);
- }
- });
- },
- qrcodeSucess(data) { // 鎵爜鎴愬姛
- setTimeout(() => {
- let equipmentId;
- try {
- // 鍏煎鎬у鐞嗭細浼樺厛浣跨敤URL鍜孶RLSearchParams锛屽鏋滀笉鍙敤鍒欎娇鐢ㄥ瓧绗︿覆瑙ｆ瀽
- if ('URL' in window && 'URLSearchParams' in window) {
- const url = new URL(data);
- const params = new URLSearchParams(url.hash.slice(1).split('?')[1]);
- equipmentId = params.get('equipmentId');
- } else {
- // 瀛楃涓茶В鏋愭柟寮�
- const hashIndex = data.indexOf('#');
- if (hashIndex !== -1) {
- const hashPart = data.substring(hashIndex + 1);
- const paramIndex = hashPart.indexOf('?');
- if (paramIndex !== -1) {
- const paramStr = hashPart.substring(paramIndex + 1);
- const pairs = paramStr.split('&');
- for (let pair of pairs) {
- const [key, value] = pair.split('=');
- if (key === 'equipmentId') {
- equipmentId = value;
- break;
- }
- }
- }
- }
- }
+ // 鐢熸垚绉诲簱鍗旽TML骞堕瑙�
+ async generateTransferHTML() {
+ try {
+ this.isLoading = true;
+ this.addLog('寮�濮嬬敓鎴愮Щ搴撳崟...');
- if (equipmentId) {
- // 鐧诲綍鎴愬姛涓旇幏鍙栧埌equipmentId锛岃烦杞埌璁惧璇︽儏椤甸潰
- this.navigateToDeviceDetails(equipmentId);
- } else {
- uni.showModal({
- title: '鎻愮ず',
- content: "浜岀淮鐮佷腑鏈壘鍒版湁鏁堢殑equipmentId",
- showCancel: false
- });
- }
- } catch (error) {
- uni.showModal({
- title: '閿欒',
- content: "瑙ｆ瀽URL鍑洪敊锛岃妫�鏌ヤ簩缁寸爜鍐呭",
- showCancel: false
- });
- }
- }, 200); // 澧炲姞100姣鐨勫欢杩�
- },
- qrcodeError(err) { // 鎵爜澶辫触
- uni.showModal({
- title: '鎽勫儚澶存巿鏉冨け璐�',
- content: '鎽勫儚澶存巿鏉冨け璐ワ紝璇锋娴嬪綋鍓嶆祻瑙堝櫒鏄惁鏈夋憚鍍忓ご鏉冮檺銆�',
- success: () => {
- uni.navigateBack({}); // 杩斿洖鍒颁笂涓�椤�
- }
- });
- }
- }
- };
+ // 鐢熸垚浜岀淮鐮佸唴瀹�
+ const qrContent = `鐢熶骇璁㈠崟鍙�:${this.orderData.productionOrderNo},浜у搧鍨嬪彿:${this.orderData.productModel},瀹㈡埛鍚嶇О:${this.orderData.customerName},鐗╂枡鍙�:${this.orderData.materialNo},瀹㈡埛鍨嬪彿:${this.orderData.customerModel},鐢熶骇鎵瑰彿:${this.orderData.productionBatch},鐢熶骇鍒嗗巶:${this.orderData.factory},鏁伴噺:${this.orderData.quantity}`;
+
+ // 璋冪敤鍦ㄧ嚎API鐢熸垚浜岀淮鐮�
+ const qrDataUrl = await this.generateQrCode(qrContent);
+ this.addLog('浜岀淮鐮佺敓鎴愭垚鍔�');
+
+ // 澶勭悊logo鍥剧墖锛堜娇鐢ㄦ湰鍦拌祫婧愶級
+ const logoUrl = '/static/index_logo.png';
+
+ // 鐢熸垚绉诲簱鍗旽TML鍐呭
+ const htmlContent = `
+ <!DOCTYPE html>
+ <html lang="zh-CN">
+ <head>
+ <meta charset="UTF-8">
+ <title>绉诲簱鍗�</title>
+ <style>
+ @media print {
+ @page {
+ size: A4 landscape;
+ margin: 15mm;
+ }
+ body {
+ -webkit-print-color-adjust: exact;
+ }
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: "Microsoft YaHei", "SimHei", sans-serif;
+ }
+ .transfer-order {
+ width: 800px;
+ height: 550px;
+ border: 2px solid #000;
+ box-sizing: border-box;
+ margin: 20px auto;
+ padding: 15px;
+ }
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 2px solid #000;
+ margin-bottom: 15px;
+ }
+ .logo img {
+ width: 180px;
+ height: auto;
+ }
+ .doc-info {
+ text-align: right;
+ }
+ .doc-code {
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+ .doc-name {
+ font-size: 28px;
+ font-weight: bold;
+ text-align: center;
+ margin: 15px 0;
+ }
+ .divider {
+ border-top: 2px solid #000;
+ width: 200px;
+ margin: 0 auto 15px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ }
+ table, th, td {
+ border: 1px solid #000;
+ padding: 10px;
+ font-size: 15px;
+ word-wrap: break-word;
+ }
+ .label-container {
+ display: flex;
+ gap: 15px;
+ flex-wrap: wrap;
+ padding: 5px 0;
+ }
+ .status-label {
+ display: inline-block;
+ padding: 8px 15px;
+ background-color: #f0f0f0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+ table tr td:first-child {
+ width: 120px;
+ }
+ table tr td[colspan="4"] {
+ width: calc(100% - 120px);
+ }
+ .qrcode-area {
+ text-align: center;
+ vertical-align: middle;
+ }
+ .qrcode-area img {
+ width: 150px;
+ height: 150px;
+ display: block;
+ margin: 0 auto;
+ }
+ .qrcode-text {
+ margin-top: 10px;
+ text-align: center;
+ font-size: 14px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="transfer-order">
+ <div class="header">
+ <div class="logo">
+ <img src="${logoUrl}" alt="浼佷笟logo">
+ </div>
+ <div class="doc-info">
+ <div class="doc-code">${this.orderData.docCode}</div>
+ </div>
+ </div>
+ <div class="doc-name">绉诲簱鍗�</div>
+ <div class="divider"></div>
+ <table>
+ <tr>
+ <td>鐢熶骇璁㈠崟鍙�</td>
+ <td>${this.orderData.productionOrderNo}</td>
+ <td>浜у搧鍨嬪彿</td>
+ <td>${this.orderData.productModel}</td>
+ <td rowspan="4" class="qrcode-area">
+ <img src="${qrDataUrl}" alt="浜岀淮鐮�">
+ <div class="qrcode-text">${this.orderData.qrCodeText}</div>
+ </td>
+ </tr>
+ <tr>
+ <td>瀹㈡埛鍚嶇О</td>
+ <td>${this.orderData.customerName}</td>
+ <td>鐗╂枡鍙�</td>
+ <td>${this.orderData.materialNo}</td>
+ </tr>
+ <tr>
+ <td>瀹㈡埛鍨嬪彿</td>
+ <td>${this.orderData.customerModel}</td>
+ <td>鐢熶骇鎵瑰彿</td>
+ <td>${this.orderData.productionBatch}</td>
+ </tr>
+ <tr>
+ <td>鐢熶骇鍒嗗巶</td>
+ <td>${this.orderData.factory}</td>
+ <td>鏁伴噺</td>
+ <td>${this.orderData.quantity}</td>
+ </tr>
+ <tr>
+ <td>妫�楠岀姸鎬�</td>
+ <td colspan="4">
+ <div class="label-container">
+ <span class="status-label">鍚堟牸</span>
+ <span class="status-label">宸叉楠�</span>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </body>
+ </html>
+ `;
+
+ // 鐢熸垚Blob閾炬帴骞惰烦杞瑙�
+ const blob = new Blob([htmlContent], { type: 'text/html' });
+ const previewUrl = URL.createObjectURL(blob);
+
+ uni.navigateTo({
+ url: `/pages/print-preview/print-preview?previewUrl=${encodeURIComponent(previewUrl)}`,
+ success: () => {
+ this.isPreview = true;
+ this.addLog('绉诲簱鍗曢瑙堢敓鎴愭垚鍔�');
+ },
+ fail: (err) => {
+ this.addLog(`璺宠浆棰勮澶辫触: ${err.errMsg}`);
+ }
+ });
+ } catch (error) {
+ this.addLog(`鐢熸垚澶辫触: ${error.message}`);
+ uni.showToast({ title: '鐢熸垚澶辫触', icon: 'none' });
+ } finally {
+ this.isLoading = false;
+ }
+ },
+
+ // 瑙﹀彂棰勮
+ previewTransferOrder() {
+ if (this.isLoading) return;
+ this.generateTransferHTML();
+ }
+ }
+};
</script>
-<style>
- .scanCode {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 99;
- height: 100%;
- width: 100%;
- background-color: rgba(0, 0, 0, 0.7);
- }
-
- .reader-box {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.5);
- }
-
- .reader {
- width: 540rpx;
- height: 540rpx;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
+<style scoped>
+.print-area {
+ padding: 20rpx;
+}
+.btn {
+ width: 100%;
+ padding: 20rpx;
+ margin-bottom: 15rpx;
+ border-radius: 8rpx;
+ color: #fff;
+ font-size: 28rpx;
+ background-color: #FF9500;
+}
+.status {
+ padding: 20rpx;
+ font-size: 28rpx;
+ color: #666;
+}
+.log {
+ margin: 10rpx;
+ padding: 20rpx;
+ background-color: #f5f5f5;
+ border-radius: 10rpx;
+}
+.log-title {
+ font-weight: bold;
+ display: block;
+ margin-bottom: 10rpx;
+ color: #333;
+}
+.log-item {
+ font-size: 26rpx;
+ color: #666;
+ margin-bottom: 5rpx;
+ word-break: break-all;
+}
</style>
--
Gitblit v1.9.3