sfms3.0
/
sfms3.0-uniapp
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

page/point 文件迁移 8/8-10/25

hella_vue3
王志国 3 weeks ago
parent
cb34c0e8a0
commit
1b4c4f21d5
1 changed files with 152 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 286
      src/pages/point/index.vue

286
src/pages/point/index.vue
View File

@ -1,11 +1,11 @@
<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 bold-label">物品代码</view>
<view class="value bold-font" id="name1">{{ item.itemCode }}</view> <view class="value bold-font font-20" id="name1">{{ item.itemCode }}</view>
</view> </view>
<view class="left-item"> <view class="left-item">
<view class="label">物品名称</view> <view class="label">物品名称</view>
@ -19,26 +19,32 @@
<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 bold-label">父包装号</view>
<view class="value">{{ item.parentNumber }}</view> <view class="value bold-font font-20">{{ 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 bold-label">数量</view>
<view class="value bold-font">{{ item.qty }}</view> <view class="value bold-font font-20">{{ item.qty }}</view>
</view> </view>
<view class="left-item" v-if="item.fromLocationCode">
<view class="label ">来源库位</view>
<view class="value ">{{ item.fromLocationCode }}</view>
</view>
</view> </view>
<view class="right"> <view class="right">
<view class="image"> <view class="image">
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success" :value="item.barcodeString" size="300rpx"></l-qrcode> <l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :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>
@ -48,7 +54,7 @@
<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>
@ -56,21 +62,29 @@
<view class="label">打印时间</view> <view class="label">打印时间</view>
<view class="value">{{ item.printTimes }}</view> <view class="value">{{ item.printTimes }}</view>
</view> </view>
<view class="left-item" v-if="item.fromLocationCode">
<view class="label bold-label"></view>
<view class="value bold-font font-20"></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" style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button> <button @click="printImage"
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印
</button>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
// 打印页面的模板 // 打印页面的模板
import { pathToBase64 } from '../../api/img-to-base64.js' const htmlFileUrl = '/hybrid/html/point.html';
import {
const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件，这里我重新命名了文件名 pathToBase64
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
// #ifdef APP // #ifdef APP
const testModule = uni.requireNativePlugin('TestModule') var testModule = uni.requireNativePlugin("TestModule")
// #endif // #endif
export default { export default {
@ -80,7 +94,7 @@ export default {
timer: null, timer: null,
originData: [], originData: [],
data: [], data: [],
newHtmlContent: '', // 打印传入的html newHtmlContent: '', //打印传入的html
isLoadFinish: false, isLoadFinish: false,
picIndex: 0, picIndex: 0,
picUrl: [] picUrl: []
@ -88,79 +102,99 @@ export default {
}, },
methods: { methods: {
success(img) { success(img, item) {
this.picUrl.push(img) item.barcodeBase641 = img
this.picIndex++ uni.hideLoading()
if (this.picIndex == this.data.length) { this.isLoadFinish = true
this.isLoadFinish = true // #ifdef APP
uni.hideLoading() plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => {
} // 可通过entry对象操作test.html文件
entry.file((file) => {
let fileReader = new plus.io.FileReader();
fileReader.onloadend = (evt) => {
console.log("文件路径" + evt.target.result)
item.barcodeBase64 = evt.target.result
}
fileReader.readAsDataURL(file);
});
}, (e) => {
console.log("失败" + e)
});
// #endif
}, },
setHtmlData() { setHtmlData() {
let str = '' let str = ''
this.readFile(htmlFileUrl, (htmlContent) => { this.readFile(htmlFileUrl, (htmlContent) => {
this.newHtmlContent = htmlContent this.newHtmlContent = htmlContent
this.data.forEach((item) => { this.data.forEach(item => {
str += `<div class="box" style="page-break-before:always;"><br /> str += `<div class="box" style="page-break-before:always;"><br />
<div class="left"> <div class="left">
<div class="left-item"> <div class="left-item">
<div class="label">物品代码</div> <div class="label bold-label">物品代码</div>
<div class="value bold-font" id="name1">${item.itemCode}</div> <div class="value bold-font font-30" id="name1">${item.itemCode}</div>
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="label">物品名称</div> <div class="label">物品名称</div>
<div class="value" id="name2">${item.itemName}</div> <div class="value font-30" id="name2">${item.itemName}</div>
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="label">包装名称</div> <div class="label">包装名称</div>
<div class="value">${item.packName}</div> <div class="value font-20">${item.packName}</div>
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="label">包装号</div> <div class="label">包装号</div>
<div class="value">${item.packageCode}</div> <div class="value font-20">${item.packageCode}</div>
</div>` </div>`
if (item.productionLineCode && item.productionLineCode.length > 0) { if (item.productionLineCode && item.productionLineCode.length > 0) {
str += ` str += `
<div class="left-item"> <div class="left-item">
<div class="label">生产线</div> <div class="label">生产线</div>
<div class="value">${item.productionLineCode}</div> <div class="value font-20">${item.productionLineCode}</div>
</div> </div>
` `
} else { } else {
str += ` str += `
<div class="left-item"> <div class="left-item">
<div class="label">父包装号</div> <div class="label bold-label">父包装号</div>
<div class="value">${item.parentNumber}</div> <div class="value bold-font font-20">${item.parentNumber}</div>
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="label">ASN</div> <div class="label">ASN</div>
<div class="value">${item.asnNumber}</div> <div class="value font-20">${item.asnNumber}</div>
</div> </div>
` `
} }
str += ` str += `
<div class="left-item"> <div class="left-item">
<div class="label">数量</div> <div class="label">数量</div>
<div class="value bold-font">${item.qty}</div> <div class="value bold-font font-30">${item.qty}</div>
</div>`
if (item.fromLocationCode && item.fromLocationCode.length > 0) {
str += `
<div class="left-item">
<div class="label">来源库位</div>
<div class="value font-20">${item.fromLocationCode}</div>
</div> </div>
</div> </div>`
}
str += `
<div class="right"> <div class="right">
<div class="image"> <div class="image">
<img id='image1' src="${item.barcodeBase64}" alt="" /> <img id='image1' src="${item.barcodeBase64}" alt="" />
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="label">批次</div> <div class="label">批次</div>
<div class="value">${item.batch}</div> <div class="value font-20">${item.batch}</div>
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="label">物料类型</div> <div class="label">物料类型</div>
<div class="value">${item.itemType}</div> <div class="value font-20">${item.itemType}</div>
</div>` </div>`
if (!(item.productionLineCode && item.productionLineCode.length > 0)) { if (!(item.productionLineCode && item.productionLineCode.length > 0)) {
str += ` str += `
<div class="left-item"> <div class="left-item">
<div class="label">供应商</div> <div class="label">供应商</div>
<div class="value">${item.supplierCode}</div> <div class="value font-20">${item.supplierCode}</div>
</div> </div>
` `
} }
@ -168,85 +202,59 @@ export default {
<div class="left-item"> <div class="left-item">
<div class="label">打印时间</div> <div class="label">打印时间</div>
<div class="value">${item.printTimes}</div> <div class="value font-20">${item.printTimes}</div>
</div>
`
if (item.fromLocationCode && item.fromLocationCode.length > 0) {
str += `
<div class="left-item">
<div class="label"></div>
<div class="value"></div>
</div> </div>
</div> </div>
</div>` </div>`
}
}) })
this.newHtmlContent = this.newHtmlContent.replace('mainBody', str) // 替换物品代码
})
},
generateBase64(index) { console.log('str', str)
// 完成，调用打印 this.newHtmlContent = this.newHtmlContent.replace(
if (index == this.picUrl.length) { "mainBody", str); //替换物品代码
this.setHtmlData() });
const clearInt = setInterval(() => {
if (!this.newHtmlContent.mainBody) {
// #ifdef APP
testModule.doHTMLPrint(this.newHtmlContent)
// #endif
clearInterval(clearInt)
uni.hideLoading()
}
}, 1000)
} else {
let i = this.picUrl.length - 1 - index
var url = this.picUrl[i]
// #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}`)
let i = this.data.length - 1 - index
this.data[i].barcodeBase64 = evt.target.result
this.generateBase64(index + 1)
}
fileReader.readAsDataURL(file)
})
},
(e) => {
console.log(`失败${e}`)
}
)
// #endif
}
}, },
printImage() { printImage() {
uni.showLoading({ uni.showLoading({
title: '加载中', title: "加载中",
mask: true mask: true
}) })
this.generateBase64(0) this.setHtmlData()
let clearInt = setInterval(() => {
if (!this.newHtmlContent.mainBody) {
// #ifdef APP
testModule.doHTMLPrint(this.newHtmlContent)
// #endif
clearInterval(clearInt)
uni.hideLoading()
}
}, 1000)
}, },
// #ifdef APP // #ifdef APP
// 读取html文件 // 读取html文件
readFile(path, callback) { readFile(path, callback) {
plus.io.resolveLocalFileSystemURL( plus.io.resolveLocalFileSystemURL(path, function (entry) {
path, entry.file(function (file) {
function (entry) { var reader = new plus.io.FileReader();
entry.file( reader.onloadend = function (e) {
function (file) { callback(e.target.result);
const reader = new plus.io.FileReader() };
reader.onloadend = function (e) { reader.readAsText(file);
callback(e.target.result) }, function (e) {
} console.log("读取文件失败：" + e.message);
reader.readAsText(file) });
}, }, function (e) {
function (e) { console.log("获取图片资源失败：" + e.message);
console.log(`读取文件失败：${e.message}`) });
}
)
},
function (e) {
console.log(`获取图片资源失败：${e.message}`)
}
)
} }
// #endif // #endif
}, },
@ -255,35 +263,32 @@ export default {
uni.showLoading({ uni.showLoading({
title: '加载中...', title: '加载中...',
mask: true mask: true
}) });
if (option.points) { if (option.points) {
this.originData = JSON.parse(option.points) this.originData = JSON.parse(option.points);
} }
this.data = this.originData this.data = this.originData
this.$nextTick(async () => {
// 获取二维码图片临时路径 // this.data = [
const el = this.$refs['qrcodeRef'] // {
let str = '' // "itemCode": "250.832-02",
el.forEach(async (item, index) => { // "itemName": "线束1右件ZH",
await item.canvasToTempFilePath({ // "packName": "内部周转箱",
success: async (res) => { // "packageCode": "PN20240906-0000000001",
// 将临时路径转换成base64 // "batch": "20240719",
await pathToBase64(res.tempFilePath).then(base64 => { // "parentNumber": null,
this.data[index].barcodeBase64 = base64 // "itemType": "外购件",
if (index == el.length - 1) { // "asnNumber": "ASNS20240731-0002",
this.isLoadFinish = true // "supplierCode": "49000599",
} // "qty": 90,
}).catch(err => { // "printTimes": "2024-09-06+09:29:37",
console.log(err); // "productionLineCode": null,
}) // "fromLocationCode": "C01-190-10",
}, // "barcodeString": "HPQ;V1.0;B20240719;AASNS20240731-0002;Q90.000000;I250.832-02;L;PPN20240906-0000000001;S49000599;O49000599;L12;E;UPC;",
fail(err) { // "barcodeBase64": ""
console.log('err:::', err) // }
} // ]
}) },
})
})
}
} }
</script> </script>
@ -291,6 +296,7 @@ export default {
.box { .box {
font-size: 24rpx; font-size: 24rpx;
display: flex; display: flex;
} }
.left { .left {
@ -314,7 +320,19 @@ export default {
.bold-font { .bold-font {
font-weight: bold; font-weight: bold;
font-size: 28rpx; }
.font-30 {
font-size: 30px;
}
.font-20 {
font-size: 20px;
}
.bold-label {
font-weight: bold;
/* font-size: 15px; */
} }
.value { .value {
@ -346,4 +364,4 @@ export default {
height: calc(100% - 4px); height: calc(100% - 4px);
margin: 4rpx; margin: 4rpx;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save