From 259f1cc93c2f5c200298392e14d2b1cb92876561 Mon Sep 17 00:00:00 2001 From: lvxiaojiao Date: Tue, 27 Jun 2023 18:59:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=A1=A8=E8=BE=BE=E5=BC=8F=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=94=AF=E6=8C=81=E5=8F=98=E9=87=8F=E4=B8=BA?= =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=92=8C=E8=A1=A8=E8=BE=BE=E5=BC=8F&editor?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E4=B8=8A=E4=B8=8B=E6=96=87=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/src/util.ts | 89 +++++++++++++++++++ .../src/renderer/ExpressionFormulaControl.tsx | 2 +- .../src/renderer/FormulaControl.tsx | 8 +- .../src/renderer/TplFormulaControl.tsx | 2 +- .../src/renderer/event-control/index.tsx | 9 +- .../TextareaFormulaControl.tsx | 2 +- .../src/renderer/textarea-formula/utils.ts | 67 -------------- packages/amis-editor/src/util.ts | 23 ----- .../amis-ui/src/components/formula/Editor.tsx | 4 +- .../amis-ui/src/components/formula/Picker.tsx | 40 +++++++-- 10 files changed, 135 insertions(+), 111 deletions(-) delete mode 100644 packages/amis-editor/src/renderer/textarea-formula/utils.ts diff --git a/packages/amis-editor-core/src/util.ts b/packages/amis-editor-core/src/util.ts index 6956e831f..d0ec394c2 100644 --- a/packages/amis-editor-core/src/util.ts +++ b/packages/amis-editor-core/src/util.ts @@ -11,6 +11,8 @@ import type {Schema} from 'amis'; import type {SchemaObject} from 'amis'; import {assign, cloneDeep} from 'lodash'; import {getGlobalData} from 'amis-theme-editor-helper'; +import {isExpression, resolveVariableAndFilter} from 'amis-core'; +import type {VariableItem} from 'amis-ui'; const { guid, @@ -1132,3 +1134,90 @@ export function deleteThemeConfigData(data: any) { return schemaData; } + +/** + * 从amis数据域中取变量数据 + * @param node + * @param manager + * @returns + */ +export async function resolveVariablesFromScope(node: any, manager: any) { + await manager?.getContextSchemas(node); + // 获取当前组件内相关变量，如表单、增删改查 + const dataPropsAsOptions: VariableItem[] = updateComponentContext( + (await manager?.dataSchema?.getDataPropsAsOptions()) ?? [] + ); + + const variables: VariableItem[] = + manager?.variableManager?.getVariableFormulaOptions() || []; + + return [...dataPropsAsOptions, ...variables].filter( + (item: any) => item.children?.length + ); +} + +/** + * 整合 props & amis数据域 中的 variables + * @param that 为组件的实例 this + **/ +export async function getVariables(that: any) { + let variablesArr: any[] = []; + + const {variables, requiredDataPropsVariables} = that.props; + 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 = vars; + } + } + } + if (variables) { + if (Array.isArray(variables)) { + variablesArr = [...variables, ...variablesArr]; + } else if (typeof variables === 'function') { + variablesArr = [...variables(that), ...variablesArr]; + } else if (isExpression(variables)) { + variablesArr = [ + ...resolveVariableAndFilter( + that.props.variables as any, + that.props.data, + '| raw' + ), + ...variablesArr + ]; + } + } + + // 如果存在应用语言类型，则进行翻译 + if (that.appLocale && that.appCorpusData) { + return translateSchema(variablesArr, that.appCorpusData); + } + + return variablesArr; +} + +/** + * 更新组件上下文中label为带层级说明 + * @param variables 变量列表 + * @returns + */ +export const updateComponentContext = (variables: any[]) => { + const items = [...variables]; + const idx = items.findIndex(item => item.label === '组件上下文'); + if (~idx) { + items.splice(idx, 1, { + ...items[idx], + children: items[idx].children.map((child: any, index: number) => ({ + ...child, + label: + index === 0 + ? `当前数据域${child.label ? '(' + child.label + ')' : ''}` + : `上${index}层${child.label ? '(' + child.label + ')' : ''}` + })) + }); + } + return items; +}; diff --git a/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx b/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx index 482430909..c26a9b7fc 100644 --- a/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx +++ b/packages/amis-editor/src/renderer/ExpressionFormulaControl.tsx @@ -8,9 +8,9 @@ import cx from 'classnames'; import {FormItem, Button, Icon, PickerContainer} from 'amis'; import {FormulaEditor} from 'amis-ui'; import type {VariableItem} from 'amis-ui'; -import {getVariables} from './textarea-formula/utils'; import {renderFormulaValue} from './FormulaControl'; import {reaction} from 'mobx'; +import {getVariables} from 'amis-editor-core'; interface ExpressionFormulaControlProps extends FormControlProps { /** diff --git a/packages/amis-editor/src/renderer/FormulaControl.tsx b/packages/amis-editor/src/renderer/FormulaControl.tsx index d2e1ef84f..893519c3b 100644 --- a/packages/amis-editor/src/renderer/FormulaControl.tsx +++ b/packages/amis-editor/src/renderer/FormulaControl.tsx @@ -3,16 +3,12 @@ */ import React from 'react'; -import debounce from 'lodash/debounce'; -import uniqBy from 'lodash/uniqBy'; import isNumber from 'lodash/isNumber'; import isBoolean from 'lodash/isBoolean'; import isPlainObject from 'lodash/isPlainObject'; import isArray from 'lodash/isArray'; import isString from 'lodash/isString'; -import isEqual from 'lodash/isEqual'; import omit from 'lodash/omit'; -import last from 'lodash/last'; import cx from 'classnames'; import { FormItem, @@ -34,11 +30,11 @@ import type { VariableItem, FuncGroup } from 'amis-ui/lib/components/formula/Editor'; -import {dataMapping, FormControlProps} from 'amis-core'; +import {FormControlProps} from 'amis-core'; import type {BaseEventContext} from 'amis-editor-core'; import {EditorManager} from 'amis-editor-core'; import {reaction} from 'mobx'; -import {getVariables} from './textarea-formula/utils'; +import {getVariables} from 'amis-editor-core'; export enum FormulaDateType { NotDate, // 不是时间类 diff --git a/packages/amis-editor/src/renderer/TplFormulaControl.tsx b/packages/amis-editor/src/renderer/TplFormulaControl.tsx index 6c103dde9..86f408a8e 100644 --- a/packages/amis-editor/src/renderer/TplFormulaControl.tsx +++ b/packages/amis-editor/src/renderer/TplFormulaControl.tsx @@ -10,11 +10,11 @@ import type {VariableItem, CodeMirror} from 'amis-ui'; import {Icon, Button, FormItem, TooltipWrapper} from 'amis'; import {autobind, FormControlProps} from 'amis-core'; import {FormulaPlugin, editorFactory} from './textarea-formula/plugin'; -import {getVariables} from './textarea-formula/utils'; import {renderFormulaValue} from './FormulaControl'; import FormulaPicker, { CustomFormulaPickerProps } from './textarea-formula/FormulaPicker'; +import {getVariables} from 'amis-editor-core'; export interface TplFormulaControlProps extends FormControlProps { /** diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index 2b55619a5..471097b2d 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -41,7 +41,7 @@ export * from './helper'; import {i18n as _i18n} from 'i18n-runtime'; import type {VariableItem} from 'amis-ui/lib/components/formula/Editor'; import {reaction} from 'mobx'; -import {updateComponentContext} from '../../util'; +import {updateComponentContext} from 'amis-editor-core'; interface EventControlProps extends FormControlProps { actions: PluginActions; // 组件的动作列表 @@ -504,7 +504,12 @@ export class EventControl extends React.Component< // 编辑的时候只能拿到当前动作前面动作的事件变量以及当前动作事件 if (data.type === 'update') { - actions = actions.slice(0, data.actionData!.actionIndex !== undefined ? data.actionData!.actionIndex + 1 : 0); + actions = actions.slice( + 0, + data.actionData!.actionIndex !== undefined + ? data.actionData!.actionIndex + 1 + : 0 + ); } let jsonSchema = {...(eventConfig?.dataSchema?.[0] ?? {})}; diff --git a/packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx b/packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx index 04ab95032..54f204449 100644 --- a/packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx +++ b/packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx @@ -11,9 +11,9 @@ import type {VariableItem, CodeMirror} from 'amis-ui'; import {FormulaPlugin, editorFactory} from './plugin'; import FormulaPicker, {CustomFormulaPickerProps} from './FormulaPicker'; -import {getVariables} from './utils'; import {reaction} from 'mobx'; import {renderFormulaValue} from '../FormulaControl'; +import {getVariables} from 'amis-editor-core'; export interface AdditionalMenuClickOpts { /** diff --git a/packages/amis-editor/src/renderer/textarea-formula/utils.ts b/packages/amis-editor/src/renderer/textarea-formula/utils.ts deleted file mode 100644 index 883d58613..000000000 --- a/packages/amis-editor/src/renderer/textarea-formula/utils.ts +++ /dev/null @@ -1,67 +0,0 @@ -import {isExpression, resolveVariableAndFilter} from 'amis-core'; -import {translateSchema} from 'amis-editor-core'; -import type {VariableItem} from 'amis-ui/lib/components/formula/Editor'; -import {updateComponentContext} from '../../util'; - -/** - * 从amis数据域中取变量数据 - * @param node - * @param manager - * @returns - */ -export async function resolveVariablesFromScope(node: any, manager: any) { - await manager?.getContextSchemas(node); - // 获取当前组件内相关变量，如表单、增删改查 - const dataPropsAsOptions: VariableItem[] = updateComponentContext( - (await manager?.dataSchema?.getDataPropsAsOptions()) ?? [] - ); - - const variables: VariableItem[] = - manager?.variableManager?.getVariableFormulaOptions() || []; - - return [...dataPropsAsOptions, ...variables].filter( - (item: any) => item.children?.length - ); -} - -/** - * 整合 props & amis数据域 中的 variables - * @param that 为组件的实例 this - **/ -export async function getVariables(that: any) { - let variablesArr: any[] = []; - const {variables, requiredDataPropsVariables} = that.props; - 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 = vars; - } - } - } - if (variables) { - if (Array.isArray(variables)) { - variablesArr = [...variables, ...variablesArr]; - } else if (typeof variables === 'function') { - variablesArr = [...variables(that), ...variablesArr]; - } else if (isExpression(variables)) { - variablesArr = [ - ...resolveVariableAndFilter( - that.props.variables as any, - that.props.data, - '| raw' - ), - ...variablesArr - ]; - } - } - - // 如果存在应用语言类型，则进行翻译 - if (that.appLocale && that.appCorpusData) { - return translateSchema(variablesArr, that.appCorpusData); - } - - return variablesArr; -} diff --git a/packages/amis-editor/src/util.ts b/packages/amis-editor/src/util.ts index de55e4e0d..fa2c790ae 100644 --- a/packages/amis-editor/src/util.ts +++ b/packages/amis-editor/src/util.ts @@ -42,26 +42,3 @@ export const schemaToArray = (value: any) => { export const schemaArrayFormat = (value: any) => { return value && Array.isArray(value) && value.length === 1 ? value[0] : value; }; - -/** - * 更新组件上下文中label为带层级说明 - * @param variables 变量列表 - * @returns - */ -export const updateComponentContext = (variables: any[]) => { - const items = [...variables]; - const idx = items.findIndex(item => item.label === '组件上下文'); - if (~idx) { - items.splice(idx, 1, { - ...items[idx], - children: items[idx].children.map((child: any, index: number) => ({ - ...child, - label: - index === 0 - ? `当前数据域${child.label ? '(' + child.label + ')' : ''}` - : `上${index}层${child.label ? '(' + child.label + ')' : ''}` - })) - }); - } - return items; -}; diff --git a/packages/amis-ui/src/components/formula/Editor.tsx b/packages/amis-ui/src/components/formula/Editor.tsx index 2a6929562..e31c7e63d 100644 --- a/packages/amis-ui/src/components/formula/Editor.tsx +++ b/packages/amis-ui/src/components/formula/Editor.tsx @@ -243,7 +243,7 @@ export class FormulaEditor extends React.Component< componentDidMount(): void { const {variables} = this.props; - this.normalizeVariables(variables); + this.normalizeVariables(variables as VariableItem[]); } componentDidUpdate( @@ -252,7 +252,7 @@ export class FormulaEditor extends React.Component< snapshot?: any ): void { if (prevProps.variables !== this.props.variables) { - this.normalizeVariables(this.props.variables); + this.normalizeVariables(this.props.variables as VariableItem[]); } } diff --git a/packages/amis-ui/src/components/formula/Picker.tsx b/packages/amis-ui/src/components/formula/Picker.tsx index f36fcacfa..7f488ae52 100644 --- a/packages/amis-ui/src/components/formula/Picker.tsx +++ b/packages/amis-ui/src/components/formula/Picker.tsx @@ -1,4 +1,8 @@ -import {uncontrollable} from 'amis-core'; +import { + isExpression, + resolveVariableAndFilterForAsync, + uncontrollable +} from 'amis-core'; import React from 'react'; import { FormulaEditor, @@ -23,7 +27,8 @@ import Modal from '../Modal'; import PopUp from '../PopUp'; import {isMobile} from 'amis-core'; -export interface FormulaPickerProps extends FormulaEditorProps { +export interface FormulaPickerProps + extends Omit { // 新的属性？ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; @@ -124,7 +129,13 @@ export interface FormulaPickerProps extends FormulaEditorProps { onRef?: (node: any) => void; popOverContainer?: any; + useMobileUI?: boolean; + + variables?: + | Array + | string + | ((props: any) => Array); } export interface FormulaPickerState { @@ -155,7 +166,8 @@ export class FormulaPicker extends React.Component< isOpened: false, value: this.props.value!, editorValue: this.value2EditorValue(this.props), - isError: false + isError: false, + variables: Array.isArray(props.variables) ? props.variables : [] }; } @@ -254,6 +266,19 @@ export class FormulaPicker extends React.Component< @autobind async handleClick() { + const {variables, data} = this.props; + if (typeof variables === 'function') { + const list = await variables(this.props); + this.setState({variables: list}); + } else if (typeof variables === 'string' && isExpression(variables)) { + const result = await resolveVariableAndFilterForAsync( + variables, + data, + '|raw' + ); + this.setState({variables: result}); + } + const state = { ...(await this.props.onPickerOpen?.(this.props)), editorValue: this.value2EditorValue(this.props), @@ -328,7 +353,6 @@ export class FormulaPicker extends React.Component< icon, title, clearable, - variables, functions, children, variableMode, @@ -405,7 +429,7 @@ export class FormulaPicker extends React.Component< ? void 0 : FormulaEditor.highlightValue( value, - variables!, + this.state.variables!, this.props.evalMode ) } @@ -448,7 +472,7 @@ export class FormulaPicker extends React.Component< ? void 0 : FormulaEditor.highlightValue( value, - variables!, + this.state.variables!, this.props.evalMode ) } @@ -485,7 +509,7 @@ export class FormulaPicker extends React.Component<