aiot-app/pages/warehouse/workOrder/manualCheck/manualCheck.vue

<template>
  <!-- 手动盘点 -->
  <view class="main">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" @clickLeft="back" title="手动盘点">
    </uni-nav-bar>
    <manualCheckBatch :infoData="infoData" :bizType="bizType" v-if="activeType"></manualCheckBatch>
    <view class="" v-if="!activeType">
      <view class="top-bar">
        <view class="title">
          {{ infoData.assetName }}（{{ infoData.assetCode }}）
        </view>
        <view class="tab-title">
          <view class="item" :class="{ active: tabTitleActive == index }" v-for="(item, index) in tabTitle"
            :key="item.name" @click="handlActive(index)">
            {{ item.name }}({{ item.num }})
          </view>
        </view>
      </view>

      <view class="main-warp">
        <template v-if="tabTitle[tabTitleActive].list.length > 0">
          <view class="order-list" v-for="(item, index) in tabTitle[tabTitleActive].list" :key="index">
            <view class="s1">
              <view class="b1">
                {{ item.assetName }}（{{ item.assetCode }}）
              </view>
              <view class="b2"> </view>
            </view>
            <view class="wrap">
              <view class="item">
                <view class="label"> 牌号 </view>
                <view class="value">
                  {{ item.assetBrand }}
                </view>
              </view>
              <view class="item">
                <view class="label"> 型号 </view>
                <view class="value">
                  {{ item.assetSku }}
                </view>
              </view>
            </view>
            <view class="wrap">
              <view class="item">
                <view class="label"> 批次 </view>
                <view class="value">
                  {{ item.batchNo }}
                </view>
              </view>
              <view class="item">
                <view class="label"> 类型 </view>
                <view class="value">
                  {{ infoData.assetTypeDictDESC }}
                </view>
              </view>
            </view>
            <view class="wrap">
              <view class="item">
                <view class="label"> 最小单元 </view>
                <view class="value">
                  {{ item.measurementUnit }} {{ item.unit }} /
                  {{ item.minPackUnit }}
                </view>
              </view>
              <view class="item">
                <view class="label"> 包装编码 </view>
                <view class="value">
                  {{ item.bucketNum }}
                </view>
              </view>
            </view>
            <view class="wrap">
              <view class="item" style="width: 100%">
                <view class="label"> 货位 </view>
                <view class="value">
                  {{ item.warehouseName }}/{{ item.reservoirName }}/{{
                    item.goodsShelfName
                  }}/{{ item.goodsAllocationName }}
                </view>
              </view>
            </view>
            <view class="bd-btn" @click="handlManualCheckPop(item)" v-if="tabTitleActive == 1">
              确认
            </view>
            <view class="bd-btn" @click="handlremove(item)" v-if="tabTitleActive == 0">
              移除
            </view>
          </view>
        </template>
        <u-empty style="padding-top: 20rpx" v-else> </u-empty>
      </view>
      <manualCheckPop :bizType="bizType" :workOrderId="workOrderId" :planInventoryId="planInventoryId"
        ref="manualCheckPop" @succeed="succeed"></manualCheckPop>
    </view>
  </view>
