升级到3.0.10版本：

1. 增加global-dsv属性，用于传递外部参数或外部组件； 2. 同步发布3.0.10版npm包。
2025-10-31 08:41:49 +08:00 · 2023-02-15 13:30:27 +08:00
parent 322eb5c41f
commit 299e7c7506
11 changed files with 66 additions and 24 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "variant-form3",
-  "version": "3.0.9",
+  "version": "3.0.10",
  "private": false,
  "scripts": {
    "serve": "vite",
@@ -14,7 +14,7 @@
    "axios": "^0.24.0",
    "clipboard": "^2.0.8",
    "core-js": "^3.6.5",
-    "element-plus": "^2.0.4",
+    "element-plus": "^2.2.22",
    "file-saver": "^2.0.5",
    "mitt": "^3.0.0",
    "sortablejs": "1.14.0",
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,13 @@
 <template>
  <el-config-provider :locale="elLocale">
  <div id="app">
-    <VFormDesigner />
+    <VFormDesigner ref="vfDesignerRef" :global-dsv="globalDsv">
+      <!--
+      <template #customToolButtons>
+        <el-button type="text" @click="doTest">测试btn</el-button>
+      </template>
+      -->
+    </VFormDesigner>
  </div>
  </el-config-provider>
 </template>
@@ -19,14 +25,17 @@ export default {
  },
  data() {
    return {
-      formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
-      formData: {},
-      optionData: {},
-
      elLocaleMap: {
        'zh-CN': zhCNLang,
        'en-US': enUSLang,
      },
+
+      //全局数据源变量
+      globalDsv: {
+        testApiHost: 'http://www.test.com/api',
+        testPort: 8080,
+      },
+
    }
  },
  computed: {
@@ -37,15 +46,11 @@ export default {

  },
  methods: {
-    submitForm() {
-      this.$refs.vFormRef.getFormData().then(formData => {
-        // Form Validation OK
-        alert( JSON.stringify(formData) )
-      }).catch(error => {
-        // Form Validation failed
-        this.$message.error(error)
-      })
+    doTest() {
+      let fieldList = this.$refs.vfDesignerRef.getFieldWidgets(null, true)
+      console.log('test', fieldList)
    }
+
  }
 }
 </script>
--- a/src/components/form-designer/form-widget/container-widget/containerMixin.js
+++ b/src/components/form-designer/form-widget/container-widget/containerMixin.js
@@ -1,5 +1,5 @@
 export default {
-  inject: ['getFormConfig'],
+  inject: ['getFormConfig', 'getGlobalDsv'],

  computed: {
    formConfig() {
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@@ -3,7 +3,7 @@ import FormValidators from '@/utils/validators'
 import eventBus from "@/utils/event-bus"

 export default {
-  inject: ['refList', 'getFormConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
+  inject: ['refList', 'getFormConfig', 'getGlobalDsv', 'globalOptionData', 'globalModel', 'getOptionData'],

  computed: {
    formConfig() {
--- a/src/components/form-designer/form-widget/index.vue
+++ b/src/components/form-designer/form-widget/index.vue
@@ -51,11 +51,16 @@
        type: Object,
        default: () => ({})
      },
+      globalDsv: {
+        type: Object,
+        default: () => ({})
+      },
    },
    provide() {
      return {
        refList: this.widgetRefList,
        getFormConfig: () => this.formConfig,  /* 解决provide传递formConfig属性的响应式更新问题！！ */
+        getGlobalDsv: () => this.globalDsv, // 全局数据源变量
        globalOptionData: this.optionData,
        getOptionData: () => this.optionData,
        globalModel: {
--- a/src/components/form-designer/index.vue
+++ b/src/components/form-designer/index.vue
@@ -39,7 +39,7 @@

      <el-container class="center-layout-container">
        <el-header class="toolbar-header">
-          <toolbar-panel :designer="designer" ref="toolbarRef">
+          <toolbar-panel :designer="designer" :global-dsv="globalDsv" ref="toolbarRef">
            <template v-for="(idx, slotName) in $slots" #[slotName]>
              <slot :name="slotName"></slot>
            </template>
@@ -47,7 +47,7 @@
        </el-header>
        <el-main class="form-widget-main">
          <el-scrollbar class="container-scroll-bar" :style="{height: scrollerHeight}">
-            <v-form-widget :designer="designer" :form-config="designer.formConfig" ref="formRef">
+            <v-form-widget :designer="designer" :form-config="designer.formConfig" :global-dsv="globalDsv" ref="formRef">
            </v-form-widget>
          </el-scrollbar>
        </el-main>
@@ -55,7 +55,7 @@

      <el-aside>
        <setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
-                       :form-config="designer.formConfig" @edit-event-handler="testEEH" />
+                       :form-config="designer.formConfig" :global-dsv="globalDsv" @edit-event-handler="testEEH" />
      </el-aside>
    </el-container>

@@ -126,6 +126,12 @@
        }
      },

+      /* 全局数据源变量 */
+      globalDsv: {
+        type: Object,
+        default: () => ({})
+      },
+
    },
    data() {
      return {
--- a/src/components/form-designer/setting-panel/index.vue
+++ b/src/components/form-designer/setting-panel/index.vue
@@ -120,6 +120,10 @@
      designer: Object,
      selectedWidget: Object,
      formConfig: Object,
+      globalDsv: {
+        type: Object,
+        default: () => ({})
+      },
    },
    inject: ['getDesignerConfig'],
    data() {
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@@ -51,7 +51,7 @@
        <div>
          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
            <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
-                         :option-data="testOptionData"  @myEmitTest="onMyEmitTest"
+                         :option-data="testOptionData" :global-dsv="designerDsv" @myEmitTest="onMyEmitTest"
                         @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
                         @formChange="handleFormChange">
            </VFormRender>
@@ -213,7 +213,11 @@
      SvgIcon,
    },
    props: {
-      designer: Object
+      designer: Object,
+      globalDsv: {
+        type: Object,
+        default: () => ({})
+      },
    },
    inject: ['getDesignerConfig'],
    data() {
@@ -295,6 +299,10 @@
        return this.designer.getLayoutType()
      },

+      designerDsv() {
+        return this.globalDsv
+      }
+
    },
    watch: {
      'designer.widgetList': {
--- a/src/components/form-render/container-item/containerItemMixin.js
+++ b/src/components/form-render/container-item/containerItemMixin.js
@@ -1,6 +1,7 @@
 import { traverseFieldWidgetsOfContainer } from "@/utils/util";

 export default {
+  inject: ['getFormConfig', 'getGlobalDsv'],
  computed: {
    customClass() {
      return this.widget.options.customClass || ''
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@@ -72,13 +72,18 @@
      previewState: { //是否表单预览状态
        type: Boolean,
        default: false
-      }
+      },
+      globalDsv: { // 全局数据源变量
+        type: Object,
+        default: () => ({})
+      },
    },
    provide() {
      return {
        refList: this.widgetRefList,
        sfRefList: this.subFormRefList,  //收集SubForm引用
        getFormConfig: () => this.formJsonObj.formConfig,  /* 解决provide传递formConfig属性的响应式更新问题！！ */
+        getGlobalDsv: () => this.globalDsv, // 全局数据源变量
        globalOptionData: this.optionData,
        getOptionData: () => this.optionData,  /* 该方法用于在异步更新option-data之后重新获取到最新值 */
        globalModel: {
@@ -696,6 +701,14 @@
        return this.externalComponents[componentName]
      },

+      /**
+       * 获取globalDsv对象
+       * @returns {*}
+       */
+      getGlobalDsv() {
+        return this.globalDsv
+      },
+
      //--------------------- 以上为组件支持外部调用的API方法 end ------------------//

    },
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,4 +1,4 @@
-export const VARIANT_FORM_VERSION = '3.0.9'
+export const VARIANT_FORM_VERSION = '3.0.10'

 //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
 export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'