From 6fc227cffc1963e450f4d56fd31ab7d85fd42dde Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Wed, 16 Mar 2022 17:59:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0formId=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E4=BB=A5=E9=98=B2=E6=AD=A2=E4=BD=BF=E7=94=A8=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?v-form-render=E7=BB=84=E4=BB=B6=E6=97=B6=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=E5=86=B2=E7=AA=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../container-widget/containerMixin.js        |  6 ++++++
 .../property-editor/name-editor.vue           |  2 +-
 .../form-designer/toolbar-panel/index.vue     |  5 +++++
 .../container-item/containerItemMixin.js      |  6 ++++++
 src/components/form-render/index.vue          | 17 +++++++++++-----
 src/extension/extension-loader.js             |  6 +++++-
 src/utils/util.js                             | 20 +++++++++++++------
 7 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/form-designer/form-widget/container-widget/containerMixin.js b/src/components/form-designer/form-widget/container-widget/containerMixin.js
index 856e0d6..fc0f2b1 100644
--- a/src/components/form-designer/form-widget/container-widget/containerMixin.js
+++ b/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
+      }
+    },
+
   }
 }
diff --git a/src/components/form-designer/setting-panel/property-editor/name-editor.vue b/src/components/form-designer/setting-panel/property-editor/name-editor.vue
index a9c150e..6602024 100644
--- a/src/components/form-designer/setting-panel/property-editor/name-editor.vue
+++ b/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>
diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue
index 91e94d7..00119f7 100644
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/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---')
diff --git a/src/components/form-render/container-item/containerItemMixin.js b/src/components/form-render/container-item/containerItemMixin.js
index 3b98110..53a7fba 100644
--- a/src/components/form-render/container-item/containerItemMixin.js
+++ b/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
+      }
+    },
+
     /**
      * 获取子表单的行数
      */
diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue
index 6cb36db..ef18fb3 100644
--- a/src/components/form-render/index.vue
+++ b/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() {
diff --git a/src/extension/extension-loader.js b/src/extension/extension-loader.js
index 3c57235..7b67c8c 100644
--- a/src/extension/extension-loader.js
+++ b/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}))
 
diff --git a/src/utils/util.js b/src/utils/util.js
index 8bc21da..f66211c 100644
--- a/src/utils/util.js
+++ b/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)