Browse Source

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

hella_vue3
王志国 3 weeks ago
parent
commit
1b4c4f21d5
  1. 258
      src/pages/point/index.vue

258
src/pages/point/index.vue

@ -1,11 +1,11 @@
<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-item">
<view class="label">物品代码</view>
<view class="value bold-font" id="name1">{{ item.itemCode }}</view>
<view class="label bold-label">物品代码</view>
<view class="value bold-font font-20" id="name1">{{ item.itemCode }}</view>
</view>
<view class="left-item">
<view class="label">物品名称</view>
@ -24,21 +24,27 @@
<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 class="label bold-label">父包装号</view>
<view class="value bold-font font-20">{{ 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 class="label bold-label">数量</view>
<view class="value bold-font font-20">{{ item.qty }}</view>
</view>
<view class="left-item" v-if="item.fromLocationCode">
<view class="label ">来源库位</view>
<view class="value ">{{ item.fromLocationCode }}</view>
</view>
</view>
<view class="right">
<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 class="left-item">
<view class="label">批次</view>
@ -56,21 +62,29 @@
<view class="label">打印时间</view>
<view class="value">{{ item.printTimes }}</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 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 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>
//
import { pathToBase64 } from '../../api/img-to-base64.js'
const htmlFileUrl = '/hybrid/html/point.html' // js
const htmlFileUrl = '/hybrid/html/point.html';
import {
pathToBase64
} from "../../api/img-to-base64.js" //js
// #ifdef APP
const testModule = uni.requireNativePlugin('TestModule')
var testModule = uni.requireNativePlugin("TestModule")
// #endif
export default {
@ -88,79 +102,99 @@ export default {
},
methods: {
success(img) {
this.picUrl.push(img)
this.picIndex++
if (this.picIndex == this.data.length) {
this.isLoadFinish = true
success(img, item) {
item.barcodeBase641 = img
uni.hideLoading()
this.isLoadFinish = true
// #ifdef APP
plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => {
// entrytest.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() {
let str = ''
this.readFile(htmlFileUrl, (htmlContent) => {
this.newHtmlContent = htmlContent
this.data.forEach((item) => {
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 class="label bold-label">物品代码</div>
<div class="value bold-font font-30" id="name1">${item.itemCode}</div>
</div>
<div class="left-item">
<div class="label">物品名称</div>
<div class="value" id="name2">${item.itemName}</div>
<div class="value font-30" id="name2">${item.itemName}</div>
</div>
<div class="left-item">
<div class="label">包装名称</div>
<div class="value">${item.packName}</div>
<div class="value font-20">${item.packName}</div>
</div>
<div class="left-item">
<div class="label">包装号</div>
<div class="value">${item.packageCode}</div>
<div class="value font-20">${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 class="value font-20">${item.productionLineCode}</div>
</div>
`
} else {
str += `
<div class="left-item">
<div class="label">父包装号</div>
<div class="value">${item.parentNumber}</div>
<div class="label bold-label">父包装号</div>
<div class="value bold-font font-20">${item.parentNumber}</div>
</div>
<div class="left-item">
<div class="label">ASN</div>
<div class="value">${item.asnNumber}</div>
<div class="value font-20">${item.asnNumber}</div>
</div>
`
}
str += `
<div class="left-item">
<div class="label">数量</div>
<div class="value bold-font">${item.qty}</div>
</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>`
}
str += `
<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 class="value font-20">${item.batch}</div>
</div>
<div class="left-item">
<div class="label">物料类型</div>
<div class="value">${item.itemType}</div>
<div class="value font-20">${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 class="value font-20">${item.supplierCode}</div>
</div>
`
}
@ -168,20 +202,33 @@ export default {
<div class="left-item">
<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>`
}
})
this.newHtmlContent = this.newHtmlContent.replace('mainBody', str) //
})
},
generateBase64(index) {
//
if (index == this.picUrl.length) {
console.log('str', str)
this.newHtmlContent = this.newHtmlContent.replace(
"mainBody", str); //
});
},
printImage() {
uni.showLoading({
title: "加载中",
mask: true
})
this.setHtmlData()
const clearInt = setInterval(() => {
let clearInt = setInterval(() => {
if (!this.newHtmlContent.mainBody) {
// #ifdef APP
testModule.doHTMLPrint(this.newHtmlContent)
@ -190,63 +237,24 @@ export default {
uni.hideLoading()
}
}, 1000)
} else {
let i = this.picUrl.length - 1 - index
var url = this.picUrl[i]
// #ifdef APP
plus.io.resolveLocalFileSystemURL(
url,
(entry) => {
// entrytest.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() {
uni.showLoading({
title: '加载中',
mask: true
})
this.generateBase64(0)
},
// #ifdef APP
// html
readFile(path, callback) {
plus.io.resolveLocalFileSystemURL(
path,
function (entry) {
entry.file(
function (file) {
const reader = new plus.io.FileReader()
plus.io.resolveLocalFileSystemURL(path, function (entry) {
entry.file(function (file) {
var 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}`)
}
)
callback(e.target.result);
};
reader.readAsText(file);
}, function (e) {
console.log("读取文件失败:" + e.message);
});
}, function (e) {
console.log("获取图片资源失败:" + e.message);
});
}
// #endif
},
@ -255,35 +263,32 @@ export default {
uni.showLoading({
title: '加载中...',
mask: true
})
});
if (option.points) {
this.originData = JSON.parse(option.points)
this.originData = JSON.parse(option.points);
}
this.data = this.originData
this.$nextTick(async () => {
//
const el = this.$refs['qrcodeRef']
let str = ''
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
}
}).catch(err => {
console.log(err);
})
// this.data = [
// {
// "itemCode": "250.832-02",
// "itemName": "线1ZH",
// "packName": "",
// "packageCode": "PN20240906-0000000001",
// "batch": "20240719",
// "parentNumber": null,
// "itemType": "",
// "asnNumber": "ASNS20240731-0002",
// "supplierCode": "49000599",
// "qty": 90,
// "printTimes": "2024-09-06+09:29:37",
// "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;",
// "barcodeBase64": ""
// }
// ]
},
fail(err) {
console.log('err:::', err)
}
})
})
})
}
}
</script>
@ -291,6 +296,7 @@ export default {
.box {
font-size: 24rpx;
display: flex;
}
.left {
@ -314,7 +320,19 @@ export default {
.bold-font {
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 {

Loading…
Cancel
Save