318 lines
10 KiB
Vue
318 lines
10 KiB
Vue
<template>
|
||
<tpx-page>
|
||
<tpx-layout>
|
||
<template v-slot:body>
|
||
<view class="pos-abt-all">
|
||
<tpx-scroll-view v-model:resObject="resData" :searchParam="searchParam" :getListFun="getListFun"
|
||
ref="listRef"
|
||
>
|
||
<view class="blcok-white-noradius" style="margin-top: 0;">
|
||
<u-row justify="between">
|
||
<view style="width: 140rpx;" class="font-weight">运单号</view>
|
||
<view style="flex:1;">
|
||
<tpx-scan-input v-model:value="searchParam.billCode" placeholder="请输入或扫码"
|
||
@change="handleScanValChange" iconPos="right"></tpx-scan-input>
|
||
</view>
|
||
</u-row>
|
||
<u-row justify="between" custom-style="margin-top:20rpx;">
|
||
<view style="width: 140rpx;" class="font-weight">下单时间</view>
|
||
<view style="flex:1;">
|
||
<tpx-date-input v-model:value="searchParam._date" placeholder="请选择时间"></tpx-date-input>
|
||
</view>
|
||
</u-row>
|
||
<u-row custom-style="margin-top:20rpx;" justify="end">
|
||
<u-row>
|
||
<text class="pr-30">是否已打印</text>
|
||
<u-switch v-model="searchParam.printFlag" activeValue="1" inactiveValue="0"
|
||
active-color="#B12D29" size="34"></u-switch>
|
||
</u-row>
|
||
</u-row>
|
||
|
||
<view class="mt-30">
|
||
<u-button type="primary" size="large" shape="square" plain="true" @click="handleSearch"
|
||
custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;">查询</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="blcok-white-noradius">
|
||
|
||
<u-row justify="between" custom-style="padding-top:20rpx;">
|
||
<view class="com-section">打印配置</view>
|
||
<view>
|
||
<u-button shape="square" plain="true" @click="handlePreview"
|
||
custom-style="width: 200rpx;height:60rpx;font-size: 30rpx;border-radius: 14rpx;">打印预览</u-button>
|
||
</view>
|
||
</u-row>
|
||
<view class="clr-prm mt-20">注意：当打印出来寄件分拨或未端分拨返回为空时，请等待5分钟后再补 打印</view>
|
||
|
||
<view class="mt-20">
|
||
<u-checkbox-group v-model="submitParam.printType" placement="column">
|
||
<u-row custom-style="flex-wrap: wrap;">
|
||
<u-col span="6" v-for="(item, index) in dicData.emis_print_type">
|
||
<u-checkbox size="30" labelSize="30" label-color=":#999" activeColor="#B12D29"
|
||
:customStyle="{marginBottom: '20rpx'}"
|
||
:label="item.title" :name="item.val"
|
||
></u-checkbox>
|
||
</u-col>
|
||
</u-row>
|
||
</u-checkbox-group>
|
||
</view>
|
||
|
||
<u-row custom-style="margin-top:30rpx;">
|
||
<view style="width: 200rpx;" class="">子单打印区间</view>
|
||
<u-row>
|
||
<tpx-input customStyle="width:60rpx;" v-model:value="submitParam.subBillCodeRange[0]" :isWhite="true" placeholder="" type="number"></tpx-input>
|
||
<text class="pl-10 pr-10">到</text>
|
||
<tpx-input customStyle="width:60rpx;" v-model:value="submitParam.subBillCodeRange[1]" :isWhite="true" placeholder="" type="number"></tpx-input>
|
||
</u-row>
|
||
</u-row>
|
||
</view>
|
||
|
||
<view class="blcok-white-noradius">
|
||
<view class="pb-20 com-section">运单列表</view>
|
||
<view class="pb-20">
|
||
<u-row>
|
||
<u-col span="8">
|
||
<u-row @click="handleSelAll">
|
||
<view class="com-chk-icon">
|
||
<u-checkbox-group>
|
||
<u-checkbox size="26" labelSize="26" label-color=":#999" activeColor="#B12D29"
|
||
label="" :checked="resData.list.length > 0 && submitParam.billCode.length == resData.list.length"
|
||
></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<text class="font-weight pl-10">运单号</text>
|
||
</u-row>
|
||
</u-col>
|
||
<u-col span="4">
|
||
<text class="font-weight">下单时间</text>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
|
||
<tpx-checkitems :list="resData.list" v-model:value="submitParam.billCode" v-slot="dlCurrent" type="multiple"
|
||
vdataType="array"
|
||
>
|
||
<view slot class="yditem">
|
||
<u-row>
|
||
<u-col span="8">
|
||
<u-row>
|
||
<view class="com-chk-icon">
|
||
<u-checkbox-group>
|
||
<u-checkbox size="26" labelSize="26" label-color=":#999" activeColor="#B12D29"
|
||
label="" :checked="dlCurrent.checked"
|
||
></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<text class="">{{dlCurrent.item.billCode}}</text>
|
||
</u-row>
|
||
</u-col>
|
||
<u-col span="4">
|
||
<text class="clr-sub">{{dlCurrent.item.sendDate}}</text>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</tpx-checkitems>
|
||
|
||
</view>
|
||
</tpx-scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-slot:footer>
|
||
<view class="blcok-white-noradius">
|
||
<u-row>
|
||
<u-button @click="handleSubmit()" type="primary" size="large" shape="square"
|
||
custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;margin: 0 10rpx;">打印</u-button>
|
||
</u-row>
|
||
</view>
|
||
</template>
|
||
</tpx-layout>
|
||
<tpx-bluetooth-print ref="curPrint"></tpx-bluetooth-print>
|
||
</tpx-page>
|
||
</template>
|
||
|
||
<script>
|
||
import { debounce } from "@/common/util"
|
||
import dayjs from "dayjs"
|
||
import * as apiService from "@/common/api"
|
||
import { checkParams } from "@/common/validate"
|
||
export default {
|
||
props: {
|
||
// hasLeftWin: {
|
||
// type: Boolean
|
||
// }
|
||
},
|
||
computed: {
|
||
dicData() {
|
||
return this.$store.getters.dicData
|
||
},
|
||
},
|
||
data() {
|
||
let { dicData } = this.$store.getters
|
||
return {
|
||
submitParam: {
|
||
lang: 'zh',
|
||
printType: [],
|
||
billCode: [],
|
||
subBillCodeRange: []
|
||
},
|
||
submitValidConfig: {
|
||
printType: { required: true, requiredMsg: '请勾选打印配' },
|
||
billCode: { required: true, requiredMsg: '请选择运单号' },
|
||
},
|
||
yinlTypeList: [
|
||
{ title: '中文', val: 'zh' },
|
||
{ title: '英文', val: 'en' },
|
||
],
|
||
searchParam: {
|
||
printFlag: '0',
|
||
billCode: '',
|
||
_date: [],
|
||
params: {}
|
||
},
|
||
resData: { list: [] }
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initData();
|
||
},
|
||
onUnload() {
|
||
|
||
},
|
||
methods: {
|
||
async getListFun(param){
|
||
let cpParam = JSON.parse(JSON.stringify(param))
|
||
cpParam.params.beginSendDate = cpParam._date[0]
|
||
cpParam.params.endSendDate = cpParam._date[1]
|
||
let res = await apiService.queryPrintListSimple(cpParam)
|
||
// list增加新字段
|
||
res.rows.map(t=> {
|
||
t.val = t.billCode
|
||
})
|
||
return res
|
||
},
|
||
initData() {
|
||
},
|
||
handleScanValChange: debounce(function(val){
|
||
}),
|
||
handleSearch(){
|
||
|
||
},
|
||
async handleSubmit() {
|
||
const imgUrls = await this.getPrintImages()
|
||
this.$refs.curPrint.startPrint({
|
||
imageUrl: imgUrls.filter(v=> !!v),
|
||
paperWidth: 480,
|
||
})
|
||
},
|
||
handleSelAll() {
|
||
if(this.submitParam.billCode.length == this.resData.list.length) {
|
||
this.submitParam.billCode = []
|
||
} else {
|
||
this.submitParam.billCode = this.resData.list.map(item=> item.val)
|
||
}
|
||
},
|
||
async getRealGetWaybillPrintData() {
|
||
// 请求后端接口
|
||
let param = JSON.parse(JSON.stringify(this.submitParam))
|
||
param.printType = param.printType.join(',')
|
||
param.billCode = param.billCode.join(',')
|
||
param.subBillCodeRange = param.subBillCodeRange.join(',')
|
||
await checkParams(param, this.submitValidConfig)
|
||
let res = await apiService.getRealGetWaybillPrintData({ ...param, _loading: true })
|
||
return res
|
||
},
|
||
async getPrintImages() {
|
||
let res = await this.getRealGetWaybillPrintData()
|
||
const imgUrls = res?.data?.map(t=> t.imageUrl) || []
|
||
return imgUrls
|
||
},
|
||
async handlePreview(){
|
||
const imgUrls = await this.getPrintImages()
|
||
uni.previewImage({
|
||
urls: imgUrls
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<script module="acceptance" lang="renderjs">
|
||
import { PDFDocument, StandardFonts } from "pdf-lib/dist/pdf-lib.esm.min"
|
||
export default {
|
||
mounted() {
|
||
// const script = document.createElement('script')
|
||
// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
||
// script.src = 'static/js/jquery-3.1.1.min.js'
|
||
// script.onload = this.initEvent.bind(this, this.$ownerInstance)
|
||
// document.head.appendChild(script)
|
||
this.initEvent()
|
||
},
|
||
methods: {
|
||
async initEvent(ownerInstance) {
|
||
// 通过事件委托给按钮添加事件
|
||
// 添加事件前先清除事件避免重复绑定
|
||
// $(document).off("touchend")
|
||
// 新增
|
||
// $(document).on('touchend', '.add', function() {
|
||
// const wbsId = this.getAttribute('wbsId');
|
||
// const taskId = this.getAttribute('taskId');
|
||
// const taskName = this.getAttribute('taskName');
|
||
// // 调用 service 层的方法
|
||
// ownerInstance.callMethod('toAdd', {
|
||
// wbsId: wbsId,
|
||
// taskId: taskId,
|
||
// taskName: taskName
|
||
// })
|
||
// });
|
||
// Create a new PDFDocument
|
||
const pdfDoc = await PDFDocument.create()
|
||
|
||
// Embed the Times Roman font
|
||
const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)
|
||
|
||
// Add a page and draw some text on it
|
||
const page = pdfDoc.addPage([500, 600])
|
||
page.setFont(timesRomanFont)
|
||
page.drawText('The Life of an Egg', { x: 60, y: 500, size: 50 })
|
||
page.drawText('An Epic Tale of Woe', { x: 125, y: 460, size: 25 })
|
||
|
||
// Set all available metadata fields on the PDFDocument. Note that these fields
|
||
// are visible in the "Document Properties" section of most PDF readers.
|
||
pdfDoc.setTitle('🥚 The Life of an Egg 🍳')
|
||
pdfDoc.setAuthor('Humpty Dumpty')
|
||
pdfDoc.setSubject('📘 An Epic Tale of Woe 📖')
|
||
pdfDoc.setKeywords(['eggs', 'wall', 'fall', 'king', 'horses', 'men'])
|
||
pdfDoc.setProducer('PDF App 9000 🤖')
|
||
pdfDoc.setCreator('pdf-lib (https://github.com/Hopding/pdf-lib)')
|
||
pdfDoc.setCreationDate(new Date('2018-06-24T01:58:37.228Z'))
|
||
pdfDoc.setModificationDate(new Date('2019-12-21T07:00:11.000Z'))
|
||
|
||
// Serialize the PDFDocument to bytes (a Uint8Array)
|
||
const pdfBytes = await pdfDoc.save()
|
||
console.log("=========pdfBytes============", pdfBytes)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/common/uni-nvue.scss';
|
||
|
||
page {
|
||
background-color: #F6F6F6;
|
||
height: 100% !important;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.ddhao {
|
||
}
|
||
.yditem{
|
||
padding: 20rpx 0;
|
||
border-top: 2px solid #F6F6F6;
|
||
}
|
||
</style> |