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

<template>
  <div class="bill">
    <div class="bill-left">
      <div class="bill-tab" :style="{width:closeTab?0:'200px'}">
        <div class="title">导航</div>
        <div class="bill-nav" v-if="sourceConfig" :class="{'onBill':showTab == 'source'}" @click="tabChange('source')">引单</div>
        <div class="bill-nav" v-if="billConfig" :class="{'onBill':showTab == 'bill'}" @click="tabChange('bill')">单据</div>
        <div class="bill-nav" v-if="smtConfig" :class="{'onBill':showTab == 'smt'}" @click="tabChange('smt')">已提交</div>
        <div class="bill-nav" v-if="draftsBoxConfig" :class="{'onBill':showTab == 'draftsBox'}" @click="tabChange('draftsBox')">草稿箱</div>
        <div class="bill-nav" v-if="allConfig" :class="{'onBill':showTab == 'all'}" @click="tabChange('all')">综合查询</div>
        <div class="bill-nav" v-if="recycleBinConfig" :class="{'onBill':showTab == 'recycleBin'}" @click="tabChange('recycleBin')">回收站</div>
        <div class="bill-nav" v-for="(item,index) of customs" :class="{'onBill':showTab == item.name}" @click="tabChange(item.name)" :key="index">{{item.label}}</div>
      </div>
      <div class="close" @click="closeTab = !closeTab">
        <i class="el-icon-back" v-if="!closeTab"></i>
        <i class="el-icon-right" v-if="closeTab"></i>
      </div>
    </div>
    <div class="bill-main">
      <!-- 引单 -->
      <div class="bill-box" v-if="sourceConfig" :class="{'on-show':showTab == 'source'}">
        <el-tabs v-model="activeSource">
          <el-tab-pane v-for="(item,index) of sourceConfig" :key="index" :label="item.title" :name="'source'+index">
            <bill-module :propConfig="item" :ref="'source_'+index" @clickHandle="clickHandle($event,'source_'+index)" @search="search($event,'source_'+index)"  
            @resert="resert('source_'+index)" @pagination="paginationChange($event,'source_'+index)" @detail="detail($event,'source_'+index)" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 单据 -->
      <div class="bill-box" v-if="billConfig" :class="{'on-show':showTab == 'bill'}">
        <div class="bill-tool" v-if="billConfig.tool">
          <by-tool ref="billTool" :propConfig="billConfig.tool" @clickHandle="clickHandle($event,'bill')" />
        </div>
        <div class="form" v-if="billConfig.form">
          <by-form ref="billForm" :propConfig="billConfig.form" />
        </div>
        <template v-if="billConfig.tableConfig && billConfig.tableConfig.length > 0">
          <div class="bill-table" v-for="(item,index) of billConfig.tableConfig" :key="index">
            <div class="table-title" v-if="item.title">{{ item.title }}</div>
            <div class="table-tool" v-if="item.tool">
              <by-tool :ref="'tableTool_'+index" :propConfig="item.tool" @clickHandle="clickHandle($event,'billTable_'+index)" />
            </div>
            <div class="table" v-if="item.table">
              <by-table :propConfig="item.table" :ref="'billTable_'+index" />
            </div>
          </div>
        </template>
        
      </div>
      <!-- 已提交 -->
      <div class="bill-box" v-if="smtConfig" :class="{'on-show':showTab == 'smt'}">
        <bill-module :propConfig="smtConfig" ref="smt" @clickHandle="clickHandle($event,'smt')" @search="search($event,'smt')" 
        @resert="resert('smt')" @pagination="paginationChange($event,'smt')" @detail="detail($event,'smt')" />
      </div>
      <!-- 草稿箱 -->
      <div class="bill-box" v-if="draftsBoxConfig" :class="{'on-show':showTab == 'draftsBox'}">
        <bill-module :propConfig="draftsBoxConfig" ref="draftsBox" @clickHandle="clickHandle($event,'draftsBox')" @search="search($event,'draftsBox')" 
        @resert="resert('draftsBox')" @pagination="paginationChange($event,'draftsBox')" @detail="detail($event,'draftsBox')" />
      </div>
      <!-- 综合查询 -->
      <div class="bill-box" v-if="allConfig" :class="{'on-show':showTab == 'all'}">
        <bill-module :propConfig="allConfig" ref="all" @clickHandle="clickHandle($event,'all')" @search="search($event,'all')" 
        @resert="resert('all')" @pagination="paginationChange($event,'all')" @detail="detail($event,'all')" />
      </div>
      <!-- 回收站 -->
      <div class="bill-box" v-if="recycleBinConfig" :class="{'on-show':showTab == 'recycleBin'}">
        <bill-module :propConfig="recycleBinConfig" ref="recycleBin" @clickHandle="clickHandle($event,'recycleBin')" @search="search($event,'recycleBin')" 
        @resert="resert('recycleBin')" @pagination="paginationChange($event,'recycleBin')" @detail="detail($event,'recycleBin')" />
      </div>
      <!-- 插槽 -->
      <div class="bill-box" v-for="(item,index) of customs" :key="index" :class="{'on-show':showTab == item.name}">
        <slot :name='item.name'></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
