update 更新包装托盘打印
This commit is contained in:
parent
62f625197f
commit
d1bc97f42a
@ -60,7 +60,7 @@
|
||||
<!-- 生产环境 -->
|
||||
<% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
|
||||
<script>
|
||||
window.SITE_CONFIG['apiURL'] = 'http://10.196.233.155:8080/pms-am';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://10.196.233.155/pms-am';
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
|
||||
@ -32,13 +32,21 @@
|
||||
<span>{{ datetime.toLocaleDateString() }}</span>
|
||||
<span>{{ datetime.toLocaleTimeString() }}</span>
|
||||
</h4>
|
||||
<h2 class="material-code" style="font-size: 20px; margin: 10px 0">884797</h2>
|
||||
<h2 class="brand" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">RX-GZ-CN</h2>
|
||||
<h3 class="bom-code" style="font-size: 14px; margin: 10px 0">MGGZ 5725 KA</h3>
|
||||
<h2 class="shape" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">TG14/175</h2>
|
||||
<h3 class="order-id" style="font-size: 14px; margin: 10px 0">Po: 50024779</h3>
|
||||
<!-- 物料号 -->
|
||||
<h2 class="material-code" style="font-size: 20px; margin: 10px 0">{{ dataForm.pdtCode }}</h2>
|
||||
<!-- 牌号 -->
|
||||
<h2 class="brand" style="font-size: 16px; letter-spacing: 1px; margin: 10px 0">{{ dataForm.brand }}</h2>
|
||||
<!-- 配方号 -->
|
||||
<h3 class="bom-code" style="font-size: 14px; margin: 10px 0">{{ dataForm.bomCode }}</h3>
|
||||
<!-- 砖型 -->
|
||||
<h2 class="shape" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">
|
||||
{{ dataForm.shapeCode }}
|
||||
</h2>
|
||||
<!-- 生产订单 -->
|
||||
<h3 class="order-id" style="font-size: 14px; margin: 10px 0">{{ dataForm.orderCode }}</h3>
|
||||
<!-- 客户 -->
|
||||
<h3 class="client" style="font-size: 14px; text-transform: uppercase; margin: 10px 0">
|
||||
chongqing linagyou k
|
||||
{{ dataForm.customer }}
|
||||
</h3>
|
||||
<h2
|
||||
class="sale-order-id sale-item-id"
|
||||
@ -49,10 +57,20 @@
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
">
|
||||
<span>22301675</span>
|
||||
<span>00006</span>
|
||||
<!-- 托盘号 -->
|
||||
<span>{{ dataForm.code }}</span>
|
||||
<!-- 销售订单号 -->
|
||||
<span>{{ dataForm.saleNo }}</span>
|
||||
</h2>
|
||||
<h2 class="delivery-time" style="font-size: 20px; margin: 10px 0">2022.12.18</h2>
|
||||
<!-- 销售订单发货时间 -->
|
||||
<h2 class="delivery-time" style="font-size: 18px; margin: 10px 0">
|
||||
{{
|
||||
new Date(dataForm.deliveryTime).toLocaleDateString() +
|
||||
" " +
|
||||
new Date(dataForm.deliveryTime).toLocaleTimeString()
|
||||
}}
|
||||
</h2>
|
||||
<!-- 托盘类型： 满托 尾托 余托 -->
|
||||
<h2
|
||||
class="pan-no"
|
||||
style="
|
||||
@ -60,24 +78,34 @@
|
||||
border: 1px solid #000;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', '微软雅黑',
|
||||
'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
|
||||
'WenQuanYi Micro Hei', sans-serif;
|
||||
/* background: #000; */
|
||||
/* color: #fff; */
|
||||
">
|
||||
Pallet 1
|
||||
{{ palletType }}
|
||||
<!-- {{ dataForm.code }} -->
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="bottom-area"
|
||||
style="margin-bottom: 8px; display: flex; align-items: flex-start; justify-content: space-between">
|
||||
<!-- 二维码 -->
|
||||
<div
|
||||
class="qrcode"
|
||||
style="flex-shrink: 0; width: 128px; height: 128px; /* border: 1px solid #0003; */">
|
||||
<img id="qrcode" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<div class="" style="text-align: right">
|
||||
<h2 class="shape-count" style="font-size: 20px; margin: 0 0 10px 8px">2890</h2>
|
||||
<h2 class="shape-placed" style="font-size: 20px; margin: 0 0 10px 8px">120</h2>
|
||||
<h2 class="shape-24" style="font-size: 20px; margin: 0 0 10px 8px">24x120</h2>
|
||||
<h2 class="shape-1" style="font-size: 20px; margin: 0 0 10px 8px">1x10</h2>
|
||||
<!-- 订单生产总砖数 -->
|
||||
<h2 class="shape-count" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.prodqty }}</h2>
|
||||
<!-- 实际码放在托盘上的砖数 -->
|
||||
<h2 class="shape-placed" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.realQty }}</h2>
|
||||
<!-- 需要码放 24 托木托盘，每托120块砖 -->
|
||||
<h2 class="shape-24" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.fpText }}</h2>
|
||||
<!-- 需要码放 1 托木托盘，每托10块砖 -->
|
||||
<h2 class="shape-1" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.tpText }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <h2 class="pack-code" style="font-size: 20px; margin: 0 0 10px">S653</h2> -->
|
||||
@ -97,33 +125,105 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
lodop: null,
|
||||
datetime: new Date()
|
||||
datetime: new Date(),
|
||||
dataForm: {
|
||||
pdtCode: null,
|
||||
brand: null,
|
||||
bomCode: null,
|
||||
shapeCode: null,
|
||||
orderCode: null,
|
||||
customer: null,
|
||||
code: null,
|
||||
saleNo: null,
|
||||
deliveryTime: null,
|
||||
typeDictValue: null,
|
||||
prodqty: null,
|
||||
realQty: null,
|
||||
fpText: null,
|
||||
tpText: null,
|
||||
packTechCode: null,
|
||||
hu: null,
|
||||
},
|
||||
jobId: null,
|
||||
palletId: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
// comp120() {
|
||||
// if (this.dataForm.realQty == null) return 0;
|
||||
// return Math.floor(this.dataForm.realQty / 120);
|
||||
// },
|
||||
// comp10() {
|
||||
// if (this.dataForm.realQty == null) return 0;
|
||||
// return Math.ceil((this.dataForm.realQty % 120) / 10);
|
||||
// },
|
||||
palletType() {
|
||||
switch (this.dataForm.typeDictValue?.toString()) {
|
||||
case "0":
|
||||
return "满 托";
|
||||
case "1":
|
||||
return "尾 托";
|
||||
case "2":
|
||||
return "余 托";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
print(data) {
|
||||
console.log("print data", data);
|
||||
/**
|
||||
*
|
||||
* @param {string|object} data 当source为api时，data为id，当source为local时，data为对象
|
||||
* @param {'api'|'local'} source 数据来源
|
||||
*/
|
||||
async print(data, source = "api") {
|
||||
// 初始化打印控件
|
||||
if (!this.initPrintPlugin()) return this.close();
|
||||
|
||||
this.paintBarCode();
|
||||
this.paintQrCode();
|
||||
this.handlePrint();
|
||||
if (source === "api") {
|
||||
this.palletId = data;
|
||||
await this.printByApi(data);
|
||||
} else {
|
||||
this.printByLocalData(data);
|
||||
}
|
||||
|
||||
this.close();
|
||||
},
|
||||
|
||||
async printByApi(id) {
|
||||
const { data: res } = await this.$http.get("/pms/pallet/" + id);
|
||||
|
||||
this.dataForm = res.data;
|
||||
await this.printByLocalData(res.data);
|
||||
},
|
||||
|
||||
async printByLocalData(data) {
|
||||
// 绘制包装代码
|
||||
this.paintBarCode(data.packTechCode || "0000-0000-0000");
|
||||
// 绘制HU号
|
||||
await this.paintQrCode(data.hu || "- 无HU数据 -");
|
||||
await this.handlePrint();
|
||||
},
|
||||
|
||||
initPrintPlugin() {
|
||||
this.lodop = getLodop();
|
||||
if (!this.lodop) {
|
||||
alert("请先安装打印控件");
|
||||
return false;
|
||||
return this.$confirm("请先安装打印控件", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
window.open("http://www.c-lodop.com/download.html");
|
||||
})
|
||||
.catch(() => {
|
||||
return false;
|
||||
});
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
paintBarCode(data) {
|
||||
console.log("JSBarcode", JsBarcode);
|
||||
JsBarcode("#barcode", "S653", {
|
||||
JsBarcode("#barcode", data, {
|
||||
format: "CODE128",
|
||||
width: 2.5,
|
||||
height: 48,
|
||||
@ -131,31 +231,79 @@ export default {
|
||||
margin: 0,
|
||||
});
|
||||
},
|
||||
paintQrCode(data) {
|
||||
console.log("JSBarcode", QRCode);
|
||||
QRCode.toDataURL(
|
||||
"S653",
|
||||
{
|
||||
|
||||
async paintQrCode(data) {
|
||||
try {
|
||||
const url = await QRCode.toDataURL(data, {
|
||||
width: 128,
|
||||
height: 128,
|
||||
},
|
||||
(err, url) => {
|
||||
if (err) {
|
||||
document.querySelector(".qrcode").innerHTML = "no QRCode";
|
||||
return;
|
||||
}
|
||||
console.log("url", url);
|
||||
document.querySelector("#qrcode").src = url;
|
||||
}
|
||||
);
|
||||
});
|
||||
document.querySelector("#qrcode").src = url;
|
||||
} catch (err) {
|
||||
document.querySelector(".qrcode").innerHTML = "NO QRCode";
|
||||
}
|
||||
},
|
||||
|
||||
handlePrint() {
|
||||
this.lodop.PRINT_INIT("RGV小票打印");
|
||||
// 纵向打印，宽度60mm，高度150mm，定义纸张名称
|
||||
this.lodop.SET_PRINT_PAGESIZE(1, 600, 1500, "ZebraT231 Tag Paper");
|
||||
this.lodop.ADD_PRINT_HTM(0, 0, "100%", "100%", document.querySelector(".print-area").outerHTML);
|
||||
this.lodop.PREVIEW();
|
||||
return new Promise((resolve, reject) => {
|
||||
this.lodop.PRINT_INIT("RGV小票打印");
|
||||
// 捕获打印状态
|
||||
this.lodop.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);
|
||||
if (this.lodop.CVERSION) {
|
||||
// 获取jobId
|
||||
this.lodop.On_Return = (TaskID, Value) => {
|
||||
this.jobId = Value;
|
||||
this.$nextTick(() => {
|
||||
this.getPrintStatus(resolve, reject);
|
||||
});
|
||||
};
|
||||
}
|
||||
// 纵向打印，宽度60mm，高度150mm，定义纸张名称
|
||||
this.lodop.SET_PRINT_PAGESIZE(1, 600, 1500, "ZebraT231 Tag Paper");
|
||||
this.lodop.ADD_PRINT_HTM(0, 0, "100%", "100%", document.querySelector(".print-area").outerHTML);
|
||||
this.lodop.PRINT();
|
||||
});
|
||||
},
|
||||
|
||||
getPrintStatus(resolve, reject) {
|
||||
if (!this.jobId) return;
|
||||
if (LODOP.CVERSION) {
|
||||
LODOP.On_Return = (TaskID, Value) => {
|
||||
// console.log("on return value: <", Value, ">");
|
||||
if (Value.toString() == "1") {
|
||||
// 打印成功
|
||||
this.sendSuccess()
|
||||
.then(() => {
|
||||
this.$message.success("打印成功");
|
||||
this.$emit("refresh-list");
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
reject(err);
|
||||
});
|
||||
} else {
|
||||
this.$message.error("打印失败");
|
||||
}
|
||||
};
|
||||
}
|
||||
LODOP.GET_VALUE("PRINT_STATUS_OK", this.jobId);
|
||||
},
|
||||
|
||||
sendSuccess() {
|
||||
return this.$http({
|
||||
url: "/pms/pallet/print",
|
||||
method: "post",
|
||||
data: this.palletId,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}).then(({ data: res }) => {
|
||||
if (res.code == 0) return;
|
||||
else throw new Error(res.msg);
|
||||
});
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit("destroy");
|
||||
},
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
" />
|
||||
<Overlay v-if="overlayVisible" />
|
||||
|
||||
<PrintDom ref="print" v-if="printDOMmount" @destroy="printDOMmount = false" />
|
||||
<PrintDom ref="print" v-if="printDOMmount" @destroy="printDOMmount = false" @refresh-list="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -620,12 +620,16 @@ export default {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "我再想想",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.printDOMmount = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs["print"].print(data);
|
||||
})
|
||||
.then(() => {
|
||||
this.printDOMmount = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs["print"].print(data);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log("cancel ", err);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user