添加权限测试页

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',
-                        index: 'drag',
-                        title: '拖拽'
-                    },
-                    {
-                        icon: 'el-icon-edit',
+                        icon: 'el-icon-warning',
                         index: 'permission',
-                        title: '权限'
+                        title: '权限测试'
                     }
                 ]
             }
@@ -110,4 +110,7 @@
     .sidebar > ul {
         height:100%;
     }
+    .sidebar i{
+        margin-top: -4px;
+    }
 </style>

src/components/page/BaseCharts.vue

@@ -6,25 +6,27 @@
                 <el-breadcrumb-item>基础图表</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
-        <div class="plugins-tips">
-            vue-schart：vue.js封装sChart.js的图表组件。
-            访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
-        </div>
-        <div class="schart">
-            <div class="content-title">柱状图</div>
-            <schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
-        </div>
-        <div class="schart">
-        <div class="content-title">折线图</div>
-        <schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
-        </div>
-        <div class="schart">
-        <div class="content-title">饼状图</div>
-        <schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
-        </div>
-        <div class="schart">
-        <div class="content-title">环形图</div>
-        <schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
+        <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>
+            </div>
+            <div class="schart">
+                <div class="content-title">柱状图</div>
+                <schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
+            </div>
+            <div class="schart">
+            <div class="content-title">折线图</div>
+            <schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
+            </div>
+            <div class="schart">
+            <div class="content-title">饼状图</div>
+            <schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
+            </div>
+            <div class="schart">
+            <div class="content-title">环形图</div>
+            <schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
+            </div>
         </div>
     </div>
 </template>

src/components/page/BaseForm.vue

@@ -1,82 +1,84 @@
-<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="form-box">
-            <el-form ref="form" :model="form" label-width="80px">
-                <el-form-item label="表单名称">
-                    <el-input v-model="form.name"></el-input>
-                </el-form-item>
-                <el-form-item label="选择器">
-                    <el-select v-model="form.region" placeholder="请选择">
-                        <el-option key="bbk" label="步步高" value="bbk"></el-option>
-                        <el-option key="xtc" label="小天才" value="xtc"></el-option>
-                        <el-option key="imoo" label="imoo" value="imoo"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="日期时间">
-                    <el-col :span="11">
-                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
-                    </el-col>
-                    <el-col class="line" :span="2">-</el-col>
-                    <el-col :span="11">
-                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
-                    </el-col>
-                </el-form-item>
-                <el-form-item label="选择开关">
-                    <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
-                </el-form-item>
-                <el-form-item label="多选框">
-                    <el-checkbox-group v-model="form.type">
-                        <el-checkbox label="步步高" name="type"></el-checkbox>
-                        <el-checkbox label="小天才" name="type"></el-checkbox>
-                        <el-checkbox label="imoo" name="type"></el-checkbox>
-                    </el-checkbox-group>
-                </el-form-item>
-                <el-form-item label="单选框">
-                    <el-radio-group v-model="form.resource">
-                        <el-radio label="步步高"></el-radio>
-                        <el-radio label="小天才"></el-radio>
-                        <el-radio label="imoo"></el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="文本框">
-                    <el-input type="textarea" v-model="form.desc"></el-input>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSubmit">提交</el-button>
-                    <el-button>取消</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-
-    </div>
-</template>
-
-<script>
-    export default {
-        data: function(){
-            return {
-                form: {
-                    name: '',
-                    region: '',
-                    date1: '',
-                    date2: '',
-                    delivery: true,
-                    type: ['步步高'],
-                    resource: '小天才',
-                    desc: ''
-                }
-            }
-        },
-        methods: {
-            onSubmit() {
-                this.$message.success('提交成功！');
-            }
-        }
-    }
+<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="container">
+            <div class="form-box">
+                <el-form ref="form" :model="form" label-width="80px">
+                    <el-form-item label="表单名称">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="选择器">
+                        <el-select v-model="form.region" placeholder="请选择">
+                            <el-option key="bbk" label="步步高" value="bbk"></el-option>
+                            <el-option key="xtc" label="小天才" value="xtc"></el-option>
+                            <el-option key="imoo" label="imoo" value="imoo"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="日期时间">
+                        <el-col :span="11">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+                        </el-col>
+                        <el-col class="line" :span="2">-</el-col>
+                        <el-col :span="11">
+                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="选择开关">
+                        <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+                    </el-form-item>
+                    <el-form-item label="多选框">
+                        <el-checkbox-group v-model="form.type">
+                            <el-checkbox label="步步高" name="type"></el-checkbox>
+                            <el-checkbox label="小天才" name="type"></el-checkbox>
+                            <el-checkbox label="imoo" name="type"></el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item label="单选框">
+                        <el-radio-group v-model="form.resource">
+                            <el-radio label="步步高"></el-radio>
+                            <el-radio label="小天才"></el-radio>
+                            <el-radio label="imoo"></el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="文本框">
+                        <el-input type="textarea" v-model="form.desc"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit">提交</el-button>
+                        <el-button>取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function(){
+            return {
+                form: {
+                    name: '',
+                    region: '',
+                    date1: '',
+                    date2: '',
+                    delivery: true,
+                    type: ['步步高'],
+                    resource: '小天才',
+                    desc: ''
+                }
+            }
+        },
+        methods: {
+            onSubmit() {
+                this.$message.success('提交成功！');
+            }
+        }
+    }
 </script>

