oms/src/views/demo/bill.vue

<template>
  <div>
    <by-bill :propConfig="config" @search="search" @onSmt="onSmt" ref="bill" @onAdd="onAdd">
      <template v-slot:cus>我是插槽</template>
    </by-bill>
    <div style="clear: both;"></div>
    <div>
      <el-button type="primary" plain @click="setSmtValue">设置已提交数据</el-button><br/>
      <el-button type="primary" plain @click="setdraftsBoxValue">设置草稿箱数据</el-button>
    </div>
    
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class BillDemo extends Vue {
  config:any={
    bill:{
      tool:{
        tools:{
          add:true,
          edit:true
        }
      },
      form:{
        attr:{
          size:'small'
        },
        columns:[
          [{
            span:6,
            label:'创建时间',
            prop:'created',
            component:'by-date-picker',
            compConfig:{
              format:'yyyy-MM-dd HH:mm:ss',
              type:'datetime'
            }
          }]
        ]
      },
      tableTool:{
        tools:{
          add:true
        }
      },
      table:{
        attr:{
          size:'mini',
          height:240,
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[{
          title:'id',
          field:'id',
          width:50
        },
        {
          title:'姓名',
          field:'name',
          width:100
        },{
          title:'操作',
          action:true,
          plugins:[{
            icon:'el-icon-edit',
            name:'编辑',
            audit:'',
            event:{
              click:(item:any) => {
                console.log('该行数据：',item)
              }
            }
          }]
        }]
      }
    },
    smt:{
      search:{
        attr:{
          size:'mini',
          rules:{
            name:[{
              required: true, message: '请输入名称', trigger: 'blur'
            }]
          }
        },
        columns:[
          [{
            span:6,
            label:'创建时间',
            prop:'created',
            component:'by-date-picker',
            compConfig:{
              format:'yyyy-MM-dd',
              type:'datetime'
            }
          }]
        ]
      },
      tool:{
        tools:{
          smt:true,
          export:true,
          search:true,
          refresh:true
        }
      },
      table:{
        attr:{
          size:'mini',
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[{
          title:'id',
          field:'id',
          width:50
        },
        {
          title:'姓名',
          field:'name',
          width:100
        },
        {
          title:'日期',
          field:'time',
          // width:200
        }]
      }
    },
    draftsBox:{
      search:{
        attr:{
          size:'mini',
          rules:{
            name:[{
              required: true, message: '请输入名称', trigger: 'blur'
            }]
          }
        },
        columns:[
          [{
            span:6,
            label:'名称',
            prop:'name',
            component:'by-input'
          }]
        ]
      },
      tool:{
        tools:{
          smt:true,
          export:true,
          search:true,
          refresh:true
        }
      },
      table:{
        attr:{
          size:'mini',
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[
        {
          title:'姓名',
          field:'name',
          width:100
        },
        {
          title:'日期',
          field:'time',
          // width:200
        }]
      }
    },
    customs:[{
      label:'自定义',
      name:'cus'
    }]
  }

  search(parames:any){
    console.log('搜索回传参数',parames);
  }
  onSmt(n:string){
    console.log(n+':工具栏执行操作onSmt')
  }
  onAdd(n:string){
    console.log(n);
  }
  setSmtValue(){
    let data:Array<any>=[{
      id:1,
      name:'张三',
      time:'2023-02-02'
    },{
      id:2,
      name:'李四',
      time:'2023-02-02'
    }];
    (this.$refs.bill as any).setTabTableValue('smt',data);
  }
  setdraftsBoxValue(){
    let data:Array<any>=[{
      name:'王五',
      time:'2023-02-02'
    },{
      name:'赵六',
      time:'2023-02-02'
    }];
    (this.$refs.bill as any).setTabTableValue('draftsBox',data);
  }
}
</script>