打开多个标签页

1. 简介

1.1 案例简介

本案例以开发自建插件「打开多个标签页」为例，介绍前端扩展函数中调用对象 $g.utils.openUrl 的使用方法，从而实现在表单中同时打开多个标签页的效果。

1.2 设计思路

1）新建「物资信息核对」表单，用于用户打开标签页并进行物资核对详情的结果确认；

2）开发自建插件「打开多个标签页」，用于支持用户打开多个标签页，具体包括：

3）在表单中设置前端事件，调用自建插件「打开多个标签页」，从而实现用户点击按钮后同时打开物资统计看板和期初期末库存查询看板的效果。

1.3 预期效果

以物资信息核对场景中，同时打开物资统计看板和期初期末库存查询看板为例，效果如下所示：

2. 表单搭建

新建「物资信息核对表」表单，字段设置如下所示：

3. 自建插件设计

3.1 新建自建插件

在「开放平台 >> 开发者后台 >> 自建插件」处，点击「新建插件」，并在「插件设计」页面中修改自建插件的名字为「打开多个标签页」。

3.2 新建函数

进入「插件设计」页面中，点击左下角的「新增函数」，选择「前端扩展」，并修改函数名称为「新标签页打开多个 U」。

3.3 设置参数

3.3.1 设计请求参数

点击「请求参数」，在页面中添加并设置字段控件，如下所示：

3.3.2 设计返回参数

点击「返回参数」，添加返回参数，并进行如下设置：

3.4 编辑代码

请求参数和返回参数都设计完成后，点击「代码」进入代码编辑页面。代码示例如下所示：

/**
 * @type {{url:string}[]}
 */
const tabs = triggerConf['tabs'] || []

tabs.forEach(({ url }) => {
    $g.utils.openUrl({
        url
    });
})

return {
    state: triggerConf['return_text']
};

3.5 保存并启用

参数和代码都设计完成后，点击右上角的「保存」按钮，并返回至「自建插件」页面中，打开「打开多个标签页」右侧开关，即可启用插件。

4. 调用插件

4.1 添加按钮执行动作

进入「物资信息核对」表单中，点击「物资信息核对」按钮，在「字段属性 >> 执行动作」处点击「设置」，添加一个前端事件。

4.2 设置事件名称和说明

添加好前端事件后，首先设置前端事件的基础信息，即事件名称和事件说明，用于区分前端事件。设置完成后，点击「下一步」。

4.3 设置前端事件

设置执行动作如下：

全部设置完成后，点击「保存」按钮。

5. 效果演示

效果参见本文【1.3 预期效果】。