import Vue from 'vue'
import axios from 'axios'import App from './App'
import router from './router'
import store from './store'if (!process.env.IS_WEB) Vue.use(require('vue-electron'))Vue.http = Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:18080'Vue.config.productionTip = falseimport 'font-awesome/css/font-awesome.min.css'import ElementUI from 'element-ui'
//原始风格
// import 'element-ui/lib/theme-chalk/index.css'
//自定义风格
import './assets/theme/element-#09345f/index.css'
Vue.use(ElementUI)/* eslint-disable no-new */
new Vue({components: {App},router,store,template: '<App/>'
}).$mount('#app')

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)import Main from '@/pages/Main'
import Dashboard from '@/pages/Dashboard'import Member from '@/pages/Member'// let routes = [
//   {//     path: '/',
//     name: 'landing-page',
//     component: require('@/components/LandingPage').default
//   },
//   {//     path: '*',
//     redirect: '/'
//   }
// ]

let routes = [{path: '/',component: Main,hidden: true,children: [{path: '/',component: Dashboard,name: '首页'}]
}]routes.push({path: '/member',name: '会员管理',component: Main,iconCls: 'fa fa-user-circle-o',children: [{path: '/member/data',component: Member,name: '会员信息管理'}]
})const router = new Router({routes: routes
})export default router

<template>
<section><el-container class="container"><!--左边--><el-aside :width="collapsed? '75px' : '280px' "><el-container><el-header><span class="menu-button" v-if="collapsed" @click.prevent="collapsed=!collapsed"><i class="fa fa-align-justify"></i></span><span v-else class="system-name">{{systemName}}</span></el-header><el-main><el-menu :default-active="$route.path" :collapse="collapsed" :style="{'height':menuHeight}"><template v-for="(item,index) in menus"><el-submenu :index="index+''" v-if="!item.leaf"><template slot="title"><i :class="item.iconCls"></i><span v-if="!collapsed">{{item.name}}</span></template><el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" @click="$router.push(child.path)">{{child.name}}</el-menu-item></el-submenu><el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item></template></el-menu></el-main></el-container></el-aside><!--内容--><el-container><!--页眉--><el-header class="header"><el-row><el-col :span="18" class="header-title"><span v-if="collapsed" class="system-name">{{systemName}}</span><span v-else class="menu-button" @click.prevent="collapsed=!collapsed"><i class="fa fa-align-justify"></i></span></el-col><el-col :span="6"><span class="el-dropdown-link userinfo-inner">你好：{{userName}}</span></el-col></el-row></el-header><!--中间--><el-main class="main"><transition name="fade" mode="out-in"><router-view></router-view></transition></el-main></el-container></el-container>
</section>
</template><script>
let data = () => {return {collapsed: false,systemName: '后台管理',userName: '系统管理员',menuHeight: '100%',menus: []}
}let initMenu = function() {for (let i in this.$router.options.routes) {let root = this.$router.options.routes[i]if (root.hidden)continuelet children = []for (let j in root.children) {let item = root.children[j]if (item.hidden)continuechildren.push(item)}if (children.length < 1)continuethis.menus.push(root)root.children = children}
}let initHeight = function() {this.menuHeight = (document.documentElement.clientHeight - 60) + 'px'
}export default {data: data,methods: {initMenu,//初始化高度
    initHeight},mounted: function() {this.initHeight()window.addEventListener('resize', this.initHeight)this.initMenu()}
}
</script><style scoped="scoped"lang="scss">
$width: 100%;
$height: 100%;
$background-color: #09345f;
$header-color: #fff;
$header-height: 60px;.container {position: absolute;top: 0;bottom: 0;width: 100%;.el-aside {.el-header {line-height: $header-height;background-color: $background-color;color: $header-color;text-align: center;}.el-container {height: $height;.el-main {padding: 0;}}}.main {width: $width;height: $height;}.menu-button {width: 14px;cursor: pointer;}.userinfo-inner {cursor: pointer;}.el-menu {height: $height;}.header {background-color: $background-color;color: $header-color;text-align: center;line-height: $header-height;padding: 0;.header-title {text-align: left;span {padding: 0 20px;}}}.system-name {font-size: large;font-weight: bold;}
}
</style>

