多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 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 定时任务日志 ```