--main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import store from './vuex/store'
import Vuex from 'vuex'
Vue.use(Vuex)
//import { TimePicker,FormItem, ButtonGroup,Button,Icon,Form,Select,Option,DatePicker,RadioGroup,Radio } from 'iview'
//import 'iview/dist/styles/iview.css';
//Vue.component('TimePicker', TimePicker);
//Vue.component('FormItem', FormItem);
//Vue.component('Form', Form);
//Vue.component('ButtonGroup', ButtonGroup);
//Vue.component('Button', Button);
//Vue.component('Select', Select);
//Vue.component('Option', Option);
//Vue.component('DatePicker', DatePicker);
//Vue.component('RadioGroup', RadioGroup);
//Vue.component('Radio', Radio);
//Vue.component('todo-item', {
//// todo-item 组件现在接受一个
//// "prop"，类似于一个自定义属性
//// 这个属性名为 todo。
//props: ['todo'],
//template: '<li>{{ todo.text }}</li>'
//});
Vue.component('button-header', {//解决登录时，用户名 传不过去的问题
data: function () {
return {
userName2: window.sessionStorage.getItem('userName')
}
},
template: `<div class="logoOut">
<el-form :inline="true">
<el-form-item>
<el-button style="font-weight: bold;">{{userName2}}<i class="el-icon-caret-right"></i>退出系统</el-button>
</el-form-item>
</el-form>
</div>`
});
//import iView from 'iview';
//import 'iview/dist/styles/iview.css';
//Vue.use(iView);
//import 'vue2-slot-calendar/lib/calendar.min.css';
//import calendar from 'vue2-slot-calendar/lib/calendar';
//Vue.use(calendar);
//const Calendar = Calendar;
//import VueAxios from 'vue-axios'
//Vue.use(VueAxios,axios)
//vue-amap的资源太少了，不好使用
//import VueAMap from 'vue-amap';//防止与高德原生的Amap冲突
//import { lazyAMapApiLoaderInstance } from 'vue-amap';//需要使用高德的sdk
//Vue.use(VueAMap);
// 初始化vue-amap
//AMap.initAMapApiLoader({
//'HouseClub': 'fcef489106960dd1ea93699ac49a1b8b',
//plugin: ['Geocoder']
//});
//VueAMap.initAMapApiLoader({
//// 高德的key
//'HouseClub': 'fcef489106960dd1ea93699ac49a1b8b',
//// 插件集合
//plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geocoder']
//});
//
//lazyAMapApiLoaderInstance.load().then(() => {
//// your code ...
//this.map = new AMap.Map('amapContainer', {
// center: new AMap.LngLat(121.59996, 31.197646)
//});
//});
Vue.prototype.axios=axios; //全局使用的对象http://192.168.10.15:8084 调试用：192.168.10.222:8088
axios.defaults.baseURL="http://120.77.62.190:8084";//全局使用
//axios.defaults.baseURL="http://192.168.10.222:8084";//全局使用
//axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.use(ElementUI);
//全局扩展设置时间格式的方法
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
data:{
//登陆者ID
managerId: 100//登陆时，后台返回的managerId（待完善？？？）
},
//template: '<App/>',
components: { App },
render: c => c(App),
})
----------App.vue-----
<template>
<div id="app">
<div v-if="">
</div>
<div>
<div class="login-wrapper" v-if="$route.path==='/'">
<router-view></router-view>
</div>
<div class="main" v-if="$route.path!=='/'&&$route.path!=='/404'">
<el-container>
<el-header style="display:flex;height:80px;background-color:rgb(241, 244, 247);">
<el-aside width="230px" class="aside-logo">
<h2>健康传奇管理系统</h2>
</el-aside>
<div style="flex: 1;overflow: auto;" id="div-hotmenu">
</div>
<!--<el-menu mode="horizontal" background-color="#004FFF" active-text-color="#fff" text-color="#fff">
<el-menu-item >
退出系统
</el-menu-item>
<el-submenu >
<template slot="title">
</template>
<el-menu-item >修改信息</el-menu-item>
<el-menu-item >修改密码</el-menu-item>
</el-submenu>
</el-menu>-->
<!--<div class="logoOut">-->
<!--<el-dropdown trigger="hover" class="logoOutDrop">
<span class="">admin</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出系统</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>-->
<!--<span>{{userName2}}</span>-->
<button-header @click.native="logout"></button-header>
<!--<div class="logoOut">
<el-form :inline="true">
<el-form-item>
<el-button @click.native="logout" style="font-weight: bold;">{{userName2}}<i class="el-icon-caret-right"></i>退出系统</el-button>
</el-form-item>
</el-form>
</div>-->
</el-header>
<el-container>
<!--左边-->
<el-aside width="230px" style="background-color: #fff;border:2px solid #DDDDDD;border-radius:2px;color:#03c !important;">
<el-menu
style="background-color :#f1f1f1"
:default-active="menuList[7].children[0].url"
unique-opened
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu v-for="(item,index) in menuList" :index="index.toString()" :key="index">
<template slot="title">
<span>{{item.name}}</span>
</template>
<el-menu-item v-for="(child,index) in item.children" :index="child.url" :key="index">
<span>{{child.name}}</span>
</el-menu-item>
</el-submenu >
</el-menu>
</el-aside>
<!--右边-->
<el-main class="main-right" >
<!--路由显示区-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
<div class="notFound-wrapper" v-if="$route.path==='/404'">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
components:{HelloWorld},
name: 'app',
data(){
return{
//左侧导航列表模拟数据
userName2:'',
navList:[
{
id:'001',
name:'用户管理'
},
{
id:'001001',
name:'账号管理',
url:'/user/userManagement'
},
{
id:'001002',//--新增
name:'好友管理',
url:'/user/friendManagement'
},
{
id:'001003',
name:'头像认证',
url:'/user/headImageAuthentication'
},
{
id:'001004',
name:'资产管理',
url:'/user/assetManagement'
},
{
id:'001005',
name:'充值',
url:'/user/userRecharge'
},
{
id:'001006',
name:'提现',
url:'/user/withdrawCash'
},
// {
// id:'002',
// name:'设备'
// },
// {id:'002001',
// name:'设备管理',
// url:'/deviceManagement/devManagement'
// },
{
id:'002',
name:'会所管理'
},
{
id:'002001',
name:'会所设置',
url:'/clubHouse/clubManagement'
},
{
id:'002002',
name:'服务时间',//原来的会所预约
url:'/clubHouse/orderSet'
},
{
id:'002003',
name:'预约管理',//---2018-4/19新增
url:'/clubHouse/orderManagement'
},
{
id:'002004',
name:'设备管理',
url:'/deviceManagement/devManagement'
},
{
id:'002005',
name:'心率墙管理',
url:'/clubHouse/heartRateWall'
},
{
id:'002006',
name:'门禁管理',
url:'/clubHouse/doorlockManagement'
},
{
id:'002007',
name:'进出管理',
url:'/clubHouse/inoroutManagement'
},
{
id:'002008',
name:'管理员设置',
url:'/clubHouse/clubAdminSet'
},
{
id:'003',
name:'功能区管理',
},
{
id:'003001',
name:'功能区管理',
url:"/functionalAreas/functionalAreasManagement"
},
{
id:'003002',
name:'设备类型管理',
url:"/functionalAreas/deviceTypeManagement"
},
{
id:'004',
name:'课程管理',
},{
id:'004001',
name:'心率课程',
url:"/course/HeartRateCourse"
},
{
id:'005',
name:'实景管理',
},{
id:'005001',
name:'线路管理',
url:"/realManagement/lineManagement"
},
{
id:'006',
name:'活动管理',
},
{
id:'006001',
name:'运营活动',
url:"/activityManagement/operatingActivities"
},
{
id:'006002',
name:'运动赛事',
url:"/activityManagement/sportsEvents"
},
{
id:'007',
name:'系统'
},
{
id:'007001',
name:'管理员设置',
url:'/system/administratorSetting'
},
{
id:'007002',
name:'组织结构',
url:'/system/organizationalStructure'
},
{id:'007003',
name:'系统功能',
url:'/system/clientSet'},
{
id:'008',
name:'欢迎页面',
},
{
id:'008001',
name:'欢迎页面',
url:'/HelloWorld'
}
],
menuList:[]//左侧导航列表
}
},
methods:{
handleOpen:function(){},
handleClose:function(){},
logout: function () {//退出到登录
this.$confirm('确认退出吗?', '提示', {
//type: 'warning'
}).then(() => {
// sessionStorage.removeItem('user');
this.$router.push('/');
}).catch((error) => {
console.log(error);
});
},
delNavList(navList){
let obj={};
navList.forEach((i)=>{
let k=i.id.substr(0,3);
let s=i.id.substr(3);
if(!s){
obj[k]={
id:i.id,
name:i.name,
url:i.ur? i.url:null,
children:[]
}
}else{
obj[k].children.push(i);
}
});
for(let i in obj){
this.menuList.push(obj[i])
}
console.log(this.menuList);
}
},
created(){
this.userName2=window.sessionStorage.getItem('userName');
var navList=this.navList;
this.delNavList(navList);
// this.userName2=this.$root.adminName;
},
mounted(){
//this.userName2=this.adminName;
// console.log(this.userName2);
}
}
</script>
<style>
*{margin: 0;padding:0;}
#App {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* margin-top: 80px;*/
}
.fl {float: left;}
.fr {float: right;}
.cl:after {content: "\0020";display: block;height: 0;clear: both;}
/*@media (max-width: 425px) {
#tagBar {
display: none;
}
}*/
.aside-logo {
height: 80px;
line-height:80px;
float: left;
margin-left: -21px;
/*width: 230px !important;*/
color:#FFFFFF;
background-color: #004FFF;
text-align: center;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.57, -0.29, 0.58, 1);
}
/*@media (max-width: 425px) {
#div-hotmenu {
display: none;
}
}*/
.logoOut{
width:130px;
height:80px;
line-height:80px;
text-align: center;
margin-top: 20px;
margin-right: 50px;
/* background:#ADD8E6;*/
}
/*.logoOutDrop{
margin-top: 26px;*/
/* text-align: center;*/
/*}
.logoOut span{
font-size: 24px;
color:#2C3E50;*/
/*}*/
</style>