业务概述：

该示例演示了如何获取当前登录用户token、如何使用js-sdk调用平台接口，并将前端界面添加到一个自定义系统菜单中。

最终效果图：

实现流程

0. 创建自定义系统菜单 0.1.创建自定义一级分类系统菜单 0.2.创建自定义二级嵌入类型系统菜单 0.3.通过平台菜单访问扩展模块
1. 修改vue页面，使用ElementPlus进行页面UI搭建。
2. 获取当前登录用户token。 2.1. 当自定义项目模块通过菜单嵌入到平台时，那么就会以URL参数的方式将当前登录用户的token传入。(具体格式为：192.168.1.XX/demo/testDemo?token=XXX) 获取方式：

new URLSearchParams(window.location.search).get("token"); //获取URL，参数中的用户token信息

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

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

4. 调用接口并渲染至前端UI。 4.1. 引入需要调用的平台接口API对象。

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

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

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

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

   //查询地区方法。
     queryAreaList(){
       //传入必需参数。
       projectBoardFilterGroupApi.getProjectBoardFilterValueList("0","0").then(res =>{
         //res为返回参数。
         //判断是否调用成功。
         if(res?.code === "000000"){
           //将返回数据赋值到定义的属性中，在渲染至页面。
           state.treeData = res?.data;
         }else{
           //接口调用不成功，使用 ElementUi的提示框将错误信息渲染。
           ElMessage.error({message:res.msg});
         }
       });
     },
   

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

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

5. 完善企业报修前端模块并打包部署。

最终效果展示：

资源下载

自定义项目源码下载 (opens new window)