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;
}