test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-04 12:58:38 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat:input-table&combo&table上下文细化

Browse Source
This commit is contained in:
lvxiaojiao 2023-07-13 21:18:06 +08:00
parent cabeb0ec3d
commit 7b37cb131a
7 changed files with 192 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/amis-editor/src/plugin/Form/Combo.tsx
View File

@ -14,7 +14,7 @@ import {
EditorManager,
DSBuilderManager
} from 'amis-editor-core';
import {setVariable} from 'amis-core';
import {setVariable, someTree} from 'amis-core';
import {ValidatorTag} from '../../validator';
import {
@ -661,6 +661,48 @@ export class ComboControlPlugin extends BasePlugin {
return props;
}
async buildDataSchemas(
node: EditorNodeType,
region?: EditorNodeType,
trigger?: EditorNodeType
) {
const itemsSchema: any = {
$id: 'comboItems',
type: 'object',
properties: {}
};
const items = node.children?.find(
child => child.isRegion && child.region === 'items'
);
const pool = items.children.concat();
while (pool.length) {
const current = pool.shift() as EditorNodeType;
const schema = current.schema;
if (schema.name) {
itemsSchema.properties[schema.name] = current.info?.plugin
?.buildDataSchemas
? await current.info.plugin.buildDataSchemas(current, region, trigger)
: {
type: 'string',
title: schema.label || schema.name
};
}
}
if (node.schema?.multiple) {
return {
$id: 'combo',
type: 'array',
title: node.schema?.label || node.schema?.name,
items: itemsSchema
};
}
return {...itemsSchema, title: node.schema?.label || node.schema?.name};
}
async getAvailableContextFields(
scopeNode: EditorNodeType,
target: EditorNodeType,

94
packages/amis-editor/src/plugin/Form/Form.tsx
View File

@ -11,7 +11,7 @@ import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {jsonToJsonSchema} from 'amis-editor-core';
import {EditorNodeType} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {setVariable} from 'amis-core';
import {setVariable, someTree} from 'amis-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
// 用于脚手架的常用表单控件
@ -933,7 +933,11 @@ export class FormPlugin extends BasePlugin {
}
}
async buildDataSchemas(node: EditorNodeType, region: EditorNodeType) {
async buildDataSchemas(
node: EditorNodeType,
region: EditorNodeType,
trigger?: EditorNodeType
) {
const jsonschema: any = {
$id: 'formItems',
type: 'object',
@ -943,27 +947,87 @@ export class FormPlugin extends BasePlugin {
const pool = node.children.concat();
while (pool.length) {
const current = pool.shift() as EditorNodeType;
const schema = current.schema;
if (current.rendererConfig?.type === 'combo') {
const schema = current.schema;
if (trigger) {
const items = current.children?.find(
child => child.isRegion && child.region === 'items'
);
const isItemsChild = someTree(
items.children,
item => item.id === trigger?.id
);
if (isItemsChild) {
const itemsChilds = items.children.concat();
while (itemsChilds.length) {
const currentItem = itemsChilds.shift() as EditorNodeType;
const itemSchema = currentItem.schema;
if (itemSchema.name) {
jsonschema.properties[itemSchema.name] = {
...(currentItem.info?.plugin?.buildDataSchemas
? await currentItem.info.plugin.buildDataSchemas(
currentItem,
region,
trigger
)
: {
type: 'string',
title: itemSchema.label || itemSchema.name
}),
group: `${schema.label || schema.name}的当前行记录`
};
}
}
}
}
if (schema.name) {
jsonschema.properties[schema.name] = {
type: 'array',
title: schema.label || schema.name,
items: current.info?.plugin?.buildDataSchemas
? await current.info.plugin.buildDataSchemas(current, region)
: {
type: 'object',
properties: {}
}
};
jsonschema.properties[schema.name] =
await current.info.plugin.buildDataSchemas?.(current, region);
}
} else if (current.rendererConfig?.type === 'input-table') {
if (trigger) {
const columns: EditorNodeType = current.children.find(
item => item.isRegion && item.region === 'columns'
);
const isColumnChild = someTree(
columns?.children,
item => item.id === trigger.id
);
if (isColumnChild) {
for (let col of schema?.columns) {
if (col.name) {
jsonschema.properties[col.name] = {
type: 'string',
title: col.label || col.name,
group: `${schema.label || schema.name}的当前行记录`
};
}
}
}
}
if (schema.name) {
jsonschema.properties[schema.name] =
await current.info.plugin.buildDataSchemas?.(
current,
region,
trigger
);
}
} else if (current.rendererConfig?.isFormItem) {
const schema = current.schema;
if (schema.name) {
jsonschema.properties[schema.name] = current.info?.plugin
?.buildDataSchemas
? await current.info.plugin.buildDataSchemas(current, region)
? await current.info.plugin.buildDataSchemas(
current,
region,
trigger
)
: {
type: 'string',
title:

50
packages/amis-editor/src/plugin/Form/InputTable.tsx
View File

@ -1102,7 +1102,11 @@ export class TableControlPlugin extends BasePlugin {
}
}
async buildDataSchemas(node: EditorNodeType, region?: EditorNodeType) {
async buildDataSchemas(
node: EditorNodeType,
region?: EditorNodeType,
trigger?: EditorNodeType
) {
const itemsSchema: any = {
$id: 'inputTableRow',
type: 'object',
@ -1113,27 +1117,29 @@ export class TableControlPlugin extends BasePlugin {
item => item.isRegion && item.region === 'columns'
);
// todo：以下的处理无效，需要cell实现才能深层细化
// for (let current of columns?.children) {
// const schema = current.schema;
// if (schema.name) {
// itemsSchema.properties[schema.name] = current.info?.plugin
// ?.buildDataSchemas
// ? await current.info.plugin.buildDataSchemas(current, region)
// : {
// type: 'string',
// title: schema.label || schema.name
// };
// }
// }
const cells: any = columns.children.concat();
// 一期先简单处理，上面todo实现之后，这里可以废弃
for (let current of node.schema?.columns) {
if (current.name) {
itemsSchema.properties[current.name] = {
type: 'string',
title: current.label || current.name
};
while (cells.length > 0) {
const cell = cells.shift() as EditorNodeType;
// cell的孩子貌似只会有一个
const items = cell.children.concat();
while (items.length) {
const current = items.shift() as EditorNodeType;
const schema = current.schema;
if (schema.name) {
itemsSchema.properties[schema.name] = current.info?.plugin
?.buildDataSchemas
? await current.info.plugin.buildDataSchemas(
current,
region,
trigger
)
: {
type: 'string',
title: schema.label || schema.name
};
}
}
}
@ -1144,7 +1150,7 @@ export class TableControlPlugin extends BasePlugin {
return {
$id: 'inputTable',
type: 'array',
title: '表格表单数据',
title: node.schema?.label || node.schema?.name,
items: itemsSchema
};
}

42
packages/amis-editor/src/plugin/Table.tsx
View File

@ -770,29 +770,29 @@ export class TablePlugin extends BasePlugin {
const columns: EditorNodeType = node.children.find(
item => item.isRegion && item.region === 'columns'
);
const cells: any = columns.children.concat();
// todo：以下的处理无效，需要cell实现才能深层细化
// for (let current of columns?.children) {
// const schema = current.schema;
// if (schema.name) {
// itemsSchema.properties[schema.name] = current.info?.plugin
// ?.buildDataSchemas
// ? await current.info.plugin.buildDataSchemas(current, region)
// : {
// type: 'string',
// title: schema.label || schema.name
// };
// }
// }
while (cells.length > 0 && cells.length <= columns.children?.length) {
const cell = cells.shift() as EditorNodeType;
// cell的孩子貌似只会有一个
const items = cell.children.concat();
while (items.length) {
const current = items.shift() as EditorNodeType;
const schema = current.schema;
// 一期先简单处理，上面todo实现之后，这里可以废弃
// 收集table配置的列成员
for (let current of node.schema?.columns) {
if (current.name) {
itemsSchema.properties[current.name] = {
type: 'string',
title: current.label || current.name
};
if (schema.name) {
itemsSchema.properties[schema.name] = current.info?.plugin
?.buildDataSchemas
? await current.info.plugin.buildDataSchemas(
current,
region,
trigger
)
: {
type: 'string',
title: schema.label || schema.name
};
}
}
}

3
packages/amis-ui/scss/components/_formula.scss
View File

@ -51,7 +51,8 @@
&-editor {
@include scrollbar();
height: px2rem(200px);
min-height: px2rem(200px);
height: calc(100% - 35px);
padding: #{px2rem(5px)};
padding-right: 0;

3
packages/amis-ui/src/components/formula/Editor.tsx
View File

@ -277,7 +277,8 @@ export class FormulaEditor extends React.Component<
return {
...item,
path: `${path}${path ? '.' : ''}${item.label}`,
...(item.isMember
// 自己是数组成员或者父级有数组成员
...(item.isMember || paths.some(item => item.isMember)
? {
memberDepth: paths?.filter((item: any) => item.type === 'array')
?.length

24
packages/amis-ui/src/components/formula/VariableList.tsx
View File

@ -112,7 +112,8 @@ function VariableList(props: VariableListProps) {
<label>{option.label}</label>
</Badge>
)}
{option.label &&
{option.memberDepth === undefined &&
option.label &&
(!selfVariableName || option.value !== selfVariableName) && (
<TooltipWrapper
tooltip={option.description ?? option.label}
@ -122,7 +123,10 @@ function VariableList(props: VariableListProps) {
</TooltipWrapper>
)}
{/* 控制只对第一层数组成员展示快捷操作入口 */}
{option.memberDepth < 2 ? (
{option.memberDepth !== undefined &&
option.memberDepth < 2 &&
option.label &&
(!selfVariableName || option.value !== selfVariableName) ? (
<PopOverContainer
popOverContainer={() =>
document.querySelector(`.${cx('FormulaPicker-Modal')}`)
@ -149,7 +153,12 @@ function VariableList(props: VariableListProps) {
)}
>
{({onClick, ref, isOpened}) => (
<i className="fa fa-ellipsis-h" onClick={onClick} />
<TooltipWrapper
tooltip={option.description ?? option.label}
tooltipTheme="dark"
>
<label onClick={onClick}>{option.label}</label>
</TooltipWrapper>
)}
</PopOverContainer>
) : null}
@ -165,9 +174,10 @@ function VariableList(props: VariableListProps) {
function handleMemberClick(item: any, option: any, onClose?: any) {
// todo：暂时只提供一层的快捷操作
const lastPointIdx = option.value.lastIndexOf('.');
const arr = option.value.substring(0, lastPointIdx);
const member = option.value.substring(lastPointIdx + 1);
// const lastPointIdx = option.value.lastIndexOf('.');
const firstPointIdx = option.value.indexOf('.');
const arr = option.value.substring(0, firstPointIdx);
const member = option.value.substring(firstPointIdx + 1);
const value = item.value
.replace('${arr}', arr)
@ -208,7 +218,7 @@ function VariableList(props: VariableListProps) {
}
function handleChange(item: any) {
if (item.isMember) {
if (item.isMember || item.memberDepth !== undefined) {
return;
}
onSelect?.(item);