oms/src/benyun/components/byTable/byTable.vue

<template>
  <div class="by-table">
    <vxe-table
      ref="table"
      :data="value"
      row-id="key_Id"
      :size="attrs.size"
      resizable
      :height="attrs.height"
      :max-height="attrs.maxHeight"
      :stripe="attrs.stripe"
      :border="attrs.border"
      :align="attrs.align"
      :tree-config="{transform: attrs.transform, rowField: attrs.rowField, parentField: attrs.parentField}"
      :row-config="{isHover: true}"
      style="width: 100%">

      <vxe-column v-if="attrs.checkbox" type="checkbox" width="50" fixed="left" />
      <vxe-column v-if="attrs.radio" type="radio" width="50" fixed="left" />
      <vxe-column v-if="attrs.seq" type="seq" title="序号" :width="attrs.seqWidth?attrs.seqWidth:50" fixed="left" :tree-node="attrs.treeNodeSeq" />
      <template v-for="(item,index) in columns">
        <vxe-column
          v-if="item.action"
          :key="index"
          :title="item.title"
          :width="item.width"
          fixed="right"
        >
          <template #default="{ row }">
            <template v-if="item.plugins">
              <span class="col-action" 
                v-for="(pluginsItem,_index) of item.plugins" 
                :key="'plu'+_index" 
                v-hasPermi="[item.audit]" 
                @click="pluginClick(pluginsItem,row)">
                <i v-if="pluginsItem.icon" :class="pluginsItem.icon" ></i>
                {{ pluginsItem.name }}
              </span>
            </template>
          </template>
        </vxe-column>
        <vxe-column
          v-if="!item.action"
          :key="index"
          :field="item.field"
          :title="item.title"
          :width="item.width"
          :fixed="item.fixed"
          :align="item.align"
          :tree-node="item.treeNode"
        >
          <template #default="{ row }">
            <slot v-if="item.slot" :name='item.field' :row='row'></slot>
            <component v-else-if="item.component" :is="item.component" :propConfig="item.compConfig" :propValue="row" />
            <span v-else>{{ row[item.field] }}</span>
          </template>
        </vxe-column>
    </template>
    </vxe-table>
    <div class="page">
      <el-pagination
        v-if="page.total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="attrs.pageSizes"
        :page-size="attrs.pageSize?attrs.pageSize:20"
        :layout="attrs.layoutPage?attrs.layoutPage:'total, sizes, prev, pager, next, jumper'"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
/**
  config:{
    attr:{
      size: medium / small / mini  //尺寸
      height: ''  //高度
      maxHeight:''  //最大高度
      stripe: true/false  //是否为斑马纹
      border: true/false  //是否带有纵向边框
      seq:true/false  //显示序号
      seqWidth:''  //序号宽度
      checkbox: true/false  //显示复选框
      radio:true/false  //显示单选框
      align: left/center/right  //对齐方式
      transform: true/false  //开启自动将列表转成树结构
      rowField:''  row对应id
      parentField:''  row父id
      pageSize:''  //分页条数
      pageSizes:[]  //每页显示个数选择器的选项设置
      layoutPage:''  //分页组件布局
    },
    columns:[{
      title:''  //标题
      field：''  //字段名
      width:''  //列宽
      fixed: true, left, right  // 固定列
      action： true/false 是否操作列
      plugins:操作列执行
      component:''  //组件
      compConfig:{} //组件配置
      slot: true/false  //是否插槽
      tree-node: true/false  //展开节点
    }],
    request:{}
  }

 */
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'

interface Page{
  pageNo?:number,
  pageSize?:number,
  total?:number
}

@Component
export default class ByTable extends VueViews {
  value:Array<any>=[];
  page = {
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }

  get columns(){
    return this.config?.columns ? this.config.columns : [];
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
  }
  mounted(){
    this.$nextTick(()=>{
      if(this.requestConfig){
        this.request();
      }
    })
  }

  setConfigAfter(){
    if(this.attrs.pageSize){
      this.page.pageSize = this.attrs.pageSize;
    }
  }

  //设置分页
  setPage(page:Page){
    if(page.pageNo){
      this.page.pageNo = page.pageNo;
    }
    if(page.pageSize){
      this.page.pageSize = page.pageSize;
    }
    this.page.total = page.total?page.total:0;
    
  }

  getPage(){
    return this.page
  }
  //每页条数发生变化
  handleSizeChange(val:number) {
    if (this.page.pageSize * val > this.page.total) {
      this.page.pageNo = 1
    }
    this.$emit('pagination',{pageNum:this.page.pageNo,pageSize:this.page.pageSize})
  }
  //当前页发生变化
  handleCurrentChange(val:number) {
    this.page.pageNo = val;
    this.$emit('pagination',{pageNum:this.page.pageNo,pageSize:this.page.pageSize})
  }

  //操作列点击操作
  pluginClick(config:any,row:any){
    if(config?.event?.click){
      delete row.key_Id;
      config.event.click(row)
    }
  }

  //获取表格选中的数据
  getSelectData() {
    let data: Array<any> = []
    if (this.$refs.table) {
      if (this.attrs.radio && (this.$refs.table as any).getRadioRecord()) {
        data = [(this.$refs.table as any).getRadioRecord()]
      } 
      if(this.attrs.checkbox && (this.$refs.table as any).getCheckboxRecords()){
        data = (this.$refs.table as any).getCheckboxRecords()
      }
    }
    for(let item of data){
      delete item.key_Id;
    }
    return data
  }

  setValue(data:Array<any>){
    this.value = data ? data : [];
  }

  getValue(){
    let d = (this as any).$lodash.cloneDeep(this.value);
    for(let item of d){
      delete item.key_Id;
    }
    return d;
  }


  request(){
    if(!this.requestConfig || !this.requestConfig.url){
      return
    }

    let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
    parame.success = (res:any) => {
      if(res.data){
        this.setValue(res.data);
      }
    }
    parame.fail = (err:any) => {}
    this.requestHandle(parame);
  }
}
</script>

<style lang="scss" scoped>
.by-table{
  width: 100%;
  .page{
    width: 100%;
    display: flex;
    padding-top: 16px;
    justify-content: flex-end;
  }
}
.col-action{
  color: #0089ff;
  cursor: pointer;
  padding: 0 4px;
}
</style>