sfms3.0-uniapp/src/pages/point/index.vue

<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" 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>
// 打印页面的模板
import { pathToBase64 } from '../../api/img-to-base64.js'

const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件，这里我重新命名了文件名
// #ifdef APP
const testModule = uni.requireNativePlugin('TestModule')
// #endif

export default {
  name: 'point',
  data() {
    return {
      timer: null,
      originData: [],
      data: [],
      newHtmlContent: '', // 打印传入的html
      isLoadFinish: false,
      picIndex: 0,
      picUrl: []
    }
  },

  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) // 替换物品代码
      })
    },

    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 {
        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()
              reader.onloadend = function (e) {
                callback(e.target.result)
              }
              reader.readAsText(file)
            },
            function (e) {
              console.log(`读取文件失败：${e.message}`)
            }
          )
        },
        function (e) {
          console.log(`获取图片资源失败：${e.message}`)
        }
      )
    }
    // #endif
  },

  onLoad(option) {
    uni.showLoading({
      title: '加载中...',
      mask: true
    })
    if (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);
            })
          },
          fail(err) {
            console.log('err:::', err)
          }
        })
      })
    })
  }
}
</script>

<style>
.box {
  font-size: 24rpx;
  display: flex;
}

.left {
  border-top: 1px solid #b1b1b1;
  border-left: 1px solid #b1b1b1;
  flex: 1;
}

.left-item {
  display: flex;
}

.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;
}

.right {
  width: 300rpx;
}

.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>