<template>
<section><!--工具条--><el-col :span="24" class="toolbar" style="padding-bottom: 0px;"><el-form :inline="true" :model="filters"><el-form-item><el-input v-model="filters.query" placeholder="姓名/手机号等条件" /></el-form-item><el-form-item><el-button type="primary" v-on:click="handleQuery" icon="el-icon-search">查询</el-button></el-form-item><el-form-item><el-button type="primary" v-on:click="handleAdd" icon="el-icon-plus">添加</el-button></el-form-item></el-form></el-col><el-table :data="rows" style="width: 100%;overflow: auto;" :height="clientHeight" stripe border highlight-current-row v-loading="pageLoading"><el-table-column label="注册日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180" :show-overflow-tooltip="true"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column prop="sex" label="性别" width="100" align="center" :show-overflow-tooltip="true"><template slot-scope="scope">{{scope.row.sex===1?'男':'女'}}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="primary"@click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button></template></el-table-column></el-table><!--底部--><el-col :span="24" class="toolbar"><el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;"></el-pagination></el-col><!--对话框--><el-dialog :title="form && form.id ? '编辑' : '新增' " :visible.sync="formVisible" :close-on-click-modal="false"><el-form :model="form" label-width="100px" :rules="rules" ref="form"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" /></el-form-item><el-form-item label="性别" prop="sex"><el-radio-group v-model="form.sex"><el-radio :label="1">男</el-radio><el-radio :label="2">女</el-radio></el-radio-group></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click.native="formVisible = false">取消</el-button><el-button type="primary" @click.native="handleSubmit" :loading="formLoading">提交</el-button></div></el-dialog></section>
</template><script>
const rules = {name: [{required: true,message: '请输入姓名',trigger: 'blur'}],sex: [{required: true,message: '请选择性别',trigger: 'change'}]
}let data = () => {return {//页码
    page: 1,//每页数量
    size: 20,//总数
    total: 0,//查询条件
    filters: {},//页面数据
    rows: [],//页面载入状态
    pageLoading: false,//列表高度
    clientHeight: '100%',//表单数据
    form: {},//验证规则
    rules: rules,//对话框隐藏状态
    formVisible: false,//表单提交状态
    formLoading: false}
}let handleAdd = function() {this.form = {}this.form.sex = 1this.formVisible = true
}let handleEdit = function(index, row) {this.form = Object.assign({}, row)this.formVisible = true
}let handleDelete = function(index, row) {if (this.pageLoading)returnthis.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.pageLoading = truethis.$http.get('/member/remove/' + row.id).then(res => {this.pageLoading = falseif (!res.data.success) {this.$message({type: 'error',message: res.data.message})return}this.$message({type: 'success',message: '删除成功!'})this.page = 1this.getRows()}).catch(e => this.pageLoading = false)}).catch(e => {})
}let getRows = function() {if (this.pageLoading)returnthis.pageLoading = truelet params = {page: this.page,size: this.size,query: this.filters.query}//调用post请求this.$http.post('/member/loadPage', params).then(res => {this.pageLoading = falseif (!res.data || !res.data.rows)return//总数赋值this.total = res.data.totalthis.page++;//页面元素赋值this.rows = res.data.rows}).catch(e => this.pageLoading = false)
}let handleSubmit = function() {if (this.formLoading)returnthis.$refs.form.validate(valid => {if (!valid)returnthis.formLoading = true//调用http协议this.$http.post('/member/save', this.form).then(res => {this.formLoading = falseif (!res.data.success) {this.$message({showClose: true,message: res.data.message,type: 'error'});return}this.$message({type: 'success',message: '保存成功!'})//重新载入数据this.page = 1this.getRows()this.formVisible = false}).catch(e => this.formLoading = false)})
}let handleQuery = function() {this.page = 1this.getRows()
}let handleCurrentChange = function(val) {this.page = valthis.getRows()
}let initHeight = function() {this.clientHeight = (document.documentElement.clientHeight - 258) + 'px'
}export default {data: data,methods: {//查询
    handleQuery,//添加
    handleAdd,//修改
    handleEdit,//删除
    handleDelete,//页数改变
    handleCurrentChange,//获取分页
    getRows,//初始化高度
    initHeight,//提交数据
    handleSubmit},mounted: function() {window.addEventListener('resize', this.initHeight)this.initHeight()this.getRows()}
}
</script><style scoped>
</style>