简介

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

安装

npm i element-form-render

使用

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

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

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?: { // 表单设置项
        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 阻止提交 | | @on-data | data:Record<string, any> | void | 修改表单从api载入的数据,一般供slot组件初始化用 | | @on-cancel | 无 | void | 重设表单点击事件 |

3. 支持的字段类型

| 类型标识 | 类型 | 备注 | 是否实现 | 后台接收处理说明 | |-------------|--------|---------------------|------|--------------------------------------------------------| | 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 |

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}$