aiot-app/pages/warehouse/inventory/batch/components/BatchDetail.vue

<template>
  <!-- 批次明细 -->
  <view class="main-wrap" :class="{ info: isInfo }">
    <uni-search-bar class="uni-search-bar" @confirm="search" v-model="searchForm.batchNum" @input="search"
      cancelButton="none" placeholder="批次号">
    </uni-search-bar>
    <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
      <view class="order-list">
        <view class="item" v-for="(item, index) in listData" :key="index">
          <view class="title">
            <view class="s1"> 批次号 {{ item.batchNum }} </view>
            <view class="s2" v-if="baseInfo.assetType == 3" @click="_getAnalysisCertificate(item)">质检单</view>
          </view>
          <view class="main">
            <view class="row">
              <view class="row-item">
                <text class="t1">库存数量</text>
                <text class="t2">{{ item.realInventoryNum }}</text>
              </view>
              <view class="row-item">
                <text class="t1">计量单位</text>
                <text class="t2">{{ item.unit }}</text>
              </view>
            </view>
            <view class="row">
              <view class="row-item">
                <text class="t1">包装数量</text>
                <text class="t2">{{ item.measurementUnit }}</text>
              </view>
              <view class="row-item">
                <text class="t1">包装单位</text>
                <text class="t2">{{ item.minPackUnit }}</text>
              </view>
            </view>
            <view class="row">
              <view class="row-item">
                <text class="t1">首次入库时间</text>
                <text class="t2">{{ item.firstTime }}</text>
              </view>
            </view>
            <view class="row">
              <view class="row-item">
                <text class="t1">最近出库时间</text>
                <text class="t2">{{ item.lastTime }}</text>
              </view>
            </view>
            <!-- <view class="row">
              <view class="row-item">
                <text class="t1">质检单</text>
                <text
                  class="t2 text-success"
                  @click="_getAnalysisCertificate(item)"
                  >查看</text
                >
              </view>
            </view> -->
            <!-- <view class="ckmx" @click="goDetails(item)"> 查看明细 </view> -->
          </view>
        </view>
      </view>
      <u-loadmore :status="status" style="margin: 20rpx 0" />
    </scroll-view>
    <uni-popup ref="popup" type="center">
      <img class="popImg" :src="apiUrl+itemUrl" alt="" @click="clickImg()">
    </uni-popup>
  </view>
</template>

<script>
  import {
    post,
    get
  } from '@/utils/api.js'
  let [page, size, isEnd] = [1, 10, true]
  export default {
    props: ['batchNum', 'inventoryCode', 'isInfo', 'dimension', 'baseInfo'],
    data() {
      return {
        listData: [],
        searchForm: {
          batchNum: '',
          isZero: ''
        },
        itemUrl: '',
        status: 'loading',
        searchValue: '',
        dictObj: {
          bizScene: {
            1: '生产入库',
            2: '采购入库',
            3: '赠送入库',
            4: '借用入库',
            5: '退还入库',
            6: '其他入库'
          }
        },
        certificate: '',
        certificateVisible: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      // 查看图片
      clickImg() {

        wx.previewImage({
          urls: [this.apiUrl + this.itemUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: this.itemUrl, // 当前显示图片的http链接，默认是第一个
          success: function(res) {},
          fail: function(res) {

          },
          complete: function(res) {

          }
        })
      },
      // 触底
      lower() {
        console.log('触底')
        if (isEnd) {
          return
        }
        this.getMoreLists()
      },
      getData() {

        let par = {
          batchNum: this.searchForm.batchNum,
          bizStatus: 1,
          inventoryCode: this.inventoryCode,
          isZero: this.searchForm.isZero,
          dimension: +this.dimension
        }
        if (this.searchValue !== '') {
          par.key = this.searchValue
        }
        post(
          this.apiUrl +
          `/InventoryBook/select/getDetail?size=${size}&page=${page}`,
          par
        ).then(res => {
          if (res.success) {
            this.listData = [...this.listData, ...res.data.records]
            let pages = res.data.pages

            if (page < pages) {
              isEnd = false
            } else {
              isEnd = true
              this.status = 'nomore'
            }
          }
        })
      },
      //质检单  资产类型、资产编码以及批次号获取质检单
      async _getAnalysisCertificate(row) {
        if (row.certificate) {
          this.certificate = row.certificate
          this.$refs.popup.open()
          return
        }
        const res = await get(
          this.apiUrl + `/InventoryBook/select/getAnalysisCertificate`, {
            code: this.baseInfo.assetType,
            inventoryCode: this.inventoryCode,
            batchNum: row.batchNum
          }
        )
        if (res?.success) {
          if (res.data?.length) {
            this.itemUrl = res.data[0].accessUrl
            this.clickImg()
            // this.itemUrl = res.data[0].accessUrl
            // this.$refs.popup.open()
          } else {
            uni.showToast({
              title: '未上传质检单！',
              icon: 'none'
            })
          }
        }
      },
      getMoreLists() {
        page++
        this.getData()
      },
      search() {
        this.page = 1
        this.listData = []
        this.status = 'loading'
        this.getData()
      },
      goDetails(item) {
        console.log(item)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popImg {
    width: 400rpx;
    height: 400rpx;
  }

  .main-wrap {
    height: calc(100% - 170rpx);

    &.info {
      height: calc(100% - 236rpx);
    }
  }

  .scroll-Y {
    height: calc(100vh - 112rpx);
    //height: 100%;
    background-color: #fafafa;
  }

  .order-list {
    .item {
      background-color: #fff;
      margin-bottom: 30rpx;
      margin-bottom: 30rpx;

      .title {
        display: flex;
        padding: 20rpx;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #dedede;

        .s1 {
          color: #333333;
          font-size: 28rpx;
          font-weight: bold;
        }

        .s2 {
          font-size: 28rpx;
          font-weight: bold;
          color: #70b603;
        }
      }

      .main {
        padding: 0 30rpx;

        .row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20rpx 0;
          border-bottom: 1px dashed #dedede;

          .row-item {
            .t1 {
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              margin-right: 20rpx;
            }

            .t2 {
              font-size: 28rpx;
              color: #333333;
            }
          }
        }

        .ckmx {
          color: #70b603;
          font-size: 28rpx;
          font-weight: bold;
          padding: 20rpx;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>