ZhiHuiQiCe/FangCangZhiNeng.git

Merge branch 'master' of http://115.159.85.185:8098/r/ZhiHuiQiCe/FangCangZh...

yanjinhui

2025-10-23 986f0fe3564f067c59a10ac7a4d78646df6b6838

Merge branch 'master' of http://115.159.85.185:8098/r/ZhiHuiQiCe/FangCangZhiNeng

已修改1个文件

已添加1个文件

	新建文件夹/WMS/src/extension/basic/extend/printView.vue	134 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	新建文件夹/WMS/src/extension/basic/extend/printViewEWM.vue	127 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 ÐÂ½¨ÎÄ¼þ¼Ð/WMS/src/extension/basic/extend/printView.vue

@@ -3,7 +3,7 @@
    <vol-box
      v-model="showDetialBox"
      :lazy="true"
      width="300px"
      width="400px"
      :padding="15"
      title="æå°"
    >
@@ -14,15 +14,17 @@
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <VueQrcode id="qrcode" :value="materielCode" :size="200"></VueQrcode>
          <!-- ä½¿ç¨ SVG æ¥æ¾ç¤ºæ¡å½¢ç  -->
          <svg id="barcode"></svg>
        </div>
      </div>
      <div id="palletcode">
        <span
          style="display: flex; justify-content: center; align-items: center"
          >ç©æç¼å·ï¼{{ materielCode }}<br>
          ç©æåç§°ï¼{{ materielName }}</span
          style="display: flex; justify-content: center; align-items: center; flex-direction: column;"
        >
          <!-- <div>ç©æç¼å·ï¼{{ materielCode }}</div>
          <div>ç©æåç§°ï¼{{ materielName }}</div> -->
        </span>
      </div>

      <template #footer>
@@ -34,58 +36,119 @@
    </vol-box>
  </div>
</template>
  
  <script>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VueQrcode from "vue-qrcode";
import QRCode from "qrcode";
import JsBarcode from "jsbarcode";

export default {
  components: { VolBox, VueQrcode },
  components: { VolBox },
  data() {
    return {
      showDetialBox: false,
      row: null,
      qrcodeDataURL: "",
      materielCode: "",
      materielName: "",
      materielinfo:"",
    };
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      if (row && row.materielCode) {
        this.materielCode = row.materielCode;
        this.materielName = row.materielName;
        this.materielinfo="ç©æç¼å·ï¼"+row.materielCode+"ç©æåç§°ï¼"+row.materielName;
      
      // ä½¿ç¨ $nextTick ç¡®ä¿ DOM å·²ç»æ´æ°
      this.$nextTick(() => {
        if (row && row.materielCode) {
          this.materielCode = row.materielCode;
          this.materielName = row.materielName;
          
          // çææ¡å½¢ç 
          this.generateBarcode(row.materielCode);
        }
      });
    },
    
    generateBarcode(code) {
      try {
        JsBarcode("#barcode", code, {
          format: "CODE128", // æ¡å½¢ç æ ¼å¼
          width: 2,         // æ¡ç å®½åº¦
          height: 80,       // æ¡ç é«åº¦
          displayValue: true, // æ¯å¦æ¾ç¤ºæå
          text: code,       // æ¾ç¤ºçæå
          fontOptions: "bold",
          fontSize: 14,
          margin: 10,
          background: "#ffffff",
          lineColor: "#000000"
        });
      } catch (error) {
        console.error("çææ¡å½¢ç å¤±è´¥:", error);
      }
    },
    
    print() {
      let printContent = document.getElementById("printContent");
      let palletcode = document.getElementById("palletcode");
      var printWindow = window.open("", "");
      printWindow.document.write(printContent.innerHTML);
      printWindow.document.write(palletcode.innerHTML);
      
      var printWindow = window.open("", "_blank");
      
      // æå»ºæå°åå®¹
      let printHTML = `
        <!DOCTYPE html>
        <html>
        <head>
          <title>æå°æ¡å½¢ç </title>
          <style>
            body { 
              margin: 0; 
              padding: 20px; 
              font-family: Arial, sans-serif;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            }
            .barcode-container { 
              margin-bottom: 20px; 
            }
            .text-info { 
              text-align: center; 
              font-size: 14px;
              line-height: 1.5;
            }
            svg { 
              display: block; 
              margin: 0 auto;
            }
            @media print {
              body { margin: 0; padding: 10px; }
            }
          </style>
        </head>
        <body>
          <div class="barcode-container">${printContent.innerHTML}</div>
          <div class="text-info">${palletcode.innerHTML}</div>
        </body>
        </html>
      `;
      
      printWindow.document.write(printHTML);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
      // this.http
      //       .post("api/palletCodeInfo/PrintStatusUp?printCode="+this.palletCode, null, "æ°æ®å¤çä¸")
      //       .then((x) => {
      //         if (!x.status) return this.$message.error(x.message);
      //         this.$message.success("æä½æå");
      //         this.$parent.refresh();
      //         this.showDetialBox = false;
      //       });
      
      // çå¾åå®¹å è½½å®æåæå°
      printWindow.onload = function() {
        printWindow.focus();
        printWindow.print();
        // æå°åèªå¨å³éçªå£ï¼å¯éï¼
        printWindow.close();
      };
    },
  },
  created() {},
};
</script>
  
  <style scoped>

