Skip to main content

动态自定义Tab页组件

本文档介绍如何通过接口动态控制Tab页组件的显示隐藏、默认展示Tab、Tab页标题等。

业务场景​

当需要根据业务场景实现动态控制Tab页组件时，例如：

  • 根据用户权限显示或隐藏特定Tab页签
  • 根据数据状态动态调整Tab页签标题
  • 根据业务条件设置默认展示的Tab页签
  • 实现Tab页签的条件性展示

接口配置流程​

流程说明：

  1. 开始组件 - 接口入口
  2. C# 脚本组件 - 动态生成Tab页签配置
  3. 结束组件 - 返回Tab页签配置结果

配置说明​

Tab页属性设置​

如需要动态控制Tab页签，可以通过Tab页属性设置中的选择页面部件数据源接口功能选取动态控制的接口。

重要说明：

  • 接口需要正确配置对应用途才可被选取
  • 动态部件数据源接口只支持动态隐藏部分Tab页签，无法动态创建新的Tab页签
  • TabWidgetItem 中定义的 CmpId 属性为必填项，该项是Tab页签的ID，由该Tab页签ID来匹配已配置的页签展示

配置步骤​

  1. 创建接口：在平台接口中创建用于动态控制Tab页签的接口
  2. 配置用途：在接口属性中正确配置用途为"页面部件数据源"
  3. 编写脚本：在C#脚本组件中编写动态控制逻辑
  4. 关联Tab组件：在Tab组件属性中选择对应的接口

示例代码​

以下示例演示如何动态控制Tab页签：

using System;
using System.Linq;
using System.Collections.Generic;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using Chameleon.Common;
using Chameleon.Common.Context;
using Chameleon.Common.Exceptions;
using Chameleon.Common.Models;
using Chameleon.Database;
using Chameleon.SDK;
using Chameleon.SDK.Models.Meta;

public class ChameleonCSharpScript
{
    public object Execute(ComponentContext context, ChameleonSDK sdk)
    {
        var result = new TabWidget {
            Items = new List<TabWidgetItem> {
                new TabWidgetItem {
                    CmpId = "c8edef7d-afb1-421f-b2f4-8664f06bad70",
                    Title = "Dynamic Title"
                }
            }
        };

        return ResponseResult<TabWidget>.Success(result);
    }
}

TabWidget 模型说明​

TabWidget 属性​

属性类型说明
ItemsList<TabWidgetItem>Tab页签列表

TabWidgetItem 属性​

属性类型必填说明
CmpIdstring是Tab页签的组件ID，用于匹配已配置的页签
Titlestring否Tab页签标题，不填则使用默认标题
Hiddenbool否是否隐藏该Tab页签，默认为 false

扩展示例​

示例1：根据权限控制Tab页签显示​

public object Execute(ComponentContext context, ChameleonSDK sdk)
{
    var items = new List<TabWidgetItem>();

    // 基本信息页签 - 所有人可见
    items.Add(new TabWidgetItem
    {
        CmpId = "basic-info-tab-id",
        Title = "基本信息"
    });

    // 财务信息页签 - 仅管理员可见
    var isAdmin = ChameleonContext.Current.Profiles.Contains("admin-profile-id");
    if (isAdmin)
    {
        items.Add(new TabWidgetItem
        {
            CmpId = "finance-info-tab-id",
            Title = "财务信息"
        });
    }
    else
    {
        // 隐藏财务信息页签
        items.Add(new TabWidgetItem
        {
            CmpId = "finance-info-tab-id",
            Hidden = true
        });
    }

    // 操作日志页签 - 所有人可见
    items.Add(new TabWidgetItem
    {
        CmpId = "operation-log-tab-id",
        Title = "操作日志"
    });

    return ResponseResult<TabWidget>.Success(new TabWidget { Items = items });
}

示例2：根据数据状态动态设置标题​

