form-create-designer整合element-plus使用方法

news2024/10/5 14:04:33

最近在使用form-create-designer生成表单的时候遇到了很多问题和各种报错，按照官方文档的方法一步步来做，发现行不通，后来经过不断尝试，终于找到了使用方法，这里做一下总结。

1、安装所需的依赖包

npm install element-plus --save

npm install @form-create/designer@next

2、在main.ts文件中添加配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'
import FcDesigner from '@form-create/designer'

app.use(ElementPlus)
app.use(formCreate)
app.use(FcDesigner)

3、创建表单生成器

<template>
  <div>
    <fc-designer ref="designer" :height="height" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue';
import type ProcessTemplate from '../type/ProcessTemplate';

const height=ref<string>()
onMounted(() => {
  const viewportHeight = document.documentElement.clientHeight
  const headerHeight = (document.querySelector('.el-header') as HTMLElement).offsetHeight;
  const tabsHeight = (document.querySelector('.tabs') as HTMLElement).offsetHeight
  const topPadding = 10
  const stepsHeight = (document.querySelector('.el-steps') as HTMLElement).offsetHeight
  const marginBottom = 20
  const buttonHeight = (document.querySelector('.bottom') as HTMLElement).offsetHeight
  const margin = 40
  height.value = (viewportHeight - headerHeight - tabsHeight - topPadding - stepsHeight - marginBottom - buttonHeight - margin) + 'px'
})

const designer=ref()

let rule=null,option=null

const handleNext=(stepActive:Ref<number>) => {
  rule=designer.value.getRule()
  option=designer.value.getOption()
  stepActive.value++
  return {formProps:JSON.stringify(rule),formOptions:JSON.stringify(option)}
}

const setData=(data:ProcessTemplate) => {
  designer.value.setRule(JSON.parse(data.formProps))
  designer.value.setOption(JSON.parse(data.formOptions))
}

defineExpose({handleNext,setData})

</script>

其中，fc-designer标签是用来显示表单生成器的组件，ref="designer"和const designer=ref()用来获取表单生成器组件的对象，然后通过这个对象，调用它里面的方法获取获取表单结构的数据，并转换为JSON格式的字符串，然后提交给后台，保存数据库。通过查询数据库，获取JOSN字符串，进行解析，也能够通过调用这个对象里面的方法，进行表单内容的回显。
height属性用于动态设置表单生成器的高度，以适应屏幕高度。
在这里插入图片描述

4、在微信公众号或移动端网页显示生成的表单

<template>
  <NavBar title="发起审批" left-text="返回" left-arrow @click-left="handleBack"></NavBar>
  <div class="container">
    <form-create v-model="data" :rule="rule" :option="option" @submit="handleSubmit"></form-create>
  </div>
</template>

<script setup lang="ts">
import {NavBar} from 'vant'
import { ref } from 'vue';

const handleBack=() => history.back()

const data=ref()
const rule=ref(JSON.parse(history.state.formProps))
const option=ref(JSON.parse(history.state.formOptions))

const handleSubmit=(data:any) => {
  console.log(data)
}
</script>