# MaxModel

**Repository Path**: Maxfengyan/MaxModel

## Basic Information

- **Project Name**: MaxModel
- **Description**: 自己封装的前端框架（vue）
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-19
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目名称：boss-business
### 项目描述：广电融合用户播控平台-业务中心系统
### 开发者：马丰彦
### 描述：
- boss-business系统为boss系统的业务中心系统，包含IPTV上节目产品的订购、续订、审核、服务的管理、订单处理、计费码策略管理、支付渠道的设置、优惠策略等功能。
- boss-business每次切换menu是都会用从中心登录系统传入的token主动调取权限接口，来做到动态获取权限加载，做到权限无缝切换修改，无需重新登录。
- 系统左侧菜单三角处为各个系统衔接的入口，可以通过点击进入到不同系统（url携带token参数，处理与登录中心相同。）
- 系统内核心为产品管理，包含了产品的新增、审核、下发等，分为线上和线下以及五种审核状态tab呈现，产品细分为四个部分：产品基本信息、产品资费策略、产品服务、产品优惠。
- 业务中心有平台的概念，所有涉及到所属平台下拉框搜索的都配有平台校验权限，如果没有多平台权限，所属平台下拉框会隐藏掉，搜索条件固定单一平台权限。
- 左侧菜单为动态路由加载，接口传入几个平台权限，菜单就会根据权限显示（包括每个菜单下的按钮）。
### 技术栈：vue/vue-router/vuex/element-ui/axios/crypto-js/mockjs等
### <div style="color:red;">核心逻辑处理:</div>
- 通过登录中心传入的url参数，获取到了token值
- token值存入cookie以及store中
- 调取`获取用户`接口，得到用户的所有权限
- 在store中处理好接收到的参数，把分平台拆分处理循环存入路由数组中，并把获取到的菜单权限+按钮权限存入store中便于menu显示以及按钮指令接收。
- 在路由守卫中调用addRouter()，实现路由动态加载。在页面中调用指令v-power实现按钮权限(感觉实现的逻辑很复杂，为什么一句话就说完了，sad)
### <h4 style="color:red;">注意：除正式线上环境外，所有其他演示环境皆为mock数据(重写了axios拦截请求)。为方便处理，所有mock数据没有做到根据请求参数来返回结果，*故所有总平台与分平台的用户管控以及统计数据皆相同，特此说明。*</h4>
#### 项目结构
```
|— build                                // 构建相关
|— public                               // 不打包文件
|— dist                                 // 打包文件
|— mock                                 // mock数据
|— src                                  // 源代码
|   |— api                              // 所有http请求(每个模块对应每个请求模块)
|   |— assets                           // 静态图片文件
|   |— components                       // 全局公用组件
|   |   |— Breadcrumb                   // 封装面包屑导航组件
|   |   |— Hamburger                    // 封装侧边栏状态组件
|   |   |— SvgIcon                      // 封装icon图标库组件
|   |— directive                        // 按钮权限自定义指令
|   |— icons                            // svg图标库/iconfont图标库
|   |— router                           // 全局路由管理
|   |— store                            // vuex缓存数据存放
|   |   |— modules                      // vuex模块
|   |   |     |— app.js                 // 侧边栏状态存储
|   |   |     |— permission.js          // 权限处理js
|   |   |     |— setting.js             // 过滤路由表
|   |   |     |— user.js                // 获取用户状态：登录、登出、前端登出、获取用户信息
|   |   |— getters.js                   // vuex getters 
|   |   |— index.js                     // vuex 入口页
|   |— styles                           // css样式文件
|   |    |— element-ui.scss             // 修改原生element-ui框架样式
|   |    |— index.scss                  // 默认样式统一
|   |    |— mixin.scss                  // 修改侧边栏滚动条
|   |    |— sidebar.scss                // 侧边栏样式
|   |    |— transition.scss             // 页面跳转过渡动画效果
|   |    |— variables.scss              // 变量样式，一键换肤
|   |— utils                            // 全局公用项目
|   |   |— auth.js                      // 获取用户token写缓存
|   |   |— downLoad.js                  // excel下载封装
|   |   |— loading.js                   // 封装axios请求全局遮罩
|   |   |— index.js                     // 工具类
|   |   |— request.js                   // 封装axios请求
|   |   |— secret.js                    // 封装aes+base64加密
|   |   |— urldecode.js                 // 封装url解码方法
|   |   |— urlencode.js                 // 封装url转码方法
|   |   |— validate.js                  // 正则验证
|   |— views                            // 所有页面
|   |   |— dashboard                    // 进入主页
|   |   |— layout                       // 布局页面
|   |   |   |— components               // 布局页面组件
|   |   |   |   |— Sidebar              // 侧边栏
|   |   |   |   |   |— index.vue        // 侧边栏主体
|   |   |   |   |   |— Item.vue         // 侧边栏图标实现
|   |   |   |   |   |— SidebarItem.vue  // 侧边栏嵌套实现
|   |   |   |   |— index.js             // 侧边栏入口文件
|   |   |   |   |— APPMain              // 主体部分
|   |   |   |   |— Navbar               // 头部导航栏 
|   |   |   |   |— mixin                // 侧边栏收缩实现
|   |   |   |   |— layout               // 页面布局
|   |   |— buy                          // 订购管理
|   |   |   |— billlist                 // 订单列表
|   |   |   |— buylist                  // 订购列表
|   |   |   |— unsubscribelist          // 退订列表
|   |   |— check                        // 产品审核
|   |   |— discount                     // 优惠策略
|   |   |   |— components               // 优惠策略组件
|   |   |   |   |— realEdit.vue         // 优惠策略编辑组件
|   |   |   |   |— watch.vue            // 优惠策略查看组件
|   |   |   |   |— editAdd.vue          // 优惠策略新增组件
|   |   |   |— index.vue                // 优惠策略组件首页
|   |   |— expenses                     // 支付渠道
|   |   |   |— components               // 支付渠道组件
|   |   |   |   |— edit.vue             // 支付渠道编辑组件
|   |   |   |   |— add.vue              // 支付渠道新增组件
|   |   |   |   |— watch.vue            // 支付渠道查看组件
|   |   |   |   |— selectPay.vue        // 计费码管理组件
|   |   |   |— index.vue                // 支付渠道首页
|   |   |— payChannel                   // 计费策略
|   |   |   |— components               // 计费策略组件
|   |   |   |   |— add.vue              // 计费策略新增组件
|   |   |   |   |— edit.vue             // 计费策略编辑组件
|   |   |   |   |— watchInfo.vue        // 计费策略查看组件
|   |   |   |— index.vue                // 计费策略首页
|   |   |— product                      // 产品管理模块
|   |   |   |— components               // 产品管理模块
|   |   |   |   |— *.vue                // 太多了，说不过来zzzzzzz
|   |   |   |— index.vue                // 产品管理模块
|   |   |— service                      // 服务管理
|   |   |   |— components               // 服务管理
|   |   |   |   |— watchInfo.vue        // 服务管理查看详情
|   |   |   |   |— hasConnect.vue       // 服务管理关联（已隐藏*）
|   |   |   |— index.vue                // 服务管理首页
|   |   |— 404.vue                      // 404错误页面
|   |— App.vue                          // 入口挂载页面
|   |— main.js                          // 总入口文件
|   |— permission.js                    // 封装权限管理+重定向页面        
|— static                               // 不打包资源
|— .babelrc                             // babel-loader配置
|— .editorconfig                        // 编辑器配置
|— .eslintrc.js                         // eslint配置
|— .gitignore                           // .git忽略项
|— .travis.yml                          // 自动化CI配置
|— index.html                           // html模板
|— package.json                         // npm包管理
|— README.md                            // 项目详细介绍
```