public object Execute(ComponentContext context, ChameleonSDK sdk)
{
    var list = context.Request.List;
    var first = list.FirstOrDefault();

    if (first == null)
        return ResponseResult<TabWidget>.Success(new TabWidget { Items = new List<TabWidgetItem>() });

    var status = Convert.ToString(first["Status"]);
    var items = new List<TabWidgetItem>
    {
        new TabWidgetItem
        {
            CmpId = "detail-tab-id",
            Title = status == "pending" ? "待处理详情" : "详情信息"
        },
        new TabWidgetItem
        {
            CmpId = "history-tab-id",
            Title = "历史记录"
        }
    };

    return ResponseResult<TabWidget>.Success(new TabWidget { Items = items });
}

示例3：条件性隐藏Tab页签​

public object Execute(ComponentContext context, ChameleonSDK sdk)
{
    var list = context.Request.List;
    var first = list.FirstOrDefault();

    var items = new List<TabWidgetItem>
    {
        new TabWidgetItem
        {
            CmpId = "basic-tab-id",
            Title = "基本信息"
        }
    };

    if (first != null)
    {
        var hasOrders = Convert.ToBoolean(first["HasOrders"]);
        // 只有有订单时才显示订单页签
        if (hasOrders)
        {
            items.Add(new TabWidgetItem
            {
                CmpId = "orders-tab-id",
                Title = "订单列表"
            });
        }
        else
        {
            items.Add(new TabWidgetItem
            {
                CmpId = "orders-tab-id",
                Hidden = true
            });
        }
    }

    return ResponseResult<TabWidget>.Success(new TabWidget { Items = items });
}

示例4：动态设置默认激活页签​

public object Execute(ComponentContext context, ChameleonSDK sdk)
{
    var list = context.Request.List;
    var first = list.FirstOrDefault();

    var items = new List<TabWidgetItem>
    {
        new TabWidgetItem
        {
            CmpId = "basic-tab-id",
            Title = "基本信息"
        },
        new TabWidgetItem
        {
            CmpId = "orders-tab-id",
            Title = "订单列表"
        },
        new TabWidgetItem
        {
            CmpId = "logs-tab-id",
            Title = "操作日志"
        }
    };

    // 根据状态设置默认激活的页签
    if (first != null)
    {
        var status = Convert.ToString(first["Status"]);
        if (status == "reviewing")
        {
            // 审核中状态，默认激活订单页签
            context.DicParam["activeCmps"] = "orders-tab-id";
        }
    }

    return ResponseResult<TabWidget>.Success(new TabWidget { Items = items });
}

注意事项​

  1. 组件ID必填：CmpId 是必填项，必须与已配置的Tab页签ID匹配
  2. 无法动态创建：只能控制已存在的Tab页签，无法动态创建新的页签
  3. 接口用途配置：接口必须正确配置用途为"页面部件数据源"才能被Tab组件选取
  4. 返回格式：必须返回 ResponseResult<TabWidget> 类型
  5. 性能考虑：接口会在页面加载时执行，注意执行效率
  6. 缓存影响：接口结果可能会被缓存，如需实时更新，注意缓存策略

常见问题​

Q: 如何获取Tab页签的组件ID？​

A: 在页面设计器中选中Tab页签，在右侧属性面板中可以查看和复制组件ID。

Q: 可以动态创建新的Tab页签吗？​

A: 不可以，动态部件数据源接口只支持控制已配置的Tab页签，无法创建新页签。

Q: 如果不返回某个Tab页签会怎样？​

A: 如果不返回某个Tab页签的配置，该页签会使用默认配置显示。

Q: Hidden 属性和不返回该页签有什么区别？​

A: 设置 Hidden = true 会明确隐藏该页签；不返回该页签配置则使用默认配置。

Q: 可以同时控制多个Tab组件吗？​

A: 一个接口只能控制一个Tab组件，如需控制多个Tab组件，需要为每个Tab组件配置单独的接口。

相关文档​