yst-form-designer v0.2.11

简介

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

功能

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

核心组件介绍

EDesigner 设计器

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

API

函数

事件

插槽

EBuilder 生成器

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

API

函数

事件

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