feat(lib): 添加 $$uiFormRef 属性，可在mounted 之直接访问子组件实例

re #127
lljj-x · Nov 27, 2021 · 08c6c4f · 08c6c4f
1 parent e00a39c
commit 08c6c4f
Show file tree

Hide file tree

Showing 23 changed files with 72 additions and 42 deletions.
diff --git a/packages/demo/demo-v2/src/pages/index/views/Demo/index.vue b/packages/demo/demo-v2/src/pages/index/views/Demo/index.vue
@@ -170,6 +170,7 @@
                         </div>
                         <component
                             :is="curVueForm"
+                            ref="schemaForm"
                             :key="pageKey"
                             v-model="formData"
                             :schema="schema"
@@ -179,6 +180,7 @@
                             :form-footer="trueFormFooter"
                             :form-props="trueFormProps"
                             :fallback-label="true"
+                            @keyup.native.enter="handleSearch"
                             @on-form-mounted="handleFormMounted"
                             @on-change="handleDataChange"
                             @on-cancel="handleCancel"
@@ -298,6 +300,9 @@ export default {
         this.initData();
     },
     methods: {
+        async handleSearch() {
+            console.log('$$uiFormRef', this.$refs.schemaForm.$$uiFormRef);
+        },
         handleUiChange(value) {
             const formatStr = jsonCode => JSON.stringify(JSON.parse(jsonCode));
 

diff --git a/packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/index.js b/packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/index.js
@@ -2,7 +2,7 @@
  * Created by Liu.Jun on 2019/9/29 19:01.
  */
 
-import propsSchema from './propsSchema.json';
+import propsSchema from './propsSchema.js';
 import uiSchema from './uiSchema.js';
 
 const View = () => import('./View.vue');

diff --git a/packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/propsSchema.js b/packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/propsSchema.js
@@ -0,0 +1,31 @@
+export default {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    id: 'Text',
+    title: '单文本输入组件',
+    description: '单文本输入组件，用于在页面配置一条文字信息',
+    type: 'object',
+    required: ['txt'],
+    properties: {
+        imgUrl: {
+            title: '测试图片上传',
+            type: 'string',
+            default: 'http://img.alicdn.com/tfs/TB1vYlkdnZmx1VjSZFGXXax2XXa-468-644.jpg_320x5000q100.jpg_.webp',
+            'ui:action': 'https://run.mocky.io/v3/518d7af7-204f-45ab-9628-a6e121dab8ca',
+            'ui:widget': 'UploadWidget',
+            'ui:btnText': '上传按钮文案配置',
+            'ui:responseFileUrl': (res) => {}
+        },
+        txt: {
+            title: '文字',
+            type: 'string',
+            'ui:placeholder': '输入你的内容',
+            'err:required': '必须输入标题文字内容'
+        },
+        txtColor: {
+            title: '选择文字颜色',
+            type: 'string',
+            format: 'color',
+            default: '#ff0132'
+        }
+    }
+};
diff --git a/packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/propsSchema.json b/packages/demo/demo-v2/src/pages/vue-editor/views/editor/viewComponents/Text/propsSchema.json
diff --git a/packages/demo/demo-v3/src/pages/index/views/Demo/index.vue b/packages/demo/demo-v3/src/pages/index/views/Demo/index.vue
@@ -194,6 +194,7 @@
                         </template>
                         <component
                             :is="curVueForm"
+                            ref="schemaForm"
                             :key="pageKey"
                             v-model="formData"
                             :schema="schema"
@@ -203,6 +204,7 @@
                             :form-footer="trueFormFooter"
                             :form-props="trueFormProps"
                             :fallback-label="true"
+                            @keyup.native.enter="handleSearch"
                             @form-mounted="handleFormMounted"
                             @change="handleDataChange"
                             @cancel="handleCancel"
@@ -454,6 +456,9 @@ export default {
                 formProps
             }));
         },
+        handleSearch() {
+            console.log('$$uiFormRef', this.$refs.schemaForm.$$uiFormRef);
+        },
         handleFormMounted(formRef) {
             console.log('Ui form component:', formRef);
         },

