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

<template>
  <!-- 批次明细 -->
  <view class="main">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="title" @clickLeft="back">
    </uni-nav-bar>
    <view class="scroll-view_H">
      <view class="item" :class="{ active: active == item.components }" v-for="(item, index) in scrollTitle"
        :key="index" @click="changeActive(item)">
        {{ item.name }}
      </view>
    </view>
    <view class="wl-bar" @click="handlPopMessage" v-if="info">
      <text>物品基本信息</text>
      <text>查看</text>
    </view>

    <component v-bind:is="active" :batchNum="batchNum" :baseInfo="info" :isUnpack="info.isUnpack" :dimension="dimension"
      :inventoryCode="inventoryCode" :code="code" :isInfo="Boolean(info)"></component>

    <PopMessage ref="PopMessage" :info="info"></PopMessage>
  </view>
</template>

<script>
  import inventoryDetail from './components/inventoryDetail.vue'
  import putStorage from './components/putStorage.vue'
  import allot from './components/allot.vue'
  import outboundDelivery from './components/outboundDelivery.vue'
  import ReportLoss from './components/ReportLoss.vue'
  import InspectionSheet from './components/InspectionSheet.vue'
  import BaseInfo from './components/BaseInfo.vue'
  import PopMessage from './components/PopMessage.vue'
  import BatchDetail from './components/BatchDetail.vue'
  import {
    post,
    get
  } from '@/utils/api.js'
  export default {
    components: {
      inventoryDetail,
      putStorage,
      allot,
      outboundDelivery,
      ReportLoss,
      BaseInfo,
      InspectionSheet,
      BatchDetail,
      PopMessage
    },
    data() {
      return {
        batchNum: '',
        dimension: '',
        inventoryCode: '',
        code: '',
        active: 'inventoryDetail',

        // 物料信息
        info: {}
      }
    },
    onLoad(option) {

      this.batchNum = option.batchNum === 'null' ? '' : option.batchNum
      this.dimension = option.dimension
      this.inventoryCode = option.inventoryCode
      this.code = option.code
      // this.getInfo()

      if (option.info) {
        this.info = JSON.parse(decodeURIComponent(option.info))
        console.log('this.info', this.info)
      }
    },
    computed: {
      title() {
        if (this.dimension == 1) {
          return `${this.info.assetCode || ''} ${this.info.assetName || ''}`
        }

        return '批次号 ' + this.batchNum
      },
      scrollTitle() {
        let list = [
          // {
          //   name: '基本信息',
          //   components: 'BaseInfo'
          // },
          {
            name: '库存明细',
            components: 'inventoryDetail'
          },
          {
            name: '入库',
            components: 'putStorage'
          },

          {
            name: '调拨',
            components: 'allot'
          },
          {
            name: '出库',
            components: 'outboundDelivery'
          },
          {
            name: '报损溢',
            components: 'ReportLoss'
          }
        ]

        if (this.dimension == 1) {
          list.splice(2, 0, {
            name: '批次明细',
            components: 'BatchDetail'
          })
        }
        if (this.info.assetType == 3 && this.dimension == 2) {
          list.push({
            name: '质检单',
            components: 'InspectionSheet'
          })
        }
        return list
      }
    },
    methods: {
      changeActive(item) {
        this.active = item.components
      },
      handlPopMessage() {
        this.$refs.PopMessage.open()
      }
      // getInfo () {
      //   let par = {
      //     inventoryCode: this.inventoryCode,
      //     batchNum: this.batchNum,
      //     code: this.code
      //   }
      //   post(this.apiUrl + '/InventoryBook/select/getDetail', par).then(res => {
      //     if (res.success) {
      //       this.info = res.data.records[0]
      //     }
      //   })
      // }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    height: 100%;
  }

  .main {
    height: 100%;
  }

  .scroll-view_H {
    padding: 20rpx;
    border-bottom: 5rpx solid #70b603;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
      font-size: 32rpx;

      &.active {
        color: #70b603;
      }
    }
  }

  .wl-bar {
    height: 60rpx;
    background-color: #70b603;
    font-size: 28rpx;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
  }
</style>