DevNet

Appearance

Form 表单 ​

form表单作为组件容器，输入框, 下拉选择, 多选框，Table表格 等用户输入的组件等都作为 form 子组件。

基本表单 ​

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>         
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import { useForm } from "@sdevnet/devnet-form";
import {dn} from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();
function createFormOptions() {
  const { buildFormOptions } = useForm();
  
  return buildFormOptions({
    columns: {
      fn1: {
        title: "文本框",
        type: "text",
        form: {
          component:{
            placeholder:'文本框'
          },
          rules: [{ required: true, message: "此项必填1" }],
          col:{span:24},
          tooltip:'Tooltip输入提示'
        }
      },    
      fn2: {
        title: "数字框3",
        type: "number",
        form: {
          col:{span:24},
          component:{
            precision:2,
            step:0.01     
          },
          props:{
            defaultValue:'123'
          }
        }
      },      
      fnhr:{
        type:'split',
        form:{            
            props:{               
                defaultValue:'分割线'
            }
        }
      },
      fn3:{
        title:'多行文本',
        type:'textarea',
        form:{
          col:{span:24},    
          component:{
            rows:3
          },     
          props:{
            defaultValue:'多行文本框'
          }
        }
      },
      fn4: {
        title: "复选框",
        type: "checkboxlist",
        form: {
          rules: [{ required: true, message: "必选项" }],
          col:{span:24},
          tooltip:{
            text:'必须勾选一项',
            iconColor:'red',
            position:'label'
          },
          props:{           
            options:[
                {
                    text:'复选框1',
                    id:'1'
                },
                {
                    text:'复选框2',
                    id:'2'
                },
                {
                    text:'复选框3',
                    id:'3'
                }
            ],
            events:{
              onChange:(scope)=>{
                console.log('out',scope);
              }
            }        
          }                   
        }
      },
      fn5: {
        title: "下拉框",
        type: "select",
        form: {
          col:{span:24},          
          props:{
            //selectIndex:1,         //默认选择第二项           
            options:[
                {
                    text:'下拉框1',
                    id:'1',
                    name:'abc'
                },
                {
                    text:'下拉框2',
                    id:'2'
                },
                {
                    text:'下拉框3',
                    id:'3'
                }
            ],
            events:{
              onChange:(scope)=>{
                  console.log('out',scope);
              }
            }
          }          
        }
      }
    },
    form: {
      labelWidth: "120px",      
      beforeSubmit(formScope){
        console.log(formScope)
      },
      submit({ form }) {
        console.log(form);
        dn.notification.success("自定义表单提交:" + JSON.stringify(form));
      },
      onValueChange:(e)=>{
        console.log(e);
      },
      toolbar:{
        show:true,
        position:'bottom',
        buttons:{
          add:{
            show:false
          },
          save:{
            text:'提交',
            onClick:(e)=>{
              formSubmit();
            }
          },          
          reset:{
            text:'重置',
            onClick:(e)=>{
              formReset();
            }
          }
        }
      }
    }
  });
}

function formSubmit() {
    formRef?.value?.submit();
}

function formReset() {
    dn.notification.success("重置...");
    formRef?.value?.reset();
}

export default defineComponent({
  setup() {
    const initFormOptions = () => { 
      formOptions.value = createFormOptions();
      
      formOptions.value.initData = { fid:1,fn1: "初始值",fn4:'1,3',fn5:'2' };
      return {
        formOptions,   
        formRef,
        formSubmit,
        formReset,
      };
    }
    return {
      ...initFormOptions()
    };
  }
});
</script>

Form API ​

PropsNameDescriptionTypeDefault
columns表单字段json
└ key字段名称表单字段类型json
form表单配置json
└ key原生el-form组件属性,参考原生form组件
└ rowrow 配置json
└ col列配置object
└ watchwatch监听数据
└ beforeValidate点击保存按钮，表单校验前执行操作（async）
└ validateError验证失败
└ beforeSubmit表单校验完完成后，提交前处理
└ submit点击保存按钮时执行操作
└ afterSubmit表单提交后处理
└ autoRender自动布局，false时可以自定义模板布局booleantrue
└ slots插槽内容
└ toolbar/bottombar表单工具栏json
└└ show是否显示booleanfalse
└└ title标题string
└└ subTitle子标题string
└└ subTitleClass子标题classstring
└└ position工具栏位置 top / bottomstring
└└ buttons按钮json
└└└ add新增jsononClick需要自定义实现
└└└└└ show是否显示booleanfalse
└└└ delete删除jsononClick需要自定义实现
└└└└ show是否显示booleanfalse
└└└ save保存json默认实现
└└└└ show是否显示booleanfalse
└└└ close关闭json默认实现
└└└└ show是否显示booleanfalse
└└└ key按钮keyjson
└└└└ key按钮配置,参考buttonjson
└└└└ debounce按钮防抖属性booleanfalse
└└└└ delay按钮防抖延迟number2000
└ dataBind数据绑定any
└└ sortStr排序string
└└ where条件WhereCompare[]
└└ dataSource数据源(预留)string
└ group组件分组object
└└ groupType分组类型tabs
card
collapse
layout
└└ key分组类型原生组件属性
└└ groups分组项json
└└└ key组keyjson
└└└└ label组标题string
└└└└ value组value，同keystring
└└└└ columns组内字段名称 ["fn1","fn2"]
└└└└ toolbar组内顶部工具栏json
└└└└└ title组内顶部标题string
└└└└└ subTitle组内顶部子标题string
└└└└└ subTitleClass组内顶部子标题classstring
└└└└└ buttons组内顶部按钮json
└└└└└└ key组内顶部按钮keyjson
└└└└└└└ key组内顶部按钮配置，参考原生el-button属性json
└└└└└└└ debounce按钮防抖属性booleanfalse
└└└└└└└ delay按钮防抖延迟number500

Form 事件 ​

Event nameDescription
success提交成功后
value-change更改字段值

Form Slots ​

NameDescription
formHeader表单顶部
formFooter表单底部

Form Exposes ​

NameDescriptionType
formRef原生表单 form 引用
getComponentRef获取子组件引用func
getFormData获取表单数据
true:包含子表数据，并已进行 submitValueConvert 函数转换
getValue获取字段数据func
setValue设置字段数据func
children子表formExpose(暂表格和树)
isChanged是否更改
saveData保存表单数据