feat(lib): array 类型 item title description 支持 $index 特殊字符

re #19
lljj-x · Nov 20, 2020 · 8922650 · 8922650
1 parent 1ed69df
commit 8922650
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 57 deletions.
diff --git a/packages/lib/src/JsonSchemaForm/common/formUtils.js b/packages/lib/src/JsonSchemaForm/common/formUtils.js
@@ -3,7 +3,7 @@ import FIELDS_MAP from '../config/FIELDS_MAP';
 import retrieveSchema from './schema/retriev';
 import { getPathVal } from './vueUtils';
 
-import { isObject, getSchemaType } from './utils';
+import { getSchemaType, isObject } from './utils';
 
 // 配置表达式，或者常量，或者传入函数
 // 这里打破 JSON Schema 规范
@@ -35,6 +35,21 @@ function handleExpression(rootFormData, curNodePath, expression) {
     return expression;
 }
 
+export function replaceArrayIndex({ schema, uiSchema } = {}, index) {
+    const itemUiOptions = getUiOptions({
+        schema,
+        uiSchema,
+        containsSpec: false
+    });
+
+    return ['title', 'description'].reduce((preVal, curItem) => {
+        if (itemUiOptions[curItem]) {
+            preVal[`ui:${curItem}`] = String(itemUiOptions[curItem]).replace(/\$index/g, index + 1);
+        }
+        return preVal;
+    }, {});
+}
+
 // 是否为 hidden Widget
 export function isHiddenWidget({
     schema = {},
@@ -105,36 +120,39 @@ export function getUserUiOptions({
 // 解析当前节点的ui options参数
 export function getUiOptions({
     schema = {},
-    uiSchema = {}
+    uiSchema = {},
+    containsSpec = true
 }) {
     const spec = {};
-    if (undefined !== schema.multipleOf) {
+    if (containsSpec) {
+        if (undefined !== schema.multipleOf) {
         // 组件计数器步长
-        spec.step = schema.multipleOf;
-    }
-    if (schema.minimum || schema.minimum === 0) {
-        spec.min = schema.minimum;
-    }
-    if (schema.maximum || schema.maximum === 0) {
-        spec.max = schema.maximum;
-    }
+            spec.step = schema.multipleOf;
+        }
+        if (schema.minimum || schema.minimum === 0) {
+            spec.min = schema.minimum;
+        }
+        if (schema.maximum || schema.maximum === 0) {
+            spec.max = schema.maximum;
+        }
 
-    if (schema.minLength || schema.minLength === 0) {
-        spec.minlength = schema.minLength;
-    }
-    if (schema.maxLength || schema.maxLength === 0) {
-        spec.maxlength = schema.maxLength;
-    }
+        if (schema.minLength || schema.minLength === 0) {
+            spec.minlength = schema.minLength;
+        }
+        if (schema.maxLength || schema.maxLength === 0) {
+            spec.maxlength = schema.maxLength;
+        }
 
-    if (schema.format === 'date-time' || schema.format === 'date') {
+        if (schema.format === 'date-time' || schema.format === 'date') {
         // 数组类型 时间区间
         // 打破了schema的规范，type array 配置了 format
-        if (schema.type === 'array') {
-            spec.isRange = true;
-            spec.isNumberValue = !(schema.items && schema.items.type === 'string');
-        } else {
+            if (schema.type === 'array') {
+                spec.isRange = true;
+                spec.isNumberValue = !(schema.items && schema.items.type === 'string');
+            } else {
             // 字符串 ISO 时间
-            spec.isNumberValue = !(schema.type === 'string');
+                spec.isNumberValue = !(schema.type === 'string');
+            }
         }
     }
 

diff --git a/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldNormal.js b/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldNormal.js
@@ -3,7 +3,7 @@
  */
 
 import { computedCurPath } from '../../../common/vueUtils';
-import { getUiOptions } from '../../../common/formUtils';
+import { getUiOptions, replaceArrayIndex } from '../../../common/formUtils';
 
 import SchemaField from '../../SchemaField';
 import FieldGroupWrap from '../../../fieldComponents/FieldGroupWrap';
@@ -43,23 +43,33 @@ export default {
             uiSchema
         });
 
-        const arrayItemsVNodeList = itemsFormData.map((item, index) => ({
-            key: item.key,
-            vNode: h(
-                SchemaField,
-                {
-                    key: item.key,
-                    props: {
-                        ...context.props,
-                        schema: schema.items,
-                        required: !([].concat(schema.items.type).includes('null')),
-                        uiSchema: uiSchema.items,
-                        errorSchema: errorSchema.items,
-                        curNodePath: computedCurPath(curNodePath, index)
+        const arrayItemsVNodeList = itemsFormData.map((item, index) => {
+            const tempUiSchema = replaceArrayIndex({
+                schema: schema.items,
+                uiSchema: uiSchema.items
+            }, index);
+
+            return {
+                key: item.key,
+                vNode: h(
+                    SchemaField,
+                    {
+                        key: item.key,
+                        props: {
+                            ...context.props,
+                            schema: schema.items,
+                            required: !([].concat(schema.items.type).includes('null')),
+                            uiSchema: {
+                                ...uiSchema.items,
+                                ...tempUiSchema, // 处理过 $index 的标识
+                            },
+                            errorSchema: errorSchema.items,
+                            curNodePath: computedCurPath(curNodePath, index)
+                        }
                     }
-                }
-            )
-        }));
+                )
+            };
+        });
 
         return h(
             FieldGroupWrap,

diff --git a/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldTuple.js b/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldTuple.js
@@ -4,7 +4,7 @@
 
 
 import vueProps from '../../props';
-import { allowAdditionalItems, getUiOptions } from '../../../common/formUtils';
+import { allowAdditionalItems, getUiOptions, replaceArrayIndex } from '../../../common/formUtils';
 import getDefaultFormState from '../../../common/schema/getDefaultFormState';
 import { computedCurPath } from '../../../common/vueUtils';
 import { cutOff } from '../../../common/arrayUtils';
@@ -96,23 +96,33 @@ export default {
         ));
 
         // 通过order组件做可排序处理
-        const additionalVnodeArr = cutOfArr[1].map((item, index) => ({
-            key: item.key,
-            vNode: h(
-                SchemaField,
-                {
-                    key: item.key,
-                    props: {
-                        ...this.$props,
-                        schema: schema.additionalItems,
-                        required: !([].concat(schema.additionalItems.type).includes('null')),
-                        uiSchema: uiSchema.additionalItems,
-                        errorSchema: errorSchema.additionalItems,
-                        curNodePath: computedCurPath(this.curNodePath, index + schema.items.length)
+        const additionalVnodeArr = cutOfArr[1].map((item, index) => {
+            const tempUiSchema = replaceArrayIndex({
+                schema: schema.additionalItems,
+                uiSchema: uiSchema.additionalItems
+            }, index);
+
+            return {
+                key: item.key,
+                vNode: h(
+                    SchemaField,
+                    {
+                        key: item.key,
+                        props: {
+                            ...this.$props,
+                            schema: schema.additionalItems,
+                            required: !([].concat(schema.additionalItems.type).includes('null')),
+                            uiSchema: {
+                                ...uiSchema.additionalItems,
+                                ...tempUiSchema
+                            },
+                            errorSchema: errorSchema.additionalItems,
+                            curNodePath: computedCurPath(this.curNodePath, index + schema.items.length)
+                        }
                     }
-                }
-            )
-        }));
+                )
+            };
+        });
 
         // 是否可添加同时受限于 additionalItems 属性
         const trueAddable = (addable === undefined ? true : addable) && allowAdditionalItems(this.schema);