自定义组件

支持自定义组件

基本用法

• 编写自定义组件
• 组件注册

<template>
  <dn-page>     
    <dn-form ref="formRef" v-bind="formOptions"></dn-form>      
  </dn-page>   
</template>

<script lang="jsx">
import {ref,defineComponent, onMounted} from "vue";
import { dn, useForm } from "@sdevnet/devnet-form";
import * as _ from 'lodash-es';

const formRef = ref();
const formOptions = ref();

function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fnhr2:{
        type:'split',
        form:{
            props:{
                value:'多个组件作为一个自定义组件'
            }
        }
      },
      fn1: {
        title: "多个子组件作为一个自定义整体",
        type: "cust-form",  //自定义组件
        form: {
          col:{span:24},  
          component:{
            //组件属性，通过props或者ctx.attrs接收参数
            formProps:{fid:1,fn1:'传过来的参数'}
          }, 
          props:{ 
            type:'nolabel'          
          },
          submit:false    
        }         
      },
      fnhr:{
        type:'split',
        form:{
            props:{
                value:'v-model 自定义组件'
            }
        }
      },
      fnModel:{
        title: "v-model 单个组件",
        type: "cust-ctl",    //自定义组件
        form: {
          col:{span:24},  
          component:{
            //组件属性，通过ctx.attrs接收，参考原生属性
            'v-model': formRef.value?.form?.fnModel
          } 
        }       
      }
    },
    form:{
      labelWidth:'135px',     
      beforeSubmit(formScope){
          //本表单数据
          console.log(formScope);
      },
      submit({ form }) {
        //ret 包括子组件
        const ret = getFormData();
        //去除了不需要提交的
        dn.notification.success("自定义表单提交:" + JSON.stringify(ret));
        console.log(ret);
        //return false; //返回false表示失败了
      },
      toolbar:{
        show:true,
        title:'自定义组件类型' ,        
        position:'top',
        buttons:{
          save: {
            show:true,
            text:'提交',
            type:'primary',
            click:(e)=>{               
                formSubmit();
            }
          },         
          close:{
            text:'关闭',
            show:true,
            //order:99,
            click:(e)=>{
              dn.showMsg({ message:'关闭按钮...'});
            }
          }
        } 
      },      
    }
  });
}


function formSubmit() {
  //包含了本表单的数据
  formRef?.value?.submit();
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,fnModel:'666'};

  return {
    formOptions,   
    formRef,
    formSubmit
  };
}

//子组件数据合并
const getFormData=()=>{   
  //获取子组件
  const custRef =  formRef.value.getComponentRef('fn1'); 
  //模拟修改
  // custRef.formRef.setValue('fn1','外部修改了参数值');
  //获取子组件的值
  const val = custRef.getFormData();
  //合并数据
  const ret = _.merge(formRef.value.getFormData(),val);
  return ret;
}

export default defineComponent({
setup() {
  onMounted(()=>{
      
  });
  return {
    ...initFormOptions(),
    getFormData
  };
}
});
</script>

组件注册

• 项目集成参考 项目集成
• CustComponents.ts 文件里导入、导出组件，框架会自动注册

import custform from "../../component/comptype/custform.vue";
import custctl from "../../component/comptype/custctl.vue";

export default {
    'cust-form':custform,
    'cust-ctl':custctl
}