增加formId属性以防止使用多个v-form-render组件时出现冲突。

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

@@ -82,5 +82,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">
     <span slot="label">{{i18nt('designer.setting.uniqueName')}}
       <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
         <i class="el-icon-info"></i></el-tooltip>

src/components/form-designer/toolbar-panel/index.vue

@@ -67,6 +67,7 @@
         <el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
         <el-button type="" @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
         <el-button v-if="false" @click="printFormJson">PrintFormJson</el-button>
+        <el-button v-if="true" @click="testValidate">TestValidate</el-button>
       </div>
     </el-dialog>
 
@@ -589,6 +590,10 @@
         console.log(tmpFS)
       },
 
+      testValidate() {
+        console.log('test===', this.$refs['preForm'].validateForm())
+      },
+
       handleFormChange(fieldName, newValue, oldValue, formModel) {
         /*
         console.log('---formChange start---')

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

@@ -91,6 +91,12 @@ export default {
       }
     },
 
+    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
+      if (this.widget.options.hasOwnProperty(optionName)) {
+        this.widget.options[optionName] = optionValue
+      }
+    },
+
     /**
      * 获取子表单的行数
      */

src/components/form-render/index.vue

@@ -42,7 +42,7 @@
   import './container-item/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
   import {
-    deepClone, getAllContainerWidgets, getAllFieldWidgets,
+    generateId, deepClone, getAllContainerWidgets, getAllFieldWidgets,
     insertCustomCssToHead,
     insertGlobalFunctionsToHtml,
     traverseFieldWidgets
@@ -95,6 +95,7 @@
         },
         widgetRefList: {},
         subFormRefList: {},
+        formId: null,  //表单唯一Id，用于区分页面上的多个v-form-render组件！！
       }
     },
     computed: {
@@ -148,6 +149,7 @@
     },
     methods: {
       initFormObject() {
+        this.formId = 'vfRender' + generateId()
         this.insertCustomStyleAndScriptNode()
         this.addFieldChangeEventHandler()
         this.addFieldValidateEventHandler()
@@ -170,11 +172,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)
         }
       },
 
@@ -259,7 +261,6 @@
 
       addFieldChangeEventHandler() {
         this.$off('fieldChange')  //移除原有事件监听
-
         this.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
           this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
           this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
@@ -572,8 +573,14 @@
         this.$refs.renderForm.clearValidate(props)
       },
 
+      /* 验证表单，通过返回true，不通过返回false */
       validateForm() {
-        //
+        let result = null
+        this.$refs['renderForm'].validate((valid) => {
+          result = valid
+        })
+
+        return result
       },
 
       validateFields() {

src/extension/extension-loader.js

@@ -76,7 +76,11 @@ export const loadExtension = function () {
     {label: 'info', value: 'info'},
     {label: 'error', value: 'error'},
   ]
-  PERegister.registerCPEditor('alert-type', 'alert-type-editor',
+  // PERegister.registerCPEditor('alert-type', 'alert-type-editor',
+  //     PEFactory.createSelectEditor('type', 'extension.setting.alertType',
+  //         {optionItems: typeOptions}))
+  /* type属性映射已存在，无须再注册，故只需注册属性编辑器即可！！ */
+  Vue.component('alert-type-editor',
       PEFactory.createSelectEditor('type', 'extension.setting.alertType',
           {optionItems: typeOptions}))
 

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)