storevisit-ui-mobile/src/views/my/myInventory.vue

<template>
  <div class="bgcolor">
    <div class="navBarTOP" >
      <van-nav-bar class="navBar" title="我的库存信息"   left-arrow @click-left="onClickLeft">
        <template #right>
        </template>
      </van-nav-bar>
      <van-row gutter="20" style="padding:0 6px;" >
        <van-col span="12" >
          <van-button  type="info" size="small" style="background: #1989fa;border-color: #1989fa;width: 100%;border-radius: 5px;
          margin-top: 10px;" @click="onSelect('A')"><van-icon name="guide-o" />&nbsp;物料领取</van-button>
        </van-col>
        <van-col span="12" >
          <van-button type="warning" size="small" style="margin-top: 10px;background: #ff976a!important;;border-color: #ff976a!important;width: 100%;border-radius: 5px;" @click="onSelect('B')"><van-icon name="revoke" />&nbsp;物料退回</van-button>
        </van-col>
      </van-row>
      <br>
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="container" style="width: 100%; margin: 0 auto;">
      <el-table :data="list" border  style="width: 100%"    :span-method="objectSpanMethod">
        <el-table-column label="物料类型" prop="materialTypeName">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.materialTypeName)">{{ scope.row.materialTypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物料名称" prop="materialDataName">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.materialDataName)">{{ scope.row.materialDataName }}</span>
          </template>
        </el-table-column>
        <el-table-column class="t-center" prop="inventoryNum" label="库存量" />
      </el-table>
    </div>
  </div>
</template>

<script>
import {getMyInventoryList} from "@/api/inventory";
export default {
  data() {
    return {
      disabled:false,
      list: [],
      addShow:false,
      storeTypeList: [],
      loading: false,
      finished: false,
      pageSize: 12,
      pageNum: 1,
      tabVal:'1',
      showProvincePicker: false,
      showCityPicker: false,
      showDistrictPicker: false,
      provinceList: [],
      cityList: [],
      districtList: [],
      validFlag:"",
      addShow1:false,
      title:"我的门店",
      fromValue: {
        pageSize: 12,
        pageNum: 1,
      }
    }
  },
  created() {
    this.getMyInventoryList()
  },
  watch: {
    $route(to, from) {
      if (to.path == "/myInventory") {
        this.getMyInventoryList()
      }
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const cellValue = row[column.property]
      if (cellValue && ["materialTypeName"].includes(column.property)) {
        const prevRow = this.list[rowIndex - 1]
        let nextRow = this.list[rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = this.list[++countRowspan + rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    tipTitle(val) {
      this.$toast(val);
    },
    onSelect(action) {
      this.$router.push({path: "/material", query: {
          tabVal:action
        }
      })
    },
    getMyInventoryList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      var fromValue=this.fromValue
      fromValue.pageNum=this.pageNum
      fromValue.pageSize=this.pageSize
      fromValue.inventoryLyUserId=localStorage.getItem("userId")
      getMyInventoryList(fromValue).then(res => {
        loading1.clear()
        if (res.code == 200) {
          this.loading = false;
          this.list = res.rows
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}
</style>