variant-form3-builds

Packaged version of Variant Form 3.x - For Vue 3.x

此为非官方版，仅私人及公司项目使用如需使用Vform3请下载: 官方版

起步

1. 安装NPM包

npm i variant-form3-builds

2. 引入并全局注册VForm 3组件

/* ... some code */

// 引入element-plus库
import ElementPlus from 'element-plus'  
// 引入element-plus样式
import 'element-plus/dist/index.css'  

// 引入本库
import VForm3 from 'variant-form3-builds'
// 设计器样式
import 'variant-form3-builds/dist/designer.style.css'
// 渲染器样式
import 'variant-form3-builds/dist/render.style.css'

/* ... some code */

// 全局注册element-plus
app.use(ElementPlus)  
// 全局注册组件
// 设计
app.use(VForm3.VFormDesigner)
// 渲染
app.use(VForm3.VFormRender)

/* ... some code */

3. 使用表单设计器组件

<template>
    <v-form-designer ref="vFormDesignRef"></v-form-designer>
</template>

<script setup>
const vFormDesignRef = ref(null)
</script>

<style lang="scss">
body {
    margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除 */
}
</style>

4. 使用表单渲染器组件

<template>
    <div>
        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
        </v-form-render>
        <el-button type="primary" @click="submitForm">Submit</el-button>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}, "dataSource": []})
const formData = reactive({})
const optionData = reactive({})
const vFormRef = ref(null)

const submitForm = () => {
    vFormRef.value.getFormData().then(formData => {
        // 验证通过
        alert( JSON.stringify(formData) )
    }).catch(error => {
        // 验证失败
        ElMessage.error(error)
    })
}
</script>

Props & API

设计器 VFormDesigner

props：

• globalDsv：Object - 全局数据源变量

  • BASEURL：String - 用于数据源、获取服务器字段的请求时使用：https://www.baidu.com
  • dataSourceDefaultParams: Object - 用于在设计时对 全局数据源请求时的默认参数 进行说明，{参数名：描述}
  • commonDataSources(未完成): Object - 用于在设计时快速新增通用数据源，会使用dataSourceDefaultParams设定的参数
  • token：String - 用于数据源、获取服务器字段的请求时使用的全局请求头，用于登录及权限校验
  • tokenKey：String - 用于指定 token 请求头名称
  • uploadUrl：String - 文件上传地址(图片上传、文件上传、设计时富文本中的图片与文件上传)
  • ......

• fieldListApi：Object - 后端字段列表API，要求的数据格式的示例如下：[{label:"用户名",name:"username"}]

  • URL：String - 请求链接，默认拼接在 globalDsv.BASEURL 之后
  • nameKey：String - 字段名称的Key
  • labelKey：String - 字段标签的Key
  • headers：Object - 请求头
  • params：Object - 请求参数

• bannedWidgets：String[] - 禁止显示的组件名称数组

• designerConfig：Object - 设计器配置

  • header：Boolean - 是否显示Header，默认值 false
  • languageMenu：Boolean - 是否显示语言切换菜单，默认值 true
  • externalLink：Boolean - 是否显示GitHub、文档等外部链接，默认值 true
  • formTemplates：Boolean - 是否显示表单模板，默认值 false
  • eventCollapse：Boolean - 是否显示组件事件属性折叠面板，默认值 true
  • widgetNameReadonly：Boolean - 禁止修改组件名称，默认值 false
  • clearDesignerButton：Boolean - 是否显示清空设计器按钮，默认值 true
  • previewFormButton：Boolean - 是否显示预览表单按钮，默认值 true
  • importJsonButton：Boolean - 是否显示导入JSON按钮，默认值 true
  • exportJsonButton：Boolean - 是否显示导出JSON器按钮，默认值 true
  • exportCodeButton：Boolean - 是否显示导出代码按钮，默认值 false
  • generateSFCButton：Boolean - 是否显示生成SFC按钮，默认值 false
  • toolbarMaxWidth：Number|String - 设计器工具按钮栏最大宽度（单位像素），默认值 450
  • toolbarMinWidth：Number|String - 设计器工具按钮栏最小宽度（单位像素），默认值 300
  • presetCssCode：String - 设计器预设CSS样式代码，默认值 ''
  • resetFormJson：Boolean - 是否在设计器初始化时将表单内容重置为空，默认值 false

API：

• getFormJson：获取表单JSON

• setFormJson：设置表单JSON

  (formJson: any) => void

• clearDesigner：清空表单设计器

• refreshDesigner：刷新表单设计器

• changeLanguage：切换语言【部分暂未支持】

  (langName: string) => void

• upgradeFormJson：升级表单json，以补充最新的组件属性

  (formJson: any) => void

• allFormForEach：全表单组件递归，并对字段组件执行回调

  (callback: (widget: any) => {}, /* 排除的组件type */ exclude: string[]) => void

• getServerFieldList：获取通过 fieldListApi 得到的服务器返回的字段列表

• getUsedServerFieldList：获取已使用的服务器字段列表

• getUsedFieldList：获取已使用的表单字段列表

  () => [string[]/*使用的服务器字段*/, string[]/*表单自有字段*/]

渲染器 VFormRender

props：

• globalDsv：Object - 全局数据源变量

  • BASEURL：String - 用于数据源、获取服务器字段的请求时使用：https://www.baidu.com
  • dataSourceDefaultParams: Object - 用于数据源请求时的默认参数，{参数名：值}
  • token：String - 用于数据源、获取服务器字段的请求时使用的全局请求头，用于登录及权限校验
  • tokenKey：String - 用于指定 token 请求头名称
  • uploadUrl：String - 文件上传地址(富文本中的图片与文件上传)
  • ......

• formJson：Object - 表单JSON配置

• formData：Object - 表单数据

• vars：Object - 待注入对象 API：

• changeLanguage：切换语言【部分暂未支持】

  (langName: string) => void

• getNativeForm：获取原生form引用

• getFormRef：获取渲染器组件实例

• getWidgetRef：获取字段组件信息

  (widgetName: string, showError = false) => any

• clearFormDataModel：清空表单数据

• setFormJson：设置表单Json

  (formJson: any) => void

• getFormData：获取表单数据

  (needValidation: boolean) => void

• setFormData：设置表单数据

  (formData: any) => void

• getFieldValue：获取指定字段的值

  (fieldName: string) => any

• setFieldValue：设置指定字段的值

  (fieldName: string, fieldValue: any) => void

• disableForm：禁用表单

• enableForm：启用表单

• resetForm：重置表单

• clearValidate：清空校验

• disableWidgets：禁用字段组件

  (widgetNames: string|string[]) => void

• enableWidgets：启用字段组件

  (widgetNames: string|string[]) => void

• hideWidgets：隐藏字段组件

  (widgetNames: string|string[]) => void

• showWidgets：显示字段组件

  (widgetNames: string|string[]) => void

• getFieldWidgets：获取所有字段组件

• getContainerWidgets：获取所有容器组件

• getGlobalDsv：获取 globalDsv 对象

Events:

• loadSuccess: 表单加载成功，无参数
• loadFail: 表单加载失败，无参数

一些VForm官方的资源链接

文档官网：www.vform666.com 在线演示：演示站点 Github仓库：github.com/vform666/variant-form3-vite Gitee仓库：gitee.com/vdpadmin/variant-form3-vite 更新日志：changelog 订阅Pro版：www.vform666.com/pages/pro 官方技术交流群：扫如下二维码加群