From 7c20bb8c11d5038eca37d5fdb151ae250f7dc074 Mon Sep 17 00:00:00 2001 From: "Liu.Jun" <870395192@qq.com> Date: Mon, 23 Nov 2020 22:17:27 +0800 Subject: [PATCH] =?UTF-8?q?feat(lib):=20=E5=AF=B9ui:xxx=20=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=94=AF=E6=8C=81=E8=A1=A8=E8=BE=BE=E5=BC=8F=EF=BC=8C?= =?UTF-8?q?options=20=E5=86=85=E4=B8=8D=E6=94=AF=E6=8C=81=E8=A1=A8?= =?UTF-8?q?=E8=BE=BE=E5=BC=8F=E4=BB=A5=E4=BE=BF=E5=8C=BA=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/JsonSchemaForm/common/formUtils.js | 52 +++++++++++++------ .../arrayTypes/ArrayFieldMultiSelect.js | 4 +- .../ArrayField/arrayTypes/ArrayFieldTuple.js | 4 +- .../fields/BooleanField/index.js | 6 ++- .../fields/StringField/index.js | 6 ++- 5 files changed, 49 insertions(+), 23 deletions(-) diff --git a/packages/lib/src/JsonSchemaForm/common/formUtils.js b/packages/lib/src/JsonSchemaForm/common/formUtils.js index 3ca13825..317188ed 100644 --- 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,7 +120,12 @@ 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) + }; }, {}))); } @@ -121,7 +133,9 @@ export function getUserUiOptions({ 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 index 6ef186f7..3ad74a2d 100644 --- 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 index dfb6bd42..6c2bc361 100644 --- 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 index 9a5b5c2b..dbb64e1e 100644 --- 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 index 8be885a0..0db29216 100644 --- 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,