diff --git a/packages/lib/vue2/vue2-core/src/index.js b/packages/lib/vue2/vue2-core/src/index.js
@@ -104,6 +104,7 @@ export default function createForm(globalOptions = {}) {
             },
         },
         mounted() {
+            this.$$uiFormRef = this.$refs.genEditForm;
             this.$emit('on-form-mounted', this.$refs.genEditForm, {
                 formData: this.formData
             });

diff --git a/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.js b/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.js
@@ -11756,6 +11756,7 @@ function createForm() {
       }
     },
     mounted: function mounted() {
+      this.$$uiFormRef = this.$refs.genEditForm;
       this.$emit('on-form-mounted', this.$refs.genEditForm, {
         formData: this.formData
       });

diff --git a/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.min.js b/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.min.js
diff --git a/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.umd.js b/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.umd.js
@@ -11764,6 +11764,7 @@
         }
       },
       mounted: function mounted() {
+        this.$$uiFormRef = this.$refs.genEditForm;
         this.$emit('on-form-mounted', this.$refs.genEditForm, {
           formData: this.formData
         });

diff --git a/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.umd.min.js b/packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.umd.min.js
diff --git a/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.esm.js b/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.esm.js
@@ -11756,6 +11756,7 @@ function createForm() {
       }
     },
     mounted: function mounted() {
+      this.$$uiFormRef = this.$refs.genEditForm;
       this.$emit('on-form-mounted', this.$refs.genEditForm, {
         formData: this.formData
       });

diff --git a/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.esm.min.js b/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.esm.min.js
diff --git a/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.umd.js b/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.umd.js
@@ -11764,6 +11764,7 @@
         }
       },
       mounted: function mounted() {
+        this.$$uiFormRef = this.$refs.genEditForm;
         this.$emit('on-form-mounted', this.$refs.genEditForm, {
           formData: this.formData
         });

diff --git a/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.umd.min.js b/packages/lib/vue2/vue2-form-iview3/dist/vue2-form-iview3.umd.min.js
diff --git a/packages/lib/vue3/vue3-core/src/index.js b/packages/lib/vue3/vue3-core/src/index.js
@@ -34,9 +34,9 @@ export default function createForm(globalOptions = {}) {
         props: vueProps,
         emits: ['update:modelValue', 'change', 'cancel', 'submit', 'validation-failed', 'form-mounted'],
         setup(props, { slots, emit }) {
+            // global components
+            const internalInstance = getCurrentInstance();
             if (!Form.installed && globalOptions.WIDGET_MAP.widgetComponents) {
-                // global components
-                const internalInstance = getCurrentInstance();
                 Object.entries(globalOptions.WIDGET_MAP.widgetComponents).forEach(
                     ([componentName, component]) => internalInstance.appContext.app.component(componentName, component)
                 );
@@ -174,6 +174,8 @@ export default function createForm(globalOptions = {}) {
                         },
                         setFormRef: (form) => {
                             formRef = form;
+                            internalInstance.ctx.$$uiFormRef = formRef;
+
                             emit('form-mounted', form, {
                                 formData: rootFormData.value
                             });

diff --git a/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.esm.js b/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.esm.js
@@ -11323,10 +11323,10 @@ function createForm() {
     setup: function setup(props, _ref) {
       var slots = _ref.slots,
           emit = _ref.emit;
+      // global components
+      var internalInstance = getCurrentInstance();
 
       if (!Form.installed && globalOptions.WIDGET_MAP.widgetComponents) {
-        // global components
-        var internalInstance = getCurrentInstance();
         Object.entries(globalOptions.WIDGET_MAP.widgetComponents).forEach(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
               componentName = _ref3[0],
@@ -11472,6 +11472,7 @@ function createForm() {
           }, _defineProperty(_class, "genFromComponent_".concat(props.schema.id, "Form"), !!props.schema.id), _defineProperty(_class, "layoutColumn", !inline), _defineProperty(_class, "layoutColumn-".concat(layoutColumn), !inline), _class),
           setFormRef: function setFormRef(form) {
             formRef = form;
+            internalInstance.ctx.$$uiFormRef = formRef;
             emit('form-mounted', form, {
               formData: rootFormData.value
             });

diff --git a/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.esm.min.js b/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.esm.min.js
diff --git a/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.umd.js b/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.umd.js
@@ -11327,10 +11327,10 @@
       setup: function setup(props, _ref) {
         var slots = _ref.slots,
             emit = _ref.emit;
+        // global components
+        var internalInstance = Vue.getCurrentInstance();
 
         if (!Form.installed && globalOptions.WIDGET_MAP.widgetComponents) {
-          // global components
-          var internalInstance = Vue.getCurrentInstance();
           Object.entries(globalOptions.WIDGET_MAP.widgetComponents).forEach(function (_ref2) {
             var _ref3 = _slicedToArray(_ref2, 2),
                 componentName = _ref3[0],
@@ -11476,6 +11476,7 @@
             }, _defineProperty(_class, "genFromComponent_".concat(props.schema.id, "Form"), !!props.schema.id), _defineProperty(_class, "layoutColumn", !inline), _defineProperty(_class, "layoutColumn-".concat(layoutColumn), !inline), _class),
             setFormRef: function setFormRef(form) {
               formRef = form;
+              internalInstance.ctx.$$uiFormRef = formRef;
               emit('form-mounted', form, {
                 formData: rootFormData.value
               });

diff --git a/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.umd.min.js b/packages/lib/vue3/vue3-form-ant/dist/vue3-form-ant.umd.min.js
diff --git a/packages/lib/vue3/vue3-form-element/dist/vue3-form-element.esm.js b/packages/lib/vue3/vue3-form-element/dist/vue3-form-element.esm.js
@@ -11369,10 +11369,10 @@ function createForm() {
     setup: function setup(props, _ref) {
       var slots = _ref.slots,
           emit = _ref.emit;
+      // global components
+      var internalInstance = getCurrentInstance();
 
       if (!Form.installed && globalOptions.WIDGET_MAP.widgetComponents) {
-        // global components
-        var internalInstance = getCurrentInstance();
         Object.entries(globalOptions.WIDGET_MAP.widgetComponents).forEach(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
               componentName = _ref3[0],
@@ -11518,6 +11518,7 @@ function createForm() {
           }, _defineProperty(_class, "genFromComponent_".concat(props.schema.id, "Form"), !!props.schema.id), _defineProperty(_class, "layoutColumn", !inline), _defineProperty(_class, "layoutColumn-".concat(layoutColumn), !inline), _class),
           setFormRef: function setFormRef(form) {
             formRef = form;
+            internalInstance.ctx.$$uiFormRef = formRef;
             emit('form-mounted', form, {
               formData: rootFormData.value
             });