<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-row>
|
<el-col :span="12">
|
<el-form-item label="选择打印机">
|
<el-select v-model="formData.printName" placeholder="请选择打印机" class="w-300" @change="changePrint">
|
<el-option v-for="(item, index) in printList" :key="index" :label="item" :value="item"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="选择口岸模板">
|
<el-select v-model="formData.protTemplateName" placeholder="请选择口岸模板" class="w-300" @change="changePort">
|
<el-option v-for="(item, index) in portList" :key="index" :label="item.protTemplateName" :value="item.protTemplateName"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="打印机地址">
|
<el-input ref="serverDomain" v-model="formData.serverDomain" class="w-200" @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-col>
|
<el-col :span="12">
|
<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-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
<!-- 显示打印模板 -->
|
<el-row>
|
<el-col :span="12">
|
<el-table :data="msgList" max-height="500px" style="width: 100%">
|
<el-table-column prop="BGYM" label="运单号" width="180">
|
</el-table-column>
|
<el-table-column prop="WLGK" label="口岸" width="80">
|
<template slot-scope="scope">{{ showPortName(scope.row.WLGK) }}</template>
|
</el-table-column>
|
<el-table-column prop="GKMC" label="组板结果">
|
</el-table-column>
|
</el-table>
|
<print v-if="printDataList5.showprint" ref="printRef5" :print-name="printDataList5.printName" :ids="''+printDataList5.wayBill_Id" :menu-id="''+printDataList5.menu_Id" :is-auto-print="true" :is-auto-load="false" :only-lodop="true"></print>
|
</el-col>
|
<el-col :span="12">
|
<print v-if="printDataList4.showprint" ref="printRef4" :print-name="printDataList4.printName" :ids="''+printDataList4.wayBill_Id" :menu-id="''+printDataList4.menu_Id" :is-auto-print="true" :is-auto-load="false" :only-lodop="true"></print>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<print v-if="printDataList6.showprint" ref="printRef6" :print-name="printDataList6.printName" :ids="''+printDataList6.wayBill_Id" :menu-id="''+printDataList6.menu_Id" :is-auto-print="true" :is-auto-load="false" :only-lodop="true"></print>
|
</el-col>
|
<el-col :span="12">
|
<print v-if="printDataList7.showprint" ref="printRef7" :print-name="printDataList7.printName" :ids="''+printDataList7.wayBill_Id" :menu-id="''+printDataList7.menu_Id" :is-auto-print="true" :is-auto-load="false" :only-lodop="true"></print>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { getLodop } from "@/utils/LodopFuncs";
|
import print from "@/views/sys/print/base";
|
|
export default {
|
name: "tms-panel-sorting-printer-pda",
|
components: {
|
print
|
},
|
data() {
|
return {
|
formData: {
|
wayBillCode: null, // 运单号
|
printName: null, // 打印及名称
|
protTemplateName: null, // 口岸模板
|
serverDomain: "ws://127.0.0.1:2017/", // 服务器IP地址
|
directPort: null // 指定口岸
|
},
|
printList: [], // 打印机设备列表
|
// 口岸名称下拉框数据列表
|
portList: [],
|
// websockect
|
ws: null,
|
// 服务器状态
|
serverStatus: "未连接",
|
// 打印机数据列表
|
printDataList4: {
|
showprint: false,
|
wayBill_Id: 0,
|
menu_Id: 0,
|
printName: null
|
},
|
printDataList5: {
|
showprint: false,
|
wayBill_Id: 0,
|
menu_Id: 0,
|
printName: null
|
},
|
printDataList6: {
|
showprint: false,
|
wayBill_Id: 0,
|
menu_Id: 0,
|
printName: null
|
},
|
printDataList7: {
|
showprint: false,
|
wayBill_Id: 0,
|
menu_Id: 0,
|
printName: null
|
},
|
// 消息内容列表
|
msgList: []
|
};
|
},
|
mounted() {
|
this.getPrintList();
|
this.getPortList();
|
this.connectSocketServer();
|
setInterval(() => {
|
if (!this.ws || this.ws.readyState === 2 || this.ws.readyState === 3) {
|
this.connectSocketServer();
|
}
|
}, 20 * 1000);
|
// 初始化当前IP地址
|
const serverDomain = localStorage["serverDomain"];
|
if (serverDomain) {
|
this.formData.serverDomain = serverDomain;
|
}
|
},
|
activated() {},
|
methods: {
|
// 打印
|
btnClickPrint() {},
|
// 加载数据
|
getData() {},
|
// 获取运单信息和打印机名称
|
getWayBillPrinter() {
|
var url = "/api/tms/pdaPrint/getWayBillPrinter";
|
var params = {
|
code: this.formData.wayBillCode,
|
name: this.formData.protTemplateName
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
// var printName = res.data.printInfo.PrinterName;
|
this.printDataList4.showprint = true;
|
this.printDataList4.wayBill_Id = res.data.wayInfo.WayBill_Id;
|
this.printDataList4.menu_Id = res.data.menu_Id;
|
this.printDataList4.printName = this.formData.printName; // 页面设置打印机
|
this.$nextTick(() => {
|
this.$refs.printRef4.loadModuleData();
|
});
|
}
|
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));
|
}
|
// 设置默认打印机
|
const printName = localStorage["printName"];
|
if (printName) {
|
this.formData.printName = printName;
|
}
|
}, 1000);
|
},
|
// 获得口岸列表
|
getPortList() {
|
var url = "/api/tms/pdaPrint/getPortList";
|
var params = {};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.portList.length = 0;
|
this.common.showMsg(res);
|
if (res.result) {
|
res.data.unshift({
|
PortTemplate_Id: 0,
|
protTemplateName: "系统分配"
|
});
|
res.data.forEach(item => {
|
this.$set(this.portList, this.portList.length, item);
|
});
|
// 设置默认打印机
|
const protTemplateName = localStorage["protTemplateName"];
|
if (protTemplateName) {
|
this.formData.protTemplateName = protTemplateName;
|
}
|
}
|
},
|
true
|
);
|
},
|
// 连接服务器
|
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.getWayBillPrinter();
|
return;
|
}
|
|
this.msgList.unshift(data);
|
if (this.msgList.length > 10) {
|
this.msgList.pop();
|
}
|
// 从PDA扫描
|
if (["4", "5", "6", "7"].indexOf(data.WLGK) < 0) {
|
this.$message.error(data.BGYM + data.GKMC);
|
return;
|
}
|
if (data.BGYM) {
|
this.formData.wayBillCode = data.BGYM;
|
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 = "已连接服务器";
|
localStorage["serverDomain"] = this.formData.serverDomain; // 记录当前IP地址
|
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 = "未连接服务器";
|
};
|
},
|
// 打印机改变
|
changePrint() {
|
localStorage["printName"] = this.formData.printName;
|
},
|
// 口岸改变
|
changePort() {
|
localStorage["protTemplateName"] = this.formData.protTemplateName;
|
},
|
// 显示口岸名称
|
showPortName(name) {
|
if (name === "4") {
|
name = "西安";
|
} else if (name === "5") {
|
name = "北京";
|
} else if (name === "6") {
|
name = "福州";
|
} else if (name === "7") {
|
name = "泉州";
|
}
|
return name;
|
}
|
}
|
};
|
</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>
|
