From 89226508fa8dcdb55fe930a014e6ec7d1cc6a9bd Mon Sep 17 00:00:00 2001 From: Liu Jun <870395192@qq.com> Date: Fri, 20 Nov 2020 17:09:51 +0800 Subject: [PATCH] =?UTF-8?q?feat(lib):=20array=20=E7=B1=BB=E5=9E=8B=20item?= =?UTF-8?q?=20title=20description=20=E6=94=AF=E6=8C=81=20$index=20?= =?UTF-8?q?=E7=89=B9=E6=AE=8A=E5=AD=97=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit re #19 --- .../src/JsonSchemaForm/common/formUtils.js | 64 ++++++++++++------- .../ArrayField/arrayTypes/ArrayFieldNormal.js | 44 ++++++++----- .../ArrayField/arrayTypes/ArrayFieldTuple.js | 44 ++++++++----- 3 files changed, 95 insertions(+), 57 deletions(-) diff --git a/packages/lib/src/JsonSchemaForm/common/formUtils.js b/packages/lib/src/JsonSchemaForm/common/formUtils.js index 202ff4bd..7051613a 100644 --- 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 index fac2ea7d..fb828259 100644 --- 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 index f0391760..dfb6bd42 100644 --- 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);