业务概述：

此章节将会带领开发者创建自定义项目菜单，以及获取用户token、获取当前项目ID、使用sdk调用平台接口。

最终效果图：

实现流程

1. 创建自定义项目菜单 1.1.找到平台项目菜单右侧的新增按钮。 添加菜单动图演示 参数介绍 1.2.通过平台项目菜单访问扩展模块。

2. 搭建UI界面

3. 获取当前登录用户token以及当前选中的项目ID。

   3.1. 当自定义项目模块通过菜单嵌入到平台时而菜单为项目类型那么将会把当前登录用户Token与当前选中项目的ID以URL形式传入。

   提示： 具体格式为（192.168.1.XX/demo/testDemo?token=XXX?projectId=XXX

    //获取URL参数列表对象
     const urlSearchParams = new URLSearchParams(window.location.search);
      urlSearchParams.get("token");//获取参数中的用户token信息
      urlSearchParams.get("projectId");//获取参数中的项目ID信息
   

4. 引入SDK-API并将当前登录用户token加入全局。 注意：不同语法的SDK具有不同的目录结构以及不同的调用方式该方式为JavaScript语法

   4.1. 将用户token加入到全局中。

   sdk-js中将token加入全局语法/方法:

   //引入设置全局token
       import { ApiClient } from "XXX/src/ApiClient"; 
   //将用户token加入全局，可在vue的onMounted方法中使用。
       ApiClient.instance.setAccessToken(urlSearchParams.get("token"));
   

5. 调用接口并渲染至前端UI。

   5.1. 引入需要调用的平台接口API对象。

   //引入需要调用的平台接口API对象
        import {UserApi} from 'XX/XXX/UserApi';
   

   5.2. 初始化API对象在setup/或某方法内中定义变量值为具体的Api对象 new XXXApi();

    //声明Api对象调用接口
        const userApi = new UserApi();
   

5.3. 调用API对象中的方法并将返回参数设置到vue属性中进行渲染。

    //页面初始化时，获取当前用户拥有权限的资源ID，进行页面资源权限控制。
      userApi.getLoginUser({}).then(user => {
        state.permissionCodes = user.data.permissionCodes;
      });

提示：报修模块为扩展模块因此平台提供的SDK-API中将不会存在报修接口以axios方式代替亦可将axios报修方法进行封装调用

      //通过传入当前选中的项目Id，查询对应的报修数据
        axios.post("http://192.168.1.14/repairDemo/repair/queryList", projectId).then(res => { //请求前缀为，代理配置路径
          //判断是否调用成功
          if (res?.data?.code === "000000") {
            //将查询出的报修数据，赋值给属性 tableData中
            state.tableData = res?.data?.data;
          } else {
            ElMessage.error({ message: res?.data?.msg });
          }
        });

1. 完善项目报修前端模块并打包部署。 最终效果展示：

资源下载

添加自定义项目菜单及获取项目信息源码 (opens new window)