oms/src/views/demo/form.vue

<template>
  <div class="form" >
    <by-tool :propConfig="toolConfig" @onAdd="onAdd" :customTools="customTools" />
    <by-form :propConfig="config" ref="form">
      <template v-slot:slotField='{ value }'>这是插槽:{{ value.name }}</template>
    </by-form>
    <el-button type="primary" @click="getFormData">获取数据</el-button>
    <el-button type="primary" @click="getFormVali">获取表单验证</el-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import a from './a.vue'
@Component
export default class DemoForm extends Vue {
  config={
    attr:{
      size:'small',
      height:500,
      rules:{
        name:[{
          required: true, message: '请输入名称', trigger: 'blur'
        }]
      }
    },
    columns:[
      [{
        span:6,
        label:'名称',
        prop:'name',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入名称',
            clearable:true
          }
        }
      },{
        span:6,
        label:'名称2',
        prop:'name2',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入名称',
            clearable:true
          }
        }
      },{
        label:'测试',
        prop:'name3',
        // required:true,
        component:a
      }],
      [{
        span:6,
        label:'下拉框',
        prop:'select',
        rules:[
          { required: true, message: '请选择数据', trigger: 'change' }
        ],
        component:'by-select',
        compConfig:{
          attr:{
            placeholder:'请选择数据',
            clearable:true,
            data:[{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }]
          }
        }
      },{
        span:6,
        label:'时间',
        prop:'date',
        rules:[
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        component:'by-date-picker',
        compConfig:{
          format:'yyyy-MM-dd',
          type:'date'
        }
      },{
        span:6,
        label:'插槽',
        slot:true,
        prop:'slotField',
      }]
    ]
  }

  toolConfig={
    tools:{
      onAdd:true,
      onUpdate:true,
      onDelete:true,
      onExport:true,
      onRefresh:true
    }
  }
  customTools:Array<any>=[
    {
      name: '新增123', icon: 'el-icon-plus', event:{
        click:()=>{
          console.log('新增123')
        }
      }
    }
  ]
  onAdd(){
    console.log('点击新增')
  }
  getFormData(){
    let data = (this as any).$refs.form.getValue();
    console.log('表单数据：',data);
  }

  getFormVali(){
    (this as any).$refs.form.validate().then(()=>{
      console.log('验证通过')
    }).catch(()=>{
      console.log('验证不通过')
    });
  }
}
</script>
<style lang="scss" scoped>
.form{
  width: 100%;
}
</style>