element-form-render

简介

写JSON创建form (适用于ElementPlus + TypeScript + Vue3)

安装

npm i element-form-render

使用

1. 首先在您的项目全局的 main.ts 中设置表单生成器axios的baseURL(主要是避免每个页面都设置)

import {setAxiosConfig,setConfig} from "element-form-render/src";
setAxiosConfig({
    timeout: 50000,
    baseURL: "https://domain.com", // 如果想在表单组件使用相对URL，需要设置 baseURL
    headers: { // 根据自己的需求设置headers，如无特殊需求可不设置
        "Authorization": "token",
        "Content-Type": "application/json"
    }
});
setConfig({
    static_url: "https://domain.com/static", // 静态资源地址，上传组件用到
    base_url: "https://domain.com", // 上传表单提交地址，上传组件
});

2. 通过本组件约定的结构定义编写JSON结构,创建表单

<template>
  <div>
    <form-render :json="json" @on-submit="handleSubmit" />
  </div>
</template>
<script setup lang="ts">
// 您可以从"element-form-render/src" 中引入本组件所有的组件、类型、类库和函数
import {FormRender} from "element-form-render/src";
import type {FormStructure} from "element-form-render/src/types";
import {reactive} from "vue";
const json = reactive<FormStructure>({
    type: "create",
    name: "test",
    title: "title", //设置为空则不显示标题
    api: "/api/form/create",// 不设置的话可以使用 @on-submit 获取表单提交的数据
    elements : [// 二维数组进行布局，第一维是行 每一行内可以放置多个组件（注意：使用了Element的24等分格，注意个数适配）
        [
            {
              type:"input",
              name:"title",
              label:"网站名称",
              validator:["required"]
            },
        ],
        [
            {
                type:"input",
                name:"website",
                label:"网站网址",
                width:"300px",
                prefix:"https://www",
                suffix:".com",
                validator:["required"]
            }
       ],
       [
            {
              type:"radio",
              name:"type",
              label:"网站类型",
              source:{
                type:"static",
                 options:[
                     {label:"门户站", value:"portal"},
                     {label:"资源站", value:"source"}
                 ]
              }
            },
            {
                type: "checkbox",
                name: "tags",
                label: "网站类型",
                source: {
                    type: "ajax",
                    options: {
                      api: "/api/dict",
                      params: {section: "site_tag"},
                      labelField: "name",
                      valueField: "id"
                    }
                }
            },
        ]
    ]
});

// 当表单 api 不设置时 定义获取数据的函数
const handleSubmit = (data) => {
    console.log(data);
}
</script>
<style scoped>
</style>

3. FormStructure 类型定义

export type FormStructure = {
    type: 'create' | 'update' | 'customer',// 当值为”update“时，表单将会自动请求api获取需要修改的数据
    name: string,
    title: string,
    elements: FormElementField[][], // 字段布局
    api?: string,// 表单数据提交URL
    primary_key?: string, // 修改数据时数据主键名
    primary_value?: string|number,// 修改数据时数据主键值
    config?: { // 表单设置项
        size?: 'default' | 'large' | 'small',
        labelWidth?: number,
        labelPosition?: 'left' | 'right' | 'top',
        showSubmit?: boolean,
        submitText?: string,
        showReset?: boolean,
        resetText?: string,
    },
    dynamicData?: Record<string, any>,// 当使用自定义字段组件时，可以通过该对象写数据
    appendData?: Record<string, any>
}

API

1. 属性

属性	类型	备注
json	FormStructure	参见类型定义

2. 事件方法

名称	参数	返回值	备注
@on-submit	data:Record<string, any>	void	提交回调（仅未设置API时可用）
:before-submit	data:Record<string, any>	data:Record<string, any> | boolean	提交前回调,可修改,函数返回后提交至api ,返回false 阻止提交
@after-submit	data:Record<string, any>	void	提交后回调
@on-data	data:Record<string, any>	void	修改表单从api载入的数据,一般供slot组件初始化用
@on-change	data:Record<string, any>	void	表单数据变化时触发
@on-cancel	无	void	重设表单点击事件

3. 实例方法

名称	参数	返回值	备注
setData	name:string | Record<string,any> , value?:any	void	设置单个或多个表单数据
setLabel	name:string, value:string	void	动态设置某个表单标签
setRequiredMark	name:string, value:string	void	设置表单标签的必填你状态
setValidator	VALIDATOR[]	void	动态设置某个字段验证器
hideField	name:string	void	隐藏某个字段
showField	name:string	void	显示某个字段
disableField	name:string	void	禁用某个字段
enableField	name:string	void	启用某个字段
doSubmit		void	手动提交数据,适用于不显示提交按钮的场景
resetForm		void	清空表单数据

4. 支持的字段类型

类型标识	类型	备注	是否实现	后台接收处理说明
input	小输入框	input[type="text"]	yes
password	密码框	password field	yes
number	数字输入框	number field	yes
select	单选框	select field	yes
radio	单选按钮组	radio	yes
checkbox	多选按钮组	checkbox	yes
switch	开关	开是1 关 0	yes
color	颜色选择器	16进制颜色	yes	'#ffffff'
date	日期选择	YYYY-MM-DD	yes
date_range	日期范围选择	YYYY-MM-DD	yes
year	年份选择	YYYY	yes
month	月份选择	YYYY-MM	yes
datetime	日期时间选择	YYYY-MM-DD HH:mm	yes
time	时间选择	HH:mm:ss	yes
textarea	多行纯文本	textarea	yes
rich_text	富文本	richtext web editor	yes
image	图片上传	single image	yes	图片地址字符串
images	图片上传	multiple images	yes	图片地址数组
file	附件上传	single file	yes	{ name:'原文件名.docx', url:'/uploads/xxxxx/xxxxxx.docx' }
files	附件上传	multiple files	yes	同上对象组成的数组
cascader	联动选择	cascader	yes
tree_select	树状单选	tree_select	yes	数据项配置参考select radio checkbox
empty	占位空元素		yes	空白占位
split	表单分组标题		yes	横线加标题 分割表单字段
slot	slot组件		yes	name 指定 >lot 名称后,<template #name>自定义内容

4. 支持的validator

require
required
string
integer
float
alpha
alphaNum
alphaDash
number
upper
lower
url
email
mobile (中国国内手机号码)
phone (座机号码)
telephone 国内固话+国内手机号(不含400 800电话)
bank_code 银行账号 (非严谨)
license_code 企业统一信用代码
chinese 汉字
amount 金额
idcard(CHN)
date
datetime
time
length:36
length:1:10
max:100
min:100
between:1:10
gt:1
gte:2
lt:2
lte:2
regexp:^\d{6}$