emis-app/pages/print/courierNote.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>
							</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),
				})
			},
			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
			}
		}
	}
</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>