添加权限测试页

src/components/common/Sidebar.vue

@@ -31,12 +31,12 @@
                     {
                         icon: 'el-icon-setting',
                         index: 'readme',
-                        title: '自述'
+                        title: '自述文件'
                     },
                     {
                         icon: 'el-icon-menu',
                         index: '2',
-                        title: '表格',
+                        title: '常用表格',
                         subs: [
                             {
                                 index: 'basetable',
@@ -44,14 +44,14 @@
                             },
                             {
                                 index: 'vuetable',
-                                title: 'Vue表格组件'
+                                title: 'datasource表格'
                             }
                         ]
                     },
                     {
                         icon: 'el-icon-date',
                         index: '3',
-                        title: '表单',
+                        title: '表单相关',
                         subs: [
                             {
                                 index: 'baseform',
@@ -74,17 +74,17 @@
                     {
                         icon: 'el-icon-star-on',
                         index: 'basecharts',
-                        title: '图表'
+                        title: 'schart图表'
                     },
+                    // {
+                    //     icon: 'el-icon-edit',
+                    //     index: 'drag',
+                    //     title: '拖拽列表'
+                    // },
                     {
-                        icon: 'el-icon-edit',
+                        icon: 'el-icon-warning',
-                        index: 'drag',
-                        title: '拖拽'
-                    },
-                    {
-                        icon: 'el-icon-edit',
                         index: 'permission',
-                        title: '权限'
+                        title: '权限测试'
                     }
                 ]
             }
@@ -110,4 +110,7 @@
     .sidebar > ul {
         height:100%;
     }
+    .sidebar i{
+        margin-top: -4px;
+    }
 </style>

src/components/page/BaseCharts.vue

@@ -6,6 +6,7 @@
                 <el-breadcrumb-item>基础图表</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="plugins-tips">
                 vue-schart：vue.js封装sChart.js的图表组件。
                 访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
@@ -27,6 +28,7 @@
             <schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
             </div>
         </div>
+    </div>
 </template>
 
 <script>

src/components/page/BaseForm.vue

@@ -6,6 +6,7 @@
                 <el-breadcrumb-item>基本表单</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="form-box">
                 <el-form ref="form" :model="form" label-width="80px">
                     <el-form-item label="表单名称">
@@ -53,6 +54,7 @@
                     </el-form-item>
                 </el-form>
             </div>
+        </div>
 
     </div>
 </template>

src/components/page/BaseTable.vue

@@ -6,6 +6,7 @@
                 <el-breadcrumb-item>基础表格</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="handle-box">
                 <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                 <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
@@ -40,6 +41,7 @@
                 </el-pagination>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -88,6 +90,7 @@
             },
             // 获取 easy-mock 的模拟数据
             getData(){
+                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                 if(process.env.NODE_ENV === 'development'){
                     this.url = '/ms/table/list';
                 };

src/components/page/DragList.vue

@@ -5,6 +5,7 @@
                 <el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="drag-box-left">
                 <div class="drag-title">拖动排序</div>
                 <div class="drag-list" draggable="true" 
@@ -18,6 +19,7 @@
                     :key="list.id"
                 >{{list.title}}</div>
             </div>
+        </div>
     </section>
 </template>
 
@@ -46,8 +48,7 @@
         },
         methods: {
             dragstartEvent(ev) {
-                const self = this;
+                this.dragElement = ev.target;
-                self.dragElement = ev.target;
                 ev.target.style.backgroundColor = '#f8f8f8';
             },
             dragendEvent(ev) {
@@ -55,19 +56,17 @@
                 ev.preventDefault();
             },
             dragenterEvent(ev) {
-                const self = this;
+                if(this.dragElement != ev.target){
-                if(self.dragElement != ev.target){
+                    ev.target.parentNode.insertBefore(this.dragElement, ev.target);
-                    ev.target.parentNode.insertBefore(self.dragElement, ev.target);
                 }
             },
             dragleaveEvent(ev) {
-                const self = this;
+                if(this.dragElement != ev.target){
-                if(self.dragElement != ev.target){
+                    if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
-                    if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
+                        ev.target.parentNode.appendChild(this.dragElement);
-                        ev.target.parentNode.appendChild(self.dragElement);
+                        this.lock = false;
-                        self.lock = false;
                     }else{
-                        self.lock = true;
+                        this.lock = true;
                     }
                 }
             },

src/components/page/Login.vue

@@ -38,11 +38,10 @@
         },
         methods: {
             submitForm(formName) {
-                const self = this;
+                this.$refs[formName].validate((valid) => {
-                self.$refs[formName].validate((valid) => {
                     if (valid) {
-                        localStorage.setItem('ms_username',self.ruleForm.username);
+                        localStorage.setItem('ms_username',this.ruleForm.username);
-                        self.$router.push('/readme');
+                        this.$router.push('/readme');
                     } else {
                         console.log('error submit!!');
                         return false;

src/components/page/Markdown.vue

@@ -6,6 +6,7 @@
                 <el-breadcrumb-item>markdown</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="plugins-tips">
                 Vue-SimpleMDE：Vue.js的Markdown Editor组件。
                 访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
@@ -17,6 +18,7 @@
                 <p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
             </div>
         </div>
+    </div>
 </template>
 
 <script>

src/components/page/OldCharts.vue

@@ -1,216 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
-                <el-breadcrumb-item>基础图表</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="plugins-tips">
-            vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
-            访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
-        </div>
-        <div class="content-title">基础图表</div>
-        <div class="echarts">
-            <IEcharts :option="line" ></IEcharts>
-        </div>
-        <div class="echarts">
-            <IEcharts :option="bar" ></IEcharts>
-        </div>
-        <div class="echarts">
-            <IEcharts :option="pie" ></IEcharts>
-        </div>
-        <div class="echarts">
-            <IEcharts :option="pie_radius" ></IEcharts>
-        </div>
-        <div class="content-title">混合图表</div>
-        <div class="mix-echarts">
-            <IEcharts :option="mix" ></IEcharts>
-        </div>
-        <v-schart canvasId="canvas" width="500" height="400" :data="data" type="bar"></v-schart>
-    </div>
-</template>
-
-<script>
-    // import IEcharts from 'vue-echarts-v3';
-    import vSchart from 'vue-schart';
-    import IEcharts from 'vue-echarts-v3/src/lite.vue';
-  
-    import 'echarts/lib/chart/bar';
-    import 'echarts/lib/chart/line';
-    import 'echarts/lib/chart/pie';
-    import 'echarts/lib/component/legend';
-    import 'echarts/lib/component/tooltip';
-    import 'echarts/lib/component/title';
-    export default {
-        components: {
-            IEcharts,vSchart
-        },
-        data: () => ({
-            data:[
-            {name:'2012',value:1141},
-            {name:'2013',value:1499},
-            {name:'2014',value:2260},
-            {name:'2015',value:1170},
-            {name:'2016',value:970},
-            {name:'2017',value:1450}
-        ],
-            line: {
-                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
-                title: {
-                    text: '曲线图'
-                },
-                xAxis: {
-                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
-                },
-                yAxis:{},
-                series: [
-                    {
-                        name: "销量",
-                        type: "line",
-                        data: [5, 20, 36, 10, 10, 20]
-                    }
-                ]
-            },
-            bar: {
-                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
-                title: {
-                    text: '柱状图'
-                },
-                xAxis: {
-                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
-                },
-                yAxis:{},
-                series: [
-                    {
-                        name: "销量",
-                        type: "bar",
-                        data: [5, 20, 36, 10, 10, 20]
-                    }
-                ]
-            },
-            pie: {
-                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
-                title : {
-                    text: '饼状图',
-                    x:'center'
-                },
-                tooltip : {
-                    trigger: 'item',
-                    formatter: "{a} <br/>{b} : {c} ({d}%)"
-                },
-                legend: {
-                    orient: 'vertical',
-                    left: 'left',
-                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
-                },
-                series : [
-                    {
-                        name: '销量',
-                        type: 'pie',
-                        radius : '55%',
-                        center: ['50%', '50%'],
-                        data:[
-                            {value:335, name:'衬衫'},
-                            {value:310, name:'羊毛衫'},
-                            {value:234, name:'雪纺衫'},
-                            {value:135, name:'裤子'},
-                            {value:548, name:'高跟鞋'}
-                        ],
-                        itemStyle: {
-                            emphasis: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
-                        }
-                    }
-                ]
-            },
-            pie_radius:{
-                color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
-                title : {
-                    text: '环形图',
-                    x:'center'
-                },
-                tooltip : {
-                    trigger: 'item',
-                    formatter: "{a} <br/>{b} : {c} ({d}%)"
-                },
-                legend: {
-                    orient: 'vertical',
-                    left: 'left',
-                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
-                },
-                series : [
-                    {
-                        name: '销量',
-                        type: 'pie',
-                        radius : ['40%','60%'],
-                        data:[
-                            {value:335, name:'衬衫'},
-                            {value:310, name:'羊毛衫'},
-                            {value:234, name:'雪纺衫'},
-                            {value:135, name:'裤子'},
-                            {value:548, name:'高跟鞋'}
-                        ],
-                        itemStyle: {
-                            emphasis: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
-                        }
-                    }
-                ]
-            },
-            mix:{
-                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
-                    legend: {
-                        data:['步步高','小天才','imoo']
-                    },
-                    xAxis: {
-                        data: ['周一','周二','周三','周四','周五','周末']
-                    },
-                    yAxis:{},
-                    series: [
-                        {
-                            name: "步步高",
-                            type: "line",
-                            data: [15, 20, 26, 30, 40, 27]
-                        },
-                        {
-                            name: "小天才",
-                            type: "bar",
-                            data: [5, 30, 36, 10, 34, 20]
-                        },
-                        {
-                            name: "imoo",
-                            type: "bar",
-                            data: [35, 40, 30, 50, 60, 40]
-                        }
-                    ]
-                }
-        })
-    }
-</script>
-
-<style scoped>
-    .echarts {
-        float: left;
-        width: 500px;
-        height: 400px;
-    }
-    .content-title{
-        clear: both;
-        font-weight: 400;
-        line-height: 50px;
-        margin: 10px 0;
-        font-size: 22px;
-        color: #1f2f3d;
-    }
-    .mix-echarts{
-        width:900px;
-        height:600px;
-    }
-</style>

src/components/page/Permission.vue

@@ -2,39 +2,13 @@
     <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
+                <el-breadcrumb-item><i class="el-icon-warning"></i> 权限测试</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
-        <div class="ms-doc">
+        <div class="container">
-            <h3>README.md</h3>
+            <h1>管理员权限页面</h1>
-            <article>
+            <p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到登录页面，重新用管理员账号登录才有权限。</p>
-                <h1>manage-system</h1>
+            <p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p>
-                <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>
@@ -49,48 +23,16 @@
 </script>
 
 <style scoped>
-    .ms-doc{
+h1{
-        width:100%;
+    text-align: center;
-        max-width: 980px;
+    margin: 30px 0;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
-    }
+p{
-    .ms-doc h3{
+    line-height: 30px;
-        padding: 9px 10px 10px;
+    margin-bottom: 10px;
-        margin: 0;
+    text-indent: 2em;
-        font-size: 14px;
+}
-        line-height: 17px;
+.logout{
-        background-color: #f5f5f5;
+    color: #409EFF;
-        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>

src/components/page/Readme.vue

@@ -40,14 +40,6 @@
     </div>
 </template>
 
-<script>
-    export default {
-        data: function(){
-            return {}
-        }
-    }
-</script>
-
 <style scoped>
     .ms-doc{
         width:100%;

src/components/page/Upload.vue

@@ -6,6 +6,7 @@
                 <el-breadcrumb-item>图片上传</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="content-title">支持拖拽</div>
             <div class="plugins-tips">
                 Element UI自带上传组件。
@@ -32,7 +33,9 @@
                 url="/api/posts/"
                 extensions="png,gif,jpeg,jpg"
                 @:imageuploaded="imageuploaded"
-                               @:errorhandle="handleError"></vue-core-image-upload>
+                @:errorhandle="handleError"
+            ></vue-core-image-upload>
+        </div>
     </div>
 </template>
 

src/components/page/VueEditor.vue

@@ -6,6 +6,7 @@
                 <el-breadcrumb-item>编辑器</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="plugins-tips">
                 Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
                 访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
@@ -13,6 +14,7 @@
             <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
             <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
         </div>
+    </div>
 </template>
 
 <script>

src/components/page/VueTable.vue

@@ -3,9 +3,10 @@
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
-                <el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
+                <el-breadcrumb-item>VueDatasource</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="container">
             <div class="plugins-tips">
                 vue-datasource：一个用于动态创建表格的vue.js服务端组件。
                 访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
@@ -13,7 +14,9 @@
             <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
                     :actions="actions"
                     v-on:change="changePage"
-                v-on:searching="onSearch"></datasource>
+                    v-on:searching="onSearch"
+            ></datasource>
+        </div>
     </div>
 </template>
 
@@ -21,8 +24,7 @@
     import axios from 'axios';
     import Datasource from 'vue-datasource';
     export default {
-        data: function(){
+        data(){
-            const self = this;
             return {
                 url: './static/datasource.json',
                 information: {
@@ -51,8 +53,8 @@
                     {
                         text: 'Click',
                         class: 'btn-primary',
-                        event(e, row) {
+                        event: (e, row)=>{
-                            self.$message('选中的行数： ' + row.row.id);
+                            row && this.$message('选中的行数： ' + row.row.id);
                         }
                     }
                 ],
@@ -73,15 +75,15 @@
         },
         computed:{
             getData(){
-                const self = this;
+                return this.information.data.filter((d) =>{
-                return self.information.data.filter(function (d) {
+                    if(d.name.indexOf(this.query) > -1){
-                    if(d.name.indexOf(self.query) > -1){
                         return d;
                     }
                 })
             }
         },
         beforeMount(){
+            // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
             if(process.env.NODE_ENV === 'development'){
                 this.url = '/ms/table/source';
             };

static/css/main.css

@@ -5,11 +5,11 @@ html,body,#app,.wrapper{
     overflow: hidden;
 }
 body{
-    font-family:"Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+    font-family:'PingFang SC', "Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
 }
 a{text-decoration: none}
 .content{
-    background: none repeat scroll 0 0 #fff;
+    background: none repeat scroll 0 0 #f0f0f0;
     position: absolute;
     left: 250px;
     right: 0;
@@ -20,6 +20,12 @@ a{text-decoration: none}
     box-sizing: border-box;
     overflow-y: scroll;
 }
+.container{
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
 .crumbs{
     margin-bottom: 20px;
 }