### main.js
用于進行各種初始化設置,全局實例函數綁定,全局過濾器等等
```javascript
Vue.prototype.AM = AM;
promise.polyfill();
Vue.use(VueI18n);
Vue.use(iView);
/** 全局權限指令設置 */
let menuShow = (url) => {
let accessList = JSON.parse(localStorage.getItem('funList'));
for (let item of accessList) {
if (item.url == url) {
return false;
}
}
return true;
};
Vue.prototype.menuShow = menuShow;
```
### router
路由對象使用按需加載,
路由對象分為路由列表原文件和列表過濾文件
1. 原文件中記錄所有的路由
2. 過濾文件用于進行權限過濾
3.
```javascript
/* 實例化路由 */
export const router = new VueRouter(RouterConfig);
router.beforeEach((to, from, next) => {
/* 加載進度條 */
iView.LoadingBar.start();
/** 即將進入的頁面的title,最好每個路由設置title值 */
Util.title(to.meta.title);
/** 已經鎖定狀態下不可進入其他頁面,直接跳往鎖屏頁面 */
if (Cookies.get('locking') === '1' && to.name !== 'locking') { // 判斷當前是否是鎖定狀態
next({
replace: true,
name: 'locking'
});
} else if (Cookies.get('locking') === '0' && to.name === 'locking') {
next(false);
} else {
// 未登錄跳往登錄頁面
if (!Cookies.get('user') && to.name !== 'login') {
next({
name: 'login'
});
} else if (Cookies.get('user') && to.name === 'login') { // 判斷是否已經登錄且前往的是登錄頁
/* 已登錄狀態前往登錄頁面,直接重定向首頁 */
Util.title();
next({
name: 'home_index'
});
} else {
const curRouterObj = Util.getRouterObjByName([otherRouter, ...appRouter], to.name);
/* 存在需要權限判斷的路由 */
if (curRouterObj && curRouterObj.access !== undefined) { // 需要判斷權限的路由
let menuArray = JSON.parse(localStorage.getItem('menuList'));
let accessCode = [];
for (let item of menuArray) {
accessCode.push(item.url);
}
if (Util.oneOf(curRouterObj.access, accessCode)) {
Util.toDefaultPage([otherRouter, ...appRouter], to.name, router, next); // 如果在地址欄輸入的是一級菜單則默認打開其第一個二級菜單的頁面
} else {
/* 無權限的情況下直接跳轉403error */
next({
replace: true,
name: 'error-403'
});
}
} else { // 沒有配置權限的路由, 直接通過
Util.toDefaultPage([...routers], to.name, router, next);
}
}
}
});
```
```javascript
export const loginRouter = {
path: '/login',
name: 'login',
meta: {
title: 'Login - 登錄'
},
component: resolve => {
require(['@/views/login.vue'], resolve);
}
};
export const page404 = {
path: '',
name: 'error-404',
meta: {
title: '404-頁面不存在'
},
component: resolve => {
require(['@/views/error-page/404.vue'], resolve);
}
};
export const page403 = {
path: '/403',
meta: {
title: '403-權限不足'
},
name: 'error-403',
component: resolve => {
require(['@//views/error-page/403.vue'], resolve);
}
};
```
### service
為了防止api散落在頁面中,統一使用api.js管理所有的api,生成api對象
設置攔截器和統一錯誤處理機制
```javascript
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
let flag = 0;
for (let item of JsonData) {
if (config.url.indexOf(item) !== -1) {
flag++;
break;
}
}
// 在發送請求之前做些什么
if (flag > 0) {
config.headers = {
'Content-Type': 'application/json;charset=utf-8'
};
} else {
config.data = qs.stringify(config.data);
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
};
}
/**
* 設置cookie
*/
if (!config.params) {
config.params = {};
}
config.params.randomId = localStorage.getItem('randomId');
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
export const Home = {
/**
* 隨訪記錄審核接口
* @param {any} data
* @returns
*/
orderList (data) {
return fetch('get', '/visit/hp/orderlist', data);
},
/**
* 隨訪計劃審核接口
* @param {any} data
* @returns
*/
tasklist (data) {
return fetch('get', '/visit/hp/tasklist', data);
},
/**
* 方案重復匹配審核接口
* @param {any} data
* type:2 //必須為2(必傳)
* @returns
*/
taskList (data) {
return fetch('get', '/visit/hp/tasklist', data);
},
/**
* 醫生接診量排行獲取科室接口
* @param {any} data
* @returns
*/
getdepartment (data) {
return fetch('get', '/visit/hp/getdepartment', data);
},
/**
* 醫生接診量排行接口
* pager:1, //當前頁碼
limit:3, //每頁條數
departmentId:6, //科室(必傳)
type:1 //類型(必傳):1表示7日,2表示30日
* @param {any} data
* @returns
*/
seniority (data) {
return fetch('get', '/visit/hp/seniority', data);
},
/**
* 就診患者統計接口
* departmentId:821, //科室(必傳)
type:1 //類型(必傳):1表示7日,2表示30日
* @param {any} data
* @returns
*/
jzcount (data) {
return fetch('get', '/visit/hp/jzcount', data);
},
};
```
### RedeMe
做好全文說明工作,在readme文檔中交代整體技術選型,各個頁面和文件的主要功能。
```json
├── accessMenu.js 權限控制集合
├── app.vue 主入口文件
├── images 圖片文件夾
│ ├── cropper-test.png
│ ├── logo-min.png
│ └── logo.png
├── libs 自定義工具
│ ├── table2excel.js
│ └── util.js
├── locale 語言切換文件
│ ├── index.js
│ └── locale.js
├── main.js 主文件入口
├── router 路由文件
│ ├── index.js
│ └── router.js
├── services 服務文件(所有api)
│ ├── api.js
│ └── index.js
├── store 狀態管理器
│ ├── index.js
│ └── modules
│ ├── app.js
│ └── user.js
├── styles 樣式文件
│ ├── common.less
│ ├── fonts
│ │ ├── ionicons.eot
│ │ ├── ionicons.svg
│ │ ├── ionicons.ttf
│ │ └── ionicons.woff
│ ├── loading.less
│ └── login_bg.jpg
├── template 自定義模板
│ └── index.ejs
├── validate.js 驗證規則文件
├── vendors 公共庫
│ ├── vendors.base.js
│ └── vendors.exten.js
└── views 頁面組件
├── Main.vue 主頁面
├── access 權限管理頁面
│ ├── access-control 權限控制
│ │ └── accessControl.vue
│ ├── access.less
│ ├── access.vue 權限控制
│ ├── business-manage 企業管理
│ │ ├── business-add.vue 企業新增
│ │ ├── business-depart.vue 部門管理
│ │ └── business-manage.vue 企業管理
│ ├── group-manage 數據權限
│ │ ├── groupAdd.vue
│ │ ├── groupList.vue
│ │ └── group_expand.vue
│ ├── role-manage 角色管理
│ │ ├── role-add.vue 角色新增
│ │ └── role-manage.vue 角色添加
│ └── user-manage 用戶管理
│ ├── user-add.vue 用戶新增
│ └── user-manage.vue 用戶管理
├── dataInteraction 數據交互
│ ├── patientImpro.vue 病患導入
│ ├── temExport.vue 模板導出
│ └── temImport.vue 模板導入
├── dataShow 數據展示
│ ├── docSuggests.vue
│ └── phoneCounts.vue
├── error-page
│ ├── 403.less
│ ├── 403.vue
│ ├── 404.less
│ ├── 404.vue
│ ├── 500.less
│ ├── 500.vue
│ ├── error-page.less
│ └── error-page.vue
├── followBusiness 隨訪業務
│ ├── followPlan.vue 隨訪計劃
│ ├── followResult.vue 隨訪記錄
│ ├── patientList.vue 患者列表
│ └── temporaryTask.vue 發起隨訪
├── followSetting 隨訪設置
│ ├── followIndex.vue 隨訪指標
│ ├── followProblems.vue 隨訪問題
│ ├── followTemplate.vue 隨訪模板
│ ├── followWay.vue 隨訪方案
│ ├── template 模板編輯
│ │ └── template.vue
│ ├── voice 話術編輯
│ │ └── voice.vue
│ └── way 方案編輯
│ └── way.vue
├── home 首頁
│ ├── components
│ │ ├── countUp.vue
│ │ ├── dataSourcePie.vue
│ │ ├── inforCard.vue
│ │ ├── map.vue
│ │ ├── mapDataTable.vue
│ │ ├── serviceRequests.vue
│ │ ├── styles
│ │ │ ├── infor-card.less
│ │ │ └── to-do-list-item.less
│ │ ├── toDoListItem.vue
│ │ ├── userFlow.vue
│ │ └── visiteVolume.vue
│ ├── home.less
│ ├── home.vue
│ └── map-data
│ ├── china.json
│ ├── get-city-value.js
│ ├── get-geography-value.js
│ └── get-style-json.js
├── login.less
├── login.vue 登錄
├── main-components 組件
│ ├── breadcrumb-nav.vue 面包屑
│ ├── fullscreen.vue 全屏
│ ├── lockscreen 鎖屏
│ │ ├── components
│ │ │ ├── locking-page.vue
│ │ │ └── unlock.vue
│ │ ├── lockscreen.vue
│ │ └── styles
│ │ └── unlock.less
│ ├── message-tip.vue
│ ├── shrinkable-menu 左側按鈕列表
│ │ ├── components
│ │ │ ├── sidebarMenu.vue
│ │ │ └── sidebarMenuShrink.vue
│ │ ├── shrinkable-menu.vue
│ │ └── styles
│ │ └── menu.less
│ ├── tags-page-opened.vue
│ └── theme-switch 主題切換
│ ├── theme
│ │ ├── g.css
│ │ ├── r.css
│ │ └── y.css
│ └── theme-switch.vue
├── main.less
├── menReview 人工數據審核
│ ├── flWayRe.vue 隨訪結果審核
│ ├── planRe.vue 隨訪計劃審核
│ └── wayRe.vue 重復方案審核
├── message 消息通知
│ ├── message.less
│ └── message.vue
├── notice 通知
│ ├── createNotice.vue 發起通知計劃
│ └── noticeView.vue 查看通知進度
├── own-space 個人信息
│ ├── own-space.less
│ └── own-space.vue
└── systemSet 系統設置
├── departmentSet.vue 科室設置
├── diseaseSet.vue 疾病設置
├── systemLog.vue 系統日志
├── systemSetup.vue 系統設置
├── timedTask.vue 定時任務
└── timedTaskLog.vue 定時任務日志
```