@guzhh/custom-form v0.0.1-alpha.24

当前仓库主要是借鉴和抄（学）了 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 说明

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

方法

表单渲染器 form-render

属性

方法

结合服务端的表单渲染器 server-form-render

这个渲染器集成了更加模板id获取表单填报id等自动渲染表单，同时基础成自动提交表单，自动执行自定义函数，对外暴露生命周期等等

属性

钩子函数

方法

使用示例

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