feat(data-source, editor, schema, react-runtime-help, vue-components): 新增条件成立时隐藏的配置功能

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[] {

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] ? '显示' : '隐藏'}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`,
+    },
     {
       type: 'display-conds',
       name: NODE_CONDS_KEY,

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

react-components/iterator-container/src/IteratorContainer.tsx

@@ -56,11 +56,10 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
 
   const MagicUiComp = app?.resolveComponent('container');
 
-  const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
-    id || config.id || '',
+  const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(id || config.id || '', {
     iteratorContainerId,
     iteratorIndex,
-  );
+  });
 
   iteratorContainerNode?.resetNodes();
 

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 = <T extends MNodeInstance>(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;
 

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