<style scoped>
.el-col {
  border-radius: 4px;
}
@@ -107,7 +170,8 @@
  justify-content: flex-end;
}
</style>
  <style>

<style>
.el-table .warning-row {
  background: #e6a23c;
}
@@ -120,7 +184,7 @@
  background: #f56c6c;
}

canvas {
#barcode {
  display: block;
  margin: auto;
}

 ÐÂ½¨ÎÄ¼þ¼Ð/WMS/src/extension/basic/extend/printViewEWM.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,127 @@
<template>
  <div>
    <vol-box
      v-model="showDetialBox"
      :lazy="true"
      width="300px"
      :padding="15"
      title="æå°"
    >
      <div
        id="printContent"
        style="display: flex; justify-content: center; align-items: center"
      >
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <VueQrcode id="qrcode" :value="materielCode" :size="200"></VueQrcode>
        </div>
      </div>
      <div id="palletcode">
        <span
          style="display: flex; justify-content: center; align-items: center"
          >ç©æç¼å·ï¼{{ materielCode }}<br>
          ç©æåç§°ï¼{{ materielName }}</span
        >
      </div>

      <template #footer>
        <el-button type="primary" size="small" @click="print()">æå°</el-button>
        <el-button type="danger" size="small" @click="showDetialBox = false"
          >å³é</el-button
        >
      </template>
    </vol-box>
  </div>
</template>
  
  <script>
import VolBox from "@/components/basic/VolBox.vue";
import VueQrcode from "vue-qrcode";
import QRCode from "qrcode";
export default {
  components: { VolBox, VueQrcode },
  data() {
    return {
      showDetialBox: false,
      row: null,
      qrcodeDataURL: "",
      materielCode: "",
      materielName: "",
      materielinfo:"",
    };
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      if (row && row.materielCode) {
        this.materielCode = row.materielCode;
        this.materielName = row.materielName;
        this.materielinfo="ç©æç¼å·ï¼"+row.materielCode+"ç©æåç§°ï¼"+row.materielName;
      }
    },
    print() {
      let printContent = document.getElementById("printContent");
      let palletcode = document.getElementById("palletcode");
      var printWindow = window.open("", "");
      printWindow.document.write(printContent.innerHTML);
      printWindow.document.write(palletcode.innerHTML);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
      // this.http
      //       .post("api/palletCodeInfo/PrintStatusUp?printCode="+this.palletCode, null, "æ°æ®å¤çä¸")
      //       .then((x) => {
      //         if (!x.status) return this.$message.error(x.message);
      //         this.$message.success("æä½æå");
      //         this.$parent.refresh();
      //         this.showDetialBox = false;
      //       });
    },
  },
  created() {},
};
</script>
  
  <style scoped>
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.content-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
  <style>
.el-table .warning-row {
  background: #e6a23c;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .error-row {
  background: #f56c6c;
}

