diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue index a2c94b4..33df6cb 100644 --- a/src/components/common/Sidebar.vue +++ b/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; + } diff --git a/src/components/page/BaseCharts.vue b/src/components/page/BaseCharts.vue index 88d3ebb..43bc138 100644 --- a/src/components/page/BaseCharts.vue +++ b/src/components/page/BaseCharts.vue @@ -6,25 +6,27 @@ 基础图表 -
- vue-schart：vue.js封装sChart.js的图表组件。 - 访问地址：vue-schart -
-
-
柱状图
- -
-
-
折线图
- -
-
-
饼状图
- -
-
-
环形图
- +
+
+ vue-schart：vue.js封装sChart.js的图表组件。 + 访问地址：vue-schart +
+
+
柱状图
+ +
+
+
折线图
+ +
+
+
饼状图
+ +
+
+
环形图
+ +
diff --git a/src/components/page/BaseForm.vue b/src/components/page/BaseForm.vue index fb577b1..ade120b 100644 --- a/src/components/page/BaseForm.vue +++ b/src/components/page/BaseForm.vue @@ -1,82 +1,84 @@ - - - \ No newline at end of file diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue index 438ac73..0e2c0bb 100644 --- a/src/components/page/BaseTable.vue +++ b/src/components/page/BaseTable.vue @@ -6,38 +6,40 @@ 基础表格 -
- 批量删除 - - - - - - 搜索 -
- - - - - - - - - - - - - @@ -88,6 +90,7 @@ }, // 获取 easy-mock 的模拟数据 getData(){ + // 开发环境使用 easy-mock 数据，正式环境使用 json 文件 if(process.env.NODE_ENV === 'development'){ this.url = '/ms/table/list'; }; diff --git a/src/components/page/DragList.vue b/src/components/page/DragList.vue index ae3df4c..d52a2b4 100644 --- a/src/components/page/DragList.vue +++ b/src/components/page/DragList.vue @@ -5,18 +5,20 @@ 拖拽排序 -
-
拖动排序
-
{{list.title}}
+
+
+
拖动排序
+
{{list.title}}
+
@@ -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; } } }, diff --git a/src/components/page/Login.vue b/src/components/page/Login.vue index 2df529d..cf46232 100644 --- a/src/components/page/Login.vue +++ b/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; diff --git a/src/components/page/Markdown.vue b/src/components/page/Markdown.vue index 9ff24b2..9ed06b4 100644 --- a/src/components/page/Markdown.vue +++ b/src/components/page/Markdown.vue @@ -1,42 +1,44 @@ - - - \ No newline at end of file diff --git a/src/components/page/OldCharts.vue b/src/components/page/OldCharts.vue deleted file mode 100644 index 693ccdd..0000000 --- a/src/components/page/OldCharts.vue +++ /dev/null @@ -1,216 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/page/Permission.vue b/src/components/page/Permission.vue index 85d168f..0a20b7f 100644 --- a/src/components/page/Permission.vue +++ b/src/components/page/Permission.vue @@ -2,39 +2,13 @@
- 自述 + 权限测试
-
-

README.md

-
-

manage-system

-

基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案

-

前言

-

之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。

-

该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

-

功能

- Element UI -
- 登录/注销 -
- 表格 -
- 表单 -
- 图表 -
- 富文本编辑器 -
- markdown编辑器 -
- 图片拖拽/裁剪上传 -
- 支持切换主题色 -
- 列表拖拽排序 -
-
+
+

管理员权限页面

+

只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到登录页面，重新用管理员账号登录才有权限。

+

想尝试一下，请退出登录，随便输入个账号名，再进来试试看。

@@ -49,48 +23,16 @@ \ No newline at end of file diff --git a/src/components/page/Readme.vue b/src/components/page/Readme.vue index 526e075..1b9d632 100644 --- a/src/components/page/Readme.vue +++ b/src/components/page/Readme.vue @@ -1,96 +1,88 @@ - - - - - \ No newline at end of file diff --git a/src/components/page/Upload.vue b/src/components/page/Upload.vue index 6891de1..af46778 100644 --- a/src/components/page/Upload.vue +++ b/src/components/page/Upload.vue @@ -6,33 +6,36 @@ 图片上传
-
支持拖拽
-
- Element UI自带上传组件。 - 访问地址：Element UI Upload +
+
支持拖拽
+
+ Element UI自带上传组件。 + 访问地址：Element UI Upload +
+ + +
将文件拖到此处，或点击上传
+
只能上传jpg/png文件，且不超过500kb
+ +
支持裁剪
+
+ Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。 + 访问地址：Vue-Core-Image-Upload +
+ +
- - -
将文件拖到此处，或点击上传
-
只能上传jpg/png文件，且不超过500kb
- -
支持裁剪
-
- Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。 - 访问地址：Vue-Core-Image-Upload -
- -
diff --git a/src/components/page/VueEditor.vue b/src/components/page/VueEditor.vue index a7bc340..ebeb50a 100644 --- a/src/components/page/VueEditor.vue +++ b/src/components/page/VueEditor.vue @@ -1,52 +1,54 @@ - - - - \ No newline at end of file diff --git a/src/components/page/VueTable.vue b/src/components/page/VueTable.vue index 1c562a0..dd4f4d1 100644 --- a/src/components/page/VueTable.vue +++ b/src/components/page/VueTable.vue @@ -3,17 +3,20 @@
表格 - Vue表格组件 + VueDatasource
-
- vue-datasource：一个用于动态创建表格的vue.js服务端组件。 - 访问地址：vue-datasource +
+
+ vue-datasource：一个用于动态创建表格的vue.js服务端组件。 + 访问地址：vue-datasource +
+
-
@@ -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'; }; diff --git a/static/css/main.css b/static/css/main.css index 5b739a8..33d1404 100644 --- a/static/css/main.css +++ b/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; }