Vue 是一套构建用户界面的渐进式 JavaScript 框架，用于构建数据驱动的 Web界面。iPortal 支持用户将自己扩展开发的内容打包为 Vue 组件，添加到 iPortal 管理菜单中。扩展开发的效果如下：

本例使用的示范代码位于：%SuperMap iPortal_HOME%\samples\code\iportal-admin-ui-extend，示范代码已为您完成了扩展开发流程中的第二至第五步。（仅 iPortal 完整包含示范代码，deploy 分发包不含示范代码）。

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

完整的扩展开发流程如下：

第一步：安装开发环境

• 安装 Node.js，您可以通过包管理器或访问 Node.js 官网进行下载。
• 全局安装 Vue CLI 脚手架。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，安装命令如下：

npm install -g vue-cli

第二步：通过如下命令初始化一个 Vue 项目：

vue init webpack-simple iportal-admin-ui-extend

其中加粗部分为项目文件夹名，本例中为 iportal-admin-ui-extend，您在开发时可自定义命名。初始化项目时还可按需配置项目名称、项目描述、作者等基本信息，配置完成后即成功创建了一个 Vue 项目。

第三步：进入创建的项目文件夹，在 src 目录下新建 components 文件夹，然后在此文件夹下新建后缀名为 .vue 的扩展组件文件，编写扩展页面的具体内容。

第四步：返回项目根目录，新建 index.js 文件。 index.js 是把扩展组件文件暴露出去的出口，示范如下，用户需根据自己的项目进行更改。

import ant1 from './src/components/ant-design-vue-demo'

import 'default-passive-events'

 

export function GenerateRoutes(UserAddVue, pageView, routeView) {

  const extendRoute = [//路由

    {

      path: '/admin-ui/extend',

      name: 'UserElement',

      component: pageView,

      meta: { icon: 'select', title: '用户扩展组件演示', keepAlive: true, permission: ['portal:admin:extendsPage:viewVuePage', 'portal:admin:extendsPage:viewNewWindowPage']},

      children: [

        {

          path: '/admin-ui/extend/ant-design-vue',

          name: 'UserAntDesign',

          component: ant1,

          meta: { title: 'ant-design-vue组件演示', keepAlive: true, permission: ['portal:admin:extendsPage:viewVuePage']}

        },

        {

          path: 'http://support.supermap.com.cn:8092',

          name: 'supermap',

          meta: {

            title: '新窗口打开演示',

            target: '_blank',

            permission: ['portal:admin:extendsPage:viewNewWindowPage']

          }

        }

      ]

    },

    {

      path: '/admin-ui/extend/iframe',

      name: 'UserIframe',

      component: UserAddVue,

      meta: { icon: 'select', title: 'iFrame嵌入页面', keepAlive: true, src: 'http://support.supermap.com.cn:8092' ,permission: ['portal:admin:extendsPage:viewIFramePage']}//权限路由

    }

    ];

  return extendRoute;

}

export function addToVue(_Vue) {

}

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

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

• children: 扩展路由的子路由，格式与父路由一致。通过添加子路由可实现菜单的多层级扩展。

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

第五步：修改webpack.config.js 文件，根据用户自定义扩展的内容，对粗体部分代码进行更改，点击此处查询粗体部分参数的说明：

var path = require('path')

var webpack = require('webpack')

const NODE_ENV = process.env.NODE_ENV

module.exports = {

  entry: NODE_ENV === 'development' ? './src/main.js' : './index.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    publicPath: NODE_ENV === 'development' ? '/dist/' : '/iportal/resources/admin-ui/extend/',

    filename: 'extendPage.js',

    library: 'extendPage',

    libraryTarget: "umd",

    umdNamedDefine: true

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          'vue-style-loader',

          'css-loader'

        ],

      },      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: {

          loaders: {

          }

          // other vue-loader options go here

        }

      },

      {

        test: /\.js$/,

        loader: 'babel-loader',

        exclude: /node_modules/

      },

      {

        test: /\.(png|jpg|gif|svg|ttf|woff)$/,

        loader: 'file-loader',

        options: {

          name: '[name].[ext]?[hash]'

        }

      }

    ]

  },

  resolve: {

    alias: {

      'vue$': 'vue/dist/vue.esm.js'

    },

    extensions: ['*', '.js', '.vue', '.json']

  },

  devServer: {

    historyApiFallback: true,

    noInfo: true,

    overlay: true

  },

  performance: {

    hints: false

  },

  devtool: '#eval-source-map'

}