canvas {
  display: block;
  margin: auto;
}
</style>

			@@ -3,7 +3,7 @@
			<vol-box
			v-model="showDetialBox"
			:lazy="true"
			width="300px"
			width="400px"
			:padding="15"
			title="æå°"
			>
			@@ -14,15 +14,17 @@
			<div
			style="display: flex; justify-content: center; align-items: center"
			>
			<VueQrcode id="qrcode" :value="materielCode" :size="200"></VueQrcode>
			<!-- ä½¿ç¨ SVG æ¥æ¾ç¤ºæ¡å½¢ç -->
			<svg id="barcode"></svg>
			</div>
			</div>
			<div id="palletcode">
			<span
			style="display: flex; justify-content: center; align-items: center"
			>ç©æç¼å·ï¼{{ materielCode }}<br>
			ç©æåç§°ï¼{{ materielName }}</span
			style="display: flex; justify-content: center; align-items: center; flex-direction: column;"
			>
			<!-- <div>ç©æç¼å·ï¼{{ materielCode }}</div>
			<div>ç©æåç§°ï¼{{ materielName }}</div> -->
			</span>
			</div>

			<template #footer>
			@@ -34,58 +36,119 @@
			</vol-box>
			</div>
			</template>

			<script>

			<script>
			import VolBox from "@/components/basic/VolBox.vue";
			import VueQrcode from "vue-qrcode";
			import QRCode from "qrcode";
			import JsBarcode from "jsbarcode";

			export default {
			components: { VolBox, VueQrcode },
			components: { VolBox },
			data() {
			return {
			showDetialBox: false,
			row: null,
			qrcodeDataURL: "",
			materielCode: "",
			materielName: "",
			materielinfo:"",
			};
			},
			methods: {
			open(row) {
			this.row = row;
			this.showDetialBox = true;
			if (row && row.materielCode) {
			this.materielCode = row.materielCode;
			this.materielName = row.materielName;
			this.materielinfo="ç©æç¼å·ï¼"+row.materielCode+"ç©æåç§°ï¼"+row.materielName;

			// ä½¿ç¨ $nextTick ç¡®ä¿ DOM å·²ç»æ´æ°
			this.$nextTick(() => {
			if (row && row.materielCode) {
			this.materielCode = row.materielCode;
			this.materielName = row.materielName;

			// çææ¡å½¢ç
			this.generateBarcode(row.materielCode);
			}
			});
			},

			generateBarcode(code) {
			try {
			JsBarcode("#barcode", code, {
			format: "CODE128", // æ¡å½¢ç æ ¼å¼
			width: 2, // æ¡ç å®½åº¦
			height: 80, // æ¡ç é«åº¦
			displayValue: true, // æ¯å¦æ¾ç¤ºæå
			text: code, // æ¾ç¤ºçæå
			fontOptions: "bold",
			fontSize: 14,
			margin: 10,
			background: "#ffffff",
			lineColor: "#000000"
			});
			} catch (error) {
			console.error("çææ¡å½¢ç å¤±è´¥:", error);
			}
			},

			print() {
			let printContent = document.getElementById("printContent");
			let palletcode = document.getElementById("palletcode");
			var printWindow = window.open("", "");
			printWindow.document.write(printContent.innerHTML);
			printWindow.document.write(palletcode.innerHTML);

			var printWindow = window.open("", "_blank");

			// æå»ºæå°åå®¹
			let printHTML = `
			<!DOCTYPE html>
			<html>
			<head>
			<title>æå°æ¡å½¢ç </title>
			<style>
			body {
			margin: 0;
			padding: 20px;
			font-family: Arial, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}
			.barcode-container {
			margin-bottom: 20px;
			}
			.text-info {
			text-align: center;
			font-size: 14px;
			line-height: 1.5;
			}
			svg {
			display: block;
			margin: 0 auto;
			}
			@media print {
			body { margin: 0; padding: 10px; }
			}
			</style>
			</head>
			<body>
			<div class="barcode-container">${printContent.innerHTML}</div>
			<div class="text-info">${palletcode.innerHTML}</div>
			</body>
			</html>
			`;

			printWindow.document.write(printHTML);
			printWindow.document.close();
			printWindow.focus();
			printWindow.print();
			printWindow.close();
			// this.http
			// .post("api/palletCodeInfo/PrintStatusUp?printCode="+this.palletCode, null, "æ°æ®å¤çä¸")
			// .then((x) => {
			// if (!x.status) return this.$message.error(x.message);
			// this.$message.success("æä½æå");
			// this.$parent.refresh();
			// this.showDetialBox = false;
			// });

			// çå¾åå®¹å è½½å®æåæå°
			printWindow.onload = function() {
			printWindow.focus();
			printWindow.print();
			// æå°åèªå¨å³éçªå£ï¼å¯éï¼
			printWindow.close();
			};
			},
			},
			created() {},
			};
			</script>

			<style scoped>

			<style scoped>
			.el-col {
			border-radius: 4px;
			}
			@@ -107,7 +170,8 @@
			justify-content: flex-end;
			}
			</style>
			<style>

			<style>
			.el-table .warning-row {
			background: #e6a23c;
			}
			@@ -120,7 +184,7 @@
			background: #f56c6c;
			}

			canvas {
			#barcode {
			display: block;
			margin: auto;
			}

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,127 @@
			<template>
			<div>
			<vol-box
			v-model="showDetialBox"
			:lazy="true"
			width="300px"
			:padding="15"
			title="æå°"
			>
			<div
			id="printContent"
			style="display: flex; justify-content: center; align-items: center"
			>
			<div
			style="display: flex; justify-content: center; align-items: center"
			>
			<VueQrcode id="qrcode" :value="materielCode" :size="200"></VueQrcode>
			</div>
			</div>
			<div id="palletcode">
			<span
			style="display: flex; justify-content: center; align-items: center"
			>ç©æç¼å·ï¼{{ materielCode }}<br>
			ç©æåç§°ï¼{{ materielName }}</span
			>
			</div>

			<template #footer>
			<el-button type="primary" size="small" @click="print()">æå°</el-button>
			<el-button type="danger" size="small" @click="showDetialBox = false"
			>å³é</el-button
			>
			</template>
			</vol-box>
			</div>
			</template>

			<script>
			import VolBox from "@/components/basic/VolBox.vue";
			import VueQrcode from "vue-qrcode";
			import QRCode from "qrcode";
			export default {
			components: { VolBox, VueQrcode },
			data() {
			return {
			showDetialBox: false,
			row: null,
			qrcodeDataURL: "",
			materielCode: "",
			materielName: "",
			materielinfo:"",
			};
			},
			methods: {
			open(row) {
			this.row = row;
			this.showDetialBox = true;
			if (row && row.materielCode) {
			this.materielCode = row.materielCode;
			this.materielName = row.materielName;
			this.materielinfo="ç©æç¼å·ï¼"+row.materielCode+"ç©æåç§°ï¼"+row.materielName;
			}
			},
			print() {
			let printContent = document.getElementById("printContent");
			let palletcode = document.getElementById("palletcode");
			var printWindow = window.open("", "");
			printWindow.document.write(printContent.innerHTML);
			printWindow.document.write(palletcode.innerHTML);
			printWindow.document.close();
			printWindow.focus();
			printWindow.print();
			printWindow.close();
			// this.http
			// .post("api/palletCodeInfo/PrintStatusUp?printCode="+this.palletCode, null, "æ°æ®å¤çä¸")
			// .then((x) => {
			// if (!x.status) return this.$message.error(x.message);
			// this.$message.success("æä½æå");
			// this.$parent.refresh();
			// this.showDetialBox = false;
			// });
			},
			},
			created() {},
			};
			</script>

			<style scoped>
			.el-col {
			border-radius: 4px;
			}

			.grid-content {
			border-radius: 4px;
			min-height: 36px;
			}

			.content-text {
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.right-text {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			}
			</style>
			<style>
			.el-table .warning-row {
			background: #e6a23c;
			}

			.el-table .success-row {
			background: #f0f9eb;
			}

			.el-table .error-row {
			background: #f56c6c;
			}

			canvas {
			display: block;
			margin: auto;
			}
			</style>