github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'新增dashboard,移除readme.vue'

pull/80/head
lin-xin 2018-04-23 19:43:32 +08:00
parent 9601818407
commit df14656d8e
12 changed files with 271 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -37,15 +37,18 @@
| |-- Header.vue // 公共头部
| |-- Home.vue // 公共路由入口
| |-- Sidebar.vue // 公共左边栏
| |-- Tags.vue // 页面切换标签组件
| |-- page // 主要路由页面
| |-- 403.vue
| |-- 404.vue
| |-- BaseCharts.vue // 基础图表
| |-- BaseForm.vue // 基础表单
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件
| |-- Readme.vue // 自述组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- App.vue // 页面入口文件

5
README_EN.md
View File

@ -31,15 +31,18 @@ The scheme as a set of multi-function background frame templates, suitable for m
| |-- Header.vue // Header component
| |-- Home.vue // Home component
| |-- Sidebar.vue // Sidebar component
| |-- Tags.vue
| |-- page // Router page
| |-- 403.vue
| |-- 404.vue
| |-- BaseCharts.vue // BaseCharts
| |-- BaseForm.vue // BaseForm
| |-- BaseTable.vue // BaseTable
| |-- Login.vue // Login
| |-- Dashboard.vue
| |-- DragList.vue
| |-- Markdown.vue // Markdown
| |-- Premission.vue
| |-- Readme.vue // Readme
| |-- Upload.vue // Upload
| |-- VueEditor.vue // VueEditor
| |-- App.vue // Main component

4
src/components/common/Sidebar.vue
View File