src/components/page/BaseTable.vue

@@ -6,38 +6,40 @@
                 <el-breadcrumb-item>基础表格</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
-        <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">
-                <el-option key="1" label="广东省" value="广东省"></el-option>
-                <el-option key="2" label="湖南省" value="湖南省"></el-option>
-            </el-select>
-            <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
-            <el-button type="primary" icon="search" @click="search">搜索</el-button>
-        </div>
-        <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55"></el-table-column>
-            <el-table-column prop="date" label="日期" sortable width="150">
-            </el-table-column>
-            <el-table-column prop="name" label="姓名" width="120">
-            </el-table-column>
-            <el-table-column prop="address" label="地址" :formatter="formatter">
-            </el-table-column>
-            <el-table-column label="操作" width="180">
-                <template slot-scope="scope">
-                    <el-button size="small"
-                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                    <el-button size="small" type="danger"
-                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination">
-            <el-pagination
-                    @current-change ="handleCurrentChange"
-                    layout="prev, pager, next"
-                    :total="1000">
-            </el-pagination>
+        <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">
+                    <el-option key="1" label="广东省" value="广东省"></el-option>
+                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
+                </el-select>
+                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
+                <el-button type="primary" icon="search" @click="search">搜索</el-button>
+            </div>
+            <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55"></el-table-column>
+                <el-table-column prop="date" label="日期" sortable width="150">
+                </el-table-column>
+                <el-table-column prop="name" label="姓名" width="120">
+                </el-table-column>
+                <el-table-column prop="address" label="地址" :formatter="formatter">
+                </el-table-column>
+                <el-table-column label="操作" width="180">
+                    <template slot-scope="scope">
+                        <el-button size="small"
+                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                        <el-button size="small" type="danger"
+                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                        @current-change ="handleCurrentChange"
+                        layout="prev, pager, next"
+                        :total="1000">
+                </el-pagination>
+            </div>
         </div>
     </div>
 </template>
@@ -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,18 +5,20 @@
                 <el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
-        <div class="drag-box-left">
-            <div class="drag-title">拖动排序</div>
-            <div class="drag-list" draggable="true" 
-                v-for="list in data1" 
-                :data-id="list.id" 
-                @dragstart="dragstartEvent"
-                @dragend="dragendEvent"
-                @dragenter="dragenterEvent"
-                @dragleave="dragleaveEvent"
-                @dragover="dragoverEvent"
-                :key="list.id"
-            >{{list.title}}</div>
+        <div class="container">
+            <div class="drag-box-left">
+                <div class="drag-title">拖动排序</div>
+                <div class="drag-list" draggable="true" 
+                    v-for="list in data1" 
+                    :data-id="list.id" 
+                    @dragstart="dragstartEvent"
+                    @dragend="dragendEvent"
+                    @dragenter="dragenterEvent"
+                    @dragleave="dragleaveEvent"
+                    @dragover="dragoverEvent"
+                    :key="list.id"
+                >{{list.title}}</div>
+            </div>
         </div>
     </section>
 </template>
