mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
feat: 表达式变量展示优化
This commit is contained in:
parent
a5ac892948
commit
a2df640797
@ -4,7 +4,12 @@
|
||||
import {hasIcon, mapObject, utils} from 'amis';
|
||||
import type {PlainObject, Schema, SchemaNode} from 'amis';
|
||||
import {getGlobalData} from 'amis-theme-editor-helper';
|
||||
import {mapTree, isExpression, resolveVariableAndFilter} from 'amis-core';
|
||||
import {
|
||||
mapTree,
|
||||
isExpression,
|
||||
resolveVariableAndFilter,
|
||||
filterTree
|
||||
} from 'amis-core';
|
||||
import type {VariableItem} from 'amis-ui';
|
||||
import {isObservable, reaction} from 'mobx';
|
||||
import DeepDiff, {Diff} from 'deep-diff';
|
||||
@ -1327,13 +1332,14 @@ export async function getVariables(that: any) {
|
||||
let variablesArr: any[] = [];
|
||||
|
||||
const {variables, requiredDataPropsVariables} = that.props;
|
||||
const selfName = that.props?.data?.name;
|
||||
if (!variables || requiredDataPropsVariables) {
|
||||
// 从amis数据域中取变量数据
|
||||
const {node, manager} = that.props.formProps || that.props;
|
||||
let vars = await resolveVariablesFromScope(node, manager);
|
||||
if (Array.isArray(vars)) {
|
||||
if (!that.isUnmount) {
|
||||
variablesArr = filterVariablesOfScope(vars);
|
||||
variablesArr = filterVariablesOfScope(vars, selfName);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1362,7 +1368,7 @@ export async function getVariables(that: any) {
|
||||
return variablesArr;
|
||||
}
|
||||
|
||||
function filterVariablesOfScope(options: any[]) {
|
||||
function filterVariablesOfScope(options: any[], selfName?: string) {
|
||||
const curOptions = options.find(i => i.label === '组件上下文');
|
||||
const arr = curOptions?.children || [];
|
||||
const variables = mapTree(arr, (item: any) => {
|
||||
@ -1380,10 +1386,20 @@ function filterVariablesOfScope(options: any[]) {
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return variables;
|
||||
const finalVars = filterTree(variables, item => {
|
||||
// 如果是子表 过滤掉当前自己 因为已经在当前层出现了
|
||||
if (item.schemaType && item.type === 'array' && item.children) {
|
||||
const idx = item.children.findIndex(
|
||||
(i: any) => i.value === `${item.value}.${selfName}`
|
||||
);
|
||||
return !~idx;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
return finalVars;
|
||||
}
|
||||
|
||||
export async function getQuickVariables(that: any) {
|
||||
export async function getQuickVariables(that: any, filter?: Function) {
|
||||
const {node, manager} = that.props.formProps || that.props;
|
||||
const {quickVars, data} = that.props;
|
||||
const selfName = data?.name;
|
||||
@ -1391,8 +1407,7 @@ export async function getQuickVariables(that: any) {
|
||||
const options = await manager?.dataSchema?.getDataPropsAsOptions();
|
||||
if (Array.isArray(options)) {
|
||||
const curOptions = filterVariablesOfScope(options);
|
||||
console.log(curOptions);
|
||||
return resolveQuickVariables(curOptions, quickVars, selfName);
|
||||
return resolveQuickVariables(curOptions, quickVars, selfName, filter);
|
||||
}
|
||||
|
||||
return [];
|
||||
@ -1401,7 +1416,8 @@ export async function getQuickVariables(that: any) {
|
||||
export function resolveQuickVariables(
|
||||
options: any,
|
||||
quickVars?: VariableItem[],
|
||||
selfName?: string
|
||||
selfName?: string,
|
||||
filter?: Function
|
||||
) {
|
||||
if (!Array.isArray(options)) {
|
||||
return [];
|
||||
@ -1439,24 +1455,32 @@ export function resolveQuickVariables(
|
||||
finalVars.push(...variables);
|
||||
}
|
||||
|
||||
const filterVar = filter ? filter(finalVars) : finalVars;
|
||||
|
||||
if (quickVars?.length) {
|
||||
const vars: VariableItem[] = [];
|
||||
vars.push({
|
||||
label: '快捷变量',
|
||||
type: 'quickVars',
|
||||
children: quickVars
|
||||
});
|
||||
if (finalVars.length) {
|
||||
|
||||
if (!filterVar.length) {
|
||||
vars.push(...quickVars);
|
||||
} else {
|
||||
vars.push({
|
||||
label: '快捷变量',
|
||||
type: 'quickVars',
|
||||
children: quickVars
|
||||
});
|
||||
}
|
||||
|
||||
if (filterVar.length) {
|
||||
vars.push({
|
||||
label: '表单变量',
|
||||
children: finalVars
|
||||
children: filterVar
|
||||
});
|
||||
}
|
||||
|
||||
return vars;
|
||||
}
|
||||
|
||||
return finalVars;
|
||||
return filterVar;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1475,7 +1499,8 @@ export const updateComponentContext = (variables: any[]) => {
|
||||
label:
|
||||
index === 0
|
||||
? `当前层${child.label ? '(' + child.label + ')' : ''}`
|
||||
: `上${index}层${child.label ? '(' + child.label + ')' : ''}`
|
||||
: child.title ||
|
||||
`上${index}层${child.label ? '(' + child.label + ')' : ''}`
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
@ -149,6 +149,11 @@ export interface FormulaControlProps extends FormControlProps {
|
||||
*/
|
||||
customFormulaPicker?: React.FC<CustomFormulaPickerProps>;
|
||||
|
||||
/**
|
||||
* 简化成员操作
|
||||
*/
|
||||
simplifyMemberOprs?: boolean;
|
||||
|
||||
/**
|
||||
* 是否支持快捷变量
|
||||
*/
|
||||
@ -221,10 +226,13 @@ export default class FormulaControl extends React.Component<
|
||||
);
|
||||
|
||||
const variables = await getVariables(this);
|
||||
const quickVariables = await getQuickVariables(this);
|
||||
const quickVariables = await getQuickVariables(
|
||||
this,
|
||||
this.filterQuickVariablesByType
|
||||
);
|
||||
this.setState({
|
||||
variables,
|
||||
quickVariables: this.filterQuickVariablesByType(quickVariables)
|
||||
quickVariables
|
||||
});
|
||||
}
|
||||
|
||||
@ -270,8 +278,12 @@ export default class FormulaControl extends React.Component<
|
||||
@autobind
|
||||
handleEditorMounted(cm: any, editor: any) {
|
||||
const variables = this.state.variables;
|
||||
const quickVariables = this.state.quickVariables;
|
||||
this.editorPlugin = new FormulaPlugin(editor, {
|
||||
getProps: () => ({...this.props, variables}),
|
||||
getProps: () => ({
|
||||
...this.props,
|
||||
variables: [...variables, ...quickVariables]
|
||||
}),
|
||||
showPopover: false,
|
||||
showClearIcon: true
|
||||
});
|
||||
@ -730,6 +742,7 @@ export default class FormulaControl extends React.Component<
|
||||
useExternalFormData = false,
|
||||
customFormulaPicker,
|
||||
clearable = true,
|
||||
simplifyMemberOprs,
|
||||
render,
|
||||
...rest
|
||||
} = this.props;
|
||||
@ -891,6 +904,7 @@ export default class FormulaControl extends React.Component<
|
||||
evalMode={true}
|
||||
onClose={this.closeFormulaPicker}
|
||||
onConfirm={this.handleConfirm}
|
||||
simplifyMemberOprs={simplifyMemberOprs}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
@ -51,6 +51,11 @@ export interface TplFormulaControlProps extends FormControlProps {
|
||||
*/
|
||||
header: string;
|
||||
|
||||
/**
|
||||
* 简化成员操作
|
||||
*/
|
||||
simplifyMemberOprs?: boolean;
|
||||
|
||||
/**
|
||||
* 支付支持快捷变量
|
||||
*/
|
||||
@ -387,8 +392,12 @@ export class TplFormulaControl extends React.Component<
|
||||
@autobind
|
||||
handleEditorMounted(cm: any, editor: any) {
|
||||
const variables = this.state.variables;
|
||||
const quickVariables = this.state.quickVariables;
|
||||
this.editorPlugin = new FormulaPlugin(editor, {
|
||||
getProps: () => ({...this.props, variables}),
|
||||
getProps: () => ({
|
||||
...this.props,
|
||||
variables: [...variables, ...quickVariables]
|
||||
}),
|
||||
onExpressionMouseEnter: this.onExpressionMouseEnter,
|
||||
showPopover: false,
|
||||
showClearIcon: true
|
||||
@ -558,6 +567,7 @@ export class TplFormulaControl extends React.Component<
|
||||
customFormulaPicker,
|
||||
clearable,
|
||||
quickVariables,
|
||||
simplifyMemberOprs,
|
||||
...rest
|
||||
} = this.props;
|
||||
const {
|
||||
|
@ -16,6 +16,7 @@ export interface FormulaPickerProps extends FormControlProps {
|
||||
* 弹窗顶部标题,默认为 "表达式"
|
||||
*/
|
||||
header: string;
|
||||
simplifyMemberOprs?: boolean;
|
||||
}
|
||||
|
||||
export interface CustomFormulaPickerProps extends FormulaPickerProps {
|
||||
|
@ -118,6 +118,11 @@ export interface TextareaFormulaControlProps extends FormControlProps {
|
||||
*/
|
||||
beforeFxConfirm?: (plugin: FormulaPlugin) => void;
|
||||
|
||||
/**
|
||||
* 简化成员操作
|
||||
*/
|
||||
simplifyMemberOprs?: boolean;
|
||||
|
||||
/**
|
||||
* 支付支持快捷变量
|
||||
*/
|
||||
@ -312,8 +317,12 @@ export class TextareaFormulaControl extends React.Component<
|
||||
@autobind
|
||||
handleEditorMounted(cm: any, editor: any) {
|
||||
const variables = this.state.variables || [];
|
||||
const quickVariables = this.state.quickVariables || [];
|
||||
this.editorPlugin = new FormulaPlugin(editor, {
|
||||
getProps: () => ({...this.props, variables}),
|
||||
getProps: () => ({
|
||||
...this.props,
|
||||
variables: [...variables, ...quickVariables]
|
||||
}),
|
||||
onExpressionMouseEnter: this.onExpressionMouseEnter,
|
||||
customMarkText: this.props.customMarkText,
|
||||
onPluginInit: this.props.onPluginInit,
|
||||
|
@ -86,6 +86,8 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
|
||||
editorOptions?: any;
|
||||
|
||||
enableRunPanel?: boolean;
|
||||
|
||||
simplifyMemberOprs?: boolean;
|
||||
}
|
||||
|
||||
export interface FunctionsProps {
|
||||
@ -488,6 +490,7 @@ export class FormulaEditor extends React.Component<
|
||||
classPrefix,
|
||||
selfVariableName,
|
||||
evalMode,
|
||||
simplifyMemberOprs,
|
||||
enableRunPanel = true
|
||||
} = this.props;
|
||||
const {
|
||||
@ -622,6 +625,7 @@ export class FormulaEditor extends React.Component<
|
||||
data={variables!}
|
||||
onSelect={this.handleVariableSelect}
|
||||
selfVariableName={selfVariableName}
|
||||
simplifyMemberOprs={simplifyMemberOprs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user