mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 更新包装托盘打印

Browse Source
This commit is contained in:
lb 2023-08-14 14:17:04 +08:00
parent 62f625197f
commit d1bc97f42a
3 changed files with 205 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -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>

226
src/components/PrintDom.vue
View File

@ -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 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;
} catch (err) {
document.querySelector(".qrcode").innerHTML = "NO QRCode";
}
);
},
handlePrint() {
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.PREVIEW();
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");
},

8
src/views/atomViews/ListViewWithHead.vue
View File

@ -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,11 +620,15 @@ export default {
confirmButtonText: "确认",
cancelButtonText: "我再想想",
type: "warning",
}).then(() => {
})
.then(() => {
this.printDOMmount = true;
this.$nextTick(() => {
this.$refs["print"].print(data);
});
})
.catch((err) => {
// console.log("cancel ", err);
});
}
}