feat(lib): 对ui:xxx 配置支持表达式，options 内不支持表达式以便区分

lljj-x · Nov 23, 2020 · 7c20bb8 · 7c20bb8
1 parent f0e1d16
commit 7c20bb8
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 23 deletions.
diff --git a/packages/lib/src/JsonSchemaForm/common/formUtils.js b/packages/lib/src/JsonSchemaForm/common/formUtils.js
@@ -5,10 +5,10 @@ import { getPathVal } from './vueUtils';
 
 import { getSchemaType, isObject } from './utils';
 
-// 配置表达式，或者常量，或者传入函数
+// 通用的处理表达式方法
 // 这里打破 JSON Schema 规范
 const regExpression = /{{(.*)}}/;
-function handleExpression(rootFormData, curNodePath, expression) {
+function handleExpression(rootFormData, curNodePath, expression, fallBack) {
     // 未配置
     if (undefined === expression) {
         return undefined;
@@ -26,13 +26,8 @@ function handleExpression(rootFormData, curNodePath, expression) {
         return fn(getPathVal(rootFormData, curNodePath, 1), rootFormData);
     }
 
-    // 配置了函数 function
-    if (typeof expression === 'function') {
-        return expression(getPathVal(rootFormData, curNodePath, 1), rootFormData);
-    }
-
-    // 配置了常量 ？？
-    return expression;
+    // 回退
+    return fallBack();
 }
 
 export function replaceArrayIndex({ schema, uiSchema } = {}, index) {
@@ -61,7 +56,17 @@ export function isHiddenWidget({
     const hiddenExpression = uiSchema['ui:hidden'] || schema['ui:hidden'];
 
     // 支持配置 ui:hidden 表达式
-    return widget === 'HiddenWidget' || widget === 'hidden' || !!handleExpression(rootFormData, curNodePath, hiddenExpression);
+    return widget === 'HiddenWidget'
+        || widget === 'hidden'
+        || !!handleExpression(rootFormData, curNodePath, hiddenExpression, () => {
+            // 配置了函数 function
+            if (typeof hiddenExpression === 'function') {
+                return hiddenExpression(getPathVal(rootFormData, curNodePath, 1), rootFormData);
+            }
+
+            // 配置了常量 ？？
+            return hiddenExpression;
+        });
 }
 
 // 解析当前节点 ui field
@@ -102,7 +107,9 @@ export function getUiField({
 // 解析用户配置的 uiSchema options
 export function getUserUiOptions({
     schema = {},
-    uiSchema = {}
+    uiSchema = {},
+    curNodePath, // undefined 不处理 表达式
+    rootFormData = {}
 }) {
     // 支持 uiSchema配置在 schema文件中
     return Object.assign({}, ...[schema, uiSchema].map(itemSchema => Object.keys(itemSchema)
@@ -113,15 +120,22 @@ export function getUserUiOptions({
             if (key === 'ui:options' && isObject(value)) {
                 return { ...options, ...value };
             }
-            return { ...options, [key.substring(3)]: value };
+
+            // 只对 ui:xxx 配置形式支持表达式
+            return {
+                ...options,
+                [key.substring(3)]: curNodePath === undefined ? value : handleExpression(rootFormData, curNodePath, value, () => value)
+            };
         }, {})));
 }
 
 // 解析当前节点的ui options参数
 export function getUiOptions({
     schema = {},
     uiSchema = {},
-    containsSpec = true
+    containsSpec = true,
+    curNodePath,
+    rootFormData,
 }) {
     const spec = {};
     if (containsSpec) {
@@ -168,6 +182,8 @@ export function getUiOptions({
         ...getUserUiOptions({
             schema,
             uiSchema,
+            curNodePath,
+            rootFormData
         })
     };
 }
@@ -345,12 +361,14 @@ export function allowAdditionalItems(schema) {
 }
 
 // 下拉选项
-export function optionsList(schema, uiSchema) {
+export function optionsList(schema, uiSchema, curNodePath, rootFormData) {
     // enum
     if (schema.enum) {
         const uiOptions = getUserUiOptions({
             schema,
-            uiSchema
+            uiSchema,
+            curNodePath,
+            rootFormData
         });
 
         // ui配置 enumNames 优先
@@ -367,7 +385,9 @@ export function optionsList(schema, uiSchema) {
     return altSchemas.map((curSchema, i) => {
         const uiOptions = (altUiSchemas && altUiSchemas[i]) ? getUserUiOptions({
             schema: curSchema,
-            uiSchema: altUiSchemas[i]
+            uiSchema: altUiSchemas[i],
+            curNodePath,
+            rootFormData
         }) : {};
         const value = toConstant(curSchema);
         const label = uiOptions.title || curSchema.title || String(value);

diff --git a/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldMultiSelect.js b/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldMultiSelect.js
@@ -20,13 +20,13 @@ export default {
     },
     render(h, context) {
         const {
-            schema, rootSchema, uiSchema
+            schema, rootSchema, uiSchema, curNodePath, rootFormData
         } = context.props;
 
         // 这里需要索引当前节点，通过到schemaField组件的会统一处理
         const itemsSchema = retrieveSchema(schema.items, rootSchema);
 
-        const enumOptions = optionsList(itemsSchema, uiSchema);
+        const enumOptions = optionsList(itemsSchema, uiSchema, curNodePath, rootFormData);
 
         const widgetConfig = getWidgetConfig({
             schema,

diff --git a/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldTuple.js b/packages/lib/src/JsonSchemaForm/fields/ArrayField/arrayTypes/ArrayFieldTuple.js
@@ -74,7 +74,9 @@ export default {
             fieldStyle,
         } = getUiOptions({
             schema,
-            uiSchema
+            uiSchema,
+            curNodePath: this.curNodePath,
+            rootFormData: this.rootFormData,
         });
 
         // 拆分为 tuple 和 additional

diff --git a/packages/lib/src/JsonSchemaForm/fields/BooleanField/index.js b/packages/lib/src/JsonSchemaForm/fields/BooleanField/index.js
@@ -13,13 +13,15 @@ export default {
     props: vueProps,
     functional: true,
     render(h, context) {
-        const { schema, uiSchema } = context.props;
+        const {
+            schema, uiSchema, curNodePath, rootFormData
+        } = context.props;
 
         // Bool 会默认传入枚举类型选项 true false
         const enumOptions = optionsList({
             enumNames: schema.enumNames || ['true', 'false'],
             enum: schema.enum || [true, false]
-        }, uiSchema);
+        }, uiSchema, curNodePath, rootFormData);
 
         const widgetConfig = getWidgetConfig({
             schema,

diff --git a/packages/lib/src/JsonSchemaForm/fields/StringField/index.js b/packages/lib/src/JsonSchemaForm/fields/StringField/index.js
@@ -12,10 +12,12 @@ export default {
     props: vueProps,
     functional: true,
     render(h, context) {
-        const { schema, uiSchema } = context.props;
+        const {
+            schema, uiSchema, curNodePath, rootFormData
+        } = context.props;
 
         // 可能是枚举数据使用select组件，否则使用 input
-        const enumOptions = isSelect(schema) && optionsList(schema, uiSchema);
+        const enumOptions = isSelect(schema) && optionsList(schema, uiSchema, curNodePath, rootFormData);
 
         const widgetConfig = getWidgetConfig({
             schema,