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 bold-label">物品代码</view>
          <view class="value bold-font font-20" 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 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 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($event,item)" :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 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 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 setup>
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/point.html';
import {
  pathToBase64
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
// #ifdef APP
let testModule = uni.requireNativePlugin("TestModule")
// #endif
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const timer = ref(null)
const originData = ref([])
const data = ref([])
const newHtmlContent = ref('')
const isLoadFinish = ref(false)
const picIndex = ref(0)
const picUrl = ref([])

const success = (img, item) => {
  item.barcodeBase641 = img
  uni.hideLoading()
  isLoadFinish.value = true
  // #ifdef APP
  plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => {
    entry.file((file) => {
      const 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
}

const setHtmlData = () => {
  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 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 font-30" id="name2">${item.itemName}</div>
          </div>
          <div class="left-item">
            <div class="label">包装名称</div>
            <div class="value font-20">${item.packName}</div>
          </div>
          <div class="left-item">
            <div class="label">包装号</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 font-20">${item.productionLineCode}</div>
          </div>
        `
      } else {
        str += `
          <div class="left-item">
            <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 font-20">${item.asnNumber}</div>
          </div>
        `
      }
      str += `
        <div class="left-item">
          <div class="label">数量</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 font-20">${item.batch}</div>
          </div>
          <div class="left-item">
            <div class="label">物料类型</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 font-20">${item.supplierCode}</div>
          </div>
        `
      }
      str += `
        <div class="left-item">
          <div class="label">打印时间</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>`
      }
    })

    console.log('str', str)
    newHtmlContent.value = newHtmlContent.value.replace("mainBody", str) // 替换物品代码
  })
}

const printImage = () => {
  uni.showLoading({
    title: "加载中",
    mask: true
  })
  setHtmlData()
  let clearInt = setInterval(() => {
    if (newHtmlContent.value && newHtmlContent.value.mainBody) {
      // #ifdef APP
      testModule.doHTMLPrint(newHtmlContent.value)
      // #endif
      clearInterval(clearInt)
      uni.hideLoading()
    }
  }, 1000)
}

// #ifdef APP
// 读取html文件
const 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) {
    originData.value = JSON.parse(option.points)
  }
  data.value = originData.value
})

watch(isLoadFinish, (newVal, oldVal) => {
  if (newVal === true) {
  }
}, { immediate: true })
</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-30 {
  font-size: 30px;
}

.font-20 {
  font-size: 20px;
}

.bold-label {
  font-weight: bold;
  /* font-size: 15px; */
}

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