@@ -46,8 +48,7 @@
         },
         methods: {
             dragstartEvent(ev) {
-                const self = this;
-                self.dragElement = ev.target;
+                this.dragElement = ev.target;
                 ev.target.style.backgroundColor = '#f8f8f8';
             },
             dragendEvent(ev) {
@@ -55,19 +56,17 @@
                 ev.preventDefault();
             },
             dragenterEvent(ev) {
-                const self = this;
-                if(self.dragElement != ev.target){
-                    ev.target.parentNode.insertBefore(self.dragElement, ev.target);
+                if(this.dragElement != ev.target){
+                    ev.target.parentNode.insertBefore(this.dragElement, ev.target);
                 }
             },
             dragleaveEvent(ev) {
-                const self = this;
-                if(self.dragElement != ev.target){
-                    if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
-                        ev.target.parentNode.appendChild(self.dragElement);
-                        self.lock = false;
+                if(this.dragElement != ev.target){
+                    if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
+                        ev.target.parentNode.appendChild(this.dragElement);
+                        this.lock = false;
                     }else{
-                        self.lock = true;
+                        this.lock = true;
                     }
                 }
             },

src/components/page/Login.vue

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

src/components/page/Markdown.vue

@@ -1,42 +1,44 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
-                <el-breadcrumb-item>markdown</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="plugins-tips">
-            Vue-SimpleMDE：Vue.js的Markdown Editor组件。
-            访问地址：<a href="https://github.com/F-loat/vue-simplemde" target="_blank">Vue-SimpleMDE</a>
-        </div>
-        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
-        <div class="plugins-tips">
-            <p>既然用了markdown语法了，那么就有一个很实际的问题了。要怎么在前台展示数据呢？</p>
-            <br>
-            <p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { markdownEditor } from 'vue-simplemde';
-    export default {
-        data: function(){
-            return {
-                content:'',
-                configs: {
-                    status: true,
-                    initialValue: 'Hello BBK',
-                    renderingConfig: {
-                        codeSyntaxHighlighting: true,
-                        highlightingTheme: 'atom-one-light'
-                    }
-                }
-            }
-        },
-        components: {
-            markdownEditor
-        }
-    }
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
+                <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>
+            </div>
+            <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
+            <div class="plugins-tips">
+                <p>既然用了markdown语法了，那么就有一个很实际的问题了。要怎么在前台展示数据呢？</p>
+                <br>
+                <p>这个时候就需要解析markdown语法了。可以使用 <a href="https://github.com/miaolz123/vue-markdown" target="_blank">vue-markdown</a>：一个基于vue.js的markdown语法解析插件。（这里不作展开，有需要自行了解）</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { markdownEditor } from 'vue-simplemde';
+    export default {
+        data: function(){
+            return {
+                content:'',
+                configs: {
+                    status: true,
+                    initialValue: 'Hello BBK',
+                    renderingConfig: {
+                        codeSyntaxHighlighting: true,
+                        highlightingTheme: 'atom-one-light'
+                    }
+                }
+            }
+        },
+        components: {
+            markdownEditor
+        }
+    }
 </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">
-            <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 class="container">
+            <h1>管理员权限页面</h1>
+            <p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到登录页面，重新用管理员账号登录才有权限。</p>
+            <p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p>
         </div>
 
     </div>
@@ -49,48 +23,16 @@
 </script>
 
 <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;
-    }
+h1{
+    text-align: center;
+    margin: 30px 0;
+}
+p{
+    line-height: 30px;
+    margin-bottom: 10px;
+    text-indent: 2em;
+}
+.logout{
+    color: #409EFF;
+}
 </style>

src/components/page/Readme.vue

@@ -1,96 +1,88 @@
-<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>
-
-<script>
-    export default {
-        data: function(){
-            return {}
-        }
-    }
-</script>
-
-<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;
-    }
+<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>

src/components/page/Upload.vue

@@ -6,33 +6,36 @@
                 <el-breadcrumb-item>图片上传</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
