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

<template>
  <view class="mainBox">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="库存查询" @clickLeft="back">
    </uni-nav-bar>

    <view class="search-bar">
      <uni-search-bar class="uni-search-bar" @confirm="search" v-model="form.key" @input="search" cancelButton="none"
        placeholder="编码/名称">
      </uni-search-bar>
      <view class="screen" @click="handlScreen">
        <text class="text">筛选</text>
        <image class="image" src="~@/static/moreSearch.svg" mode=""></image>
      </view>
    </view>
    <view class="list-wrap">
      <view class="item" v-for="(item, index) in listData" @click="goDetails(item)" :key="index">
        <view class="title" v-if="form.dimension == 1">
          <view class="s1"> {{ item.assetCode }} ({{ item.assetName }}) </view>
          <view class="s2" :class="{
              'text-danger': item.realInventoryNum < item.safeStock
            }">
            {{ item.realInventoryNum }} {{ item.unit }}
          </view>
        </view>
        <view class="title" v-if="form.dimension == 2">
          <view class="s1">
            {{ item.batchNum }}
          </view>
          <view class="s1"> {{ item.assetCode }} ({{ item.assetName }}) </view>
          <view class="s2" :class="{
              'text-danger': item.realInventoryNum < item.safeStock
            }">
            {{ item.realInventoryNum }} {{ item.unit }}
          </view>
        </view>
        <view class="main">
          <view class="main-item" v-if="form.dimension == 2">
            <view class="s1"> 批次号 </view>
            <view class="s2">
              {{ item.batchNum }}
            </view>
          </view>
          <view class="main-item" v-for="(itm, index) in tableHeader" :key="index">
            <view class="s1"> {{ itm.label }} </view>
            <view class="s2" v-if="itm.formatter">{{
              itm.formatter(item)
            }}</view>
            <view class="s2" v-else>{{ item[itm.prop] }}</view>
          </view>
          <view class="main-item">
            <view class="s1"> 分类 </view>
            <view class="s2">
              {{ item.classificationUrl }}
            </view>
          </view>
        </view>
        <view class="ckxq"> 查看详情 </view>
      </view>
    </view>
    <u-loadmore fontSize="32" iconSize="36" :status="status" style="margin-top: 20rpx" />
    <screen ref="screen" @succeed="cabScreen" :dimension="form.dimension" :code="form.code"
      :warehouseId="form.warehouseId"></screen>
  </view>
</template>