if (process.env.NODE_ENV === 'production') {

  module.exports.devtool = '#source-map'

  // http://vue-loader.vuejs.org/en/workflow/production.html

  module.exports.plugins = (module.exports.plugins || []).concat([

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: '"production"'

      }

    }),

    new webpack.optimize.UglifyJsPlugin({

      sourceMap: true,

      compress: {

        warnings: false

      }

    }),

    new webpack.LoaderOptionsPlugin({

      minimize: true

    })

  ])

}

第六步：在项目根目录下（针对 iPortal 提供的示范代码时，为 %SuperMap iPortal_HOME%\samples\code\iportal-admin-ui-extend 目录）运行如下命令进行编译：

npm install

编译完成后，运行如下命令进行打包：

npm run build

打包完成之后，会在根目录下自动创建一个 dist 文件夹，您需要将 dist 文件夹内打包出来的 js 放置在 %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录下。

第七步：修改 index.json 文件（位于%SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录），如下所示：

{

    "routerName": "GenerateRoutes",

    "libraryName": "extendPage",

    "addDependsToVue": "addToVue",

    "jsUrl": [

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

    ]

}

• routerName: 扩展的路由，为数组或函数，使用数组表示为追加的路由，使用函数表示由该函数生成路由，函数有三个传入参数，分别为用于使用 iFrame 展示的界面，pageView，routerView。
• 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": "扩展示例页面1",
        "en": "Extends page1"
      },
      "children": [
        {
          "permission": "portal:custom:admin:extendsPage:viewPage1-1",
          "label": {
            "zh": "扩展示例页面1-1",
            "en": "Extends page1-1"
          },
          "children": [
            {
              "permission": "portal:custom:admin:extendsPage:viewPage1-1-1",
              "label": {
                "zh": "扩展示例页面1-1-1",
                "en": "Extends page1-1-1"
              }
            },
            {
              "permission": "portal:custom:admin:extendsPage:viewPage1-1-2",
              "label": {
                "zh": "扩展示例页面1-1-2",
                "en": "Extends page1-1-2"
              }
            }
          ]
        },
        {
          "permission": "portal:custom:admin:extendsPage:viewPage1-2",
          "label": {
            "zh": "扩展示例页面1-2",
            "en": "Extends page1-2"
          }
        }
      ]
    },
    {
      "permission": "portal:custom:admin:extendsPage:viewPage2",
      "label": {
        "zh": "扩展示例页面2",
        "en": "Extends page2"
      }
    },
    {
      "permission": "portal:custom:admin:extendsPage:viewPage3",
      "label": {
        "zh": "扩展示例页面3",
        "en": "Extends page3"
      }
    }
  ],
  "groups": [
    {
      "groupName": {
        "zh": "分组1",
        "en": "分组1"
      },
      "permissionExpressions": [
        "portal:custom:admin:extendsPage:viewPage1"
      ]
    },
    {
      "groupName": {
        "zh": "分组2",
        "en": "分组2"
      },
      "permissionExpressions": [
        "portal:custom:admin:extendsPage:viewPage2"
      ]
    }
  ]
}

• permissions：权限数组
• permission：单个权限名，需与第四步中自定义的权限表达式保持同名
• label：该权限在角色管理权限列表中的说明。其中 zh 为中文环境下的说明，en 为英文环境下的说明
• children：权限的子权限，格式与父权限一致。通过添加子权限可实现权限的多层级扩展

• groups：权限组数组
• groupName：该权限组在角色管理权限列表中的说明。其中 zh 为中文环境下的说明，en 为英文环境下的说明
• permissionExpressions：单个权限组，可添加扩展的权限，需与第四步中自定义的权限表达式保持同名

注意：若扩展的权限没有归类到权限组中，则默认归类到未分组

 

保存后，以管理员身份登录 iPortal，拥有对应访问权限的用户即可在管理页面的菜单项中看到扩展的内容。

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

<rule>

        <name>extendPage</name>

        <from>^/admin-ui/extend/.*</from>

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

</rule>