feat(widget): widget 组件支持透传 $attrs

lljj-x · lljj-x · commit 1a8631650096 · 2020-09-27T16:22:20.000+08:00
render函数widget attrs和props 合并通过attrs传递，用来实现透传组件参数。同时 array类型items配置枚举会默认传递multiple参数到widget组件 fix #16
diff --git a/packages/demo/src/index/views/Demo/schemaTypes/1.Simple/index.js b/packages/demo/src/index/views/Demo/schemaTypes/1.Simple/index.js
@@ -73,9 +73,7 @@ export default {
             'ui:options': {
                 placeholder: '请输入你的签名',
                 type: 'textarea',
-                attrs: {
-                    rows: 6
-                }
+                rows: 6
             }
         }
     },
diff --git a/packages/demo/src/index/views/Demo/schemaTypes/5.Widgets/index.js b/packages/demo/src/index/views/Demo/schemaTypes/5.Widgets/index.js
@@ -104,9 +104,7 @@ export default {
             textarea: {
                 'ui:options': {
                     type: 'textarea',
-                    attrs: {
-                        rows: 6,
-                    },
+                    rows: 6,
                     autosize: {
                         minRows: 2,
                         maxRows: 4
diff --git a/packages/demo/src/vue-editor/views/editor/config/mDefaultItems.js b/packages/demo/src/vue-editor/views/editor/config/mDefaultItems.js
@@ -4,7 +4,7 @@
 
 export default [
     {
-        name: 'CarouselImg',
+        name: 'MCarouselImg',
         value: {
             imgList: [
                 {
@@ -27,7 +27,7 @@ export default [
         }
     },
     {
-        name: 'CategoryList',
+        name: 'MCategoryList',
         value: {
             imgList: [
                 {
@@ -69,14 +69,14 @@ export default [
         }
     },
     {
-        name: 'Text',
+        name: 'MText',
         value: {
             txt: '推荐商品',
             txtColor: '#e46028'
         }
     },
     {
-        name: 'RecommendGoods',
+        name: 'MRecommendGoods',
         value: {
             title: '推荐商品',
             imgList: [
@@ -100,14 +100,14 @@ export default [
         }
     },
     {
-        name: 'Text',
+        name: 'MText',
         value: {
             txt: '抢购商品',
             txtColor: '#0A96ED'
         }
     },
     {
-        name: 'RecommendGoods',
+        name: 'MRecommendGoods',
         value: {
             title: '抢购商品',
             imgList: [
diff --git a/packages/demo/src/vue-editor/views/editor/viewComponentsM/CarouselImg/CarouselImg.json b/packages/demo/src/vue-editor/views/editor/viewComponentsM/CarouselImg/CarouselImg.json
@@ -1,6 +1,6 @@
 {
     "$schema": "http://json-schema.org/draft-07/schema#",
-    "id": "CarouselImg",
+    "id": "MCarouselImg",
     "type": "object",
     "properties": {
         "imgList": {
diff --git a/packages/demo/src/vue-editor/views/editor/viewComponentsM/CategoryList/propsSchema.json b/packages/demo/src/vue-editor/views/editor/viewComponentsM/CategoryList/propsSchema.json
@@ -1,6 +1,6 @@
 {
     "$schema": "http://json-schema.org/draft-07/schema#",
-    "id": "CategoryList",
+    "id": "MCategoryList",
     "type": "object",
     "title": "配置分类条",
     "description": "分别配置每个分类的名称以及图片链接，最多配置10组，最少配置3组",
diff --git a/packages/demo/src/vue-editor/views/editor/viewComponentsM/RecommendGoods/propsSchema.json b/packages/demo/src/vue-editor/views/editor/viewComponentsM/RecommendGoods/propsSchema.json
@@ -1,6 +1,6 @@
 {
     "$schema": "http://json-schema.org/draft-07/schema#",
-    "id": "RecommendGoods",
+    "id": "MRecommendGoods",
     "type": "object",
     "title": "配置分类条",
     "description": "分别配置每个分类的名称以及图片链接，最多配置10组，最少配置3组",
diff --git a/packages/demo/src/vue-editor/views/editor/viewComponentsM/Text/propsSchema.json b/packages/demo/src/vue-editor/views/editor/viewComponentsM/Text/propsSchema.json
@@ -1,19 +1,19 @@
-{
-    "$schema": "http://json-schema.org/draft-07/schema#",
-    "id": "Text",
-    "title": "单文本输入组件",
-    "description":"单文本输入组件，用于在页面配置一条文字信息" ,
-    "type": "object",
-    "required": ["txt"],
-    "properties": {
-        "txt": {
-            "title": "文字",
-            "type": "string"
-        },
-        "txtColor": {
-            "title": "选择文字颜色",
-            "type": "string",
-            "default": "#ff0132"
-        }
-    }
-}
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "id": "MText",
+    "title": "单文本输入组件",
+    "description":"单文本输入组件，用于在页面配置一条文字信息" ,
+    "type": "object",
+    "required": ["txt"],
+    "properties": {
+        "txt": {
+            "title": "文字",
+            "type": "string"
+        },
+        "txtColor": {
+            "title": "选择文字颜色",
+            "type": "string",
+            "default": "#ff0132"
+        }
+    }
+}
diff --git a/packages/docs/docs/zh/guide/basic-config.md b/packages/docs/docs/zh/guide/basic-config.md
@@ -129,6 +129,7 @@ uiSchema = {
             showDescription: '是否显示描述信息', // 只对type为 `object`、`array` 类型有效
             attrs: {
                 // 通过 vue render函数 attrs 传递给 Widget 组件，只能配置在叶子节点
+                // 你也配置在外层，程序会合并 attrs 和 其它外层属性 通过 attrs 传递给子组件
                 autofocus: true
             },
             style: {
@@ -195,9 +196,7 @@ uiSchema = {
             "ui:options": {
                 "type": "textarea",
                 "placeholder": "请输入FirstName（配置在schema中）",
-                "attrs": {
-                    "rows": 4
-                }
+                "rows": 4
             }
         }
     }
@@ -241,9 +240,7 @@ export default {
                         'ui:options': {
                             type: 'textarea',
                             placeholder: 'placeholder（配置在schema中）',
-                            attrs: {
-                                rows: 4
-                            }
+                            rows: 4
                         }
                     },
                     inputText: {
@@ -268,17 +265,15 @@ export default {
                     'ui:description': '这里重置了描述信息',
                     'ui:emptyValue': '',
                     'ui:options': {
-                        attrs: {
-                            autofocus: true,
-                            rows: 6,
-                        },
                         style: {
                             boxShadow: '0 0 6px 2px #2b9939'
                         },
                         class: {
                             className_hei: true
                         },
                         type: 'textarea',
+                        autofocus: true,
+                        rows: 6,
                         placeholder: '请输入你的内容'
                     }
                 },
diff --git a/packages/lib/src/JsonSchemaForm/fieldComponents/Widget.js b/packages/lib/src/JsonSchemaForm/fieldComponents/Widget.js
@@ -233,15 +233,12 @@ export default {
                 h( // 关键输入组件
                     self.widget,
                     {
-                        props: {
-                            ...self.uiProps,
-                            value: this.value, // v-model
-                        },
                         style: self.widgetStyle,
                         class: self.widgetClass,
                         attrs: {
-                            placeholder: self.uiProps.placeholder, // 兼容placeholder配置在 外层或者attr内
-                            ...self.widgetAttrs
+                            ...self.widgetAttrs,
+                            ...self.uiProps,
+                            value: this.value, // v-model
                         },
                         on: {
                             input(event) {
diff --git a/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldMultiSelect.js b/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldMultiSelect.js
@@ -36,6 +36,8 @@ export default {
         }));
 
         // 存在枚举数据列表 传入 enumOptions
+        widgetConfig.uiProps.multiple = true;
+
         if (enumOptions) {
             widgetConfig.uiProps.enumOptions = enumOptions;
         }
diff --git a/packages/lib/src/JsonSchemaForm/fields/ArrayField/index.js b/packages/lib/src/JsonSchemaForm/fields/ArrayField/index.js
@@ -45,7 +45,7 @@ export default {
     watch: {
         curFormData(newVal, oldVal) {
             // 引用类型，当值不相等，说明是被重新赋值
-            if (newVal !== oldVal) {
+            if (newVal !== oldVal && Array.isArray(newVal)) {
                 this.formKeys = newVal.map(() => genId());
             }
         }
@@ -54,7 +54,13 @@ export default {
         // 获取当前的值
         getCuFormData() {
             const { rootFormData, curNodePath } = this.$props;
-            return getPathVal(rootFormData, curNodePath);
+            const value = getPathVal(rootFormData, curNodePath);
+
+            if (Array.isArray(value)) return value;
+
+            console.error('error: type array，值必须为 array 类型');
+
+            return [];
         },
         // 获取一个新item
         getNewFormDataRow() {
diff --git a/packages/lib/src/JsonSchemaForm/widgets/DatePickerWidget/index.js b/packages/lib/src/JsonSchemaForm/widgets/DatePickerWidget/index.js
@@ -6,9 +6,9 @@ export default {
     name: 'DatePickerWidget',
     functional: true,
     render(h, context) {
-        const { isNumberValue, isRange, ...otherProps } = context.data.props;
+        const { isNumberValue, isRange, ...otherProps } = context.data.attrs || {};
 
-        context.data.props = {
+        context.data.attrs = {
             type: isRange ? 'daterange' : 'date',
             'value-format': isNumberValue ? 'timestamp' : 'yyyy-MM-dd',
             ...otherProps
diff --git a/packages/lib/src/JsonSchemaForm/widgets/DateTimePickerWidget/index.js b/packages/lib/src/JsonSchemaForm/widgets/DateTimePickerWidget/index.js
@@ -6,9 +6,9 @@ export default {
     name: 'DateTimePickerWidget',
     functional: true,
     render(h, context) {
-        const { isNumberValue, isRange, ...otherProps } = context.data.props;
+        const { isNumberValue, isRange, ...otherProps } = context.data.attrs || {};
 
-        context.data.props = {
+        context.data.attrs = {
             type: isRange ? 'datetimerange' : 'datetime',
             ...otherProps
         };
diff --git a/packages/lib/src/JsonSchemaForm/widgets/RadioWidget/index.vue b/packages/lib/src/JsonSchemaForm/widgets/RadioWidget/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-radio-group v-model="checkList">
+    <el-radio-group v-model="checkList" v-bind="$attrs">
         <el-radio v-for="(item, index) in enumOptions" :key="index" :label="item.value">{{ item.label }}</el-radio>
     </el-radio-group>
 </template>
diff --git a/packages/lib/src/JsonSchemaForm/widgets/SelectWidget/index.vue b/packages/lib/src/JsonSchemaForm/widgets/SelectWidget/index.vue
@@ -11,8 +11,8 @@
         name: 'SelectWidget',
         props: {
             value: {
-                default: () => '',
-                type: [String, Number, Boolean]
+                default: null,
+                type: null
             },
             enumOptions: {
                 default: () => [],
diff --git a/packages/lib/src/JsonSchemaForm/widgets/TimePickerWidget/index.js b/packages/lib/src/JsonSchemaForm/widgets/TimePickerWidget/index.js
@@ -6,9 +6,9 @@ export default {
     name: 'TimePickerWidget',
     functional: true,
     render(h, context) {
-        context.data.props = {
+        context.data.attrs = {
             'value-format': 'HH:mm:ss',
-            ...context.data.props
+            ...context.data.attrs || {}
         };
 
         const oldInputCall = context.data.on.input;

Original file line number	Diff line number	Diff line change
`@@ -73,9 +73,7 @@ export default {`
`73`	`73`	`'ui:options': {`
`74`	`74`	`placeholder: '请输入你的签名',`
`75`	`75`	`type: 'textarea',`
`76`		`- attrs: {`
`77`		`- rows: 6`
`78`		`- }`
	`76`	`+ rows: 6`
`79`	`77`	`}`
`80`	`78`	`}`
`81`	`79`	`},`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`
`5`	`5`	`export default [`
`6`	`6`	`{`
`7`		`- name: 'CarouselImg',`
	`7`	`+ name: 'MCarouselImg',`
`8`	`8`	`value: {`
`9`	`9`	`imgList: [`
`10`	`10`	`{`
`@@ -27,7 +27,7 @@ export default [`
`27`	`27`	`}`
`28`	`28`	`},`
`29`	`29`	`{`
`30`		`- name: 'CategoryList',`
	`30`	`+ name: 'MCategoryList',`
`31`	`31`	`value: {`
`32`	`32`	`imgList: [`
`33`	`33`	`{`
`@@ -69,14 +69,14 @@ export default [`
`69`	`69`	`}`
`70`	`70`	`},`
`71`	`71`	`{`
`72`		`- name: 'Text',`
	`72`	`+ name: 'MText',`
`73`	`73`	`value: {`
`74`	`74`	`txt: '推荐商品',`
`75`	`75`	`txtColor: '#e46028'`
`76`	`76`	`}`
`77`	`77`	`},`
`78`	`78`	`{`
`79`		`- name: 'RecommendGoods',`
	`79`	`+ name: 'MRecommendGoods',`
`80`	`80`	`value: {`
`81`	`81`	`title: '推荐商品',`
`82`	`82`	`imgList: [`
`@@ -100,14 +100,14 @@ export default [`
`100`	`100`	`}`
`101`	`101`	`},`
`102`	`102`	`{`
`103`		`- name: 'Text',`
	`103`	`+ name: 'MText',`
`104`	`104`	`value: {`
`105`	`105`	`txt: '抢购商品',`
`106`	`106`	`txtColor: '#0A96ED'`
`107`	`107`	`}`
`108`	`108`	`},`
`109`	`109`	`{`
`110`		`- name: 'RecommendGoods',`
	`110`	`+ name: 'MRecommendGoods',`
`111`	`111`	`value: {`
`112`	`112`	`title: '抢购商品',`
`113`	`113`	`imgList: [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "http://json-schema.org/draft-07/schema#",`
`3`		`- "id": "CarouselImg",`
	`3`	`+ "id": "MCarouselImg",`
`4`	`4`	`"type": "object",`
`5`	`5`	`"properties": {`
`6`	`6`	`"imgList": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "http://json-schema.org/draft-07/schema#",`
`3`		`- "id": "CategoryList",`
	`3`	`+ "id": "MCategoryList",`
`4`	`4`	`"type": "object",`
`5`	`5`	`"title": "配置分类条",`
`6`	`6`	`"description": "分别配置每个分类的名称以及图片链接，最多配置10组，最少配置3组",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "http://json-schema.org/draft-07/schema#",`
`3`		`- "id": "RecommendGoods",`
	`3`	`+ "id": "MRecommendGoods",`
`4`	`4`	`"type": "object",`
`5`	`5`	`"title": "配置分类条",`
`6`	`6`	`"description": "分别配置每个分类的名称以及图片链接，最多配置10组，最少配置3组",`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,8 @@ export default {`
`36`	`36`	`}));`
`37`	`37`
`38`	`38`	`// 存在枚举数据列表传入 enumOptions`
	`39`	`+ widgetConfig.uiProps.multiple = true;`
	`40`	`+`
`39`	`41`	`if (enumOptions) {`
`40`	`42`	`widgetConfig.uiProps.enumOptions = enumOptions;`
`41`	`43`	`}`