Hamlet-Web

Appearance

配置项 ​

js
import { defineFRConfig } from '@hamlet/render'

const config = defineFRConfig({
    // 具体配置项
})
import { defineFRConfig } from '@hamlet/render'

const config = defineFRConfig({
    // 具体配置项
})

目前 form-render 支持以下配置项。

参数描述类型默认值是否必填
type表单类型，可选值- 弹窗 dialog，抽屉 drawer，表单 formstringdialog是
title标题string是
rowKey数据键值，内部用来区分是新增还是编辑stringid
maxHeight内容最大高度，type 值为 dialog或 drawer时生效number
size用于控制该表单内组件的尺寸, 可选值 small，default，largestringdefault
popupSize弹窗大小，可选值 small，middle，largestringsmall
width弹窗宽度 优先级大于 popupSizenumber
column每行几列，可选值 1，2，3，4number1
rowGutter栅格间隔number
labelPosition标签对齐方式，可选值 right，top，leftstring
labelWidth标签长度string | number
readonly是否只读boolean
api请求地址API | {add : API, edit: API}
body内容FRItem[]是
okText确认按钮文字string
cancelText取消按钮文字string
extraButtons弹窗底部按钮扩展IFRButton[]
onErrorResponse请求响应错误回调(error: any) => void
onBeforeSubmit提交前回调函数，可处理表单数据，type=form 时无效(formData: AnyObject) => AnyObject
onAfterSubmit提交后回调函数，type=form 时无效(res: AnyObject) => void
watch表单监听FRWatch
dynamic是否可动态添加boolean

IFRButton

ts
interface IFRButton {
    /**
     * 标签名
     */
    label: string
    /**
     * 按钮类型
     */
    type?: 'primary' | 'warning' | 'danger' | 'success' | 'info'
    onClick?: () => void
}
interface IFRButton {
    /**
     * 标签名
     */
    label: string
    /**
     * 按钮类型
     */
    type?: 'primary' | 'warning' | 'danger' | 'success' | 'info'
    onClick?: () => void
}

FRItem ​

TIP

此处只列出通用的一些属性，更多参数请参考 type 对应表单控件，这里不做详细描述。

参数描述类型默认值是否必填
type控件类型keyof typeof ComponentTypeEnuminput
component自定义组件渲染() => Component | Component
prop键名string是
label标签名称string是
tooltip提示string
colSpan布局占位，可选值 1,2,3,4number
slot是否开启自定义插槽boolean
placeholder占位文本string
required是否必填boolean | () => boolean
rules校验规则，参考 element-plus rulesFormItemRule
disabled是否禁用boolean | (formData: AnyObject) => boolean
clearable是否可清空boolean
visible是否显隐(formData: AnyObject) => boolean
body子级FRItem[]

FRWatch ​

key - 表单内的值，当值变更时触发。

ts
export interface FRWatch {
    [key: string]: (val: any) => void | {
        immediate?: boolean
        handler: (val: any) => void
    }
}
export interface FRWatch {
    [key: string]: (val: any) => void | {
        immediate?: boolean
        handler: (val: any) => void
    }
}

ComponentTypeEnum

类型描述
pane面板
input文本
textarea文本域
inputNumber数字输入框
select选择器
dictSelect字典选择器
datePicker日期选择器
switch开关
comboGrid组合表格
radio单选框
timePicker时间选择器
dynamicTable动态表格
dynamicForm动态表单

FormRender Exposes ​

方法名说明类型
show用于表单类型为弹窗 dialog，抽屉 drawer 弹出，可传入表单初始值(formData?: AnyObject) => void
close表单类型为弹窗 dialog或抽屉 drawer 时, 可主动触发关闭操作来关闭表单。() => void
validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。(formData: AnyObject): Promise<void>
setFieldValue设置表单的值（该值将直接传入 form store 中。）(name: string, value: any) => void
setFieldsValue设置表单的值（该值将直接传入 form store 中。）。如果你只想修改 Form 中单项值，请通过 setFieldValue 进行指定(values) => void
getFieldsValue用于获取表单中所有已填写项的值。如果传入参数，则获取指定项的值；如果为空，则获取所有已填写项的数据。(name: string) => void
resetFields重置一组字段到 initialValues(fields?: AnyObject) => void
clearValidate清理某个字段的表单验证信息(props?:any[] | undefined) => void
vue
<template>
    <h-form-render :config="formConfig" ref="formRef"></h-form-render>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { defineFRConfig } from '@hamlet/render'

const formRef = ref()

onMounted(() => {
    formRef.value.setFieldValue('orderId', 'xxx')
})

const formConfig = defineFRConfig({
    type: 'modal',
    body: [
        {
            prop: 'orderId',
            label: '订单号',
            required: true,
            type: 'input',
            maxlength: 24,
        },
    ],
})
</script>
<template>
    <h-form-render :config="formConfig" ref="formRef"></h-form-render>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { defineFRConfig } from '@hamlet/render'

const formRef = ref()

onMounted(() => {
    formRef.value.setFieldValue('orderId', 'xxx')
})

const formConfig = defineFRConfig({
    type: 'modal',
    body: [
        {
            prop: 'orderId',
            label: '订单号',
            required: true,
            type: 'input',
            maxlength: 24,
        },
    ],
})
</script>