</template>
<script>
  import {
    postJ
  } from '@/utils/api'
  import manualCheckBatch from './manualCheckBatch.vue'
  import manualCheckPop from './manualCheckPop'
  let [page, size, isEnd] = [1, 10, true]
  export default {
    components: {
      manualCheckBatch,
      manualCheckPop
    },
    data() {
      return {
        bizType: '',
        /* 工单id */
        workOrderId: '',
        /* 清单id */
        planInventoryId: '',
        tabTitle: [{
            name: '已盘',
            num: 0,
            list: []
          },
          {
            name: '待盘',
            num: 0,
            list: []
          }
        ],
        tabTitleActive: 1,
        activeType: true, //true批量盘 false 逐个盘
        // 信息
        infoData: '',
        dataList: [],
        dict: {
          assetTypeDict: {
            1: 'SHENGCHANSHEBEI',
            2: 'ZHOUMIN',
            3: 'WULIAO',
            4: 'CHANPIN',
            5: 'ZHOUZHUANCHE',
            6: 'MOJU',
            7: 'BEIPINBEIJIAN'
          }
        }
      }
    },
    onLoad(option) {
      this.infoData = JSON.parse(decodeURIComponent(option.info))
      this.workOrderId = option.workOrderId
      this.planInventoryId = option.planInventoryId
      this.bizType = option.bizType
      this.activeType = Boolean(this.infoData.takeStockPattern)
      this.getOneDetailList()
      this.getAlreadyOneDetailList()
    },
    computed: {
      right_text() {
        if (this.activeType) {
          return '批量盘'
        } else {
          return '逐个盘'
        }
      }
    },
    onReachBottom: function() {
      if (isEnd) {
        return
      }
      // 显示加载图标
      uni.showLoading({
        title: '数据加载中'
      })
      this.getMoreLists()
    },
    methods: {
      handlRight() {
        //this.activeType = !this.activeType
      },
      // 返回
      back() {
        uni.navigateBack({
          delta: 1
        })
      },
      handlActive(index) {
        this.tabTitleActive = index
        this.initPage()
        this.getData()
      },
      initPage() {
        page = 1
        this.tabTitle[this.tabTitleActive].list = []
      },
      getData() {
        switch (this.tabTitleActive) {
          case 0:
            this.getAlreadyOneDetailList()
            break
          case 1:
            this.getOneDetailList()
            break
          default:
            break
        }
      },
      // 待盘
      getOneDetailList() {
        let paging = {
          page,
          size,
          bizType: this.bizType
        }
        paging = this.URLSearchParams(paging)
        let par = JSON.parse(JSON.stringify(this.infoData))

        return postJ(
            this.apiUrl + '/repertoryCheck/getOneDetailList?' + paging,
            par
          )
          .then(res => {
            if (res.success) {
              let item = this.tabTitle[1]
              this.tabTitle[1].list = [...item.list, ...res.data.records]
              this.tabTitle[1].num = res.data.total
              if (this.tabTitleActive == 1) {
                let pageTotal = res.data.pages
                page < pageTotal ? (isEnd = false) : (isEnd = true)
              }
            }
          })
          .finally(() => {
            uni.hideLoading()
          })
      },
      // 已盘
      getAlreadyOneDetailList() {
        let paging = {
          page,
          size,
          bizType: this.bizType
        }
        paging = this.URLSearchParams(paging)
        let par = JSON.parse(JSON.stringify(this.infoData))
        par.bizType = Number(this.bizType)
        return postJ(
            this.apiUrl + '/repertoryCheck/getAlreadyOneDetailList?' + paging,
            par
          )
          .then(res => {
            if (res.success) {
              console.log(res.data.records)
              let item = this.tabTitle[0]
              item.list = [...item.list, ...res.data.records]
              item.num = res.data.total
              if (this.tabTitleActive == 0) {
                let pageTotal = res.data.pages
                page < pageTotal ? (isEnd = false) : (isEnd = true)
              }
            }
          })
          .finally(() => {
            uni.hideLoading()
          })
      },
      handlManualCheckPop(item) {
        this.$refs.manualCheckPop.open(item)
      },
      async succeed() {
        this.initPage()
        await this.getOneDetailList()
        await this.getAlreadyOneDetailList()
        if (this.tabTitle[1].list.length == 0) {
          this.back()
        }
      },
      // 移除已盘
      handlremove(item) {
        let par = {
          id: item.id
        }
        par = this.URLSearchParams(par)
        postJ(this.apiUrl + '/repertoryCheck/delete?' + par).then(res => {
          if (res.success) {
            uni.showToast({
              title: '移除成功',
              icon: 'none'
            })
            this.initPage()
            this.getOneDetailList()
            this.getAlreadyOneDetailList()
          }
        })
      },
      getMoreLists: function() {
        //获取更多数据
        page++
        this.getData()
      },
      // 返回
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  $cols: 3; // 列数
  $marginWidth: 20rpx; // 间隔

  .top-title {
    padding: 20rpx;
  }

  .main {
    min-height: 100vh;
    background-color: #f0f0f0;
    position: relative;
  }

  .order-list {
    padding: 30rpx 20rpx;
    border-bottom: 1px solid #f2f2f2;
    position: relative;

    .s1 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .b1 {
        color: #555555;
        font-size: 30rpx;
      }

      .b2 {
        color: #000000;
        font-size: 28rpx;
      }

      .type {
        font-size: 28rpx;
        height: 40rpx;
        padding: 0 20rpx;
        line-height: 40rpx;

        &.yc {
          background-color: #dacde6;
        }

        &.ds {
          background-color: #feeaeb;
        }

        &.ps {
          background-color: #cbcbcb;
        }
      }
    }

    .wrap {
      display: flex;
      margin-top: 20rpx;

      .item {
        color: #555555;
        font-size: 28rpx;
        display: flex;
        width: 340rpx;

        .label {
          margin-right: 20rpx;
        }
      }
    }
  }

  .num-wrap {
    display: flex;
    width: 100%;

    .item {
      display: flex;
      align-items: center;
      width: calc((100% - #{($cols - 1) * $marginWidth}) / #{$cols});
      margin-left: $marginWidth;

      .label {
        white-space: nowrap;
        margin-right: 20rpx;
        font-size: 28rpx;
      }

      .input-wrap {
        .input {
          border: 1px solid #f2f2f2;
        }
      }
    }

    .item:nth-of-type(#{$cols}n + 1) {
      margin-left: 0;
    }
  }

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    padding: 0 20rpx;
    background-color: #fff;
    /* position: absolute;
		top: 88rpx;
		left: 0; */
    width: 100%;
    box-sizing: border-box;
    z-index: 10;

    .title {
      color: #555555;
      font-size: 24rpx;
    }

    .tab-title {
      color: #555555;
      font-size: 24rpx;
      display: flex;

      .item {
        &+.item {
          margin-left: 20rpx;
        }

        &.active {
          color: #157a2c;
          border-bottom: 1px solid #157a2c;
        }
      }
    }
  }

  .order-list {
    padding: 30rpx 20rpx;
    border-bottom: 20rpx solid #d7d7d7;
    position: relative;

    .s1 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .b1 {
        color: #555555;
        font-size: 30rpx;
      }

      .b2 {
        color: #000000;
        font-size: 24rpx;
      }

      .type {
        font-size: 24rpx;
        height: 40rpx;
        padding: 0 20rpx;
        line-height: 40rpx;

        &.yc {
          background-color: #dacde6;
        }

        &.ds {
          background-color: #feeaeb;
        }

        &.ps {
          background-color: #cbcbcb;
        }
      }
    }

    .wrap {
      display: flex;
      margin-top: 20rpx;

      .item {
        color: #555555;
        font-size: 24rpx;
        display: flex;
        width: 340rpx;

        .label {
          margin-right: 20rpx;
        }
      }
    }
  }

  .bd-btn {
    height: 56rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4b7902;
    font-size: 26rpx;
    border: 1px solid #4b7902;
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
  }

  .main-warp {
    //margin-top: 80rpx;
  }
</style>