guzhh基于Vue3、Naive UI、JavaScript的表单生成器，支持常用组件
当前仓库主要是借鉴和
抄（学）了LvHuaiSheng大佬的 naiveui-form-generate，在此特别提出感谢
当前仓库主要包含两个组件，分别为表单设计器、表单渲染器
表单设计器 form-design
表单渲染器 form-render
结合服务端的表单渲染器 server-form-render
快速使用
安装依赖
# npm
npm init vue@latest axios naive-ui vuedraggable@next @guzhh/custom-form --save
# yarn
yarn add vue@latest axios naive-ui vuedraggable@next @guzhh/custom-form
# pnpm
pnpm install vue@latest axios naive-ui vuedraggable@next @guzhh/custom-form表单设计器 form-design
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| widgetFormJson | String | 见下方 | 需要传递符合规范的的数据，最好是表单设计器自己生成的数据，其他自定义数据可能导致表单设计器报错 |
| saveText | string | 生成JSON | 保存表单设计按钮的文字 |
| on-ok | ()=> void | | 点击保存按钮触发的事件 |
widgetFormJson 说明
export const widgetForm = {
list: [],
config: {
size: "medium", // 表单尺寸 'small' | 'medium' | 'large'
hideRequiredMark: false, // 是否展示必填的星号
groupType: "radioGroup",
inline: false, // 是否展示为行内表单
labelAlign: "left", // 标签的文本对齐方式 'left' | 'right'
labelWidth: "auto", // 标签的宽度
labelPlacement: "top", // 标签显示的位置 'left' | 'top'
showLabel: true, // 是否展示标签
requireMarkPlacement: "left", // 必填星号的位置
customFunc: "console.log(view)\nconsole.log(form)", // 表单设计者自定义的函数
mountedFunc: "console.log(view)\nconsole.log(form)", // 表单渲染完成执行的函数
beforeSubmit: "console.log(view)\nconsole.log(form)", // 表单提交前执行的函数
afterSubmit: "console.log(view)\nconsole.log(form)" // 表单提交后执行的函数
},
/**
* 根据表单字段key获取表单项配置
* @param modelKey
* @returns {null}
*/
getWidget(modelKey) {
let widget = null;
this.list.forEach(value => {
if (value.model === modelKey) {
widget = value;
} else if (value.type === "grid") {
value.columns.forEach(column => {
column.list.forEach(val => {
if (val.model === modelKey) {
widget = val;
}
});
});
}
});
return widget;
},
/**
* 获取表单字段key获取表单项得分
* @param modelKey
*/
getWidgetScores(modelKey) {
const widget = this.getWidget(modelKey);
if (widget.type === "radio" || (widget.type === "select" && widget.options.multiple === false)) {
const selectedOptions = widget.options.options.find(option => option.value === widget.options.defaultValue);
if (selectedOptions) {
return typeof selectedOptions.score === "number" ? selectedOptions.score : 0;
}
return 0;
}
return 0;
},
/**
* 计算表单总分
* @returns {number}
*/
getTheTotalScore() {
let fraction = 0;
const calculateTheScore = list => {
for (let index = 0; index < list.length; index++) {
const { model } = list[index];
// 判断是否存在绑定key
if (!model) {
return;
}
// 判断是否是否是栅格组件
if (list[index].type === "grid") {
// 如果是则递归调用
list[index].columns.forEach(col => calculateTheScore(col.list));
} else {
// eslint-disable-next-line no-lonely-if
if (list[index].type === "radio" || (list[index].type === "select" && list[index].options.multiple === false)) {
const selectedOptions = list[index].options.options.find(option => option.value === list[index].options.defaultValue);
if (selectedOptions) {
fraction += typeof selectedOptions.score === "number" ? selectedOptions.score : 0;
}
}
}
}
};
calculateTheScore(this.list);
return fraction;
}
};方法
| 名称 | 类型 | 说明 |
|---|---|---|
| getJson | () => Object | 获取表单设计器设计出来的json |
表单渲染器 form-render
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | naiveui.widgetForm | 见上方widgetForm说明 | 表单设计器设计出来的json |
| value | Object | {} | 表单绑定的值，一般用结构化存储 |
| disabled | Boolean | false | 是否禁用表单 |
方法
| 名称 | 类型 | 说明 |
|---|---|---|
| getData | Promise() | 校验表单并获取表单填写的值 |
| reset | ()=>void | 重置表单 |
| handleValidateForm | Promise() | 手动验证表单输入 |
| getWidgetFormData | Promise() | 获取整个表单渲染json,并且包含填写的值 |
| calculateTheScore | ()=>Number | 计算当前表单得分 |
| executeustomFunc | ()=>{} | 执行自定义函数, 函数返回具体看自定义函数如何编写 |
结合服务端的表单渲染器 server-form-render
这个渲染器集成了更加模板id获取表单填报id等自动渲染表单，同时基础成自动提交表单，自动执行自定义函数，对外暴露生命周期等等
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| baseUrl | String | 无 | 表单对接后台请求的服务跟地址 |
| tempId | String | 无 | 在盘古通用表单服务中设计保存的模板ID |
| formData | String | 无 | 表单提交后返回的 表单填写后保存全部数据的ID：formAllId、表单填写后保存全部填写值的ID：formValId 格式：{ formAllId: '', formValId: '' } |
| params | Object | 无 | 要传递给表单设计器的值，注意：通过value传递的值需要在设计表单时定义一个相同key的表单项，否则可能导致在最后存储表单填写数据时无法拿到传递的值。同时在编辑表单时传递value则可能会导致表单原来填写的相同key的值被覆盖 使用场景：例如当设计的表单中有姓名（name）字段时，不想让用户进行手动填写，直接用数据库中的值进行填充值进行填充则传递 :params="{name:'张三'}" |
| disabled | Boobean | false | 是否禁用表单 |
| customSubmit | Boobean | false | 是否自定义提交按钮 |
钩子函数
| 方法名 | 签名 | 说明 | |
|---|---|---|---|
| mounted | (event) => void | 表单渲染完成执行调用的钩子函数 event：执行 表单提交前函数 返回的值 |
|
| beforeSubmit | （event）=> void | 点击表单提交按后，调用验证表单成功后，调用表单提交接口前，调用的钩子函数 event：执行 渲染成功执行函数 返回的值 |
|
| submitSuccess | ({submitData, funcData}) => void | 表单提交成功后调用的钩子函数 submitData： 表单提交返回的结果，一般为 formAllId 和 formValId funcData：调用 表单提交后函数 返回的值 |
|
| submitError | ({errorData,funcData}) => void | 表单提交失败调用的钩子函数 errorData：提交失败返回的错误信息 funcData：调用 表单提交后函数 返回的值 |
方法
| 方法名称 | 方法签名 | 说明 |
|---|---|---|
| executeustomFunc | ()=> | 手动调用执行定义的自定义函数 |
| resetForm | () => void | 重置表单数据 |
| submitData | () => void | 提交表单 |
使用示例
<template>
<server-form-render
@beforeSubmit="beforeSubmit"
@mounted="renderMounted"
@submit-error="submitError"
@submit-success="submitSuccess"
temp-id="1658722046437560320"
:formData="{ formAllId: '1659405163448266752', formValId: '1659405163599261696' }"
base-url="http://192.168.1.88:8600/panku-forms-server"
/>
</template>
<script setup>
import ServerFormRender from "@/component/server-form-render/index.vue";
/**
* 表单渲染完成
* @param result
*/
const renderMounted = result => {
console.log("-----表单渲染完成------", result);
};
/**
* 表单提交前执行的回调
* @param result
*/
const beforeSubmit = result => {
console.log("---------表单提交前执行的回调--------", result);
};
/**
* 表单提交失败
*/
const submitError = result => {
console.log("--------表单提交失败-------", result);
};
/**
* 表单执行成功回调
* @param result
*/
const submitSuccess = result => {
console.log("--------表单执行成功回调-------", result);
};
</script>