摘要：2018年十二月份的时候，我们需要基于我们的后台系统开发应急呼叫系统。一直没有总结。我对这部分也许会有很多理解不透彻的地方，望小伙伴们彼此相互学习，多多提出不足呢。
技术：由于是基于我们的后来系统来实现，后台系统中使用的技术如下：
- vue框架
- vue-router 路由的相关使用
- axios用于前后端数据交互
- ElementUI组件
应急呼叫系统，引入了阿里云云呼叫中心系统集成中的软电话SDK前端接入
需求如下：
- 需要全局使用云呼的功能
- 云呼的按钮需要根据用户权限，来确定是否显示云呼的按钮
- 可以获取到打进来的电话号码
- 可以实现平台外呼号码
- 当有电话呼入到平台上的时候，显示工作台弹窗
- 点击云呼的按钮，可以控制面板的显示与隐藏
大概思路：
（刚开始有点迷茫，不知道从何下手），具体如下：
- 全局引入样式和SDK
- 根据用户的权限控制云呼按钮的显示和隐藏
- 对云呼进行初始化
具体代码实现如下：
1、由于需要全局使用，在index.html中引入阿里云的SDK。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>你自己写</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><meta name="keywords" content="你自己写" /><meta name="description" content="" /><link rel="icon" href="../static/img/L_icon7.png"><!--sdk样式文件--><link rel="stylesheet" type="text/css" href="https://g.alicdn.com/acca/workbench-sdk/0.4.7/main.min.css">
</head>
<body>
<div id="app"></div>
<!-- 阿里云云呼叫SDK -->
<script type="text/javascript" src="https://g.alicdn.com/crm/acc-phone/1.1.2/SIPml-api.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/crm/acc-phone/1.1.2/index.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/acca/workbench-sdk/0.4.7/workbenchSdk.min.js"></script>
</body>
</html>
2、由于需要全局使用，所以我在home.vue页写初始化的配置。
这里一开始写的时候，遇到了一个问题。一开始云呼的挂载元素写在了class='callDiv'里面了，初始化后在子组件中调用window.workbench的时候会报错，这个主要的原因是v-if=openWbShow的影响，所以我把云呼的挂载元素div放在外面了，就没这个报错了。
<template> <div class="callDiv" v-if="openWbShow"><!-- 云呼 --><div @click="openWB(openStatus)" v-if="login" class="mini-workbench">云呼</div> <div class="noLogin" v-else> <a href="后台给我需要登录的接口" class="noLoginWorkbench">云呼</a></div></div><!-- 云呼挂载元素id --><div id="workbench" :class="{'workbenchBorder':workbenchBorder}"></div>
</template>
<script>export default {data() {return {openWbShow:false, // 云呼按钮的显示login:false, // 云呼按钮是登录状态openStatus:false, // 控制面板的显示workbenchBorder:false, // 面板的边框visibleWorkbench:false, // 来电的时候工作台弹窗的显示}},mounted() { this.getUserInfo();},methods : {getUserInf(){let self = this;self.$axios.post("后台给的用户相关的接口").then((res) => {// console.log(res.data);// user.isCall属性来判断是给允许进入云呼叫拨打电话,0：云呼按钮不可见；1：可见云呼按钮，但不能进行外：能够实现外呼功能// 判断当前用户的权限 有权限的话显示云呼按钮 // 判断云呼登录状态 如果已登录 按钮蓝色 初始化initWorkBench，如果未登录的话是灰色按钮，点击去登录的界面（后台给我的阿里云的子账户登陆页面，这是后台配置好的）if(res.data.data.user.isCall==null || res.data.data.user.isCall == 0{self.openWbShow = false;}else if(res.data.data.user.isCall == 1){self.openWbShow = true; //云呼按钮可以显示if(res.data.data.user.aliToken){// 判断是不是有aliToken，有的话云呼可以上线，初始化self.login = true;self.initWorkBench();}else{ // 可以显示云呼按钮，但不能使得上线，上线按钮为灰色self.login = false;}}});},//云呼相关初始化initWorkBench(){let self = this;window.workbench = new window.WorkbenchSdk({dom: 'workbench', // 挂载的元素width: '280px', // 面板的宽height: '500px', // 面板的高instanceId: '这里是你们自己申请后的id',ajaxPath: '后台配置好的接口，让我写的',ajaxMethod: 'post',afterCallRule: 15, // 挂机后的话后处理时间header: true,defaultVisible:false,useOpenApiSdk: false,exportErrorOfApi: true,moreActionList: ['mobilePhoneAnswer', 'break', 'offline'],onInit: function () {// window.workbench.register(); // 想实现自动上线在此注册// window.workbench.changeVisible(true); //可以实现初始化后显示面板},onErrorNotify: function (error) {console.warn(error)},onCallComing: function (connid,caller,calee,contactId,skillgroupId) {// connid: 通话id;caller: 主叫号码;calee:被叫号码;contactId:录音id，通话记录查询需要的字段;skillgroupId:技能组ideventBus.phone = caller; //将获取的号码，先赋值eventBus.$emit("callComming",caller); // 传递给非父子组件},onCallDialing: function (connid,caller,calee,contactId) {// console.log('这里是',connid,caller,calee,contactId);},onStatusChange: function (code, lastCode, context) {// console.log(code, lastCode, context);},onCallEstablish: function (connid, caller, calee, contactId) {// console.log('这里是通话建立时触发的回调函数', connid, caller, calee, contactId)},onCallRelease: function (connid, caller, calee, contactId) {// console.log('这里是通话结束时触发的回调函数', connid, caller, calee, contactId)},onHangUp(type){// console.log("挂机");eventBus.phone = ""; },onStatusChange(code, lastCode, context){// console.log(code, lastCode, context);}})},// 云呼相关配置openWB(openStatus){// 点击出现云呼面板，再次点击面板消失if(openStatus == true){window.workbench.changeVisible(false);this.openStatus = false;this.workbenchBorder = false;}else{window.workbench.changeVisible(true);this.openStatus = true;this.workbenchBorder = true;} }}}
</script>实现的效果：如下
