oms/src/benyun/components/moduleView/moduleView.vue

<template>
  <div class="module-view" 
    :style="{height:attrs.calculateH?'100%':'auto'}"
    v-loading="load"
    :ref="viewID"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <div class="search" v-if="searchConfig" v-show="!hideSearch">
      <by-form :propConfig="searchConfig" :ref="searchID"></by-form>
      <div class="search-btn">
        <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="resert">重置</el-button>
      </div>
    </div>
    <div class="tool-box" v-if="toolConfig">
      <by-tool :propConfig="toolConfig" :ref="toolID" @clickHandle="clickHandle" />
    </div>
    <div class="module-main" v-if="tableConfig">
      <slot name="left"></slot>
      <div class="table">
        <by-table :propConfig="tableConfig" :ref="tableID" @pagination="paginationChange" @detail="detail" @onChangeRow="onChangeRow" />
      </div>
    </div>
    <transition name="el-zoom-in-center" v-if="modalConfig">
      <div class="view-modal" v-show="modalShow">
        <div class="tool-box" v-if="modalConfig.tool">
          <by-tool :propConfig="modalConfig.tool" @clickHandle="modalHandle" ref="toolForm" />
        </div>
        <div class="view-form">
          <by-form :propConfig="modalConfig.form" :ref="formID"></by-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch,Mixins } from "vue-property-decorator";
import ModuleViewHandle from '@/benyun/compVue/ModuleViewHandle'
interface Page{
  pageNo?:number,
  pageSize?:number,
  total?:number
}
@Component
export default class ModuleView extends ModuleViewHandle {
  modalShow=false;
  get attrs(){
    return this.config.attr ? this.config.attr : {};
  }
  //搜索配置
  get searchConfig(){
    return this.config?.search ? this.config.search : null;
  }

  //工具栏配置
  get toolConfig(){
    return this.config?.tool ? this.config.tool : null
  }

  //表格配置
  get tableConfig(){
    return this.config?.table ? this.config.table : null
  }

  //弹窗
  get modalConfig(){
    return this.config.modal ? this.config.modal : null
  }

  calculateCount=0;

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
  }
  mounted(){
    // this.getList() 
    this.$nextTick(()=>{
      if(this.attrs.calculateH){
        this.initTable();
      }
    })
  }
  initTable(){
    if(!this.$refs[this.tableID]){
      this.calculateCount ++;
      if(this.calculateCount > 5){
        return
      }
      setTimeout(()=>{
        this.initTable()
      },500) 
      return
    }
    let fHeight = 0;
    let tHeight = 0;
    let vHeight = (this as any).$el.offsetHeight;
    if(this.$refs[this.searchID] && !this.hideSearch){
      fHeight = (this.$refs[this.searchID] as any).$el.offsetHeight + 32 + 8;
    }
    if(this.$refs[this.toolID]){
      tHeight = (this.$refs[this.toolID] as any).$el.offsetHeight + 16;
    }
    if(this.config.table && vHeight > 0){
      const h = vHeight - 32 - fHeight - tHeight - 48;
      this.config.table.attr.height = h;
      if(this.$refs[this.tableID]){
        (this.$refs[this.tableID] as any).recalculate();
      }
    }
  }
  search(){
    (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0});
    this.$emit('search');
    // this.searchHandle()
  }
  detail(row:any){
    this.$emit('detail',row);
    if(this.$refs[this.formID]){
      (this.$refs[this.formID] as any).setValue(row);
      this.modalShow = true;
    }
  }
  //清除搜索条件
  clearSearch(){
    (this.$refs[this.searchID] as any).clearValue();
  }
  resert(){
    this.resertHandle()
  }
  clickHandle(e:string){
    
    if(e == 'onAdd'){
      this.modalShow = true;
    }
    if((this as any)[e]){
      (this as any)[e]()
    }else{
      this.$emit('clickHandle',e)
    }
    if(e == 'toggleSearch'){
      this.calculateCount=0;
      setTimeout(()=>{
        this.initTable()
      },100)
    }
  }
  //弹窗工具栏
  modalHandle(e:string){
    if(e == 'onReturn'){
      this.modalShow = false;
      (this.$refs[this.formID] as any).clearValue();
    }else{
      this.$emit('modalHandle',e)
    }
  }
  closeModal(){
    this.modalShow=false;
  }
  getSelectData(){
    let data:Array<any>=[];
    if(this.$refs[this.tableID]){
      data=(this.$refs[this.tableID] as any).getSelectData()
    }
    return data;
  }
  //清除选中表格
  clearCheckboxRow(){
    if(this.$refs[this.tableID]){
      (this.$refs[this.tableID] as any).clearCheckboxRow()
    }
  }
  //设置表格数据
  setTableValue(data:Array<any>){
    if(this.$refs[this.tableID]){
      (this.$refs[this.tableID] as any).setValue(data)
    }
  }
  getPage(){
    let p = {};
    if(this.$refs[this.tableID]){
      p=(this.$refs[this.tableID] as any).getPage()
    }
    return p;
  }
  setPage(page:Page){
    if(this.$refs[this.tableID]){
      (this.$refs[this.tableID] as any).setPage(page)
    }
  }
  //分页的变化
  paginationChange(page:any){
    this.$emit('pagination',page)
    // this.getList();
  }
  getFormValidate(callBack:Function){
    (this.$refs[this.formID] as any).validate().then(()=>{
      callBack()
    })
  }
  getFormValue(){
    if(this.$refs[this.formID]){
      (this.$refs[this.formID] as any)
      return (this.$refs[this.formID] as any).getValue();
    }
    return null
  }
  initFormTool(){
    if(this.$refs.toolForm){
      (this.$refs.toolForm as any).initTools();
    }
  }
  onChangeRow(row:any){
    this.$emit('onChangeRow',row);
  }
}
</script>

<style lang="scss" scoped>
.module-view{
  width: 100%;
  box-sizing: border-box;
  padding:  16px;
  position: relative;
  .view-modal{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding: 16px;
    background-color: #FFF;
    z-index: 999;
    .view-form{
      width: 100%;
      height: calc(100% - 48px);
      overflow-y: auto;
    }
  }
  .search{
    width: 100%;
    padding-bottom: 8px;
    .search-btn{
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
  .tool-box{
    width: 100%;
    padding-bottom:16px;
  }
  .module-main{
    width: 100%;
    display: flex;
    .table{
      width: 100%;
    }
  }
}
</style>