/**
 config:{
  attr:{
    activeName:'' //tabs标签值
  },
  source:[ //引单
    {
      title:'', //标题
      search:{}, //表单配置
      tool:{},  //工具栏配置
      table:{} //表格配置
    }
  ],
  bill:{ //单据
    form:{}, //表单配置
    tool:{},  //工具栏配置
    tableConfig:[ //表格配置
      {
        title:'',
        tool:{} //表格工具栏
        table:{}
      }
    ] 
  },
  smt:{ //已提交
    search:{}, //表单配置
    tool:{},  //工具栏配置
    table:{} //表格配置
  },
  draftsBox:{ //草稿箱
    search:{}, //表单配置
    tool:{},  //工具栏配置
    table:{} //表格配置
  },
  all:{}, //综合查询（配置同上）
  recycleBin:{} //回收站（配置同上）
 }
 */
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
import billModule from "./billModule.vue";
@Component({components:{billModule}})
export default class ByBill extends VueViews {
  showTab="bill"
  closeTab = false
  activeSource='source0'
  //引单
  get sourceConfig(){
    return this.config?.source ? this.config.source : null;
  }
  //单据配置
  get billConfig(){
    return this.config?.bill ? this.config.bill : null;
  }
  //已提交配置
  get smtConfig(){
    return this.config?.smt ? this.config.smt : null;
  }
  //草稿箱配置
  get draftsBoxConfig(){
    return this.config?.draftsBox ? this.config.draftsBox : null;
  }
  //综合查询配置
  get allConfig(){
    return this.config?.all ? this.config.all : null;
  }
  //回收站配置
  get recycleBinConfig(){
    return this.config?.recycleBin ? this.config.recycleBin : null;
  }
  //自定义插槽
  get customs(){
    return this.config?.customs ? this.config.customs : []
  }

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

  setConfigAfter(){
    if(this.attrs.activeName){
      this.showTab = this.attrs.activeName
    }
  }

  //设置单据内表单和表格配置
  setBillConfig(c:any){
    if(c){
      this.config.bill = c;
      if(c.form){
        (this.$refs.billForm as any).setConfig(c.form)
      }
      if(c?.tableConfig?.length > 0){
        let n = 0;
        for(const item of c.tableConfig){
          if(item.table && this.$refs['billTable_'+n]){
            (this.$refs['billTable_'+n] as any)[0].setConfig(item.table)
          }
          n++;
        }
      }
    }
  }

  //左侧tab切换
  tabChange(t:string){
    this.showTab = t;
  }

  //工具栏
  /**
   * 
   * @param n1 方法
   * @param n2 表示哪个表格的操作
   */
  clickHandle(n1:string,n2:string){
    this.$emit(n1,n2)
  }
  search(v:any,n:string){
    this.$emit('search',{
      type:n,
      value:v
    })
  }

  resert(n:string){
    this.$emit('resert',{
      type:n
    })
  }

  //设置引单表格数据
  setSourceTableData(n:any,data:Array<any>){
    const code = 'source_'+n;
    if(this.$refs[code]){
      (this.$refs[code] as any)[0]?.setTableValue(data)
    }
  }

  //获取引单表格数据
  getSourceTableData(n:any){
    let d:Array<any>=[];
    const code = 'source_'+n;
    if(this.$refs[code]){
      d = (this.$refs[code] as any)[0]?.getTableValue()
    }
  }

