oms/src/benyun/components/byBill/billModule.vue

<template>
  <div class="bill-module-box">
    <div class="bill-module-form" v-if="searchConfig" v-show="!hideSearch">
      <by-form :propConfig="searchConfig" ref="search" />
      <div class="search-btn">
        <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="resert">重置</el-button>
      </div>
    </div>
    <div class="bill-tool" v-if="toolConfig">
      <by-tool :propConfig="toolConfig" ref="tool" @clickHandle="clickHandle" />
    </div>
    <div class="table" v-if="tableConfig">
      <by-table :propConfig="tableConfig" ref="table" v-on="$listeners"  />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class BillModule extends Vue {
  config:any={}
  hideSearch = false

  @Prop()
  propConfig:any

  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
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
  }

  setConfig(c:any){
    this.config = c?c:{}
  }

  getConfig(){
    return (this as any).$lodash.cloneDeep(this.config)
  }
  //工具栏按钮点击操作
  clickHandle(n:string){
    if(n == 'toggleSearch'){
      this.hideSearch = !this.hideSearch
    }else{
      this.$emit('clickHandle',n)
    }
  }

  //获取搜索值
  getSearchValue(){
    let value:any = {}
    if(this.$refs.search){
      value = (this.$refs.search as any).getValue()
    }
    return value
  }
  //获取表格数据
  getTableValue(){
    let data:Array<any>=[];
    if(this.$refs.table){
      data = (this.$refs.table as any).getValue();
    }
    return data;
  }
  //获取已选中表格数据
  getSelectTable(){
    let data:Array<any>=[];
    if(this.$refs.table){
      data = (this.$refs.table as any).getSelectData();
    }
    return data;
  }

  search(){
    this.$emit('search',this.getSearchValue());
  }
	//清除搜索条件
	clearSearch(){
	  (this.$refs.search as any).clearValue();
	}
  resert(){
    if(this.$refs.search){
      (this.$refs.search as any).setValue({})
    }
    this.$emit('resert');
  }
  //设置表格数据
  setTableValue(data:Array<any>){
    if(this.$refs.table){
      (this.$refs.table as any).setValue(data)
    }
  }
  setPage(page:any){
    if(this.$refs.table){
      (this.$refs.table as any).setPage(page)
    }
  }
}
</script>

<style lang="scss" scoped>
.bill-module-box{
  width: 100%;
  .bill-tool{
    width: 100%;
    padding-bottom: 16px;
  }
  .bill-module-form{
    padding-bottom: 8px;
    .search-btn{
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
  
}
</style>