oms/src/views/demo/form.vue

<template>
  <div class="form" >
    <by-tool :propConfig="toolConfig" @onAdd="onAdd">
      <template v-slot:tool-right><div style="width: 120px;">右边</div></template>
    </by-tool>
    <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>
    <el-button type="primary" @click="setFormData">设置数据</el-button>
    <el-button type="primary" @click="changeType">转换表单形式</el-button>
    <el-button type="primary" @click="changeBorder">加边框</el-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import zujian from './a.vue'
@Component
export default class DemoForm extends Vue {
  config={
    attr:{
      size:'small',
      height:500,
      // readonly:true,
      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:zujian
      }],
      [{
        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 HH:mm:ss',
          type:'datetime'
        }
      },{
        span:6,
        label:'插槽',
        // labelWidth:'0px',
        slot:true,
        descSlot:true,
        prop:'slotField',
      }],
      [{
        span:6,
        label:'树形',
        prop:'tree',
        component:'select-tree',
        compConfig:{
          attr:{
            label:'name',
            clearable:true,
            retConfig:{
              treeName:'name',
              treeId:'id'
            }
          },
          request:{
            url:'/maindata/maindataMaterialOrganizationCategory/treeList'
          }
        }
      }]
    ]
  }

  toolConfig={
    tools:{
      add:true,
      edit:true,
      del:true,
      export:true,
      search:true,
      refresh:true
    },
    audit:{
      add:'audit:collaborationLog:add',
      edit:'audit:collaborationLog:edit',
      delete:'audit:collaborationLog:remove',
      export:'audit:collaborationLog:export'
    },
    customTools:[
      {
        name: '新增123', icon: 'el-icon-plus', audit:[''], event:{
          click:()=>{
            console.log('新增123')
          }
        }
      }
    ]
  }
  
  onAdd(){
    console.log('点击新增')
  }
  getFormData(){
    let data = (this as any).$refs.form.getValue();
    console.log('表单数据：',data);
  }

  setFormData(){
    let data={
      name:'111',
      name2:'2222',
      name3:'333',
      select:'选项一',
      date:'2023-02-25 12:23:22',
      tree:'222'
    };
    (this as any).$refs.form.setValue(data);
  }

  changeType(){
    let c = (this as any).$lodash.cloneDeep(this.config);
    c.attr.showType = 'desc';
    (this as any).$refs.form.setConfig(c);
  }
  changeBorder(){
    let c = (this as any).$lodash.cloneDeep(this.config);
    c.attr.showType = 'desc';
    c.attr.border = true;
    (this as any).$refs.form.setConfig(c);
  }

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