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

<template>
  <view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)">
    <com-empty-view v-if="data.length == 0"></com-empty-view>
    <!-- 只用于展示页面 -->
    <view class="box" style="margin-bottom: 20rpx" v-for="(item, index) in data.sublist" :key="index">
      <view class="top">
        <view class="mb-kw">
          目标库位：<view>{{ item.toLocationCode }}</view>
        </view>
        <view class="mb-bo">
          <view class="mb-left">
            <view class="mb-text">
              物料号：<view>{{ item.itemCode }}</view>
            </view>
            <view class="mb-text">
              托包装号：<view>{{ item.packingNumber }}</view>
            </view>
          </view>
          <view class="mb-right">
            <view class="mb-text">
              数量：<view>{{ item.packQty }}个</view>
            </view>
          </view>
        </view>
      </view>
      <!-- <u-table style="margin-top: 20rpx">
        <u-tr>
          <u-th>物品代码</u-th>
          <u-th>物品描述</u-th>
          <u-th>批次</u-th>
          <u-th>包装号</u-th>
          <u-th>包装规格</u-th>
          <u-th>数量</u-th>
          <u-th>计量单位</u-th>
        </u-tr>
        <u-tr v-for="(cur, key) in data.sublist" :key="key">
          <u-td>{{ cur.itemCode }}</u-td>
          <u-td>{{ cur.itemDesc1 }}</u-td>
          <u-td>{{ cur.batch }}</u-td>
          <u-td>{{ cur.packingNumber }}</u-td>
          <u-td>{{ cur.packUnit }}</u-td>
          <u-td>{{ cur.qty }}</u-td>
          <u-td>{{ cur.uom }}</u-td>
        </u-tr>
      </u-table> -->
    </view>
    <view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px">
      <button @click="printImage" style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button>
    </view>
  </view>
</template>

<script>
import { getJimuPutawayJobDetail } from '@/api/request2.js'
import { dateFormat } from '@/common/basic.js'
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/pointPutawayJob.html'
// #ifdef APP
const testModule = uni.requireNativePlugin('TestModule')
// #endif

export default {
  name: 'pointPutawayJob',
  data() {
    return {
      data: {
        sublist: []
      },
      newHtmlContent: '', // 打印传入的html
      isLoadFinish: false,
      ids: ''
    }
  },

  methods: {
    // #ifdef APP
    // 打印
    printImage() {
      testModule.doHTMLPrint(this.newHtmlContent)
    },
    // 读取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
    formatDate(val) {
      return dateFormat(val)
    }
  },
  watch: {
    isLoadFinish: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          // 读取html文件将文件中的内容图换成当前页面的数据
        }
      },
      immediate: true
    }
  },

  onLoad(option) {
    if (option.data) {
      this.data = JSON.parse(decodeURIComponent(option.data))
    }
  },
  async onShow() {
    await getJimuPutawayJobDetail({
      masterIds: this.data.ids
    }).then((res) => {
      this.data.sublist = res.data
    })
    // 获取数据
    // this.data = [{
    // 	toLocationCode: 'C13-12-11',
    // 	jobNumber: '555555',
    // 	creator: '就是我',
    // 	createTime: '2019-12-12 05:00:00',
    // 	sublist: [{
    // 		itemNumber: '66',
    // 		itemDes: 'hahah',
    // 		batch: '201450513',
    // 		packingNumber: '201450513',
    // 		packUnit: '201450513',
    // 		packQty: '40',
    // 		uom: '张'
    // 	},{
    // 		itemNumber: '77',
    // 		itemDes: '8888',
    // 		batch: '201450513',
    // 		packingNumber: '201450513',
    // 		packUnit: '201450513',
    // 		packQty: '40',
    // 		uom: '张'
    // 	}]
    // }, {
    // 	toLocationCode: 'C13-12-11',
    // 	jobNumber: '555555',
    // 	creator: '就是我',
    // 	createTime: '2019-12-12 05:00:00',
    // 	sublist: [{
    // 		itemNumber: '66',
    // 		itemDes: 'hahah',
    // 		batch: '201450513',
    // 		packingNumber: '',
    // 		packUnit: '',
    // 		packQty: '',
    // 		uom: ''
    // 	}]
    // }, {
    // 	toLocationCode: 'C13-12-11',
    // 	jobNumber: '555555',
    // 	creator: '就是我',
    // 	createTime: '2019-12-12 05:00:00',
    // 	sublist: [{
    // 		itemNumber: '66',
    // 		itemDes: 'hahah',
    // 		batch: '201450513',
    // 		packingNumber: '',
    // 		packUnit: '',
    // 		packQty: '',
    // 		uom: ''
    // 	}]
    // }]
    this.$nextTick(async () => {
      let str = ''
      this.readFile(htmlFileUrl, (htmlContent) => {
        this.newHtmlContent = htmlContent
        this.data.sublist.forEach((item) => {
          str += `<div class="box" style="page-break-before:always;" ><br />
        							<div class="top">
        								<div class="mb-kw">
        									目标库位：<div>${item.toLocationCode}</div>
        								</div>
        								<div class="mb-bo">
        								<div class="mb-left">
        									<div class="mb-text">
        										物料号：<div>${item.itemCode}</div>
        									</div>
        									<div class="mb-text">
        										托包装号：<div>${item.packingNumber}</div>
        									</div>
        								</div>
        								<div class="mb-right">
        									<div class="mb-text">
        										数量：<div>${item.packQty}个</div>
        									</div>
        								</div>
        								</div>
        							</div>
        							`
        })
        this.newHtmlContent = this.newHtmlContent.replace('mainBody', str) // 替换物品代码
      })
    })
  }
}
</script>

<style>
.box {
  font-size: 26rpx;
  /* display: flex; */
  /* padding: 20rpx; */
  border: 1px solid #dedede;
}

.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: 60rpx;
  line-height: 60rpx;
}

.value {
  border-bottom: 1px solid #b1b1b1;
  border-right: 1px solid #b1b1b1;
  padding: 0px 5px;
  height: 60rpx;
  flex: 1;
  width: 0px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
}

.right {
  width: 50%;

  border-top: 1px solid #b1b1b1;
}

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

.mb-kw {
  border-bottom: 1px solid #dedede;
  padding: 20rpx;
  font-size: 30rpx;
}

.mb-kw view {
  font-weight: bold;
  font-size: 46rpx;
  text-align: center;
}
.mb-bo {
  display: flex;
}
.mb-bo .mb-left {
  flex: 1;
}
.mb-bo .mb-left .mb-text {
  padding: 20rpx;
}
.mb-bo .mb-left .mb-text:nth-child(1) {
  border-bottom: 1px solid #dedede;
}
.mb-bo .mb-left .mb-text view {
  font-weight: bold;
  font-size: 32rpx;
  text-align: center;
}
.mb-bo .mb-right {
  padding: 20rpx;
  width: 260rpx;
  border-left: 1px solid #dedede;
  display: flex;
  align-items: center;
}
.mb-bo .mb-right .mb-text {
  width: 100%;
}
.mb-bo .mb-right .mb-text view {
  font-weight: bold;
  font-size: 40rpx;
  text-align: center;
  width: 100%;
}
</style>