案例1—以 iFrame 形式扩展新的管理页面

iPortal 后台管理支持通过 iFrame 方式将指定的 HTML 页面追加至管理菜单中，定制后的效果如下，新增了一个名为“iFrame 嵌入页面”的管理项：

注意：扩展开发所使用的 Ant Design Vue 版本和 Vue 版本需相互兼容，例如 Ant Design Vue 2.x 版本最低支持的版本为 Vue 3.0，更多版本兼容性说明请参见：  Ant Design Vue 官方帮助文档

以 iFrame 形式扩展管理菜单的流程如下：

第一步：在 %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录下新建扩展开发页面的 js 文件。示例如下：

function GenerateRoutes(UserAddVue) {

  const route = [

    {

      path: '/admin-ui/user-add-page-children1',

      name: 'UserAddPage',

      component: UserAddVue,

      meta: { icon: 'select', title: 'iFrame嵌入页面', keepAlive: true, src: 'https://iportal.supermap.io/iportal' ,permission: ['portal:custom:admin:extendsPage:viewPage1']}

    }

  ];

  return route;

}

let addByUrl = {

  GenerateRoutes: GenerateRoutes

};

window.addByUrl = addByUrl;

其中 GenerateRoutes 为路由函数，说明如下：

• path: 访问用户扩展页面的路径，即 http(s)://<server>:<port>/iportal 后接的路径。
• name: 路由名称，该名称是唯一的，当 route 中有多个对象时，每项的 name 需设置为不同值。
• component: 承载 iFrame 的组件名称，需与 GenerateRoutes 函数所传参数保持一致。
• meta: 扩展项的元信息，包括：
• icon：扩展项的 icon 图标，点击这里查看支持的图标。
• title：扩展项的标题。
• keepAlive： 是否使用缓存机制。
• src：扩展的外部页面的 url。
• permission：访问该扩展页面的权限表达式数组，多个权限表达式之间以英文逗号分隔。只有拥有该权限数组中任一权限的用户才能访问此页面，若不进行配置，默认是具有任何管理权限的用户都可以访问扩展的页面。支持设置为 iPortal 预设权限或自定义权限。 iPortal 默认预设权限可参考 REST API： userProfile 中返回的 modulePermissions 字段；若希望自定义新的权限时，格式如下：portal:admin:extendsPage:{permission}，其中粗体部分可任意命名。

• children：在新的扩展菜单下继续追加嵌套子菜单，children 的参数和 route 一致。

有关路由函数的更多信息，可参考：Vue Router。

第二步：找到位于 %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录下的 index.json 文件（如果没有该文件，则新建同名文件），按照在第一步中新建的 js 文件信息进行开发，示例的 index.json 内容如下：

{

    "routerName": "GenerateRoutes",

    "libraryName": "addByUrl",

    "addDependsToVue": "",

    "jsUrl": [

        "/iportal/resources/admin-ui/extend/addByUrl.js"

    ]

}

• routerName: 扩展的路由，为数组或函数。使用数组表示各扩展页面对应的路由集合；使用函数表示由指定的路由函数生成各扩展页面的路由数组。
• libraryName: 扩展页面绑定在当前 window 的名称。
• addDependsToVue（可选）: 若使用了一些 iPortal 未支持的库，可以使用该方法进行绑定。
• jsUrl: 待加载的用户扩展 js 文件路径。该路径是 js 文件相对于 iPortal 根路径（形如：http(s)://<server>:<port>）的路径。

第三步（可选）：编辑 %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录中的 permissions.json 文件，将第一步中所有的自定义权限表达式以 json 格式写入。该文件可以在角色管理的权限列表中增加针对访问扩展页面的权限设置项，支持中文、英文两种语言，示例如下：

{

    "permissions":[

      {

        "permission": "portal:custom:admin:extendsPage:viewPage1",

        "label": {

          "zh": "查看iframe扩展示例页面",

          "en": "View iframe extends page"

        }

      }

    ]

}

• permissions：权限数组
• permission：单个权限名，需与第一步中自定义的权限表达式保持同名
• label：该权限在角色管理权限列表中的说明。其中 zh 为中文环境下的说明，en 为英文环境下的说明

保存后，以管理员身份登录 iPortal，即可在管理页面的菜单项中看到扩展的内容。

注意：

1）如果出现乱码，请将文件的编码格式更换为 UTF-8。

2）新扩展的管理页面在刷新后有时会出现 HTTP 404 问题，此时需要在 %SuperMap iPortal_HOME%\webapps\iportal\WEB-INF 目录下的 urlrewrite.xml 文件中新增如下配置：

<rule>

        <name>addPage</name>

        <from>/admin-ui/user-add-page-children1$</from>

        <to>/admin-ui/index-iPortal.html</to>

</rule>