# 客服管理系统
> 来电查询业主信息，工单进度以及处理。 接口对接：段宇飞，李明

*项目目录 基于vue-cli 百度一下你就知道*
*只摘选有必要的目录进行说明*

```项目目录
> build            ---------  webpack编译文件
> config           ---------  配置
> src              ---------  开发目录 
* index.html       ---------  默认index.html文件
* package.json     ---------  依赖等相关json
```
---

*src*

```开发目录
> assets           ---------  静态文件（图片等文件）
> components       ---------  组件
> http             ---------  axios封装目录 
> router           ---------  路由 
> store            ---------  全局状态 
> utils            ---------  工具js 
> views            ---------  vue文件目录 
* App.vue          ---------  vue指定的root根组件
* config.js        ---------  依赖等相关json
* main.js          ---------  入口
```

---

*http*

```http
* api.js           ---------  所有的api统一放到这个文件进行管理
* request.js       ---------  请求拦截器封装
```

* #### request.js中拦截
  1. 请求拦截：对请求头进行添加Authorization 具体和后端进行沟通
  2. 响应拦截：后端返回401即token失效或者无效进行跳转登录
  3. loading在这里设置全局请求等待状态（可自行更改）
  4. 400后续会在内部管理系统进行管理菜单和路由，可参考内管的设计路由拦截方式

---

*views*

```views
> control-center           ---------  菜单 - 管理中心
> customer-calls           ---------  菜单 - 客户来电
  - caller-information.vue ---------  客户来电页面
> infomation-center        ---------  菜单 - 信息中心
> maintenance-knowledge    ---------  菜单 - 知识库维护
> order-monitoring         ---------  菜单 - 工单监控
  - order-progress.vue     ---------  工单进度页面
* index.vue                ---------  主路由页面（很简单页面，不进行详述）
* login.vue                ---------  登录页面（很简单页面，不进行详述）
```

* #### index.vue
  1. 这个文件中进行对阿里云sdk接入，进行全局监听处理
  2. 处理之后将事件逐级下发到客户来电页面(这里自行关注代码逻辑)


只详述逻辑可能多的页面（上述列表中单独讲目录下单列的文件）


* #### caller-information.vue
  1. 逻辑多，代码加css共2022行
  2. 具体业务注意点在于（下图）。这里打电话模拟来电，然后出发调用接口查询业主信息，选定后点击确定可对右侧进行相应的tab操作
  ![客户来电](../assets/74ead56bbc0df7c87d30514f2db5b21.png)
  3. 客户来电主要集中于来电报事，以及方面客服人员查询相应信息，剩余的注意代码中注释即可


* #### order-progress.vue
  ![工单进度](../assets/f6fbf35b9da39d64a5df7ddb9659dd8.png)

---

*components中repair-detail.vue与order-info.vue*
* #### repair-detail和order-info
  *报事类型不同分跳不同详情，repair-detail为就项目迁移过来，可能存在无用代码，未曾处理*
  *order-info是后期业务迭代新做，注释较多，基本注释逻辑清晰，可直接测试环境操作理清思路*

  ![不同类型跳不同详情](../assets/10c1c631cd96c3fa53d5cca01b3b4ab.png)