@ -32,8 +32,8 @@
items: [
{
icon: 'el-icon-setting',
index: 'readme',
title: '自述文件'
index: 'dashboard',
title: '系统首页'
},
{
icon: 'el-icon-tickets',

5
src/components/common/Tags.vue
View File

@ -40,14 +40,13 @@
if (item) {
delItem.path === this.$route.path && this.$router.push(item.path);
}else{
this.$router.push('/readme');
this.$router.push('/');
}
},
// 关闭全部标签
closeAll(){
console.log(1111);
this.tagsList = [];
this.$router.push('/readme');
this.$router.push('/');
},
// 关闭其他标签
closeOther(){

2
src/components/page/403.vue
View File

@ -3,7 +3,7 @@
<div class="error-code">4<span>0</span>3</div>
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
<div class="error-handle">
<router-link to="/readme">
<router-link to="/">
<el-button type="primary" size="large">返回首页</el-button>
</router-link>
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

2
src/components/page/404.vue
View File

@ -3,7 +3,7 @@
<div class="error-code">4<span>0</span>4</div>
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
<div class="error-handle">
<router-link to="/readme">
<router-link to="/">
<el-button type="primary" size="large">返回首页</el-button>
</router-link>
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

247
src/components/page/Dashboard.vue Normal file
View File

@ -0,0 +1,247 @@
<template>
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-row>
<el-col>
<el-card shadow="hover" class="mgb20">
<div class="user-info">
<img src="static/img/img.jpg" class="user-avator" alt="">
<div class="user-info-cont">
<div class="user-info-name">{{name}}</div>
<div>{{role}}</div>
</div>
</div>
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
<div class="user-info-list">上次登录地点：<span>东莞</span></div>
</el-card>
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>语言详情</span>
</div>
Vue
<el-progress :percentage="57.2" color="#42b983"></el-progress>
JavaScript
<el-progress :percentage="29.8" color="#f1e05a"></el-progress>
CSS
<el-progress :percentage="11.9"></el-progress>
HTML
<el-progress :percentage="1.1" color="#f56c6c"></el-progress>
</el-card>
</el-col>
</el-row>
</el-col>
<el-col :span="16">
<el-row :gutter="20" class="mgb20">
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-1">
<i class="el-icon-view grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">1234</div>
<div>用户访问量</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-2">
<i class="el-icon-message grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">321</div>
<div>系统消息</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-3">
<i class="el-icon-goods grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">5000</div>
<div>数量</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card shadow="hover" :body-style="{ height: '304px'}">
<div slot="header" class="clearfix">
<span>待办事项</span>
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
</div>
<el-table :data="todoList" :show-header="false" height="304" style="width: 100%;font-size:14px;">
<el-table-column width="40">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.status"></el-checkbox>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
</template>
</el-table-column>
<el-table-column width="60">
<template slot-scope="scope">
<i class="el-icon-edit"></i>
<i class="el-icon-delete"></i>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
name: localStorage.getItem('ms_username'),
todoList: [
{
title: '今天要修复100个bug',
status: false,
},
{
title: '今天要修复100个bug',
status: false,
},
{
title: '今天要写100行代码加几个bug吧',
status: false,
}, {
title: '今天要修复100个bug',
status: false,
},
{
title: '今天要修复100个bug',
status: true,
},
{
title: '今天要写100行代码加几个bug吧',
status: true,
}
]
}
},
computed: {
role() {
return this.name === 'admin' ? '超级管理员' : '普通用户';
}
}
}
</script>
<style scoped>
.el-row {
margin-bottom: 20px;
}
.grid-content {
display: flex;
align-items: center;
height: 100px;
}
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 12px;
color: #999;
}
.grid-num {
font-size: 30px;
font-weight: bold;
}
.grid-con-icon {
font-size: 50px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
}
.grid-con-1 .grid-con-icon {
background: rgb(45, 140, 240);
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-2 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.user-avator {
width: 120px;
height: 120px;
border-radius: 50%;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.user-info-list span {
margin-left: 70px;
}
.mgb20 {
margin-bottom: 20px;
}
.todo-item {
font-size: 14px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
</style>

2
src/components/page/Login.vue
View File

@ -41,7 +41,7 @@
this.$refs[formName].validate((valid) => {
if (valid) {
localStorage.setItem('ms_username',this.ruleForm.username);
this.$router.push('/readme');
this.$router.push('/');
} else {
console.log('error submit!!');
return false;

88
src/components/page/Readme.vue
View File

@ -1,88 +0,0 @@
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="ms-doc">
<h3>README.md</h3>
<article>
<h1>manage-system</h1>
<p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
<h2>前言</h2>
<p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。</p>
<p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。</p>
<h2>功能</h2>
<el-checkbox disabled checked>Element UI</el-checkbox>
<br>
<el-checkbox disabled checked>登录/注销</el-checkbox>
<br>
<el-checkbox disabled checked>表格</el-checkbox>
<br>
<el-checkbox disabled checked>表单</el-checkbox>
<br>
<el-checkbox disabled checked>图表</el-checkbox>
<br>
<el-checkbox disabled checked>富文本编辑器</el-checkbox>
<br>
<el-checkbox disabled checked>markdown编辑器</el-checkbox>
<br>
<el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
<br>
<el-checkbox disabled checked>支持切换主题色</el-checkbox>
<br>
<el-checkbox disabled checked>列表拖拽排序</el-checkbox>
<br>
</article>
</div>
</div>
</template>
<style scoped>
.ms-doc{
width:100%;
max-width: 980px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ms-doc h3{
padding: 9px 10px 10px;
margin: 0;
font-size: 14px;
line-height: 17px;
background-color: #f5f5f5;
border: 1px solid #d8d8d8;
border-bottom: 0;
border-radius: 3px 3px 0 0;
}
.ms-doc article{
padding: 45px;
word-wrap: break-word;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.ms-doc article h1{
font-size:32px;
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.ms-doc article h2 {
margin: 24px 0 16px;
font-weight: 600;
line-height: 1.25;
padding-bottom: 7px;
font-size: 24px;
border-bottom: 1px solid #eee;
}
.ms-doc article p{
margin-bottom: 15px;
line-height: 1.5;
}
.ms-doc article .el-checkbox{
margin-bottom: 5px;
}
</style>

4
src/main.js
View File

@ -12,8 +12,10 @@ Vue.prototype.$axios = axios;
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
if(to.meta.permission){
const role = localStorage.getItem('ms_username');
if(!role){
next('/login');
}else if(to.meta.permission){
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/403');
}else{

10
src/router/index.js
View File

@ -7,17 +7,17 @@ export default new Router({
routes: [
{
path: '/',
redirect: '/login'
redirect: '/dashboard'
},
{
path: '/readme',
path: '/',
component: resolve => require(['../components/common/Home.vue'], resolve),
meta: { title: '自述文件' },
children:[
{
path: '/',
component: resolve => require(['../components/page/Readme.vue'], resolve),
meta: { title: '自述文件' }
path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系统首页' }
},
{
path: '/table',

7
static/css/main.css
View File

@ -103,13 +103,6 @@ a {
padding-bottom: 0;
}
/*Readme*/
.ms-doc .el-checkbox__input.is-disabled+.el-checkbox__label {
color: #333;
cursor: pointer;
}
/*Upload*/
.pure-button {