aike/emis-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uu

Browse Source
This commit is contained in:
aihe 2024-05-12 20:49:00 +08:00
parent 4fc797c552
commit 624843c5aa
8 changed files with 242 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
common/api/order.js
View File

@ -96,7 +96,14 @@ export const getNextStationList = (data = {})=> {
return coreRequest(url.getNextStationList, data, {}, "GET") return coreRequest(url.getNextStationList, data, {}, "GET")
} }
// 获取运单详细信息-图片 接口返回-文件流 // 获取打印运单信息-图片
export const getRealGetWaybillPrintData = (data = {})=> { export const getRealGetWaybillPrintData = (data = {})=> {
return coreRequest(url.getRealGetWaybillPrintData, data, {}, "GET") return coreRequest(url.getRealGetWaybillPrintData, data, {}, "GET")
} }
// 获取运单详细信息-图片
export const queryPrintListSimple = (data = {})=> {
return coreRequest(url.queryPrintListSimple, data, {}, "GET")
}

5
common/api/url.js
View File

@ -42,9 +42,12 @@ export default {
getOrderDetail: `/emis/emisWaybill/getWaybillDetail`, // 订单详情 getOrderDetail: `/emis/emisWaybill/getWaybillDetail`, // 订单详情
scanRecord: `/emis/emisTmsScanRecord/scan`, // 扫描- 揽收 scanRecord: `/emis/emisTmsScanRecord/scan`, // 扫描- 揽收
getRealGetWaybillPrintData: `/emis/emisWaybill/realGetWaybillPng`, // 运单 打印数据 getRealGetWaybillPrintData: `/emis/emisWaybill/realGetPrintList`, // 运单 打印数据
queryPrintListSimple: `/emis/emisWaybill/queryPrintListSimple`, // 运单 打印数据-列表
getNextStationList: `/emis/emisTmsScanRecord/getNextStationList`, // 获取-扫描下一网点 getNextStationList: `/emis/emisTmsScanRecord/getNextStationList`, // 获取-扫描下一网点
} }

172
components/tpx-bluetooth-print/render-template.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<tpx-bluetooth v-model:value="blueToothData">
<template v-slot:button>
<u-button @click="handlePrint" type="primary" :disabled="!(blueToothData.deviceId && blueToothData.serviceId && blueToothData.characteristicId)">打印</u-button>
</template>
<template v-slot:content>
<view class="pt-20 pb-10">打印内容</view>
<view class="canvas-con">
<canvas canvas-id="shareCanvas" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
</view>
</template>
</tpx-bluetooth>
<tpx-dialog type="type-dialog" title="打印中" :show="percentage">
<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;">
<view>
<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress>
<view class="pt-20">正在打印, 请勿退出页面, 如果卡住了请重连打印机重试</view>
</view>
</u-row>
</tpx-dialog>
</template>
<script>
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo } from "@/common/untool"
import * as canvasUtil from "@/common/canvasUtil"
import * as printJob from './print/printJob'
export default {
props:{
imageUrl: {
default () {
return ''
}
},
paperWidth: {
default () {
return 320
}
},
},
computed: {
},
data () {
return {
canvasId: 'shareCanvas',
canvasWidth: 1,
canvasHeight: 1,
imgData: '',
percentage: 0, // 打印进度
threshold: 200, // 阈值(值越大,图片打印越深)
blueToothData: {
deviceId: '',
serviceId: '',
characteristicId: ''
}
}
},
mounted () {
this.initData()
},
unmounted() {
},
methods: {
async initData() {
this.imgData = await this.renderCanvasImg();
},
// 打印
async handlePrint(){
const that = this
const opt = {
...this.blueToothData,
onProgress: (percentage) => {
console.log("打印进度====", percentage)
that.percentage = percentage
},
lasterSuccess: () => {
that.percentage = 0
hideLoading()
uni.showModal({
title: '提示',
content: '数据已发送完，请检查打印的内容是否正常',
showCancel: false,
confirmText: '好的',
});
},
onError: ()=> {
that.percentage = 0
showToast(`打印异常`)
hideLoading()
}
}
console.log('====this.imgData===', this.imgData)
//打印图片
printJob.printImage(
opt,
// 将图片数据转成位图数据
printJob.overwriteImageData({
threshold: this.threshold,
imageData: this.imgData,
width: this.canvasWidth,
height: this.canvasHeight,
}),
);
},
// 选择本地文件打印-- TODO
// chooseImage() {
// wx.chooseImage({
// success: (res) => {
// const tempFilePath = res.tempFilePaths[0];
// },
// });
// },
renderCanvasImg() {
let filePath = this.imageUrl
let that = this
showLoading()
return new Promise(async (resolve, reject)=> {
try{
let res = await getImageInfo(filePath)
const ctx = uni.createCanvasContext(that.canvasId, that);
// 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
const remainder = that.paperWidth % 8;
const w = remainder === 0 ? that.paperWidth : that.paperWidth - remainder;
// 等比算出图片的高度
const h = Math.floor((res.height * w) / res.width);
this.canvasWidth = w
this.canvasHeight = h
// 在canvas 画一张图片
let imgRect = canvasUtil.containImg(0, 0, w, h, res.width, res.height)
let ctData = [imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight]
ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.clearRect(...ctData);
ctx.fillRect(...ctData);
// 把原图缩放到 打印宽度的比例 绘制
ctx.drawImage(filePath, ...ctData);
ctx.draw(false, () => {
setTimeout( async ()=> {
let { data } = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
hideLoading()
resolve(data)
}, 1000)
});
}catch(e){
hideLoading()
reject(e)
}
})
}
}
}
</script>
<style scoped lang="scss">
.canvas-con{
width: 100%;
overflow: auto;
}
/*图片隐藏到窗口外*/
canvas {
// position: absolute;
// z-index: -999;
// top: -999px;
}
</style>

