1. 增加formId属性以防止包含使用多个v-form-render组件时冲突；

2. 修复name属性编辑的必填校验错误。

src/components/form-designer/form-widget/container-widget/containerMixin.js

@@ -90,5 +90,11 @@ export default {
       }
     },
 
+    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
+      if (this.widget.options.hasOwnProperty(optionName)) {
+        this.widget.options[optionName] = optionValue
+      }
+    },
+
   }
 }

src/components/form-designer/setting-panel/property-editor/name-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :rules="nameRequiredRule">
+  <el-form-item prop="name" :rules="nameRequiredRule">
     <template #label>
       <span>{{i18nt('designer.setting.uniqueName')}}
         <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">

src/components/form-render/container-item/containerItemMixin.js

@@ -90,6 +90,19 @@ export default {
       }
     },
 
+    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
+      if (this.widget.options.hasOwnProperty(optionName)) {
+        this.widget.options[optionName] = optionValue
+      }
+    },
+
+    /**
+     * 获取子表单的行数
+     */
+    getSubFormRowCount() {
+      return !this.rowIdData ? 0 : this.rowIdData.length
+    },
+
     disableSubFormRow(rowIndex) {
       this.widget.widgetList.forEach(subWidget => {
         let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]

src/components/form-render/container-item/sub-form-item.vue

@@ -146,6 +146,10 @@
         this.rowIdData.splice(rowIndex, 1)
       },
 
+      getRowIdData() {
+        return this.rowIdData
+      },
+
       initFieldSchemaData() {  //初始化fieldSchemaData！！！
         if (this.widget.type !== 'sub-form') {
           return

src/components/form-render/index.vue

@@ -41,8 +41,9 @@
   import emitter from '@/utils/emitter'
   import './container-item/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-  import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml, getAllContainerWidgets,
+  import {
-    getAllFieldWidgets} from "@/utils/util"
+    generateId, deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml, getAllContainerWidgets,
+    getAllFieldWidgets, traverseFieldWidgets} from "@/utils/util"
   import i18n, { changeLocale } from "@/utils/i18n"
   import eventBus from "@/utils/event-bus"
 
@@ -92,6 +93,7 @@
         },
         widgetRefList: {},
         subFormRefList: {},
+        formId: null,  //表单唯一Id，用于区分页面上的多个v-form-render组件！！
       }
     },
     computed: {
@@ -145,6 +147,7 @@
     },
     methods: {
       initFormObject() {
+        this.formId = 'vfRender' + generateId()
         this.insertCustomStyleAndScriptNode()
         this.addFieldChangeEventHandler()
         this.addFieldValidateEventHandler()
@@ -167,11 +170,11 @@
 
       insertCustomStyleAndScriptNode() {
         if (!!this.formConfig && !!this.formConfig.cssCode) {
-          insertCustomCssToHead(this.formConfig.cssCode)
+          insertCustomCssToHead(this.formConfig.cssCode, this.formId)
         }
 
         if (!!this.formConfig && !!this.formConfig.functions) {
-          insertGlobalFunctionsToHtml(this.formConfig.functions)
+          insertGlobalFunctionsToHtml(this.formConfig.functions, this.formId)
         }
       },
 
@@ -298,16 +301,63 @@
         let foundW = this.getWidgetRef(widgetName)
         if (!!foundW) {
           foundW.setDisabled(disabledFlag)
+        } else { //没找到，可能是子表单中的组件
+          this.findWidgetOfSubFormAndSetDisabled(widgetName, disabledFlag)
         }
       },
 
+      findWidgetOfSubFormAndSetDisabled(widgetName, disabledFlag) {
+        this.findWidgetNameInSubForm(widgetName).forEach(wn => {
+          let sw = this.getWidgetRef(wn)
+          if (!!sw) {
+            sw.setDisabled(disabledFlag)
+          }
+        })
+      },
+
       findWidgetAndSetHidden(widgetName, hiddenFlag) {
         let foundW = this.getWidgetRef(widgetName)
         if (!!foundW) {
           foundW.setHidden(hiddenFlag)
+        } else { //没找到，可能是子表单中的组件
+          this.findWidgetOfSubFormAndSetHidden(widgetName, hiddenFlag)
         }
       },
 
+      findWidgetOfSubFormAndSetHidden(widgetName, hiddenFlag) {
+        this.findWidgetNameInSubForm(widgetName).forEach(wn => {
+          let sw = this.getWidgetRef(wn)
+          if (!!sw) {
+            sw.setHidden(hiddenFlag)
+          }
+        })
+      },
+
+      findWidgetNameInSubForm(widgetName) {
+        let result = []
+        let subFormName = null
+        let handlerFn = (field, parent) => {
+          if (!!field.options && (field.options.name === widgetName)) {
+            subFormName = parent.options.name
+          }
+        }
+        traverseFieldWidgets(this.widgetList, handlerFn)
+
+        if (!!subFormName) {
+          let subFormRef = this.getWidgetRef(subFormName)
+          if (!!subFormRef) {
+            let rowIds = subFormRef.getRowIdData()
+            if (!!rowIds && (rowIds.length > 0)) {
+              rowIds.forEach(rid => {
+                result.push( widgetName + '@row' + rid)
+              })
+            }
+          }
+        }
+
+        return result
+      },
+
       //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
       /* 提示：用户可自行扩充这些方法！！！ */
 
@@ -496,8 +546,14 @@
         this.$refs.renderForm.clearValidate(props)
       },
 
