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")
}
// 获取运单详细信息-图片 接口返回-文件流
// 获取打印运单信息-图片
export const getRealGetWaybillPrintData = (data = {})=> {
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`, // 订单详情
scanRecord: `/emis/emisTmsScanRecord/scan`, // 扫描- 揽收
getRealGetWaybillPrintData: `/emis/emisWaybill/realGetWaybillPng`, // 运单 打印数据
getRealGetWaybillPrintData: `/emis/emisWaybill/realGetPrintList`, // 运单 打印数据
queryPrintListSimple: `/emis/emisWaybill/queryPrintListSimple`, // 运单 打印数据-列表
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>

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

@ -1,172 +1,77 @@
<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>
<template v-if="type == 'modal'">
<tpx-dialog
v-model:show="show"
@onClose="handleCloseModal"
custom-style="width: 600rpx;padding: 10rpx;"
title="打印"
>
<view v-if="show" style="height: calc(75vh);">
<render-template ref="curPrint" :imageUrl="imageUrl" :paperWidth="paperWidth"></render-template>
</view>
</u-row>
</tpx-dialog>
</tpx-dialog>
</template>
<template v-else>
<template v-if="show">
<render-template ref="curPrint" :imageUrl="imageUrl" :paperWidth="paperWidth"></render-template>
</template>
</template>
</template>
<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 {
props:{
imageUrl: {
type: {
default () {
return ''
}
},
paperWidth: {
default () {
return 320
return 'modal'
}
},
},
computed: {
},
components: {
RenderTemplate, RenderTemplate
},
data () {
return {
canvasId: 'shareCanvas',
canvasWidth: 1,
canvasHeight: 1,
imgData: '',
percentage: 0, // 打印进度
threshold: 200, // 阈值(值越大,图片打印越深)
blueToothData: {
deviceId: '',
serviceId: '',
characteristicId: ''
}
imageUrl: '',
paperWidth: 320,
show: false,
}
},
mounted () {
this.initData()
},
unmounted() {
},
methods: {
async initData() {
this.imgData = await this.renderCanvasImg();
handleCloseModal(){
this.$emit('update:show', false)
this.$emit('onClose')
},
// 打印
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()
async startPrint({ imageUrl, paperWidth } = {}) {
if(imageUrl.length > 0) {
if(Array.isArray(imageUrl)){
imageUrl = imageUrl[0]
}
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>
<style scoped lang="scss">
.canvas-con{
width: 100%;
overflow: auto;
}
/*图片隐藏到窗口外*/
canvas {
// position: absolute;
// z-index: -999;
// top: -999px;
}
</style>

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

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

3
pages/print/bluetoothPrinter.vue
View File

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

16
pages/print/courierNote.vue
View File

@ -97,6 +97,7 @@
</view>
</template>
</tpx-layout>
<tpx-bluetooth-print ref="curPrint"></tpx-bluetooth-print>
</tpx-page>
</template>
@ -130,16 +131,14 @@
{ title: '中文', val: 'zh' },
{ title: '英文', val: 'en' },
],
yundanList: [
{ val: 'T7080304037' },{ val: 'T708012124037' },{ val: 'T7080304092' }
]
],
searchParam: {},
resData: { list: [] }
}
},
onShareAppMessage() {
return {
// title: '',
// path: 'TODO'
}
},
onLoad() {
@ -149,13 +148,18 @@
},
methods: {
getListFun: apiService.queryPrintListSimple,
initData() {
},
handleScanValChange: debounce(function(val){
}),
async handleSubmit() {
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() {
if(this.submitParam.subBillCodeRange.length == this.yundanList.length) {

6
pages/user/exclusiveQrcode.vue
View File

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