175
components/tpx-bluetooth-print/tpx-bluetooth-print.vue
View File

@ -1,172 +1,77 @@
<template> <template>
<tpx-bluetooth v-model:value="blueToothData"> <template v-if="type == 'modal'">
<template v-slot:button> <tpx-dialog
<u-button @click="handlePrint" type="primary" :disabled="!(blueToothData.deviceId && blueToothData.serviceId && blueToothData.characteristicId)">打印</u-button> v-model:show="show"
</template> @onClose="handleCloseModal"
<template v-slot:content> custom-style="width: 600rpx;padding: 10rpx;"
<view class="pt-20 pb-10">打印内容</view> title="打印"
<view class="canvas-con"> >
<canvas canvas-id="shareCanvas" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas> <view v-if="show" style="height: calc(75vh);">
<render-template ref="curPrint" :imageUrl="imageUrl" :paperWidth="paperWidth"></render-template>
</view> </view>
</template> </tpx-dialog>
</tpx-bluetooth>
<tpx-dialog type="type-dialog" title="打印中" :show="percentage"> </template>
<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;"> <template v-else>
<view> <template v-if="show">
<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress> <render-template ref="curPrint" :imageUrl="imageUrl" :paperWidth="paperWidth"></render-template>
<view class="pt-20">正在打印, 请勿退出页面, 如果卡住了请重连打印机重试</view> </template>
</view> </template>
</u-row>
</tpx-dialog>
</template> </template>
<script> <script>
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo } from "@/common/untool"
import * as canvasUtil from "@/common/canvasUtil"
import * as printJob from './print/printJob'
import RenderTemplate from "./render-template"
export default { export default {
props:{ props:{
imageUrl: { type: {
default () { default () {
return '' return 'modal'
}
},
paperWidth: {
default () {
return 320
} }
}, },
}, },
computed: { computed: {
},
components: {
RenderTemplate, RenderTemplate
}, },
data () { data () {
return { return {
canvasId: 'shareCanvas', imageUrl: '',
canvasWidth: 1, paperWidth: 320,
canvasHeight: 1, show: false,
imgData: '',
percentage: 0, // 打印进度
threshold: 200, // 阈值(值越大,图片打印越深)
blueToothData: {
deviceId: '',
serviceId: '',
characteristicId: ''
}
} }
}, },
mounted () { mounted () {
this.initData()
}, },
unmounted() { unmounted() {
}, },
methods: { methods: {
async initData() { handleCloseModal(){
this.imgData = await this.renderCanvasImg(); this.$emit('update:show', false)
this.$emit('onClose')
}, },
// 打印 async startPrint({ imageUrl, paperWidth } = {}) {
async handlePrint(){ if(imageUrl.length > 0) {
const that = this if(Array.isArray(imageUrl)){
const opt = { imageUrl = imageUrl[0]
...this.blueToothData,
onProgress: (percentage) => {
console.log("打印进度====", percentage)
that.percentage = percentage
},
lasterSuccess: () => {
that.percentage = 0
hideLoading()
uni.showModal({
title: '提示',
content: '数据已发送完，请检查打印的内容是否正常',
showCancel: false,
confirmText: '好的',
});
},
onError: ()=> {
that.percentage = 0
showToast(`打印异常`)
hideLoading()
} }
this.imageUrl = imageUrl
this.paperWidth = paperWidth
this.show = true
} else {
this.showToast('缺少打印内容')
} }
console.log('====this.imgData===', this.imgData)
//打印图片
printJob.printImage(
opt,
// 将图片数据转成位图数据
printJob.overwriteImageData({
threshold: this.threshold,
imageData: this.imgData,
width: this.canvasWidth,
height: this.canvasHeight,
}),
);
},
// 选择本地文件打印-- TODO
// chooseImage() {
// wx.chooseImage({
// success: (res) => {
// const tempFilePath = res.tempFilePaths[0];
// },
// });
// },
renderCanvasImg() {
let filePath = this.imageUrl
let that = this
showLoading()
return new Promise(async (resolve, reject)=> {
try{
let res = await getImageInfo(filePath)
const ctx = uni.createCanvasContext(that.canvasId, that);
// 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
const remainder = that.paperWidth % 8;
const w = remainder === 0 ? that.paperWidth : that.paperWidth - remainder;
// 等比算出图片的高度
const h = Math.floor((res.height * w) / res.width);
this.canvasWidth = w
this.canvasHeight = h
// 在canvas 画一张图片
let imgRect = canvasUtil.containImg(0, 0, w, h, res.width, res.height)
let ctData = [imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight]
ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.clearRect(...ctData);
ctx.fillRect(...ctData);
// 把原图缩放到 打印宽度的比例 绘制
ctx.drawImage(filePath, ...ctData);
ctx.draw(false, () => {
setTimeout( async ()=> {
let { data } = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
hideLoading()
resolve(data)
}, 1000)
});
}catch(e){
hideLoading()
reject(e)
}
})
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.canvas-con{
width: 100%;
overflow: auto;
}
/*图片隐藏到窗口外*/
canvas {
// position: absolute;
// z-index: -999;
// top: -999px;
}
</style> </style>

2
components/tpx-bluetooth/tpx-bluetooth.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<tpx-layout> <tpx-layout>
<template v-slot:header> <template v-slot:header>
<view class="blcok-white"> <view class="blcok-white" style="margin-top: 0;">
<view > <view >
<u-row custom-style="gap: 10rpx;"> <u-row custom-style="gap: 10rpx;">
<u-button @click="discoveryPrinter"> <u-button @click="discoveryPrinter">

3
pages/print/bluetoothPrinter.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<tpx-page> <tpx-page>
<tpx-bluetooth-print v-if="!pageLoading" <tpx-bluetooth-print show="!pageLoading"
:imageUrl="queryOption.imageUrl" :paperWidth="queryOption.paperWidth" :imageUrl="queryOption.imageUrl" :paperWidth="queryOption.paperWidth"
></tpx-bluetooth-print> ></tpx-bluetooth-print>
</tpx-page> </tpx-page>
@ -8,7 +8,6 @@
<script> <script>
export default { export default {
computed: { computed: {

16
pages/print/courierNote.vue
View File

@ -97,6 +97,7 @@
</view> </view>
</template> </template>
</tpx-layout> </tpx-layout>
<tpx-bluetooth-print ref="curPrint"></tpx-bluetooth-print>
</tpx-page> </tpx-page>
</template> </template>
@ -130,16 +131,14 @@
{ title: '中文', val: 'zh' }, { title: '中文', val: 'zh' },
{ title: '英文', val: 'en' }, { title: '英文', val: 'en' },
], ],
yundanList: [ yundanList: [
{ val: 'T7080304037' },{ val: 'T708012124037' },{ val: 'T7080304092' } ],
] searchParam: {},
resData: { list: [] }
} }
}, },
onShareAppMessage() { onShareAppMessage() {
return { return {
// title: '',
// path: 'TODO'
} }
}, },
onLoad() { onLoad() {
@ -149,13 +148,18 @@
}, },
methods: { methods: {
getListFun: apiService.queryPrintListSimple,
initData() { initData() {
}, },
handleScanValChange: debounce(function(val){ handleScanValChange: debounce(function(val){
}), }),
async handleSubmit() { async handleSubmit() {
let res = await this.getRealGetWaybillPrintData() let res = await this.getRealGetWaybillPrintData()
this.goto(`print/bluetoothPrinter?imageUrl=${res.data.fileUrl}&paperWidth=${480}`) const imageUrl = res?.data?.map(t=> t.imageUrl) || ''
this.$refs.curPrint.startPrint({
imageUrl: imageUrl,
paperWidth: 480,
})
}, },
handleSelAll() { handleSelAll() {
if(this.submitParam.subBillCodeRange.length == this.yundanList.length) { if(this.submitParam.subBillCodeRange.length == this.yundanList.length) {

6
pages/user/exclusiveQrcode.vue
View File

@ -35,6 +35,7 @@
</u-row> </u-row>
</view> </view>
</view> </view>
<tpx-bluetooth-print ref="curPrint"></tpx-bluetooth-print>
</tpx-page> </tpx-page>
</template> </template>
<script> <script>
@ -69,7 +70,10 @@
this.saveNetFile(this.qrCodeImgUrl) this.saveNetFile(this.qrCodeImgUrl)
}, },
handlePrint() { handlePrint() {
this.goto(`print/bluetoothPrinter?imageUrl=${this.qrCodeImgUrl}&paperWidth=${480}`) this.$refs.curPrint.startPrint({
imageUrl: this.qrCodeImgUrl,
paperWidth: 480,
})
} }
} }
} }