8 changed files with 894 additions and 366 deletions
@ -1,323 +1,324 @@ |
|||||
<template> |
<template> |
||||
<view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)"> |
<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="box" v-for="(item, index) in data" :key="index" style="margin-bottom: 20rpx"> |
||||
<view class="left"> |
<view class="left"> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">物品代码</view> |
<view class="label">物品代码</view> |
||||
<view class="value bold-font" id="name1">{{ item.itemCode }}</view> |
<view class="value bold-font" id="name1">{{ item.itemCode }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">物品名称</view> |
<view class="label">物品名称</view> |
||||
<view class="value" id="name2">{{ item.itemName }}</view> |
<view class="value" id="name2">{{ item.itemName }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">包装名称</view> |
<view class="label">包装名称</view> |
||||
<view class="value">{{item.packName}}</view> |
<view class="value">{{ item.packName }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">包装号</view> |
<view class="label">包装号</view> |
||||
<view class="value">{{ item.packageCode }}</view> |
<view class="value">{{ item.packageCode }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item" v-if="item.productionLineCode&&item.productionLineCode.length>0"> |
<view class="left-item" v-if="item.productionLineCode && item.productionLineCode.length > 0"> |
||||
<view class="label">生产线</view> |
<view class="label">生产线</view> |
||||
<view class="value">{{item.productionLineCode}}</view> |
<view class="value">{{ item.productionLineCode }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
<view class="left-item" v-if="!(item.productionLineCode && item.productionLineCode.length > 0)"> |
||||
<view class="label">父包装号</view> |
<view class="label">父包装号</view> |
||||
<view class="value">{{item.parentNumber}}</view> |
<view class="value">{{ item.parentNumber }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
<view class="left-item" v-if="!(item.productionLineCode && item.productionLineCode.length > 0)"> |
||||
<view class="label">ASN</view> |
<view class="label">ASN</view> |
||||
<view class="value">{{item.asnNumber}}</view> |
<view class="value">{{ item.asnNumber }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">数量</view> |
<view class="label">数量</view> |
||||
<view class="value bold-font">{{item.qty}}</view> |
<view class="value bold-font">{{ item.qty }}</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="right"> |
<view class="right"> |
||||
<view class="image"> |
<view class="image"> |
||||
<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode> |
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success" :value="item.barcodeString" size="300rpx"></l-qrcode> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">批次</view> |
<view class="label">批次</view> |
||||
<view class="value">{{item.batch}}</view> |
<view class="value">{{ item.batch }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">物料类型</view> |
<view class="label">物料类型</view> |
||||
<view class="value">{{item.itemType}}</view> |
<view class="value">{{ item.itemType }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
<view class="left-item" v-if="!(item.productionLineCode && item.productionLineCode.length > 0)"> |
||||
<view class="label">供应商</view> |
<view class="label">供应商</view> |
||||
<view class="value">{{item.supplierCode}}</view> |
<view class="value">{{ item.supplierCode }}</view> |
||||
</view> |
</view> |
||||
<view class="left-item"> |
<view class="left-item"> |
||||
<view class="label">打印时间</view> |
<view class="label">打印时间</view> |
||||
<view class="value">{{item.printTimes}}</view> |
<view class="value">{{ item.printTimes }}</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px" v-show="isLoadFinish"> |
<view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px" v-show="isLoadFinish"> |
||||
<button @click="printImage" |
<button @click="printImage" style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button> |
||||
style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button> |
</view> |
||||
</view> |
</view> |
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script> |
||||
import { ref, reactive, nextTick, createApp, watch } from 'vue' |
// 打印页面的模板 |
||||
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app' |
import { pathToBase64 } from '../../api/img-to-base64.js' |
||||
import { pathToBase64 } from '../../api/img-to-base64.js' |
|
||||
// 打印页面的模板 |
|
||||
const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件,这里我重新命名了文件名 |
|
||||
// #ifdef APP |
|
||||
const testModule = uni.requireNativePlugin('TestModule') |
|
||||
// #endif |
|
||||
|
|
||||
const timer = ref(null) |
const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件,这里我重新命名了文件名 |
||||
const originData = ref([]) |
// #ifdef APP |
||||
const data = ref([]) |
const testModule = uni.requireNativePlugin('TestModule') |
||||
const newHtmlContent = ref('') // 打印传入的html |
// #endif |
||||
const isLoadFinish = ref(false) |
|
||||
const qrcodeRef = ref() |
|
||||
|
|
||||
const getListData = () => { |
export default { |
||||
nextTick(async () => { |
name: 'point', |
||||
// 获取二维码图片临时路径 |
data() { |
||||
const el = _this.$refs['qrcodeRef'] |
return { |
||||
let str = '' |
timer: null, |
||||
// #ifdef APP |
originData: [], |
||||
el.forEach(async (item, index) => { |
data: [], |
||||
await item.canvasToTempFilePath({ |
newHtmlContent: '', // 打印传入的html |
||||
success: async (res) => { |
isLoadFinish: false, |
||||
// 将临时路径转换成base64 |
picIndex: 0, |
||||
await pathToBase64(res.tempFilePath).then(base64 => { |
picUrl: [] |
||||
_this.data[index].barcodeBase64 = base64 |
} |
||||
if (index == el.length - 1) { |
}, |
||||
_this.isLoadFinish = true |
|
||||
uni.hideLoading(); |
|
||||
|
|
||||
}else { |
methods: { |
||||
console.log(index); |
success(img) { |
||||
} |
this.picUrl.push(img) |
||||
}).catch(err => { |
this.picIndex++ |
||||
console.log(err); |
if (this.picIndex == this.data.length) { |
||||
}) |
this.isLoadFinish = true |
||||
}, |
uni.hideLoading() |
||||
fail(err) { |
} |
||||
console.log('err:::', err) |
}, |
||||
} |
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) // 替换物品代码 |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
}) |
generateBase64(index) { |
||||
// #endif |
// 完成,调用打印 |
||||
|
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 |
||||
} |
// 读取html文件 |
||||
// #ifdef APP |
readFile(path, callback) { |
||||
// 打印 |
plus.io.resolveLocalFileSystemURL( |
||||
const printImage = () => { |
path, |
||||
testModule.doHTMLPrint(newHtmlContent.value) |
function (entry) { |
||||
} |
entry.file( |
||||
// 读取html文件 |
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) => { |
onLoad(option) { |
||||
plus.io.resolveLocalFileSystemURL( |
uni.showLoading({ |
||||
path, |
title: '加载中...', |
||||
function (entry) { |
mask: true |
||||
entry.file( |
}) |
||||
function (file) { |
if (option.points) { |
||||
const reader = new plus.io.FileReader() |
this.originData = JSON.parse(option.points) |
||||
reader.onloadend = function (e) { |
} |
||||
callback(e.target.result) |
this.data = this.originData |
||||
} |
} |
||||
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) |
|
||||
}) |
|
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
.box { |
.box { |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
display: flex; |
display: flex; |
||||
} |
} |
||||
|
|
||||
.left { |
.left { |
||||
border-top: 1px solid #b1b1b1; |
border-top: 1px solid #b1b1b1; |
||||
border-left: 1px solid #b1b1b1; |
border-left: 1px solid #b1b1b1; |
||||
flex: 1; |
flex: 1; |
||||
} |
} |
||||
|
|
||||
.left-item { |
.left-item { |
||||
display: flex; |
display: flex; |
||||
} |
} |
||||
|
|
||||
.bold-font { |
.label { |
||||
font-weight: bold; |
border-bottom: 1px solid #b1b1b1; |
||||
font-size: 28rpx; |
border-right: 1px solid #b1b1b1; |
||||
} |
width: 140rpx; |
||||
|
padding: 0px 10rpx; |
||||
|
height: 100rpx; |
||||
|
line-height: 100rpx; |
||||
|
} |
||||
|
|
||||
.label { |
.bold-font { |
||||
border-bottom: 1px solid #b1b1b1; |
font-weight: bold; |
||||
border-right: 1px solid #b1b1b1; |
font-size: 28rpx; |
||||
width: 140rpx; |
} |
||||
padding: 0px 10rpx; |
|
||||
height: 100rpx; |
|
||||
line-height: 100rpx; |
|
||||
} |
|
||||
|
|
||||
.value { |
.value { |
||||
border-bottom: 1px solid #b1b1b1; |
border-bottom: 1px solid #b1b1b1; |
||||
border-right: 1px solid #b1b1b1; |
border-right: 1px solid #b1b1b1; |
||||
padding: 0px 5px; |
padding: 0px 5px; |
||||
height: 100rpx; |
height: 100rpx; |
||||
flex: 1; |
flex: 1; |
||||
width: 0px; |
width: 0px; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
word-break: break-all; |
word-break: break-all; |
||||
} |
} |
||||
|
|
||||
.right { |
.right { |
||||
width: 300rpx; |
width: 300rpx; |
||||
} |
} |
||||
|
|
||||
.image { |
.image { |
||||
width: 100%; |
width: 100%; |
||||
height: 301rpx; |
height: 301rpx; |
||||
border-bottom: 1px solid #b1b1b1; |
border-bottom: 1px solid #b1b1b1; |
||||
border-top: 1px solid #b1b1b1; |
border-top: 1px solid #b1b1b1; |
||||
border-right: 1px solid #b1b1b1; |
border-right: 1px solid #b1b1b1; |
||||
} |
} |
||||
|
|
||||
.image img { |
.image img { |
||||
width: calc(100% - 4px); |
width: calc(100% - 4px); |
||||
height: calc(100% - 4px); |
height: calc(100% - 4px); |
||||
margin: 4rpx; |
margin: 4rpx; |
||||
} |
} |
||||
</style> |
</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