dd-form-render

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>