@dongjuntao/dynamic-form-designer

Vue 3 动态表单设计器，依赖 @dongjuntao/dynamic-form。

安装

npm install @dongjuntao/dynamic-form-designer @dongjuntao/dynamic-form ant-design-vue @ant-design/icons-vue vue

使用

import { createFormDesigner } from '@dongjuntao/dynamic-form-designer'
import '@dongjuntao/dynamic-form/style.css'
import '@dongjuntao/dynamic-form-designer/style.css'

app.use(createFormDesigner({
  apis: {
    formFieldList: params => axios.get('/server-system/form/field/list', { params }),
    formFieldSave: data => axios.post('/server-system/form/field/save', data),
    orgTree: () => axios.get('/server-system/org/tree'),
    empPage: p => axios.get('/server-system/emp/page', { params: p }),
    upload: (fd, params) => axios.post('/server-system/aliyun/oss/upload', fd, { params }),
  },
  getFormFillUrl: formId => `https://example.com/fill?formId=${formId}`,
}))

<FormDesigner
  form-id="YOUR_FORM_ID"
  form-name="表单名称"
  @close="goBack"
  @saved="goBack"
/>

本地演示

cd packages/form-designer-app
npm install
npm run dev
# 打开 http://localhost:5174/design?formId=xxx&formName=测试表单