+      /* 验证表单，通过返回true，不通过返回false */
       validateForm() {
-        //
+        let result = null
+        this.$refs['renderForm'].validate((valid) => {
+          result = valid
+        })
+
+        return result
       },
 
       validateFields() {

src/utils/util.js

@@ -57,17 +57,21 @@ const createStyleSheet = function() {
   return style.sheet;
 }
 
-export const insertCustomCssToHead = function (cssCode) {
+export const insertCustomCssToHead = function (cssCode, formId = '') {
   let head = document.getElementsByTagName('head')[0]
   let oldStyle = document.getElementById('vform-custom-css')
   if (!!oldStyle) {
-    head.removeChild(oldStyle)  //应该先清除后插入！！
+    head.removeChild(oldStyle)  //先清除后插入！！
+  }
+  if (!!formId) {
+    oldStyle = document.getElementById('vform-custom-css' + '-' + formId)
+    !!oldStyle && head.removeChild(oldStyle)  //先清除后插入！！
   }
 
   let newStyle = document.createElement('style')
   newStyle.type = 'text/css'
   newStyle.rel = 'stylesheet'
-  newStyle.id = 'vform-custom-css'
+  newStyle.id = !!formId ? 'vform-custom-css' + '-' + formId : 'vform-custom-css'
   try {
     newStyle.appendChild(document.createTextNode(cssCode))
   } catch(ex) {
@@ -77,13 +81,17 @@ export const insertCustomCssToHead = function (cssCode) {
   head.appendChild(newStyle)
 }
 
-export const insertGlobalFunctionsToHtml = function (functionsCode) {
+export const insertGlobalFunctionsToHtml = function (functionsCode, formId = '') {
   let bodyEle = document.getElementsByTagName('body')[0]
   let oldScriptEle = document.getElementById('v_form_global_functions')
-  !!oldScriptEle && bodyEle.removeChild(oldScriptEle)
+  !!oldScriptEle && bodyEle.removeChild(oldScriptEle)  //先清除后插入！！
+  if (!!formId) {
+    oldScriptEle = document.getElementById('v_form_global_functions' + '-' + formId)
+    !!oldScriptEle && bodyEle.removeChild(oldScriptEle)  //先清除后插入！！
+  }
 
   let newScriptEle = document.createElement('script')
-  newScriptEle.id = 'v_form_global_functions'
+  newScriptEle.id = !!formId ? 'v_form_global_functions' + '-' + formId : 'v_form_global_functions'
   newScriptEle.type = 'text/javascript'
   newScriptEle.innerHTML = functionsCode
   bodyEle.appendChild(newScriptEle)