-        <div class="content-title">支持拖拽</div>
-        <div class="plugins-tips">
-            Element UI自带上传组件。
-            访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
+        <div class="container">
+            <div class="content-title">支持拖拽</div>
+            <div class="plugins-tips">
+                Element UI自带上传组件。
+                访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
+            </div>
+            <el-upload
+                class="upload-demo"
+                drag
+                action="/api/posts/"
+                multiple>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+            <div class="content-title">支持裁剪</div>
+            <div class="plugins-tips">
+                Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
+                访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
+            </div>
+            <img class="pre-img" :src="src" alt="">
+            <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
+                :crop="true"
+                text="上传图片"
+                url="/api/posts/"
+                extensions="png,gif,jpeg,jpg"
+                @:imageuploaded="imageuploaded"
+                @:errorhandle="handleError"
+            ></vue-core-image-upload>
         </div>
-        <el-upload
-            class="upload-demo"
-            drag
-            action="/api/posts/"
-            multiple>
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
-        </el-upload>
-        <div class="content-title">支持裁剪</div>
-        <div class="plugins-tips">
-            Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
-            访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
-        </div>
-        <img class="pre-img" :src="src" alt="">
-        <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
-                               :crop="true"
-                               text="上传图片"
-                               url="/api/posts/"
-                               extensions="png,gif,jpeg,jpg"
-                               @:imageuploaded="imageuploaded"
-                               @:errorhandle="handleError"></vue-core-image-upload>
     </div>
 </template>
 

src/components/page/VueEditor.vue

@@ -1,52 +1,54 @@
-<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-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
-            访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
-        </div>
-        <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
-        <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
-    </div>
-</template>
-
-<script>
-    import { quillEditor } from 'vue-quill-editor';
-    export default {
-        data: function(){
-            return {
-                content: '<p>Hello BBK</p>',
-                editorOption: {
-                    // something config
-                }
-            }
-        },
-        components: {
-            quillEditor
-        },
-        methods: {
-            onEditorChange({ editor, html, text }) {
-                this.content = html;
-            },
-            submit(){
-                console.log(this.content);
-                this.$message.success('提交成功！');
-            }
-        },
-        computed: {
-            editor() {
-                return this.$refs.myTextEditor.quillEditor;
-            }
-        }
-    }
-</script>
-<style scoped>
-    .editor-btn{
-        margin-top: 20px;
-    }
+<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="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>
+            </div>
+            <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>
+    import { quillEditor } from 'vue-quill-editor';
+    export default {
+        data: function(){
+            return {
+                content: '<p>Hello BBK</p>',
+                editorOption: {
+                    // something config
+                }
+            }
+        },
+        components: {
+            quillEditor
+        },
+        methods: {
+            onEditorChange({ editor, html, text }) {
+                this.content = html;
+            },
+            submit(){
+                console.log(this.content);
+                this.$message.success('提交成功！');
+            }
+        },
+        computed: {
+            editor() {
+                return this.$refs.myTextEditor.quillEditor;
+            }
+        }
+    }
+</script>
+<style scoped>
+    .editor-btn{
+        margin-top: 20px;
+    }
 </style>

src/components/page/VueTable.vue

@@ -3,17 +3,20 @@
         <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="plugins-tips">
-            vue-datasource：一个用于动态创建表格的vue.js服务端组件。
-            访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
+        <div class="container">
+            <div class="plugins-tips">
+                vue-datasource：一个用于动态创建表格的vue.js服务端组件。
+                访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
+            </div>
+            <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
+                    :actions="actions"
+                    v-on:change="changePage"
+                    v-on:searching="onSearch"
+            ></datasource>
         </div>
-        <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
-                :actions="actions"
-                v-on:change="changePage"
-                v-on:searching="onSearch"></datasource>
     </div>
 </template>
 
@@ -21,8 +24,7 @@
     import axios from 'axios';
     import Datasource from 'vue-datasource';
     export default {
-        data: function(){
-            const self = this;
+        data(){
             return {
                 url: './static/datasource.json',
                 information: {
@@ -51,8 +53,8 @@
                     {
                         text: 'Click',
                         class: 'btn-primary',
-                        event(e, row) {
-                            self.$message('选中的行数： ' + row.row.id);
+                        event: (e, row)=>{
+                            row && this.$message('选中的行数： ' + row.row.id);
                         }
                     }
                 ],
@@ -73,15 +75,15 @@
         },
         computed:{
             getData(){
-                const self = this;
-                return self.information.data.filter(function (d) {
-                    if(d.name.indexOf(self.query) > -1){
+                return this.information.data.filter((d) =>{
+                    if(d.name.indexOf(this.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;
 }