  //获取引单表格选中数据
  getSourceTableSelectData(n:any){
    let d:Array<any>=[];
    const code = 'source_'+n;
    if(this.$refs[code]){
      d = (this.$refs[code] as any)[0]?.getTableValue()
    }  
    return d;
  }
  //获取引单搜索数据
  getSourceSearchData(n:any){
    let d:any = {};
    const code = 'source_'+n;
    if(this.$refs[code]){
      d = (this.$refs[code] as any)[0]?.getSearchValue()
    }  
    return d;
  }
  //设置引单分页
  setSourcePage(n:any,page:any){
    const code = 'source_'+n;
    if(this.$refs[code]){
      (this.$refs[code] as any)[0]?.setPage(page)
    }
  }

  //获取表格数据
  getTableData(n:string){
    let d:Array<any> = [];
    if(this.$refs[n]){
      d = (this.$refs[n] as any).getTableValue()
    }  
    return d;
  }
  //获取表格选中数据
  getTableSelectData(n:string){
    let d:Array<any> = [];
    if(this.$refs[n]){
      d = (this.$refs[n] as any).getTableValue()
    }  
    return d;
  }
  //获取搜索数据
  getSearchValue(n:string){
    let d:any = {};
    if(this.$refs[n]){
      d = (this.$refs[n] as any).getSearchValue()
    }  
    return d;
  }

  //获取单据数据
  getBillFormValue(){
    let v = (this.$refs.billForm as any).getValue();
    return v;
  }

  //获取单据表格已选数据
  /**
   * 
   * @param n 表示第几个单据表格，用下标表示
   */
  getBillTableSelect(n:any){
    let d:Array<any>=[];
    const code = 'billTable_'+n;
    if(this.$refs[code]){
      d = (this.$refs[code] as any)[0].getSelectData();
    }
    return d;
  }

  //设置单据表单数据
  setBillFormValue(value:any){
    if(this.$refs['billForm']){
      (this.$refs['billForm'] as any).setValue(value)
    }
  }
  //设置单据表格数据
  /**
   * 
   * @param value 表格值
   * @param n 表示第几个表格，一般是下标值
   */
  setBillTableValue(value:any,n:number){
    let code = 'billTable_'+n;
    if(this.$refs[code]){
      (this.$refs[code] as any)[0].setValue(value);
    }
  }
  //设置tab表格数据
  /**
   * 
   * @param n 
   * @param data 
   */
  setTabTableValue(n:string,data:Array<any>){
    if(this.$refs[n]){
      (this.$refs[n] as any).setTableValue(data);
    }
  }

  /**
   * 
   * @param n 
   * @param page 
   */
  //设置tab表格分页
  setTablePage(n:string,page:any){
    if(this.$refs[n]){
      (this.$refs[n] as any).setPage(page);
    }
  }

  //分页变化
  paginationChange(page:any,n:string){
    this.$emit('pagination',{page,type:n})
  }

  detail(row:any,n:string){
    this.$emit('detail',{row,type:n})
  }
}
</script>

<style lang="scss" scoped>
.bill{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 16px;
  .bill-left {
    position: relative;
    border-right: solid #EEE 1px;
    padding-right:16px;
    flex-shrink: 0;
    // box-sizing: border-box;
    .bill-tab{
      width: 200px;
      height: 100%;
      transition: all .5s;
      overflow: hidden;
    }
    .title{
      font-size: 16px;
      padding-bottom: 16px;
      width: 200px;
    }
    .bill-nav{
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      width: 200px;
      box-sizing: border-box;
      padding: 0 8px;
      cursor: pointer;
      margin-bottom: 2px;
      border-radius: 5px;
    }
    .onBill{
      background-color: #bde3f7;
    }
    .bill-nav:hover{
      background-color: #bde3f7;
    }
    .close{
      height: 22px;
      width: 22px;
      border-radius: 50%;
      border: solid #EEE 1px;
      position: absolute;
      top: 30px;
      right: -11px;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
  .bill-main{
    width: calc(100% - 16px);
    box-sizing: border-box;
    margin-left: 16px;
    position: relative;
    .bill-box{
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      z-index: -1;
      transition: all .5s;
      .bill-table{
        padding-bottom: 16px;
        width: 100%;
        .table-title{
          font-size: 14px;
          padding-bottom: 8px;
        }
      }
      .bill-table:last-child{
        padding: 0;
      }
      .bill-tool,.table-tool{
        width: 100%;
        padding-bottom: 16px;
      }
      .form{
        margin-bottom: 8px;
      }
    }
    .on-show{
      opacity: 1;
      z-index: 1;
    }
  }
}
</style>