emis-app/pages/print/courierNote.vue
2024-09-24 18:20:37 +08:00

340 lines
11 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" :autoReload="false" :createReload="false"
>
<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="请输入或扫码"
@scanChange="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 ref="dateRef" v-model:value="searchParam._date" placeholder="请选择时间"></tpx-date-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-select v-model:resObject="postRes" :getListFun="getAllStaffList" :transKeyVal="{valKey: 'empCode',titleKey: 'empName'}"
v-model:value="searchParam.registerManCode" :isWhite="true" mode="drop" :minChecked="0" placeholder="请选择"
></tpx-select>
</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-20">
<u-button type="primary" size="large" shape="square" plain="true" @click="handleSearch"
custom-style="height:66rpx;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 style="width: 160rpx;">
<u-button @click="handlePreview" custom-style="height: 60rpx;">预览</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" @click="handleSelAll">
<u-row justify="between">
<view>运单列表</view>
<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>
</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 justify="between">
<u-row @click="setClipboardData(dlCurrent.item.billCode)">
<view>
<u-text :text="`运单号:${dlCurrent.item.billCode}` " size="26"></u-text>
</view>
<view class="pl-10">
<u-icon name="file-text" size="32" custom-style=""></u-icon>
</view>
</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>
</u-row>
<div class="blcok-grey-sm" style="margin-top: 10rpx;margin-bottom: 0;">
<u-row justify="between">
<view>
<text class="clr-sub pr-10">寄件人</text>
<text class="font-weight">{{dlCurrent.item.sendName}}</text>
</view>
<view>
<text class="clr-sub pr-10">寄件电话</text>
<text class="font-weight">{{dlCurrent.item.sendMobile}}</text>
</view>
</u-row>
<u-row v-if="dlCurrent.item.sendCompany" custom-style="margin-top:6rpx;">
<view>
<text class="clr-sub pr-10">寄件公司</text>
<text class="font-weight">{{dlCurrent.item.sendCompany}}</text>
</view>
</u-row>
<u-row custom-style="margin-top:6rpx;">
<view>
<text class="clr-sub pr-10">寄件地址</text>
<text>{{dlCurrent.item.sendAddress}}</text>
</view>
</u-row>
<view style="background:#d0c3c2;height: 1rpx;margin: 5rpx 0;"></view>
<u-row custom-style="margin-top:6rpx;">
<view>
<text class="clr-sub pr-10">收件地址</text>
<text>{{dlCurrent.item.receiveAddress}}</text>
</view>
</u-row>
<u-row custom-style="margin-top:6rpx;">
<view>
<text class="clr-sub pr-10">目的网点</text>
<text>{{dlCurrent.item.dispatchUnderlingSiteName}}</text>
</view>
</u-row>
</div>
<u-text :text="`下单时间:${dlCurrent.item.sendDate}`" color="#999" size="24"
margin="10rpx 0 0 0"></u-text>
</view>
</tpx-checkitems>
</view>
</tpx-scroll-view>
</view>
</template>
<template v-slot:footer>
<view class="blcok-white-noradius">
<u-row>
<u-button @click="handleSubmitPrint()" 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-preview ref="curPrint"></tpx-bluetooth-print-preview>
</tpx-page>
</template>
<script>
import { debounce } from "@/common/util"
import dayjs from "dayjs"
import * as apiService from "@/common/api"
import { checkParams } from "@/common/validate"
import { getAddressDetail } from "@/common/util"
import TpxBluetoothPrintPreview from "@/components/tpx-bluetooth-print/tpx-bluetooth-print-preview"
import { getBillPrintData } from "@/pages/print/printData"
export default {
components: {
TpxBluetoothPrintPreview,
},
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: '',
registerManCode: '',
_date: [],
params: {}
},
resData: { list: [] },
postRes: { list: [] },
}
},
onShareAppMessage() {
return {
}
},
onLoad() {
this.initData();
},
onReady(){
// 默认选择今天
this.$refs.dateRef.handleToolsRangChange('1')
},
onUnload() {
},
methods: {
getAllStaffList: apiService.getAllStaffList,
getAddressDetail,
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
})
this.submitParam.billCode = [] // 清空复选框选中内容
return res
},
initData() {
},
triggerListReload(){
this?.$refs?.listRef?.getDataList?.(true) // 重置到第一页数据
},
handleScanValChange: debounce(function(val){
this.triggerListReload()
}),
handleSearch(){
this.triggerListReload()
},
handleSelAll() {
if(this.submitParam.billCode.length == this.resData.list.length) {
this.submitParam.billCode = []
} else {
this.submitParam.billCode = this.resData.list.map(item=> item.val)
}
},
getParams(){
// 请求后端接口
let param = JSON.parse(JSON.stringify(this.submitParam))
param.printType = param.printType.join(',')
param.billCode = param.billCode.join(',')
param.subBillCodeRange = param.subBillCodeRange.join(',')
return param
},
async handleSubmitPrint() {
let param = this.getParams()
let prtRes = await getBillPrintData(param)
this.$refs.curPrint.confirmPrint(prtRes)
},
async getRealGetWaybillPrintData() {
let param = this.getParams()
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()
this.$refs.curPrint.showPreview({
imageUrl: imgUrls.filter(v=> !!v)
})
},
}
}
</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) {
},
}
}
</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>