feat(vjsf dependencies): 支持 object dependencies property ,scheam 依赖不支持

lljj-x · lljj-x · commit 1cda05d78bc3 · 2020-09-30T18:16:03.000+08:00
diff --git a/packages/demo/src/index/views/Demo/schemaTypes/91.Object-property-dependencies/index.js b/packages/demo/src/index/views/Demo/schemaTypes/91.Object-property-dependencies/index.js
@@ -4,22 +4,54 @@
 
 export default {
     schema: {
-        title: 'Property dependencies',
-        description: 'These samples are best viewed without live validation.',
+        title: '单向依赖',
+        description: '最基本的属性单向依赖，ui-schema 配置 onlyShowIfDependent 只在被依赖时才显示',
         type: 'object',
         properties: {
             unidirectional: {
                 title: 'Unidirectional',
-                src: 'https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies',
+                type: 'object',
+                'ui:options': {
+                    onlyShowIfDependent: true
+                },
+                properties: {
+                    name: {
+                        title: 'Name',
+                        type: 'string'
+                    },
+                    credit_card: {
+                        title: 'Credit card',
+                        type: 'string'
+                    },
+                    billing_address: {
+                        title: 'Billing address',
+                        type: 'string'
+                    }
+                },
+                required: [
+                    'name'
+                ],
+                dependencies: {
+                    credit_card: [
+                        'billing_address'
+                    ]
+                }
+            },
+            bidirectional: {
+                title: '双向依赖',
+                description: '显式地定义双向依赖，如果配置 onlyShowIfDependent 会导致初始化没有值时都无法渲染，这里需要使用者执行考虑',
                 type: 'object',
                 properties: {
                     name: {
+                        title: 'Name',
                         type: 'string'
                     },
                     credit_card: {
-                        type: 'number'
+                        title: 'Credit card',
+                        type: 'string'
                     },
                     billing_address: {
+                        title: 'Billing address',
                         type: 'string'
                     }
                 },
@@ -29,6 +61,9 @@ export default {
                 dependencies: {
                     credit_card: [
                         'billing_address'
+                    ],
+                    billing_address: [
+                        'credit_card'
                     ]
                 }
             }
diff --git a/packages/docs/docs/zh/guide/adv-config.md b/packages/docs/docs/zh/guide/adv-config.md
@@ -5,12 +5,18 @@ sidebarDepth: 2
 # 高级配置
 
 ## 数据联动
-* 数据联动的实现需要 `JSON Schema` [anyOf](https://form.lljj.me/#/demo?type=AnyOf) [oneOf](https://form.lljj.me/#/demo?type=OneOf) 格式来实现
-* 详细 AnyOf、oneOf 配置请 [点击查看](/zh/rules/combining.html)
 
-:::tip
-如果觉得 anyOf 配置麻烦也可以使用 [ui:field 使用已有联级组件](/zh/guide/adv-config.html#demo-联级选择)，或者配置 [ui-schema fieldStyle](/zh/guide/basic-config.html#ui-schema) 通过样式隐藏来实现。
-:::
+要实现数据联动可以有多种方法来实现
+
+* 通过 [anyOf](https://form.lljj.me/#/demo?type=AnyOf) 配置
+> 详细 AnyOf、oneOf 配置请 [点击查看](/zh/rules/combining.html)
+
+* 通过 object dependencies 实现联动
+* 通过 if else 实现联动 Todo
+* 自定义组件配置 [ui:field 使用已有联级组件](/zh/guide/adv-config.html#demo-联级选择)
+* 通过 [ui-schema fieldStyle](/zh/guide/basic-config.html#ui-schema) 动态配置 style样式隐藏显示
+
+### anyOf 实现数据联动
 
 anyOf联动如下演示：（点击 `保存` 按钮查看 `formData` 数据）
 
@@ -175,6 +181,20 @@ export default {
 
 >* 推荐使用 `anyOf`，`oneOf` 只能有一个符合的结果
 
+### object dependencies 实现数据联动
+
+object dependencies 目前只支持属性联动，schema联动不支持暂时的计划也不打算支持。
+
+### 通过 if else 实现联动
+目前来看 if else 比较容易解决数据联动的场景，且可以根据值来判断但依旧不支持逻辑表达式
+
+### 通过 ui:field 调用自己的联级组件
+打破 JSON Schema 规范
+
+### ui-schema fieldStyle 实现联动
+打破 JSON Schema 规范
+因为 ui-schema和formData 本身都是响应式数据，所以完全可以动态动态 ui-schema的值，并且像有些类似框架直接提供了 使用函数表达式的能力
+
 ## 树形结构
 * 树形结构需要使用 `$ref` 来递归调用自己
 * 详细 `$ref` 配置请 [点击查看](https://json-schema.org/understanding-json-schema/structuring.html?highlight=definitions#reuse)
diff --git a/packages/lib/src/JsonSchemaForm/common/utils.js b/packages/lib/src/JsonSchemaForm/common/utils.js
@@ -3,11 +3,8 @@
  */
 
 // is object
-export function isObject(thing) {
-    if (typeof File !== 'undefined' && thing instanceof File) {
-        return false;
-    }
-    return typeof thing === 'object' && thing !== null && !Array.isArray(thing);
+export function isObject(object) {
+    return Object.prototype.toString.call(object) === '[object Object]';
 }
 
 // is arguments
diff --git a/packages/lib/src/JsonSchemaForm/fields/ObjectField/index.js b/packages/lib/src/JsonSchemaForm/fields/ObjectField/index.js
@@ -3,10 +3,9 @@
  */
 
 import vueProps from '../props';
-
 import { orderProperties, getUiOptions } from '../../common/formUtils';
-import { computedCurPath } from '../../common/vueUtils';
-
+import { computedCurPath, getPathVal } from '../../common/vueUtils';
+import { isObject } from '../../common/utils';
 import FieldGroupWrap from '../../fieldComponents/FieldGroupWrap';
 import Widget from '../../fieldComponents/Widget';
 
@@ -15,26 +14,50 @@ import SchemaField from '../SchemaField';
 
 export default {
     name: 'ObjectField',
-    props: {
-        ...vueProps
-    },
-    methods: {
-        isRequired(name) {
-            const schema = this.schema;
-            return Array.isArray(schema.required) && !!~schema.required.indexOf(name);
-        }
-    },
-    render(h) {
-        const self = this;
-        const props = this.$props;
+    functional: true,
+    props: vueProps,
+    render(h, context) {
         const {
             schema,
             uiSchema,
             errorSchema,
-        } = props;
+            needValidFieldGroup,
+            curNodePath,
+            rootFormData
+        } = context.props;
+
+        // required
+        const isRequired = name => Array.isArray(schema.required) && !!~schema.required.indexOf(name);
+
+        // 存在 dependencies 配置，需要当前属性是否存在依赖关系 和当前属性是否正在被依赖
+        // tip: 判断依赖关系需要使用了 formData 的值来做判断，所以当用户输入的时候会触发整个对象树重新渲染
+        // TODO: 每个属性都需要单独来遍历 dependencies 属性可以优化一点点点点点（可通过 key value 反转值加个缓存来计算）
+        const isDependOn = (name) => {
+            let isDependency = false; // 是否是一个被依赖项
+            let curDependent = false; // 当前是否触发依赖
+
+            if (isObject(schema.dependencies)) {
+                curDependent = Object.entries(schema.dependencies).some(([key, value]) => {
+
+                    // 是否和当前属性存在依赖关系
+                    const tempDependency = !!(Array.isArray(value) && ~value.indexOf(name));
+
+                    // 是否是一个被依赖项
+                    isDependency = isDependency || tempDependency;
+
+                    // 当前需要依赖
+                    return tempDependency && getPathVal(rootFormData, curNodePath)[key] !== undefined;
+                });
+            }
+
+            return {
+                isDependency,
+                curDependent
+            };
+        };
 
         const {
-            title, description, showTitle, showDescription, order, fieldClass, fieldAttrs, fieldStyle
+            title, description, showTitle, showDescription, order, fieldClass, fieldAttrs, fieldStyle, onlyShowIfDependent
         } = getUiOptions({
             schema,
             uiSchema
@@ -44,19 +67,26 @@ export default {
         const orderedProperties = orderProperties(properties, order);
 
         // 递归参数
-        const propertiesVNodeList = orderedProperties.map(name => h(
-            SchemaField,
-            {
-                props: {
-                    ...props,
-                    schema: schema.properties[name],
-                    uiSchema: uiSchema[name],
-                    errorSchema: errorSchema[name],
-                    required: self.isRequired(name),
-                    curNodePath: computedCurPath(props.curNodePath, name)
+        const propertiesVNodeList = orderedProperties.map((name) => {
+            const required = isRequired(name);
+            const { isDependency, curDependent } = isDependOn(name);
+
+            return h(
+                // onlyShowWhenDependent 只渲染被依赖的属性
+                (isDependency && onlyShowIfDependent && !curDependent) ? null : SchemaField,
+                {
+                    key: name,
+                    props: {
+                        ...context.props,
+                        schema: schema.properties[name],
+                        uiSchema: uiSchema[name],
+                        errorSchema: errorSchema[name],
+                        required: required || curDependent,
+                        curNodePath: computedCurPath(curNodePath, name)
+                    }
                 }
-            }
-        ));
+            );
+        });
 
         return h(
             FieldGroupWrap,
@@ -67,7 +97,7 @@ export default {
                     showTitle,
                     showDescription
                 },
-                class: fieldClass,
+                class: { ...context.data.class, ...fieldClass },
                 attrs: fieldAttrs,
                 style: fieldStyle
             },
@@ -81,23 +111,23 @@ export default {
                         ...propertiesVNodeList,
 
                         // 插入一个Widget，校验 object组 - minProperties. maxProperties. oneOf 等需要外层校验的数据
-                        this.needValidFieldGroup ? h(Widget, {
+                        needValidFieldGroup ? h(Widget, {
                             class: {
                                 validateWidget: true,
                                 'validateWidget-object': true
                             },
                             props: {
-                                schema: Object.entries(self.$props.schema).reduce((preVal, [key, value]) => {
+                                schema: Object.entries(schema).reduce((preVal, [key, value]) => {
                                     if (
-                                        self.$props.schema.additionalProperties === false
+                                        schema.additionalProperties === false
                                         || !['properties', 'id', '$id'].includes(key)
                                     ) preVal[key] = value;
                                     return preVal;
                                 }, {}),
                                 uiSchema,
                                 errorSchema,
-                                curNodePath: props.curNodePath,
-                                rootFormData: props.rootFormData
+                                curNodePath,
+                                rootFormData
                             }
                         }) : null
                     ]
