简介

YstFormDesigner基于 Vue3 的可视化表单设计器，使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：e-designer 设计器和 e-builder 生成器。

功能

• [x] 拖拽设计
• [x] 自定义 actionBar
• [x] 布局组件扩展
• [x] 自定义组件扩展
• [x] 事件扩展
• [x] 组件懒加载
• [x] 完善布局
• [x] 组件属性自定义
• [x] 支持不同 UI
• [x] 插件扩展

核心组件介绍

EDesigner 设计器

EDesigner 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。

API

| 参数 | 说明 | 类型 | | ------------- | --------------------------------------------------------- | ------------------- | | disabledZoom | 禁止缩放功能 | boolean | | hiddenHeader | 隐藏头部 | boolean | | defaultSchema | 默认defaultSchema，初始化和重置设计器将以该数据为基础模版 | PageSchema | | uploadImgFun | 上传图片的方法 | UploadImgFun | | extraInfo | 额外传入的数据，例如默认某些字段的值 | Record<string, any> |

函数

| 函数名称 | 说明 | 参数 | 返回值 | | -------------- | ------------ | ----------------- | ---------- | | setData | 设置json数据 | PageSchema | - | | getData | 获取json数据 | - | PageSchema | | reset | 清空表单 | - | - | | setFormSetting | 设置表单信息 | SelfDefinedFormVo | - |

事件

| 事件名称 | 说明 | 参数 | | -------- | ---------------------------------- | ----------------------------- | | ready | 组件（包含异步组件）加载完成后触发 | - | | save | 点击保存按钮时触发 | PageSchema，SelfDefinedFormVo | | reset | 点击清空按钮时触发 | PageSchema | | leave | 点击离开按钮时触发 | - |

插槽

| 插槽名称 | 说明 | | ------------------- | -------------------- | | header | 头部内容 | | header-prefix | 头部左侧内容 | | header-title | 头部标题 | | header-right-prefix | 头部右侧前置内容 | | header-right-suffix | 头部右侧后置内容 | | header-right-action | 头部右侧内容 | | form-action | 左边表单设置后置内容 |

EBuilder 生成器

EBuilder 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。

API

| 参数 | 说明 | 类型 | | ------------ | ------------------------------------ | ------------------- | | pageSchema | json数据 | PageSchema | | disabled | 禁用表单项 | boolean | | uploadImgFun | 上传图片的方法 | UploadImgFun | | extraInfo | 额外传入的数据，例如默认某些字段的值 | Record<string, any> |

函数

| 函数名称 | 说明 | 参数 | | --------------- | ---------------------- | ------------- | | setData | 设置表单数据 | FormDataModel | | getData | 获取表单数据 | - | | validate | 验证表单并获取表单数据 | - | | getFormInstance | 获取表单实例 | - | | getFormInfo | 获取表单提交后展示信息 | FormInfoVo | | handleReset | 清空json数据 | - |

事件

| 事件名称 | 说明 | 参数 | | -------- | ---------------------------------- | ---- | | ready | 组件（包含异步组件）加载完成后触发 | - |

安装 yst-form-designer

npm i yst-form-designer

yst-form-designer 目前支持以下 UI

• element-plus

选择 UI 组件库

选择 element-plus

安装ui框架依赖

npm i element-plus

main.ts 或者 main.js 引入注册组件

// 引入yst-form-designer样式
import "yst-form-designer/dist/style.css";

// 引入Element plus样式
import "element-plus/dist/index.css";

import { setupElementPlus } from "yst-form-designer/dist/ui/elementPlus";
// 注册Element UI
setupElementPlus();

EDesigner(设计器) 基础用法

<template>
  <div class="h-full">
    <EDesigner :uploadImgFun="uploadImgFun" @save="handleSave" />
  </div>
</template>
<script setup lang="ts">
import { EDesigner, type UploadImgFun, type PageSchema, type SelfDefinedFormVo } from "yst-form-designer";
import { onMounted } from 'vue'
    
onMounted(() => {
  //设置表单基本信息 
  designerRef.value?.setFormSetting({
    formName: '表单名称',
    formCode: '表单编码'
    remark: '表单备注',
  })
})

//图片上传处理方法
const uploadImgFun: UploadImgFun = (file) => {
  return new Promise(async (resolve, reject) => {
    const res = await api({ file })
    if (res.code === 200) {
      resolve(res.data)
    }
    else {
      reject(res.msg)
    }
  })
}

//保存
function handleSubmit(frontJson: PageSchema, formInfo:SelfDefinedFormVo) {
  console.log(frontJson, formInfo)
}
</script>
<style>
.h-full {
  height: 100vh;
}
</style>

EBuilder(生成器) 基础用法