<script>
  import {
    post,
    get
  } from '@/utils/api.js'
  let [page, size, isEnd] = [1, 10, true]
  import screen from './components/screen'
  export default {
    components: {
      screen
    },
    data() {
      return {
        listData: [],
        form: {
          key: '',
          // 列表维度
          dimension: 1,
          /* 资产类型 */
          code: '',
          /* 所属仓库 */
          warehouseId: ''
        },
        dict: {
          code: {
            1: '生产设备',
            2: '舟皿',
            3: '物料',
            5: '周转车',
            6: '模具',
            7: '备品备件'
          }
        },
        status: 'loading'
      }
    },
    onLoad() {},
    onShow() {},
    //加载更多
    onReachBottom() {
      console.log('加载更多')
      if (isEnd) {
        return
      }
      this.getMoreLists()
    },
    created() {
      // this.getData()
    },
    computed: {
      tableHeader() {
        switch (+this.form.code) {
          case 3:
            return [{
              label: '牌号',
              prop: 'brandNum'
            }]
          case 8:
            return [{
                label: '型号',
                prop: 'modelType'
              },
              {
                label: '规格',
                prop: 'specification'
              }
            ]
          case 4:
            return [{
                label: '牌号',
                prop: 'brandNum'
              },
              {
                label: '型号',
                prop: 'modelType'
              }
            ]
          case 5: //'周转车'
            return [{
                label: '规格',
                prop: 'specification'
              },
              {
                label: '材质',
                prop: 'texture',
                formatter(row) {
                  const extendField = JSON.parse(row.extendField)
                  return extendField.texture
                }
              }
              // {
              //   label: '长宽高',
              //   prop: '',
              //   formatter (row) {
              //     const extendField = JSON.parse(row.extendField)
              //     return `${extendField.length}*${extendField.width}*${extendField.high}`
              //   }
              // }
            ]
          case 2: //'舟皿'
            return [{
                label: '规格',
                prop: 'specification'
              },
              {
                label: '型号',
                prop: 'modelType'
              }
              // {
              //   label: '长宽高',
              //   prop: '',
              //   formatter (row) {
              //     const extendField = JSON.parse(row.extendField)
              //     return `${extendField.length}*${extendField.width}*${extendField.high}`
              //   }
              // }
            ]
          case 1: //'设备'
            return [{
                label: '型号',
                prop: 'modelType'
              },
              {
                label: '规格',
                prop: 'specification'
              }
            ]
          case 6: //'模具'
            return [{
                label: '牌号',
                prop: 'brandNum'
              },
              {
                label: '型号',
                prop: 'modelType'
              }
              // {
              //   label: '收缩系数',
              //   prop: '',
              //   formatter (row) {
              //     const extendField = JSON.parse(row.extendField)
              //     return extendField.shrinkageCoefficient
              //   }
              // }
            ]
          case 7: //'备品备件'
            return [{
                label: '规格',
                prop: 'specification'
              },
              {
                label: '型号',
                prop: 'modelType'
              }
            ]
        }

        return []
      }
    },
    methods: {
      //筛选
      getData() {
        let par = JSON.parse(JSON.stringify(this.form))
        par.page = page
        par.size = size
        par = this.URLSearchParams(par)
        console.log(par)
        get(this.apiUrl + '/InventoryBook/select/getPage?' + 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'
            }
          }
        })
      },

      handlScreen() {
        this.$refs.screen.open()
      },
      cabScreen(data) {
        for (let key of Object.keys(data)) {
          this.form[key] = data[key]
        }
        page = 1
        this.listData = []
        this.search()
      },
      goDetails(item) {
        //   // 物料维度
        //   if (this.form.dimension == 1) {
        //     let par = {
        //       info: encodeURIComponent(JSON.stringify(item)),
        //       dimension: this.form.dimension,
        //       code: item.assetType
        //     }
        //     par = this.URLSearchParams(par)
        //     uni.navigateTo({
        //       url: '/pages/warehouse/inventory/details/details?' + par
        //     })
        //   }
        // 批次维度
        //   if (this.form.dimension == 2) {
        let par = {
          dimension: this.form.dimension,
          batchNum: item.batchNum,
          inventoryCode: item.assetCode,
          info: encodeURIComponent(JSON.stringify(item)),
          code: item.assetType,

        }
        par = this.URLSearchParams(par)
        uni.navigateTo({
          url: '/pages/warehouse/inventory/batch/batch?' + par
        })
        //   }
      },
      search() {
        this.listData = []
        this.getData()
      },
      getMoreLists() {
        page++
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .screen {
      display: flex;
      align-items: center;
      margin-right: 20rpx;

      .text {
        line-height: 1;
      }

      .image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .uni-search-bar {
      flex: 1;
    }
  }

  .list-wrap {
    .item {
      .title {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1px solid #333333;
        font-size: 28rpx;
      }

      .main {
        padding: 0 50rpx;
        background-color: #fcfcfc;

        .main-item {
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;
          color: #aaaaaa;
          padding: 20rpx 0;

          &+.main-item {
            border-top: 1px dashed #aaaaaa;
          }
        }
      }

      .ckxq {
        font-size: 28rpx;
        color: #70b603;
        background-color: #f1fbe2;
        padding: 20rpx;
        text-align: center;
      }
    }
  }
</style>