diff --git a/packages/data-source/src/DataSourceManager.ts b/packages/data-source/src/DataSourceManager.ts index 76d2276a..d78db1db 100644 --- a/packages/data-source/src/DataSourceManager.ts +++ b/packages/data-source/src/DataSourceManager.ts @@ -22,7 +22,13 @@ import EventEmitter from 'events'; import { cloneDeep } from 'lodash-es'; import type { DataSourceSchema, default as TMagicApp, DisplayCond, Id, MNode } from '@tmagic/core'; -import { compiledNode, getDefaultValueFromFields, NODE_CONDS_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from '@tmagic/core'; +import { + compiledNode, + getDefaultValueFromFields, + NODE_CONDS_KEY, + NODE_CONDS_RESULT_KEY, + NODE_DISABLE_DATA_SOURCE_KEY, +} from '@tmagic/core'; import { SimpleObservedData } from './observed-data/SimpleObservedData'; import { DataSource, HttpDataSource } from './data-sources'; @@ -238,8 +244,9 @@ class DataSourceManager extends EventEmitter { Array.isArray(items) && deep ? items.map((item) => this.compiledNode(item, sourceId, deep)) : items; } - if (node.condResult === false) return newNode; - if (node.visible === false) return newNode; + if (node.condResult === false || (typeof node.condResult === 'undefined' && node[NODE_CONDS_RESULT_KEY])) { + return newNode; + } // 编译函数这里作为参数,方便后续支持自定义编译 return compiledNode( @@ -255,11 +262,24 @@ class DataSourceManager extends EventEmitter { * @param {{ [NODE_CONDS_KEY]?: DisplayCond[] }} node 显示条件组配置 * @returns {boolean} 是否显示 */ - public compliedConds(node: { [NODE_CONDS_KEY]?: DisplayCond[]; [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean }) { + public compliedConds( + node: { + [NODE_CONDS_KEY]?: DisplayCond[]; + [NODE_CONDS_RESULT_KEY]?: boolean; + [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean; + }, + data = this.data, + ) { if (node[NODE_DISABLE_DATA_SOURCE_KEY]) { return true; } - return compliedConditions(node, this.data); + + const result = compliedConditions(node, data); + + if (!node[NODE_CONDS_RESULT_KEY]) { + return result; + } + return !result; } /** @@ -271,7 +291,11 @@ class DataSourceManager extends EventEmitter { */ public compliedIteratorItemConds( itemData: any, - node: { [NODE_CONDS_KEY]?: DisplayCond[] }, + node: { + [NODE_CONDS_KEY]?: DisplayCond[]; + [NODE_CONDS_RESULT_KEY]?: boolean; + [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean; + }, dataSourceField: string[] = [], ) { const [dsId, ...keys] = dataSourceField; @@ -279,7 +303,7 @@ class DataSourceManager extends EventEmitter { if (!ds) return true; const ctxData = createIteratorContentData(itemData, ds.id, keys, this.data); - return compliedConditions(node, ctxData); + return this.compliedConds(node, ctxData); } public compliedIteratorItems(itemData: any, nodes: MNode[], dataSourceField: string[] = []): MNode[] { diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts index bd020e2e..7cab3b28 100644 --- a/packages/editor/src/utils/props.ts +++ b/packages/editor/src/utils/props.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/naming-convention */ /* * Tencent is pleased to support the open source community by making TMagicEditor available. * @@ -17,7 +16,12 @@ * limitations under the License. */ -import { NODE_CONDS_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from '@tmagic/core'; +import { + NODE_CONDS_KEY, + NODE_CONDS_RESULT_KEY, + NODE_DISABLE_CODE_BLOCK_KEY, + NODE_DISABLE_DATA_SOURCE_KEY, +} from '@tmagic/core'; import { tMagicMessage } from '@tmagic/design'; import type { FormConfig, FormState, TabConfig, TabPaneConfig } from '@tmagic/form'; @@ -163,8 +167,20 @@ export const advancedTabConfig: TabPaneConfig = { export const displayTabConfig: TabPaneConfig = { title: '显示条件', - display: (_vm: FormState, { model }: any) => model.type !== 'page', + display: (_state: FormState, { model }: any) => model.type !== 'page', items: [ + { + name: NODE_CONDS_RESULT_KEY, + type: 'select', + text: '条件成立时', + defaultValue: false, + options: [ + { text: '显示', value: false }, + { text: '隐藏', value: true }, + ], + extra: (_state, { model }) => + `条件成立时${model[NODE_CONDS_RESULT_KEY] ? '隐藏' : '显示'},不成立时${model[NODE_CONDS_RESULT_KEY] ? '显示' : '隐藏'};
同一条件组内的所有条件配置同时成立时表示该条件组成立,任意一个条件组成立时表示条件成立(条件组内为且的关系,条件组间为或的关系);
条件为空时表示成立;`, + }, { type: 'display-conds', name: NODE_CONDS_KEY, diff --git a/packages/schema/src/index.ts b/packages/schema/src/index.ts index a884ce72..3f031278 100644 --- a/packages/schema/src/index.ts +++ b/packages/schema/src/index.ts @@ -47,6 +47,8 @@ export enum NodeType { } export const NODE_CONDS_KEY = 'displayConds'; +export const NODE_CONDS_RESULT_KEY = 'displayCondsResultReverse'; + export const NODE_DISABLE_DATA_SOURCE_KEY = '_tmagic_node_disabled_data_source'; export const NODE_DISABLE_CODE_BLOCK_KEY = '_tmagic_node_disabled_code_block'; @@ -130,6 +132,7 @@ export interface MComponent { /** 组件根Dom的style */ style?: StyleSchema; [NODE_CONDS_KEY]?: DisplayCond[]; + [NODE_CONDS_RESULT_KEY]?: boolean; [key: string]: any; } diff --git a/react-components/iterator-container/src/IteratorContainer.tsx b/react-components/iterator-container/src/IteratorContainer.tsx index 4a52bfd0..241b12ca 100644 --- a/react-components/iterator-container/src/IteratorContainer.tsx +++ b/react-components/iterator-container/src/IteratorContainer.tsx @@ -56,11 +56,10 @@ const IteratorContainer: React.FC = ({ const MagicUiComp = app?.resolveComponent('container'); - const iteratorContainerNode = app?.getNode( - id || config.id || '', + const iteratorContainerNode = app?.getNode(id || config.id || '', { iteratorContainerId, iteratorIndex, - ); + }); iteratorContainerNode?.resetNodes(); diff --git a/runtime/react-runtime-help/src/hooks/use-app.ts b/runtime/react-runtime-help/src/hooks/use-app.ts index 825b9ecd..cd73c222 100644 --- a/runtime/react-runtime-help/src/hooks/use-app.ts +++ b/runtime/react-runtime-help/src/hooks/use-app.ts @@ -20,7 +20,7 @@ import { useContext, useEffect, useState } from 'react'; import type TMagicApp from '@tmagic/core'; import type { Id, MNodeInstance, Node as TMagicNode } from '@tmagic/core'; -import { isDslNode } from '@tmagic/core'; +import { isDslNode, NODE_CONDS_RESULT_KEY } from '@tmagic/core'; import AppContent from '../AppContent'; @@ -96,8 +96,13 @@ export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorInde } const display = (config: T) => { - if (config.visible === false) return false; - if (config.condResult === false) return false; + if ( + config.visible === false || + config.condResult === false || + (typeof config.condResult === 'undefined' && config[NODE_CONDS_RESULT_KEY]) + ) { + return false; + } const displayCfg = config.display; diff --git a/vue-components/container/src/Component.ts b/vue-components/container/src/Component.ts index 005e3cad..c056f86b 100644 --- a/vue-components/container/src/Component.ts +++ b/vue-components/container/src/Component.ts @@ -1,7 +1,7 @@ import { defineComponent, h, inject, type PropType, provide } from 'vue-demi'; import type TMagicApp from '@tmagic/core'; -import { Id, IS_DSL_NODE_KEY, MComponent } from '@tmagic/core'; +import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core'; import { useComponent, useComponentStatus, useNode, type UserRenderFunction } from '@tmagic/vue-runtime-help'; export default defineComponent({ @@ -56,10 +56,13 @@ export default defineComponent({ const { style, className } = componentStatusStore; return () => { - if (props.config.visible === false) return null; - if (props.config.condResult === false) return null; - - if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) { + if ( + props.config.visible === false || + props.config.condResult === false || + // 没有配置条件时,不会编译出condResult,所以这里是undefined + (typeof props.config.condResult === 'undefined' && props.config[NODE_CONDS_RESULT_KEY]) || + (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) + ) { return null; }