‘首次‘
This commit is contained in:
fz
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 分页组件
|
||||
*/
|
||||
<template>
|
||||
<el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
|
||||
</el-pagination>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: ['childMsg'],
|
||||
data() {
|
||||
return {
|
||||
pageparm: {
|
||||
currentPage: this.childMsg.currentPage,
|
||||
pageSize: this.childMsg.pageSize
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
/**
|
||||
* 子传父
|
||||
* 参数1 父元素方法
|
||||
* 参数2 数据
|
||||
*/
|
||||
this.pageparm.pageSize = val
|
||||
this.$emit('callFather', this.pageparm)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
/**
|
||||
* 子传父
|
||||
* 参数1 父元素方法
|
||||
* 参数2 数据
|
||||
*/
|
||||
this.pageparm.currentPage = val
|
||||
this.$emit('callFather', this.pageparm)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-box {
|
||||
margin: 10px auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* 404
|
||||
*/
|
||||
<template>
|
||||
<div class="page-404">
|
||||
<h1>404!</h1>
|
||||
<h2>Sorry, page not found</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-404 {
|
||||
text-align: center;
|
||||
}
|
||||
.page-404 h1 {
|
||||
font-size: 98px;
|
||||
font-weight: 700;
|
||||
line-height: 150px;
|
||||
text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px,
|
||||
rgba(61, 61, 61, 0.3) 3px 3px;
|
||||
}
|
||||
.page-404 h2 {
|
||||
line-height: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* 左边菜单
|
||||
*/
|
||||
<template>
|
||||
<el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
|
||||
<div class="logobox">
|
||||
<img class="logoimg" src="../assets/img/logo.png" alt="">
|
||||
</div>
|
||||
<el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
|
||||
<template slot="title">
|
||||
<i class="iconfont" :class="menu.icon"></i>
|
||||
<span>{{menu.menuname}}</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
|
||||
<i class="iconfont" :class="chmenu.icon"></i>
|
||||
<span>{{chmenu.menuname}}</span>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</template>
|
||||
<script>
|
||||
import { menu } from '../api/userMG'
|
||||
export default {
|
||||
name: 'leftnav',
|
||||
data() {
|
||||
return {
|
||||
collapsed: false,
|
||||
allmenu: []
|
||||
}
|
||||
},
|
||||
// 创建完毕状态(里面是操作)
|
||||
created() {
|
||||
// 获取图形验证码
|
||||
let res = {
|
||||
success: true,
|
||||
data: [
|
||||
{
|
||||
menuid: 1,
|
||||
icon: 'li-icon-xiangmuguanli',
|
||||
menuname: '基础管理',
|
||||
hasThird: null,
|
||||
url: null,
|
||||
menus: [
|
||||
{
|
||||
menuid: 2,
|
||||
icon: 'icon-cat-skuQuery',
|
||||
menuname: '商品管理',
|
||||
hasThird: 'N',
|
||||
url: 'goods/Goods',
|
||||
menus: null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuid: 33,
|
||||
icon: 'li-icon-dingdanguanli',
|
||||
menuname: '订单管理',
|
||||
hasThird: null,
|
||||
url: null,
|
||||
menus: [
|
||||
{
|
||||
menuid: 34,
|
||||
icon: 'icon-order-manage',
|
||||
menuname: '交易订单',
|
||||
hasThird: 'N',
|
||||
url: 'pay/Order',
|
||||
menus: null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuid: 71,
|
||||
icon: 'li-icon-xitongguanli',
|
||||
menuname: '系统管理',
|
||||
hasThird: null,
|
||||
url: null,
|
||||
menus: [
|
||||
{
|
||||
menuid: 72,
|
||||
icon: 'icon-cus-manage',
|
||||
menuname: '用户管理',
|
||||
hasThird: 'N',
|
||||
url: 'system/user',
|
||||
menus: null
|
||||
},
|
||||
{
|
||||
menuid: 174,
|
||||
icon: 'icon-cms-manage',
|
||||
menuname: '菜单管理',
|
||||
hasThird: 'N',
|
||||
url: 'system/Module',
|
||||
menus: null
|
||||
},
|
||||
{
|
||||
menuid: 73,
|
||||
icon: 'icon-news-manage',
|
||||
menuname: '角色管理',
|
||||
hasThird: 'N',
|
||||
url: 'system/Role',
|
||||
menus: null
|
||||
},
|
||||
{
|
||||
menuid: 74,
|
||||
icon: 'icon-cs-manage',
|
||||
menuname: '公司管理',
|
||||
hasThird: 'N',
|
||||
url: 'system/Dept',
|
||||
menus: null
|
||||
},
|
||||
{
|
||||
menuid: 75,
|
||||
icon: 'icon-promotion-manage',
|
||||
menuname: '系统环境变量',
|
||||
hasThird: 'N',
|
||||
url: 'system/Variable',
|
||||
menus: null
|
||||
},
|
||||
{
|
||||
menuid: 76,
|
||||
icon: 'icon-cms-manage',
|
||||
menuname: '权限管理',
|
||||
hasThird: 'N',
|
||||
url: 'system/Permission',
|
||||
menus: null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuid: 128,
|
||||
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
|
||||
menuname: '支付管理',
|
||||
hasThird: null,
|
||||
url: null,
|
||||
menus: [
|
||||
{
|
||||
menuid: 129,
|
||||
icon: 'icon-provider-manage',
|
||||
menuname: '支付配置信息',
|
||||
hasThird: 'N',
|
||||
url: 'machine/MachineConfig',
|
||||
menus: null
|
||||
},
|
||||
{
|
||||
menuid: 175,
|
||||
icon: 'icon-provider-manage',
|
||||
menuname: '支付配置',
|
||||
hasThird: 'N',
|
||||
url: 'pay/Config',
|
||||
menus: null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuid: 150,
|
||||
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
|
||||
menuname: '图表',
|
||||
hasThird: null,
|
||||
url: null,
|
||||
menus: [
|
||||
{
|
||||
menuid: 159,
|
||||
icon: 'icon-provider-manage',
|
||||
menuname: '数据可视化',
|
||||
hasThird: 'N',
|
||||
url: 'charts/statistics',
|
||||
menus: null
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
msg: 'success'
|
||||
}
|
||||
this.allmenu = res.data
|
||||
|
||||
// menu(localStorage.getItem('logintoken'))
|
||||
// .then(res => {
|
||||
// console.log(JSON.stringify(res))
|
||||
// if (res.success) {
|
||||
// this.allmenu = res.data
|
||||
// } else {
|
||||
// this.$message.error(res.msg)
|
||||
// return false
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// this.$message.error('菜单加载失败，请稍后再试！')
|
||||
// })
|
||||
// 监听
|
||||
this.$root.Bus.$on('toggle', value => {
|
||||
this.collapsed = !value
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 240px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
.el-menu-item-group__title {
|
||||
padding: 0px;
|
||||
}
|
||||
.el-menu-bg {
|
||||
background-color: #1f2d3d !important;
|
||||
}
|
||||
.el-menu {
|
||||
border: none;
|
||||
}
|
||||
.logobox {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #9d9d9d;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
.logoimg {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* 头部菜单
|
||||
*/
|
||||
<template>
|
||||
<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
|
||||
<el-button class="buttonimg">
|
||||
<img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
|
||||
</el-button>
|
||||
<el-submenu index="2" class="submenu">
|
||||
<!-- <template slot="title">{{user.userRealName}}</template> -->
|
||||
<template slot="title">超级管理员</template>
|
||||
<el-menu-item index="2-1">设置</el-menu-item>
|
||||
<el-menu-item @click="content()" index="2-2">个人中心</el-menu-item>
|
||||
<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</template>
|
||||
<script>
|
||||
import { loginout } from '../api/userMG'
|
||||
export default {
|
||||
name: 'navcon',
|
||||
data() {
|
||||
return {
|
||||
collapsed: true,
|
||||
imgshow: require('../assets/img/show.png'),
|
||||
imgsq: require('../assets/img/sq.png'),
|
||||
user: {}
|
||||
}
|
||||
},
|
||||
// 创建完毕状态(里面是操作)
|
||||
created() {
|
||||
this.user = JSON.parse(localStorage.getItem('userdata'))
|
||||
},
|
||||
methods: {
|
||||
// 退出登录
|
||||
exit() {
|
||||
this.$confirm('退出登录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
this.$store.commit('logout', 'false')
|
||||
this.$router.push({ path: '/login' })
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已退出登录!'
|
||||
})
|
||||
}, 1000)
|
||||
// loginout()
|
||||
// .then(res => {
|
||||
// if (res.success) {
|
||||
// //如果请求成功就让他2秒跳转路由
|
||||
// setTimeout(() => {
|
||||
// this.$store.commit('logout', 'false')
|
||||
// this.$router.push({ path: '/login' })
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: '已退出登录!'
|
||||
// })
|
||||
// }, 1000)
|
||||
// } else {
|
||||
// this.$message.error(res.msg)
|
||||
// this.logining = false
|
||||
// return false
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// // 获取图形验证码
|
||||
// this.getcode()
|
||||
// this.logining = false
|
||||
// this.$message.error('退出失败，请稍后再试！')
|
||||
// })
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 切换显示
|
||||
toggle(showtype) {
|
||||
this.collapsed = !showtype
|
||||
this.$root.Bus.$emit('toggle', this.collapsed)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
border: none;
|
||||
}
|
||||
.submenu {
|
||||
float: right;
|
||||
}
|
||||
.buttonimg {
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.showimg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 17px;
|
||||
}
|
||||
.showimg:active {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* 模版
|
||||
**/
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入组件
|
||||
import headerComponent from "./head.vue";
|
||||
// 导出模块
|
||||
export default {
|
||||
// 模块名字
|
||||
name: "template",
|
||||
// 模块数据
|
||||
data() {
|
||||
//数据
|
||||
return {};
|
||||
},
|
||||
// 注册组件
|
||||
components: {
|
||||
headerComponent
|
||||
},
|
||||
// 监听指定值，只有指定值变化，才会触发
|
||||
watch: {},
|
||||
// 里面的函数只有调用才会执行（实时计算）里面是定义的方法
|
||||
methods: {
|
||||
addFun() {},
|
||||
submitFun() {}
|
||||
},
|
||||
// 创建前状态(里面是操作)
|
||||
beforeCreate() {},
|
||||
// 创建完毕状态(里面是操作)
|
||||
created() {},
|
||||
// 挂载前状态(里面是操作)
|
||||
beforeMount() {},
|
||||
// 挂载结束状态(里面是操作)
|
||||
mounted() {},
|
||||
// 更新前状态(里面是操作)
|
||||
beforeUpdate() {},
|
||||
// 更新完成状态(里面是操作)
|
||||
updated() {},
|
||||
// 销毁前状态(里面是操作)
|
||||
beforeDestroy() {},
|
||||
// 销毁完成状态(里面是操作)
|
||||
destroyed() {}
|
||||
};
|
||||
</script>
|
||||
// scoped 样式只在本组件使用
|
||||
<style scoped>
|
||||
/**
|
||||
* 导入css样式组件
|
||||
* @import "../assets/css/components/index.css";
|
||||
*/
|
||||
</style>
|
||||
Reference in New Issue
Block a user