From d40b6e8d2da156c068bc0c62c2a540dcf289f61a Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Wed, 16 Mar 2022 17:52:22 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E5=A2=9E=E5=8A=A0formId=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E4=BB=A5=E9=98=B2=E6=AD=A2=E5=8C=85=E5=90=AB=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AAv-form-render=E7=BB=84=E4=BB=B6=E6=97=B6?=
 =?UTF-8?q?=E5=86=B2=E7=AA=81=EF=BC=9B=202.=20=E4=BF=AE=E5=A4=8Dname?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E7=BC=96=E8=BE=91=E7=9A=84=E5=BF=85=E5=A1=AB?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E9=94=99=E8=AF=AF=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 +-
 .../container-item/containerItemMixin.js      | 13 ++++
 .../container-item/sub-form-item.vue          |  4 ++
 src/components/form-render/index.vue          | 66 +++++++++++++++++--
 src/utils/util.js                             | 20 ++++--
 6 files changed, 99 insertions(+), 12 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 c3224a0..4f9d272 100644
--- a/src/components/form-designer/form-widget/container-widget/containerMixin.js
+++ b/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
+      }
+    },
+
   }
 }
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 e7dbddb..25fe965 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">
     <template #label>
       <span>{{i18nt('designer.setting.uniqueName')}}
         <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
diff --git a/src/components/form-render/container-item/containerItemMixin.js b/src/components/form-render/container-item/containerItemMixin.js
index f0163f2..e041905 100644
--- a/src/components/form-render/container-item/containerItemMixin.js
+++ b/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]
diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue
index 1cc98b8..8045b12 100644
--- a/src/components/form-render/container-item/sub-form-item.vue
+++ b/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
diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue
index e8302e2..c74273b 100644
--- a/src/components/form-render/index.vue
+++ b/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,
-    getAllFieldWidgets} from "@/utils/util"
+  import {
+    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() {
diff --git a/src/utils/util.js b/src/utils/util.js
index aa04395..1a53e68 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)