<template>
  <div>
    <EBuilder :pageSchema="pageSchema" :uploadImgFun="uploadImgFun" />
  </div>
</template>
<script setup>
import { EBuilder, type UploadImgFun } from "yst-form-designer";

//图片上传处理方法
const uploadImgFun: UploadImgFun = (file) => {
  return new Promise(async (resolve, reject) => {
    const res = await api({ file })
    if (res.code === 200) {
      resolve(res.data)
    }
    else {
      reject(res.msg)
    }
  })
}
    
const pageSchema = {
  schemas: [
    {
      "type": "page",
      "id": "root",
      "label": "页面",
      "children": [
        {
          "label": "表单",
          "type": "form",
          "icon": "epic-icon-daibanshixiang",
          "componentProps": {
            "name": "default",
            "labelWidth": 100,
            "labelCol": {
              "span": 5
            },
            "wrapperCol": {
              "span": 19
            },
            "hideRequiredMark": false,
            "labelPosition": "top",
            "size": "default",
            "requireAsteriskPosition": "left"
          },
          "children": [
            {
              "label": "填空题",
              "type": "gapFilling",
              "field": "gapFilling_8mxz4uzx",
              "icon": "epic-icon-write",
              "input": true,
              "componentProps": {
                "placeholder": "请输入",
                "size": "default",
                "type": "text",
                "style": {
                  "width": "214px"
                }
              },
              "index": 1,
              "id": "gapFilling_8mxz4uzx"
            }
          ],
          "index": 1,
          "id": "form_yst"
        }
      ],
      "componentProps": {
        "style": {
          "padding": "16px"
        }
      }
    }
  ],
};
</script>

编辑自定义表单(设计器)

<template>
  <div class="h-full">
    <EDesigner ref="designerRef" :uploadImgFun="uploadImgFun" @save="handleSave" />
  </div>
</template>
<script setup lang="ts">
import { EDesigner, type UploadImgFun, type PageSchema, type SelfDefinedFormVo } from "yst-form-designer";
 
const designerRef = ref<InstanceType<typeof EDesigner>>()
const editParams = ref()

onMounted(async () => {
  const res = await api({id})
  if (res.code === 200) {
      editParams.value = res.data
      setData()
  }
})

function setData() {
 designerRef.value.setData(JSON.parse(editParams.value.frontJson))
 designerRef.value.setFormSetting(editParams.value) 
}

//图片上传处理方法
const uploadImgFun: UploadImgFun = (file: File) => {
  return new Promise(async (resolve, reject) => {
    const res = await api({ file })
    if (res.code === 200) {
      resolve(res.data)
    }
    else {
      reject(res.msg)
    }
  })
}

//保存
function handleSubmit(e: PageSchema, val:SelfDefinedFormVo) {
  console.log(e, val)
}
</script>
<style>
.h-full {
  height: 100vh;
}
</style>

填写自定义表单(生成器)

<template>
    <EBuilder ref="builderRef" :pageSchema="pageSchema" :uploadImgFun="uploadImgFun" />
	<div @click="handleSubmit">提交</div>
</template>
<script setup>
import { EBuilder, type UploadImgFun, type PageSchema, type FormInfoVo } from "yst-form-designer";

//图片上传处理方法
const uploadImgFun: UploadImgFun = (file) => {
  return new Promise(async (resolve, reject) => {
    const res = await api({ file })
    if (res.code === 200) {
      resolve(res.data)
    }
    else {
      reject(res.msg)
    }
  })
}
    
const pageSchema = ref<PageSchema>({schemas: []});
    
async function getFormInfo() {
    buiderRef.value?.handleReset()
    const res = await api()
    if (res.code === 200) {
      pageSchema.value = JSON.parse(res.data)
    }
}
    
onMounted(() => {
   getInfo() 
})
    
async function handleSubmit() {
    const formData:Record<string, any> = await buiderRef.value?.validate() //填写的表单数据
  	const formInfo:FormInfoVo = await buiderRef.value?.getFormInfo() //提交表单后得分、结果信息
}
</script>

查看填写的自定义表单(生成器)

<template>
    <EBuilder ref="builderRef" :pageSchema="pageSchema" />
</template>
<script setup>
import { EBuilder, type PageSchema } from "yst-form-designer";

    
const pageSchema = ref<PageSchema>({schemas: []});
    
async function getInfo() {
    buiderRef.value?.handleReset()
    const res = await api()
    if (res.code === 200) {
      pageSchema.value = JSON.parse(res.data.formInfo)
      buiderRef.value?.setData(res.data.formData) //填写的表单数据回显
    }
}
    
onMounted(() => {
   getInfo() 
})
</script>