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

<template>
  <!-- 报损报溢 -->
  <view class="main-wrap" :class="{ info: isInfo }">
    <uni-search-bar
      class="uni-search-bar"
      @confirm="search"
      v-model="searchValue"
      @input="search"
      cancelButton="none"
      placeholder="关键字"
    >
    </uni-search-bar>

    <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
      <view class="order-list">
        <u-collapse @change="change" @close="close" @open="open">
          <u-collapse-item
            v-for="(item, index) in listData"
            :key="index"
            :title="item.onlyCode"
            name="Docs guide"
          >
            <template slot="title">
              <view style="display: flex; justify-content: space-between">
                {{ item.onlyCode }}

                <text :style="{ color: statusColor[item.status] }">{{
                  statusOpt[item.status]
                }}</text>
              </view>
            </template>

            <view class="item">
              <view class="main">
                <view class="row" v-if="!baseInfo.isUnpack">
                  <view class="row-item">
                    <text class="t1">最小包装单位</text>
                    <text class="t2"
                      >{{ item.measurementUnit }}{{ item.unit }} /{{
                        item.minimumUnit
                      }}</text
                    >
                  </view>
                </view>
                <view class="row" v-if="dimension != 2">
                  <view class="row-item">
                    <text class="t1">批次号</text>
                    <text class="t2">{{ item.batch }}</text>
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">单价</text>
                    <text class="t2">
                      <template v-if="item.univalence || item.univalence === 0">
                        {{ item.univalence }}
                        {{ priceList[item.univalenceUnit] }}
                      </template></text
                    >
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">盘点工单号</text>
                    <text class="t2">{{ item.workOrderCode }}</text>
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">盘点人</text>
                    <text class="t2">{{ item.executeUserName }}</text>
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">报损溢单号</text>
                    <text class="t2">{{ item.breakageOverflowCode }}</text>
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">操作人</text>
                    <text class="t2">{{ item.reportName }}</text>
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">审核人</text>
                    <text class="t2">{{ item.accraditationUserName }}</text>
                  </view>
                </view>
                <view class="row">
                  <view class="row-item">
                    <text class="t1">更新库存时间</text>
                    <text class="t2">{{ item.updateInventoryTime }}</text>
                  </view>
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
      <u-loadmore :status="status" style="margin: 20rpx 0" />
    </scroll-view>
  </view>
</template>

<script>
import { post, postJ } from '@/utils/api.js'
let [page, size, isEnd] = [1, 20, true]
import { debounce } from 'lodash'
export default {
  props: ['batchNum', 'baseInfo', 'inventoryCode', 'isInfo', 'dimension'],
  data () {
    return {
      listData: [],
      status: 'loading',
      searchValue: '',
      dict: {
        reportType: {
          0: '盘亏-',
          1: '盘盈+'
        }
      },
      statusOpt: {
        1: '盘亏',
        2: '盘损',
        3: '盘盈'
      },
      statusColor: {
        1: '',
        2: '#F59A23',
        3: '#70B603'
      }
    }
  },
  created () {
    this.getData()
    this.search = debounce(this.search, 1000)
  },
  methods: {
    // 触底
    lower () {
      console.log('触底')
      if (isEnd) {
        return
      }
      this.getMoreLists()
    },
    getData () {
      let par = {
        batchNum: this.batchNum,
        informationId: this.baseInfo?.materialId,
        name: this.searchValue
      }
      if (this.searchValue !== '') {
        par.key = this.searchValue
      }
      postJ(
        this.apiUrl +
          `/InventoryBook/select/getBreakageOverflowDetail?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'
          }
        }
      })
    },
    getMoreLists () {
      page++
      this.getData()
    },
    search () {
      this.page = 1
      this.listData = []
      this.status = 'loading'
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.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: #333333;
      }
    }

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