oms/src/components/supplierModal/supplierModal.vue

<template>
  <vxe-modal v-model="value" id="supplierModal" v-loading="load" :width="width?width+'px':'60%'" @show="show" :height="height?height+'px':'80%'" min-width="500" min-height="400" 
  show-zoom resize transfer show-footer  :zIndex="zIndex">
    <template #title>
      <span>{{title?title:'选择供应商'}}</span>
    </template>
    <template #default>
      <module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList" @clickHandle="clickHandle" />
    </template>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="confirm">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class SupplierModal extends Vue {
  value=false
  data:Array<any>=[]
  time:any;
  timeNum = 0;
  load=false;

  @Prop()
  title?:string

  @Prop()
  width?:number

  @Prop()
  height?:number

  @Prop()
  mulit?:boolean
	
	@Prop()
	zIndex?:number

  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'mini',
        
      },
      columns:[
        [{
          labelWidth:'120px',
          span:10,
          label:'名称',
          prop:'name',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入名称'
            }
          }
        },{
          labelWidth:'120px',
          span:10,
          label:'负责人',
          prop:'contacts',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入负责人'
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        triggerRowCheck:'row',
        pageSize:10
      },
      columns:[{
        title:'名称',
        field:'name'
      },{
        title:'负责人',
        field:'contacts'
      }]
    },
  }

  clickHandle(n:string){
    if(n == 'onRefresh'){
      this.getList()
    }
  }

  setShow(v:boolean){
    this.value = v;
  }

  created(){
    if(this.mulit){
      this.config.table.attr.checkbox = true
    }else{
      this.config.table.attr.radio = true
    }
  }

  //确定
  confirm(){
    let data:Array<any>=this.getSelectdata();
    if(data.length == 0){
      this.$message('请选择供应商！')
      return
    }
    this.$emit('confirm',data);
    this.value = false;
  }
  //获取已选中表格数据
  getSelectdata(){
    let data:Array<any>=[];
    if(this.$refs.view){
      data = (this.$refs.view as any).getSelectData()
    }
    return data;
  }
  //显示弹窗
  show(){
    if(this.data.length ==0){
      this.time =setInterval(()=>{
        this.getList()
      },500) 
    }
    if(this.$refs.view){
      (this.$refs.view as any).clearCheckboxRow();
    }
  }
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        clearInterval(this.time)
      }
      this.timeNum ++;
      return
    }
    clearInterval(this.time)
    let query:any = (this.$refs.view as any).getQuery();
    query.isLikeSearch = '1';
    this.$emit('supplierRequestAfter',query);
    this.load = true;
    (this as any).$request({
      url: '/maindata/maindataMaterialSupplier/page',
      method: 'get',
      params:query
    }).then((res:any) => {
      this.load = false;
      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)
      }
    }).catch(()=>{
      this.load = false;
    })
  }
}
</script>