1 .概述

有些复杂的界面无法通过表单或列表配置出来时,可以自己开发自定义的Vue页面。

2. 实现步骤

2.1 获取前端基础项目并运行

我们提供了一个通用的前端,用户可以基于这个前端开发自己的应用,这个前端提供了以下能力。

  1. 支持配置自定义表单列表的渲染
  2. 支持显示应用的相关菜单。
  3. 支持用户自己开发页面,并配置到菜单进行管理。
  4. 支持流程发起等操作。

我们可以通过,点击顶部导航栏的“应用开发”,再点击“前端代码下载”下载基础的前端代码。下载的代码是项目是基于vue@ 2.6.10, ant-design-vue@ 1.7.5开发的。

启动运行命令如下:

npm install --registry=http://nexus.redxun.cn:18081/repository/npm-redxun-group/

npm run serve

然后还要增加nginx的配置,如下所示:

    location /appPortal{
        proxy_set_header Host  $host;
        proxy_pass http://127.0.0.1:8083;
    }

在生产环境,运行编译后的代码的话,可以忽略上面。直接配置nginx就可以,如下所示:

    location /appPortal {
        alias  /home/jpaas/front/common-front;
        index index.html;
        try_files $uri $uri/ /appPortal/index.html;
    }

2.2 前端自定义页面开发

用开发工具(比如WebStrom,Idea等)打开你的前端项目,可以看到demo.js、DemoList.vue、DemoEdit.vue这三个代码生成器生成的文件。demo.js是调用后台接口的js文件,这里没有改动过;DemoList.vue、DemoEdit.vue为查询列表页和编辑明细页,根据实际需求删除一些不需要显示的字段,增加列表页操作栏的渲染。

注意:想要发布到菜单上的Vue组件,一定要放在src/views目录下。

2.3 发布自定义页面到菜单

在应用设计页面,点击“菜单管理”功能,

然后点击“新建”按钮,录入菜单的信息如下图:

“应用”字段默认当前的应用,“名称”字段输入菜单的名称,“标识键”为菜单的关键字(一般为英文数字组合),“菜单类型”默认为“菜单”,“访问方式”默认为“URL访问”,“配置类型”默认为VUE组件,“组件路径”输入刚才创建的前端页面的路径(不包括src/views/前缀),然后选择一个图标,录入“显示顺序”,点击“提交”按钮即可完成。

2.4 菜单授权

需要将菜单授权到机构/租户,然后才能进行用户组/角色授权。点击“组织中心”-“机构管理”-“机构类型”,对指定的机构授权你的应用及应用下面的菜单。

如果不是管理员或机构管理员账号登录的话,还需要用户组/角色授权。点击“组织中心”-“组织部门”-“资源授权”,选择指定的用户组或角色,然后勾选右边的菜单项(也可以只勾选第一层,再勾选“级联选择”),点击“保存菜单权限”按钮完成授权。

2.5 预览/运行

重启前端代码之后,刷新一下页面即可在顶部的导航栏看到发布后的应用,点击进去后即可看到自定义开发的页面了。

文档更新时间: 2022-04-24 23:07   作者:张敏