<template>
|
<div class="page-list-container">
|
<el-card class="scan-card">
|
<div slot="header" class="clearfix">
|
<span>分拣机打印</span>
|
</div>
|
<el-form ref="form" :model="formData" label-width="120px">
|
<!-- <el-form-item label="选择打印机">
|
<el-select v-model="formData.printName" placeholder="请选择打印机" class="w-300">
|
<el-option v-for="(item, index) in printList" :key="index" :label="item" :value="item"></el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="打印机地址">
|
<el-input ref="ServerDomain" v-model="formData.ServerDomain" class="w-300" @keyup.native.enter.stop="getWayBillPrinter"></el-input>
|
<el-button type="primary" @click="connectSocketServer('showMsg')">连接服务器</el-button>
|
<el-tag :type="serverStatus==='已连接服务器'?'success':'danger'">{{ serverStatus }}</el-tag>
|
</el-form-item>
|
<el-form-item label="运单号">
|
<el-input ref="waybillCode" v-model="formData.WayBillCode" class="w-300" @keyup.native.enter.stop="getWayBillPrinter"></el-input>
|
<el-button type="primary" @click="getWayBillPrinter">手工打印</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
<!-- 显示打印模板 -->
|
<div id="mount-print"></div>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { getLodop } from "@/utils/LodopFuncs";
|
import print from "@/views/sys/print/base-fenjianji";
|
|
export default {
|
name: "tms-panel-sorting-printer",
|
components: {
|
print
|
},
|
data() {
|
return {
|
formData: {
|
WayBillCode: null, // 运单号
|
printName: null, // 打印及名称
|
ServerDomain: "ws://127.0.0.1:2017/", // 服务器IP地址
|
directPort: null // 指定口岸
|
},
|
showprint: false, // 显示print
|
wayBill_Id: 0, // 订单Id
|
menu_Id: 0, // 模板Id
|
panelResult: true, // 组板结果
|
panelMsg: null, // 组板信息
|
wayBillList: [], // 正常运单
|
abnormalWaybillList: [], // 异常运单
|
printList: [], // 打印机设备列表
|
printName: null, // 打印及名称
|
// 口岸名称下拉框数据列表
|
portOptions: [],
|
// websockect
|
ws: null,
|
// 服务器状态
|
serverStatus: "未连接"
|
};
|
},
|
mounted() {
|
this.getPrintList();
|
this.connectSocketServer();
|
setInterval(() => {
|
if (!this.ws || this.ws.readyState === 2 || this.ws.readyState === 3) {
|
this.connectSocketServer();
|
}
|
}, 20 * 1000);
|
},
|
activated() {},
|
methods: {
|
// 打印
|
btnClickPrint() {},
|
// 加载数据
|
getData() {},
|
// 获取运单信息和打印机名称
|
getWayBillPrinter() {
|
var url = "/api/TMS_PDAPrint/getWayBillPrinter";
|
var params = {
|
Code: this.formData.WayBillCode
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
var Profile = Vue.extend(print);
|
var m = new Profile({
|
propsData: {
|
vueData: JSON.parse(res.data.vueData),
|
billDataInfo: res.data.billDataInfo,
|
printInfo: res.data.printInfo,
|
billCodeField: "WaybillCode"
|
}
|
}).$mount();
|
var mountPrint = document.getElementById("mount-print");
|
var firstChild = mountPrint.firstChild;
|
mountPrint.insertBefore(m.$el, firstChild);
|
m.lodopPrint();
|
window.setTimeout(() => {
|
document.getElementById(res.data.billDataInfo.mainInfo.WayBillCode).remove();
|
}, 2 * 60 * 1000);
|
}
|
this.$refs.waybillCode.select();
|
this.$refs.waybillCode.focus();
|
},
|
true
|
);
|
},
|
// 获得打印机列表
|
getPrintList() {
|
window.setTimeout(() => {
|
const LODOP = getLodop();
|
var iPrinterCount = LODOP.GET_PRINTER_COUNT();
|
for (var i = 0; i < iPrinterCount; i++) {
|
this.printList.push(LODOP.GET_PRINTER_NAME(i));
|
}
|
}, 1000);
|
},
|
// 连接服务器
|
connectSocketServer(type) {
|
const userInfo = this.common.getUserInfo();
|
const support = "MozWebSocket" in window ? "MozWebSocket" : "WebSocket" in window ? "WebSocket" : null;
|
|
if (support == null) {
|
alert("Your browser cannot support WebSocket!");
|
return;
|
}
|
|
// 0 (CONNECTING), 1 (OPEN), 2 (CLOSING)，3 (CLOSED)
|
if (!this.ws || this.ws.readyState === 2 || this.ws.readyState === 3) {
|
this.ws = new window[support](this.formData.ServerDomain);
|
} else {
|
this.$message.warning("已连接，无需重复连接");
|
}
|
|
this.ws.onerror = function(e) {
|
// console.log(e);
|
};
|
|
this.ws.onmessage = evt => {
|
var data = JSON.parse(evt.data);
|
if (data.content) {
|
this.formData.WayBillCode = data.content;
|
this.formData.directPort = data.printNo; // 指定口岸
|
this.getWayBillPrinter();
|
}
|
};
|
|
// when the connection is established, this method is called
|
this.ws.onopen = () => {
|
var msg = {};
|
msg.Action = "SetOnline";
|
msg.FromMobile = userInfo.Mobile;
|
this.ws.send(JSON.stringify(msg));
|
this.serverStatus = "已连接服务器";
|
if (type === "showMsg") {
|
if (this.serverStatus === "已连接服务器") {
|
this.$message.success(this.serverStatus);
|
} else {
|
this.$message.error(this.serverStatus);
|
}
|
}
|
};
|
|
// when the connection is closed, this method is called
|
this.ws.onclose = () => {
|
this.serverStatus = "未连接服务器";
|
};
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../../styles/scan.scss";
|
.successClass {
|
color: green;
|
font-size: 40px;
|
margin-left: 200px;
|
}
|
.errorClass {
|
color: red;
|
font-size: 40px;
|
margin-left: 200px;
|
}
|
</style>
|
