oms/src/components/productStore/productStore.vue

<template>
  <div class="productStore">
    <div class="input-number">
      <el-input-number v-model="num" @change="handleChange" :min="1" size="small"></el-input-number>
      <el-tooltip class="item" effect="dark" content="库存信息" placement="bottom-start">
        <div class="icon" @click="value = true">
          <i class="el-icon-question"></i>
        </div>
      </el-tooltip>
    </div>
    <vxe-modal v-model="value" id="productStoreModal" width="80%" height="80%"  @show="show" min-width="460" min-height="320" 
    show-zoom resize transfer show-footer>
      <template #title>
        <span>查看库存</span>
      </template>
      <template #default>
        <module-view :propConfig="config" ref="view" @pagination="getList" />
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class ProductStore extends Vue {
  num:number=1;
  value=false
  time:any;
  timeNum = 0;
  data:Array<any>=[]
  config:any={
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        checkbox:true
      },
      columns:[{
        title:'名称',
        field:'name'
      },{
        title:'坐标',
        field:'coordinate'
      },{
        title:'地址',
        field:'address'
      }]
    }
  }
  //显示弹窗
  show(){
    if(this.data.length ==0){
      this.time =setInterval(()=>{
        this.getList()
      },500) 
    }
  }
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        clearInterval(this.time)
      }
      this.timeNum ++;
      return
    }
    clearInterval(this.time)
    let query = (this.$refs.view as any).getQuery();
    (this as any).$request({
      url: '/maindata/maindataStorehouse/page',
      method: 'get',
      params:query
    }).then((res:any) => {
      if(res.data.records){
        (this.$refs.view as any).setTableValue(res.data.records);
        this.data = res.data.records;
        let page={
          pageNo: res.data.current, //当前页
          pageSize: res.data.size, //每页条数
          total: res.data.total //总条数
        };
        (this.$refs.view as any).setPage(page)
      }
    })
  }
  handleChange(v:number){

  }
}
</script>
<style lang="scss" scoped>
.input-number{
  min-width: 200px;
  display: flex;
  align-items: center;
  .icon{
    cursor: pointer;
    margin-left: 8px;
  }
  .el-icon-question{
    color: #666;
  }
}
</style>