8 changed files with 894 additions and 366 deletions
@ -1,323 +1,324 @@ |
|||
<template> |
|||
<view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)"> |
|||
<!-- 只用于展示页面 --> |
|||
<view class="box" v-for="(item, index) in data" :key="index" style="margin-bottom: 20rpx"> |
|||
<view class="left"> |
|||
<view class="left-item"> |
|||
<view class="label">物品代码</view> |
|||
<view class="value bold-font" id="name1">{{ item.itemCode }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">物品名称</view> |
|||
<view class="value" id="name2">{{ item.itemName }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">包装名称</view> |
|||
<view class="value">{{item.packName}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">包装号</view> |
|||
<view class="value">{{ item.packageCode }}</view> |
|||
</view> |
|||
<view class="left-item" v-if="item.productionLineCode&&item.productionLineCode.length>0"> |
|||
<view class="label">生产线</view> |
|||
<view class="value">{{item.productionLineCode}}</view> |
|||
</view> |
|||
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
|||
<view class="label">父包装号</view> |
|||
<view class="value">{{item.parentNumber}}</view> |
|||
</view> |
|||
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
|||
<view class="label">ASN</view> |
|||
<view class="value">{{item.asnNumber}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">数量</view> |
|||
<view class="value bold-font">{{item.qty}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="image"> |
|||
<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">批次</view> |
|||
<view class="value">{{item.batch}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">物料类型</view> |
|||
<view class="value">{{item.itemType}}</view> |
|||
</view> |
|||
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
|||
<view class="label">供应商</view> |
|||
<view class="value">{{item.supplierCode}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">打印时间</view> |
|||
<view class="value">{{item.printTimes}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px" v-show="isLoadFinish"> |
|||
<button @click="printImage" |
|||
style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button> |
|||
</view> |
|||
</view> |
|||
<view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)"> |
|||
<!-- 只用于展示页面 --> |
|||
<view class="box" v-for="(item, index) in data" :key="index" style="margin-bottom: 20rpx"> |
|||
<view class="left"> |
|||
<view class="left-item"> |
|||
<view class="label">物品代码</view> |
|||
<view class="value bold-font" id="name1">{{ item.itemCode }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">物品名称</view> |
|||
<view class="value" id="name2">{{ item.itemName }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">包装名称</view> |
|||
<view class="value">{{ item.packName }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">包装号</view> |
|||
<view class="value">{{ item.packageCode }}</view> |
|||
</view> |
|||
<view class="left-item" v-if="item.productionLineCode && item.productionLineCode.length > 0"> |
|||
<view class="label">生产线</view> |
|||
<view class="value">{{ item.productionLineCode }}</view> |
|||
</view> |
|||
<view class="left-item" v-if="!(item.productionLineCode && item.productionLineCode.length > 0)"> |
|||
<view class="label">父包装号</view> |
|||
<view class="value">{{ item.parentNumber }}</view> |
|||
</view> |
|||
<view class="left-item" v-if="!(item.productionLineCode && item.productionLineCode.length > 0)"> |
|||
<view class="label">ASN</view> |
|||
<view class="value">{{ item.asnNumber }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">数量</view> |
|||
<view class="value bold-font">{{ item.qty }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="image"> |
|||
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success" :value="item.barcodeString" size="300rpx"></l-qrcode> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">批次</view> |
|||
<view class="value">{{ item.batch }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">物料类型</view> |
|||
<view class="value">{{ item.itemType }}</view> |
|||
</view> |
|||
<view class="left-item" v-if="!(item.productionLineCode && item.productionLineCode.length > 0)"> |
|||
<view class="label">供应商</view> |
|||
<view class="value">{{ item.supplierCode }}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">打印时间</view> |
|||
<view class="value">{{ item.printTimes }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px" v-show="isLoadFinish"> |
|||
<button @click="printImage" style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, reactive, nextTick, createApp, watch } from 'vue' |
|||
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app' |
|||
import { pathToBase64 } from '../../api/img-to-base64.js' |
|||
// 打印页面的模板 |
|||
const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件,这里我重新命名了文件名 |
|||
// #ifdef APP |
|||
const testModule = uni.requireNativePlugin('TestModule') |
|||
// #endif |
|||
<script> |
|||
// 打印页面的模板 |
|||
import { pathToBase64 } from '../../api/img-to-base64.js' |
|||
|
|||
const timer = ref(null) |
|||
const originData = ref([]) |
|||
const data = ref([]) |
|||
const newHtmlContent = ref('') // 打印传入的html |
|||
const isLoadFinish = ref(false) |
|||
const qrcodeRef = ref() |
|||
const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件,这里我重新命名了文件名 |
|||
// #ifdef APP |
|||
const testModule = uni.requireNativePlugin('TestModule') |
|||
// #endif |
|||
|
|||
const getListData = () => { |
|||
nextTick(async () => { |
|||
// 获取二维码图片临时路径 |
|||
const el = _this.$refs['qrcodeRef'] |
|||
let str = '' |
|||
// #ifdef APP |
|||
el.forEach(async (item, index) => { |
|||
await item.canvasToTempFilePath({ |
|||
success: async (res) => { |
|||
// 将临时路径转换成base64 |
|||
await pathToBase64(res.tempFilePath).then(base64 => { |
|||
_this.data[index].barcodeBase64 = base64 |
|||
if (index == el.length - 1) { |
|||
_this.isLoadFinish = true |
|||
uni.hideLoading(); |
|||
export default { |
|||
name: 'point', |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
originData: [], |
|||
data: [], |
|||
newHtmlContent: '', // 打印传入的html |
|||
isLoadFinish: false, |
|||
picIndex: 0, |
|||
picUrl: [] |
|||
} |
|||
}, |
|||
|
|||
}else { |
|||
console.log(index); |
|||
} |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
fail(err) { |
|||
console.log('err:::', err) |
|||
} |
|||
}) |
|||
methods: { |
|||
success(img) { |
|||
this.picUrl.push(img) |
|||
this.picIndex++ |
|||
if (this.picIndex == this.data.length) { |
|||
this.isLoadFinish = true |
|||
uni.hideLoading() |
|||
} |
|||
}, |
|||
setHtmlData() { |
|||
let str = '' |
|||
this.readFile(htmlFileUrl, (htmlContent) => { |
|||
this.newHtmlContent = htmlContent |
|||
this.data.forEach((item) => { |
|||
str += `<div class="box" style="page-break-before:always;"><br /> |
|||
<div class="left"> |
|||
<div class="left-item"> |
|||
<div class="label">物品代码</div> |
|||
<div class="value bold-font" id="name1">${item.itemCode}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">物品名称</div> |
|||
<div class="value" id="name2">${item.itemName}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">包装名称</div> |
|||
<div class="value">${item.packName}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">包装号</div> |
|||
<div class="value">${item.packageCode}</div> |
|||
</div>` |
|||
if (item.productionLineCode && item.productionLineCode.length > 0) { |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">生产线</div> |
|||
<div class="value">${item.productionLineCode}</div> |
|||
</div> |
|||
` |
|||
} else { |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">父包装号</div> |
|||
<div class="value">${item.parentNumber}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">ASN</div> |
|||
<div class="value">${item.asnNumber}</div> |
|||
</div> |
|||
` |
|||
} |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">数量</div> |
|||
<div class="value bold-font">${item.qty}</div> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="image"> |
|||
<img id='image1' src="${item.barcodeBase64}" alt="" /> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">批次</div> |
|||
<div class="value">${item.batch}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">物料类型</div> |
|||
<div class="value">${item.itemType}</div> |
|||
</div>` |
|||
if (!(item.productionLineCode && item.productionLineCode.length > 0)) { |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">供应商</div> |
|||
<div class="value">${item.supplierCode}</div> |
|||
</div> |
|||
` |
|||
} |
|||
str += ` |
|||
|
|||
<div class="left-item"> |
|||
<div class="label">打印时间</div> |
|||
<div class="value">${item.printTimes}</div> |
|||
</div> |
|||
</div> |
|||
</div>` |
|||
}) |
|||
this.newHtmlContent = this.newHtmlContent.replace('mainBody', str) // 替换物品代码 |
|||
}) |
|||
}, |
|||
|
|||
}) |
|||
// #endif |
|||
generateBase64(index) { |
|||
// 完成,调用打印 |
|||
if (index == this.picUrl.length) { |
|||
this.setHtmlData() |
|||
const clearInt = setInterval(() => { |
|||
if (!this.newHtmlContent.mainBody) { |
|||
// #ifdef APP |
|||
testModule.doHTMLPrint(this.newHtmlContent) |
|||
// #endif |
|||
clearInterval(clearInt) |
|||
uni.hideLoading() |
|||
} |
|||
}, 1000) |
|||
} else { |
|||
const url = this.picUrl[index] |
|||
// #ifdef APP |
|||
plus.io.resolveLocalFileSystemURL( |
|||
url, |
|||
(entry) => { |
|||
// 可通过entry对象操作test.html文件 |
|||
entry.file((file) => { |
|||
const fileReader = new plus.io.FileReader() |
|||
fileReader.onloadend = (evt) => { |
|||
console.log(`文件路径${evt.target.result}`) |
|||
this.data[index].barcodeBase64 = evt.target.result |
|||
this.generateBase64(index + 1) |
|||
} |
|||
fileReader.readAsDataURL(file) |
|||
}) |
|||
}, |
|||
(e) => { |
|||
console.log(`失败${e}`) |
|||
} |
|||
) |
|||
// #endif |
|||
} |
|||
}, |
|||
printImage() { |
|||
uni.showLoading({ |
|||
title: '加载中', |
|||
mask: true |
|||
}) |
|||
this.generateBase64(0) |
|||
}, |
|||
|
|||
}) |
|||
} |
|||
// #ifdef APP |
|||
// 打印 |
|||
const printImage = () => { |
|||
testModule.doHTMLPrint(newHtmlContent.value) |
|||
} |
|||
// 读取html文件 |
|||
// #ifdef APP |
|||
// 读取html文件 |
|||
readFile(path, callback) { |
|||
plus.io.resolveLocalFileSystemURL( |
|||
path, |
|||
function (entry) { |
|||
entry.file( |
|||
function (file) { |
|||
const reader = new plus.io.FileReader() |
|||
reader.onloadend = function (e) { |
|||
callback(e.target.result) |
|||
} |
|||
reader.readAsText(file) |
|||
}, |
|||
function (e) { |
|||
console.log(`读取文件失败:${e.message}`) |
|||
} |
|||
) |
|||
}, |
|||
function (e) { |
|||
console.log(`获取图片资源失败:${e.message}`) |
|||
} |
|||
) |
|||
} |
|||
// #endif |
|||
}, |
|||
|
|||
const readFile = (path, callback) => { |
|||
plus.io.resolveLocalFileSystemURL( |
|||
path, |
|||
function (entry) { |
|||
entry.file( |
|||
function (file) { |
|||
const reader = new plus.io.FileReader() |
|||
reader.onloadend = function (e) { |
|||
callback(e.target.result) |
|||
} |
|||
reader.readAsText(file) |
|||
}, |
|||
function (e) { |
|||
console.log(`读取文件失败:${e.message}`) |
|||
} |
|||
) |
|||
}, |
|||
function (e) { |
|||
console.log(`获取图片资源失败:${e.message}`) |
|||
} |
|||
) |
|||
} |
|||
// #endif |
|||
watch( |
|||
() => isLoadFinish.value, |
|||
(newVal, oldVal) => { |
|||
if (newVal == true) { |
|||
// 读取html文件将文件中的内容图换成当前页面的数据 |
|||
let str = '' |
|||
readFile(htmlFileUrl, (htmlContent) => { |
|||
newHtmlContent.value = htmlContent |
|||
data.value.forEach((item) => { |
|||
str += ` |
|||
<div class="box" style="page-break-before:always;"><br /> |
|||
<div class="left"> |
|||
<div class="left-item"> |
|||
<div class="label">物品代码</div> |
|||
<div class="value bold-font" id="name1">${item.itemCode}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">物品名称</div> |
|||
<div class="value" id="name2">${item.itemName}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">包装名称</div> |
|||
<div class="value">${item.packName}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">包装号</div> |
|||
<div class="value">${item.packageCode}</div> |
|||
</div> |
|||
` |
|||
if (item.productionLineCode && item.productionLineCode.length > 0) { |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">生产线</div> |
|||
<div class="value">${item.productionLineCode}</div> |
|||
</div> |
|||
` |
|||
} else { |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">父包装号</div> |
|||
<div class="value">${item.parentNumber}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">ASN</div> |
|||
<div class="value">${item.asnNumber}</div> |
|||
</div> |
|||
` |
|||
} |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">数量</div> |
|||
<div class="value bold-font">${item.qty}</div> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="image"> |
|||
<img id='image1' src="${item.barcodeBase64}" alt="" /> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">批次</div> |
|||
<div class="value">${item.batch}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">物料类型</div> |
|||
<div class="value">${item.itemType}</div> |
|||
</div> |
|||
` |
|||
if (!(item.productionLineCode && item.productionLineCode.length > 0)) { |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">供应商</div> |
|||
<div class="value">${item.supplierCode}</div> |
|||
</div> |
|||
` |
|||
} |
|||
str += ` |
|||
<div class="left-item"> |
|||
<div class="label">打印时间</div> |
|||
<div class="value">${item.printTimes}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
` |
|||
}) |
|||
newHtmlContent.value = newHtmlContent.value.replace('mainBody', str) // 替换物品代码 |
|||
}) |
|||
} |
|||
} |
|||
) |
|||
onLoad(option) { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}); |
|||
if (option.points) { |
|||
originData.value = JSON.parse(option.points); |
|||
} |
|||
} |
|||
onUnload(() => { |
|||
if (timer.value) { |
|||
clearTimeout(timer.value) |
|||
timer.value = null |
|||
} |
|||
}) |
|||
onShow(() => { |
|||
timer.value = setTimeout(() => { |
|||
if (timer.value) { |
|||
clearTimeout(timer.value) |
|||
timer.value = null |
|||
} |
|||
data.value = originData.value |
|||
getListData() |
|||
}, 1000) |
|||
}) |
|||
onLoad(option) { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}) |
|||
if (option.points) { |
|||
this.originData = JSON.parse(option.points) |
|||
} |
|||
this.data = this.originData |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.box { |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
} |
|||
.box { |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
.left { |
|||
border-top: 1px solid #b1b1b1; |
|||
border-left: 1px solid #b1b1b1; |
|||
flex: 1; |
|||
} |
|||
.left { |
|||
border-top: 1px solid #b1b1b1; |
|||
border-left: 1px solid #b1b1b1; |
|||
flex: 1; |
|||
} |
|||
|
|||
.left-item { |
|||
display: flex; |
|||
} |
|||
.left-item { |
|||
display: flex; |
|||
} |
|||
|
|||
.bold-font { |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
} |
|||
.label { |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
width: 140rpx; |
|||
padding: 0px 10rpx; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
} |
|||
|
|||
.label { |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
width: 140rpx; |
|||
padding: 0px 10rpx; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
} |
|||
.bold-font { |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.value { |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
padding: 0px 5px; |
|||
height: 100rpx; |
|||
flex: 1; |
|||
width: 0px; |
|||
display: flex; |
|||
align-items: center; |
|||
word-break: break-all; |
|||
} |
|||
.value { |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
padding: 0px 5px; |
|||
height: 100rpx; |
|||
flex: 1; |
|||
width: 0px; |
|||
display: flex; |
|||
align-items: center; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.right { |
|||
width: 300rpx; |
|||
} |
|||
.right { |
|||
width: 300rpx; |
|||
} |
|||
|
|||
.image { |
|||
width: 100%; |
|||
height: 301rpx; |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-top: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
} |
|||
.image { |
|||
width: 100%; |
|||
height: 301rpx; |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-top: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
} |
|||
|
|||
.image img { |
|||
width: calc(100% - 4px); |
|||
height: calc(100% - 4px); |
|||
margin: 4rpx; |
|||
} |
|||
</style> |
|||
.image img { |
|||
width: calc(100% - 4px); |
|||
height: calc(100% - 4px); |
|||
margin: 4rpx; |
|||
} |
|||
</style> |
|||
|
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<view class="" style="width: 100%; background-color: #fff; border-radius: 10rpx"> |
|||
<view class="uni-flex uni-row space-between" style="align-items: center"> |
|||
<view> |
|||
<view class="uni-flex uni-row" style="align-items: center"> |
|||
<text style="font-size: 30rpx; margin-left: 15rpx">物料</text> |
|||
<item :dataContent="dataContent" style="padding-top: 10rpx; margin-left: 20rpx"></item> |
|||
</view> |
|||
|
|||
<pack v-if="dataContent.parentNumber" title="父包装" :packingCode="dataContent.parentNumber"></pack> |
|||
<pack v-if="dataContent.packingNumber" :packingCode="dataContent.packingNumber"></pack> |
|||
<batch v-if="isShowBatch && dataContent.batch" :batch="dataContent.batch"></batch> |
|||
<location :locationCode="dataContent.locationCode"></location> |
|||
<view class="" v-if="dataContent.jobNumber" style="font-size: 30rpx; padding-left: 10rpx; padding-bottom: 10rpx"> |
|||
<text style="color: coral">任务号</text> |
|||
{{ dataContent.jobNumber }} |
|||
</view> |
|||
<view class="" v-if="dataContent.businessType" style="font-size: 30rpx; padding-left: 10rpx; padding-bottom: 10rpx"> |
|||
<text style="color: green">业务类型</text> |
|||
{{ businessTypeDesc(dataContent.businessType) }} |
|||
</view> |
|||
</view> |
|||
<view class="uni-flex" style="flex-direction: column"> |
|||
<view class="uni-flex uni-row center"> |
|||
<qty :dataContent="dataContent" :isShowStdPack="isShowStdPack" :isShowStatus="true"></qty> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import itemQty from '@/mycomponents/item/itemQty.vue' |
|||
import item from '@/mycomponents/item/item.vue' |
|||
import pack from '@/mycomponents/balance/pack.vue' |
|||
import batch from '@/mycomponents/balance/batch.vue' |
|||
import qty from '@/mycomponents/qty/qty.vue' |
|||
import status from '@/mycomponents/status/status.vue' |
|||
import location from '@/mycomponents/balance/location.vue' |
|||
import { getBusinessTypeName } from '@/common/directory.js' |
|||
|
|||
const props = defineProps({ |
|||
dataContent: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
isShowPack: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
isShowBatch: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
isShowLocation: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
isShowStdPack: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}) |
|||
|
|||
const businessTypeDesc = (type) => { |
|||
return getBusinessTypeName(type) |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
@ -0,0 +1,438 @@ |
|||
<!-- 基于z-paging封装个性化分页组件演示(vue) --> |
|||
<template> |
|||
<view class="uni-flex" style="flex-direction: column"> |
|||
<itemFilter ref="filter" @onConfirmClick="confirm"> </itemFilter> |
|||
<view class="top" style=""> |
|||
<com-blank-view @goScan="openScanPopup" v-if="packingNumber == ''"></com-blank-view> |
|||
<z-tabs v-if="packingNumber" :list="tabList" @change="tabChange" /> |
|||
</view> |
|||
|
|||
<view style="padding-top: 100rpx; width: 100%"> |
|||
<view v-if="totalCount > 0" style="margin: 10rpx; font-size: 35rpx; font-weight: bold">总数 : {{ totalCount }} </view> |
|||
<view v-for="(item, index) in dataList" style="width: 100%" :key="index"> |
|||
<view class="uni-flex uni-row" style="align-items: center; background-color: #fff; border-radius: 10rpx; margin: 10rpx"> |
|||
<view class="" style="font-size: 35rpx"> ({{ index + 1 }}) </view> |
|||
<comPackDetailCard :isShowPack="false" :dataContent="item" style="margin: 10rpx"> </comPackDetailCard> |
|||
</view> |
|||
</view> |
|||
<uni-load-more :status="loadingType" v-if="dataList.length > 0" /> |
|||
</view> |
|||
|
|||
<win-scan-button @goScan="openScanPopup" v-if="packingNumber != ''"></win-scan-button> |
|||
|
|||
<win-scan-pack ref="scanPopup" @getResult="getScanResult" headerType="HPQ,HMQ"></win-scan-pack> |
|||
<com-message ref="comMessageRef" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, getCurrentInstance, nextTick, onMounted, watch } from 'vue' |
|||
import { onLoad, onShow, onNavigationBarButtonTap, onReady, onBackPress, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app' |
|||
import { getExpectoutByItemcode, getExpectinByItemcode, getBalanceByItemCode, getBasicItemByCode, getBalanceSummary } from '@/api/request2.js' |
|||
import { goHome } from '@/common/basic.js' |
|||
import itemInfo from '@/mycomponents/item/itemInfo.vue' |
|||
import comBlankView from '@/mycomponents/common/comBlankView.vue' |
|||
import winScanPack from '@/mycomponents/scan/winScanPack.vue' |
|||
import winScanButton from '@/mycomponents/scan/winScanButton.vue' |
|||
import comPackDetailCard from '@/pages/query/coms/comPackDetailCard.vue' |
|||
import itemFilter from '@/mycomponents/item/itemFilter.vue' |
|||
import comEmptyView from '@/mycomponents/common/comEmptyView.vue' |
|||
|
|||
const dataList = ref([]) |
|||
const tabList = ref(['明细', '预计出']) |
|||
const tabIndex = ref(0) |
|||
const packingNumber = ref('') |
|||
const itemDetail = ref(undefined) |
|||
const balances = ref([]) |
|||
const loadingType = ref('nomore') |
|||
const totalCount = ref(0) |
|||
const locationCode = ref('') |
|||
const inventoryStatus = ref('') |
|||
const pageSize = ref(10) |
|||
const filter = ref() |
|||
const paging = ref() |
|||
const scanPopup = ref() |
|||
const comMessageRef = ref() |
|||
|
|||
// 返回首页 |
|||
onNavigationBarButtonTap((e) => { |
|||
if (e.index === 0) { |
|||
goHome() |
|||
} else if (e.index == 1) { |
|||
filter.value.openFilter() |
|||
} |
|||
}) |
|||
|
|||
onReachBottom(() => { |
|||
console.log('底部') |
|||
// 避免多次触发 |
|||
if (loadingType.value == 'loading' || loadingType.value == 'nomore') { |
|||
return |
|||
} |
|||
getContentByTab(tabIndex.value, pageNo.value, pageSize.value, 'more') |
|||
}) |
|||
onLoad((option) => { |
|||
uni.setNavigationBarTitle({ |
|||
title: option.title |
|||
}) |
|||
}) |
|||
mounted(() => { |
|||
openScanPopup() |
|||
}) |
|||
onPullDownRefresh(() => { |
|||
getContentByTab(tabIndex.value, pageNo.value, pageSize.value, 'refresh') |
|||
}) |
|||
const openScanPopup = () => { |
|||
scanPopup.value.openScanPopup() |
|||
} |
|||
const closeScanPopup = () => { |
|||
scanPopup.value.closeScanPopup() |
|||
} |
|||
const getScanResult = (result) => { |
|||
if (!result.label.packingNumber) { |
|||
showMessage('包装号不能为空') |
|||
return |
|||
} |
|||
packingNumber.value = result.label.packingNumber |
|||
tabChange(0) |
|||
} |
|||
const getItemInfo = (code) => { |
|||
uni.showLoading({ |
|||
title: '正在查询物料信息...', |
|||
mask: true |
|||
}) |
|||
|
|||
getBasicItemByCode(code) |
|||
.then((res) => { |
|||
uni.hideLoading() |
|||
if (res.data.list.length > 0) { |
|||
closeScanPopup() |
|||
packingNumber.value = res.data.list[0].code |
|||
itemDetail.value = res.data.list[0] |
|||
tabChange(0) |
|||
} else { |
|||
showMessage(`未查找到物料【${code}】`) |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
uni.hideLoading() |
|||
packingNumber.value = '' |
|||
showMessage(error) |
|||
}) |
|||
} |
|||
|
|||
// 汇总 |
|||
|
|||
const getSummary = (pageNo, pageSize, type) => { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}) |
|||
loadingType.value = 'loading' |
|||
if (type === 'refresh') { |
|||
pageNo.value = 1 |
|||
dataList.value = [] |
|||
} |
|||
|
|||
const filters = [] |
|||
filters.push({ |
|||
column: 'packingNumber', |
|||
action: '==', |
|||
value: packingNumber.value |
|||
}) |
|||
if (locationCode.value) { |
|||
filters.push({ |
|||
column: 'locationCode', |
|||
action: '==', |
|||
value: locationCode.value |
|||
}) |
|||
} |
|||
|
|||
if (inventoryStatus.value) { |
|||
filters.push({ |
|||
column: 'inventoryStatus', |
|||
action: 'in', |
|||
value: inventoryStatus.value |
|||
}) |
|||
} |
|||
|
|||
const params = { |
|||
filters, |
|||
pageNo: pageNo.value, |
|||
pageSize |
|||
} |
|||
getBalanceByItemCode(params) |
|||
.then((res) => { |
|||
uni.hideLoading() |
|||
|
|||
if (type === 'refresh') { |
|||
uni.stopPullDownRefresh() |
|||
} |
|||
const { list } = res.data |
|||
totalCount.value = res.data.total |
|||
loadingType.value = 'loadmore' |
|||
if (list == null || list.length == 0) { |
|||
loadingType.value = 'nomore' |
|||
return |
|||
} |
|||
|
|||
dataList.value = type === 'refresh' ? list : dataList.value.concat(list) |
|||
pageNo.value++ |
|||
}) |
|||
.catch((error) => { |
|||
paging.value.complete(false) |
|||
uni.hideLoading() |
|||
showMessage(error) |
|||
}) |
|||
} |
|||
// 明细 |
|||
|
|||
const getDetailList = (pageNo, pageSize, type) => { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}) |
|||
loadingType.value = 'loading' |
|||
if (type === 'refresh') { |
|||
pageNo.value = 1 |
|||
dataList.value = [] |
|||
} |
|||
|
|||
const filters = [] |
|||
filters.push({ |
|||
column: 'packingNumber', |
|||
action: '==', |
|||
value: packingNumber.value |
|||
}) |
|||
if (locationCode.value) { |
|||
filters.push({ |
|||
column: 'locationCode', |
|||
action: '==', |
|||
value: locationCode.value |
|||
}) |
|||
} |
|||
|
|||
if (inventoryStatus.value) { |
|||
filters.push({ |
|||
column: 'inventoryStatus', |
|||
action: 'in', |
|||
value: inventoryStatus.value |
|||
}) |
|||
} |
|||
|
|||
const params = { |
|||
filters, |
|||
pageNo: pageNo.value, |
|||
pageSize |
|||
} |
|||
getBalanceByItemCode(params) |
|||
.then((res) => { |
|||
uni.hideLoading() |
|||
|
|||
if (type === 'refresh') { |
|||
uni.stopPullDownRefresh() |
|||
} |
|||
const { list } = res.data |
|||
totalCount.value = res.data.total |
|||
loadingType.value = 'loadmore' |
|||
if (list == null || list.length == 0) { |
|||
loadingType.value = 'nomore' |
|||
return |
|||
} |
|||
dataList.value = type === 'refresh' ? list : dataList.value.concat(list) |
|||
pageNo.value++ |
|||
}) |
|||
.catch((error) => { |
|||
uni.hideLoading() |
|||
showMessage(error) |
|||
}) |
|||
} |
|||
|
|||
const getContentByTab = (index, pageNo, pageSize, type) => { |
|||
if (index === 0) getDetailList(pageNo, pageSize, type) |
|||
else if (index === 1) getExpectout(pageNo, pageSize, type) |
|||
else if (index === 2) { |
|||
// this.getExpectout(pageNo, pageSize, type); |
|||
} |
|||
} |
|||
// 预计入 |
|||
|
|||
const getExpectin = (pageNo, pageSize, type) => { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}) |
|||
|
|||
loadingType.value = 'loading' |
|||
if (type === 'refresh') { |
|||
pageNo.value = 1 |
|||
dataList.value = [] |
|||
} |
|||
|
|||
const filters = [] |
|||
filters.push({ |
|||
column: 'packingNumber', |
|||
action: '==', |
|||
value: packingNumber.value |
|||
}) |
|||
if (locationCode.value) { |
|||
filters.push({ |
|||
column: 'locationCode', |
|||
action: '==', |
|||
value: locationCode.value |
|||
}) |
|||
} |
|||
|
|||
if (inventoryStatus.value) { |
|||
filters.push({ |
|||
column: 'inventoryStatus', |
|||
action: 'in', |
|||
value: inventoryStatus.value |
|||
}) |
|||
} |
|||
|
|||
const params = { |
|||
filters, |
|||
pageNo: pageNo.value, |
|||
pageSize |
|||
} |
|||
getExpectinByItemcode(params) |
|||
.then((res) => { |
|||
uni.hideLoading() |
|||
|
|||
if (type === 'refresh') { |
|||
uni.stopPullDownRefresh() |
|||
} |
|||
const { list } = res.data |
|||
totalCount.value = res.data.total |
|||
loadingType.value = 'loadmore' |
|||
if (list == null || list.length == 0) { |
|||
loadingType.value = 'nomore' |
|||
return |
|||
} |
|||
dataList.value = type === 'refresh' ? list : dataList.value.concat(list) |
|||
pageNo.value++ |
|||
}) |
|||
.catch((error) => { |
|||
uni.hideLoading() |
|||
showMessage(error) |
|||
}) |
|||
} |
|||
|
|||
// 预计出 |
|||
|
|||
const getExpectout = (pageNo, pageSize, type) => { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}) |
|||
|
|||
loadingType.value = 'loading' |
|||
if (type === 'refresh') { |
|||
pageNo.value = 1 |
|||
dataList.value = [] |
|||
} |
|||
|
|||
const filters = [] |
|||
filters.push({ |
|||
column: 'packingNumber', |
|||
action: '==', |
|||
value: packingNumber.value |
|||
}) |
|||
if (locationCode.value) { |
|||
filters.push({ |
|||
column: 'locationCode', |
|||
action: '==', |
|||
value: locationCode.value |
|||
}) |
|||
} |
|||
|
|||
if (inventoryStatus.value) { |
|||
filters.push({ |
|||
column: 'inventoryStatus', |
|||
action: 'in', |
|||
value: inventoryStatus.value |
|||
}) |
|||
} |
|||
|
|||
const params = { |
|||
filters, |
|||
pageNo: pageNo.value, |
|||
pageSize |
|||
} |
|||
getExpectoutByItemcode(params) |
|||
.then((res) => { |
|||
uni.hideLoading() |
|||
if (type === 'refresh') { |
|||
uni.stopPullDownRefresh() |
|||
} |
|||
const { list } = res.data |
|||
totalCount.value = res.data.total |
|||
loadingType.value = 'loadmore' |
|||
if (list == null || list.length == 0) { |
|||
loadingType.value = 'nomore' |
|||
return |
|||
} |
|||
dataList.value = type === 'refresh' ? list : dataList.value.concat(list) |
|||
pageNo.value++ |
|||
}) |
|||
.catch((error) => { |
|||
uni.hideLoading() |
|||
showMessage(error) |
|||
}) |
|||
} |
|||
|
|||
const showMessage = (message) => { |
|||
comMessageRef.value.showErrorMessage(message, (res) => { |
|||
if (res) { |
|||
afterCloseMessage() |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const afterCloseMessage = () => { |
|||
if (scanPopup.value != undefined) { |
|||
scanPopup.value.getfocus() |
|||
} |
|||
} |
|||
|
|||
const tabChange = (index) => { |
|||
tabIndex.value = index |
|||
getContentByTab(index, pageNo.value, pageSize.value, 'refresh') |
|||
} |
|||
|
|||
const confirm = (locationCode, status) => { |
|||
if (packingNumber.value) { |
|||
locationCode.value = locationCode |
|||
if (status.length > 0) { |
|||
const arrayItems = status.join(',') |
|||
inventoryStatus.value = arrayItems |
|||
} else { |
|||
inventoryStatus.value = '' |
|||
} |
|||
tabChange(tabIndex.value) |
|||
} else { |
|||
showMessage('请先扫描物料') |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
page { |
|||
height: 100%; |
|||
} |
|||
|
|||
.top { |
|||
width: 100%; |
|||
position: fixed; |
|||
/* #ifdef APP */ |
|||
top: 0rpx; |
|||
/* #endif */ |
|||
|
|||
/* #ifdef H5 */ |
|||
top: 80rpx; |
|||
/* #endif */ |
|||
|
|||
right: 0; |
|||
} |
|||
</style> |
Loading…
Reference in new issue