dd-form-render v1.1.4

XDK低代码平台量表渲染器

基本信息

• 作者：XDK-湛亚磊
• 版本：1.1.4
• 描述：
  • 1. 为了方便XDK平台的量表开发，开发了一套低代码的量表。其中dd-form-render是量表渲染器，用于将量表渲染成页面。
  • 2. 借鉴了VForm的思路，在开发过程中VFrom只是做了拖拽和渲染这些。但是，我们业务需要组件关联数据，并计算和分析结果。所以，我们在VForm的基础上，开发了dd-form-render，用于快速生成量表。
  • 3. VForm使用了Vue3+vite。但是作者在代码开发过程中，使用了大量的vue2的用法。所以，我们对此进行了vue3的改造重写。后续的话可能会考虑使用TS重写。

使用方法

• 1. 安装
  • npm install dd-form-render
  • yarn add dd-form-render
• 2. 使用

     import ElementPlus from 'element-plus'  //引入element-plus库
     import 'element-plus/dist/index.css'  //引入element-plus样式
     import 'dd-form-render/dist/render.style.css'  //引入VFormRender样式
     import DdFormRender from 'dd-form-render'
     app.use(DdFormRender)

• 3. 页面引用

     <template>
       <div>
         <dd-form-render :form-json="formJson" :form-data="formData" :option-data="optionData"
                        ref="vFormRef">
         </dd-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'
     
     /* 注意：formJson是指表单设计器导出的json，此处演示的formJson只是一个空白表单json！！ */
     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": "",
         "onFormValidate": ""
       }
     })
     const formData = reactive({})
     const optionData = reactive({})
     const vFormRef = ref(null)
     
     const submitForm = () => {
       vFormRef.value.getFormData().then(formData => {
         // Form Validation OK
         alert(JSON.stringify(formData))
       }).catch(error => {
         // Form Validation failed
         ElMessage.error(error)
       })
     }
     </script>