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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 268
      src/pages/point/index.vue

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

@ -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>
@ -19,26 +19,32 @@
<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="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 class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
<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="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>
@ -48,7 +54,7 @@
<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="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
<view class="label">供应商</view>
<view class="value">{{ item.supplierCode }}</view>
</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 {
@ -80,7 +94,7 @@ export default {
timer: null,
originData: [],
data: [],
newHtmlContent: '', // 打印传入的html
newHtmlContent: '', //打印传入的html
isLoadFinish: false,
picIndex: 0,
picUrl: []
@ -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) => {
// 可通过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() {
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) => {
// 可通过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() {
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": "线束1右件ZH",
// "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 {

Write Preview
Loading…
Cancel
Save