基于 Vue 3 的动态表单开发解决方案，使用 WorkfoxFormGenerator 实现可视化表单设计与渲染，助力快速构建属于你自己的低代码开发平台。

npm install element-plus
npm install vuedraggable
npm install workfox-form-generator

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import Draggable from 'vuedraggable'

import WorkfoxFormGenerator from 'workfox-form-generator'
import 'workfox-form-generator/dist/workfox-form-generator.css'

app.component('Draggable', Draggable)
app.use(ElementPlus)
app.use(WorkfoxFormGenerator)//注册设计器FormDesigner、渲染器FormRenderer

<FormDesigner ref="formDesignerRef" @save="save" @close="close" :formJson="formJson" :requestHeaders="requestHeaders" :uploadApi="uploadApi" :fieldData="fieldData" :config="config" :customWidgetList="customWidgetList">
    <template #heardButtons></template>
</FormDesigner>

<FormRenderer ref="formRendererRef" :formJson="formJson" :requestHeaders="requestHeaders" :uploadApi="uploadApi" :customWidgetList="customWidgetList"/>

const formDesignerRef = ref()// 设计器ref
const formRendererRef = ref() // 渲染器ref

// 设计器配置
const config = ref({
  showSaveButton: true,// 显示保存按钮
  showCloseButton: true,// 显示关闭按钮
  loadLocalData: true// 设计器挂载时加载本地数据
})

// 请求头
const requestHeaders = ref({
  Authorization: ''
})

// 文件图片上传地址
const uploadApi = ref('/api/upms/file/upload')

// 表单配置数据
const formJson = ref()

//字段数据
const fieldData = ref({
  "fields": [
    { "label": "字段描述", "value": "字段名称" },
  ],
  "children": [
    {
      "label": "子表描述",
      "value": "子表名称",
      "fields": [
        { "label": "字段描述", "value": "字段名称" },
      ]
    },
  ]
})

//自定义组件列表
const customWidgetList = ref([])// 请查看对应章节

// 设计器保存事件
const save = (data) => {
  console.log('保存表单设计器数据', data)
}

// 设计器关闭事件
const close = () => {
  console.log('触发关闭表单设计器事件')
}

// 异步设置设计器的表单内容
formDesignerRef.value.setFormJson(formJson.value)

// 清空设计器内容
formDesignerRef.value.resetFormJson()

// 异步设置渲染器的表单内容
formRendererRef.value.setFormJson(formJson.value)

// 获取表单填写内容，会检查填写内容是否正确，错误会抛出异常
formRendererRef.value.getFormData()

// 设置表单数据
formRendererRef.value.setFormData(formData.value)

notify('保存成功', 'success')

// GET 请求
request.get('/api/user', { id: 1 }).then(res => {
  console.log(res)
})

// POST 请求
request.post('/api/user', { name: '' })

// PUT 请求
request.put('/api/user/1', { name: '' })

// DELETE 请求
request.delete('/api/user/1')

const customWidgetList = ref([{
  type: 'el-color-picker',//组件的名称，需要全局注册（必须）
  label: '颜色选择',//左侧列表对应组件名称（必须）
  id: 'color',//生成id时的前缀（必须）
  isCustomWidget: true,//是否是自定义组件（必须且固定为true）
  isFormItem: true,//是否属于表单组件（必须）
  attributes: {//此处填写的属性会使用v-bind绑定到对应组件上
    hiden: false, //是否隐藏
    label: '颜色选择',//标签名称 (表单组件必须)
    labelWidth: '',//标签宽度 (表单组件必须)
    showLabel: true,// 显示标签 (表单组件必须)
    disabled: false,//是否禁用
    size: 'default',//组件尺寸
    showAlpha: true,//自定义组件的单独属性，需要在attributesConfig下单独配置属性编辑器
  },
  attributesConfig: {//属性的描述，部分属性已内置无需定义
    showAlpha: {
      label: '支持透明度选择',
      component: {//属性所使用的编辑器控件,需全局注册
        name: 'el-switch',//使用el-switch作为属性配置器
        bind: {// 对应配置器的v-bind属性
          activeText: '是',
          inactiveText: '否',
          inlinePrompt: true,
          activeValue: true,
          inactiveValue: false
        }
      }
    }
  },
  rules: [],//验证规则，如果是表单组件则必须且固定为[]
  events: {
    onChange: '',//内容改变
    onMounted: ''//组件创建
  }
},])