@guzhh/custom-form

0.0.1-alpha.24 • Public • Published

基于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>

Package Sidebar

Install

npm i @guzhh/custom-form

Weekly Downloads

24

Version

0.0.1-alpha.24

License

ISC

Unpacked Size

6.92 MB

Total Files

8

Last publish

Collaborators

  • guzhh