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>
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/point.html';
import {
  pathToBase64
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
// #ifdef APP
var 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, 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 => {
          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)
        this.newHtmlContent = this.newHtmlContent.replace(
            "mainBody", str); //替换物品代码
      });
    },
    printImage() {
      uni.showLoading({
        title: "加载中",
        mask: true
      })
      this.setHtmlData()
      let clearInt = setInterval(() => {
        if (!this.newHtmlContent.mainBody) {
          // #ifdef APP
          testModule.doHTMLPrint(this.newHtmlContent)
          // #endif
          clearInterval(clearInt)
          uni.hideLoading()
        }
      }, 1000)
    },

    // #ifdef APP
    // 读取html文件
    readFile(path, callback) {
      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);
      });
    }
    // #endif
  },

  onLoad(option) {
    uni.showLoading({
      title: '加载中...',
      mask: true
    });
    if (option.points) {
      this.originData = JSON.parse(option.points);
    }
    this.data = this.originData

// 			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": ""
//   }
// ]
  },
}
</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>