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

'移除DataSource相关'

pull/80/head
lin-xin 2018-04-18 09:48:31 +08:00
parent 05c0ab1db2
commit 6592cfde3a
12 changed files with 52 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -48,7 +48,6 @@
| |-- Readme.vue // 自述组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- VueTable.vue // datasource表格组件
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- .babelrc // ES6语法编译配置
@ -124,9 +123,6 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
### element-ui ###
一套基于vue.js2.0的桌面组件库。访问地址：[element](http://element.eleme.io/#/zh-CN/component/layout)
### vue-datasource ###
一个用于动态创建表格的vue.js服务端组件。访问地址：[vue-datasource](https://github.com/coderdiaz/vue-datasource)
### Vue-Quill-Editor ###
基于Quill、适用于Vue2的富文本编辑器。访问地址：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
@ -141,28 +137,32 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
## 其他注意事项 ##
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
举个栗子，我不想用 vue-datasource 这个组件，那我需要分四步走。
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。
```JavaScript
{
path: '/vuetable',
component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource组件
// 富文本编辑器组件
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueTable.vue 文件。
第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
```HTML
<el-menu-item index="vuetable">Vue表格组件</el-menu-item>
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
第四步：卸载该组件。执行以下命令：
npm un vue-datasource -S
npm un vue-quill-editor -S
完成。

21
README_EN.md
View File

@ -42,7 +42,6 @@ The scheme as a set of multi-function background frame templates, suitable for m
| |-- Readme.vue // Readme
| |-- Upload.vue // Upload
| |-- VueEditor.vue // VueEditor
| |-- VueTable.vue // VueTable
| |-- App.vue // Main component
| |-- main.js // Entry file
|-- .babelrc // ES6 syntax compiler configuration
@ -117,9 +116,6 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu
### element-ui ###
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
### vue-datasource ###
A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
### Vue-Quill-Editor ###
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
@ -133,28 +129,31 @@ A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.co
## Notice ##
### 一、If I don't want to use some components, how can I delete it? ###
For example, I don't want to use the vue-datasource component, I need to take four steps.
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below.
```JavaScript
{
path: '/vuetable',
component: resolve => require(['../components/page/VueTable.vue'], resolve)
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
Second,delete the component files. Enter 'src/components/page/' and delete 'VueTable.vue' file.
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
```HTML
<el-menu-item index="vuetable">Vue表格组件</el-menu-item>
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
Finally, uninstall this component.
npm un vue-datasource -S
npm un vue-quill-editor -S
Complete!

1
package.json
View File

@ -16,7 +16,6 @@
"mavon-editor": "^2.5.2",
"vue": "^2.5.16",
"vue-cropperjs": "^2.2.0",
"vue-datasource": "1.0.12",
"vue-quill-editor": "3.0.6",
"vue-router": "^3.0.1",
"vue-schart": "^0.1.4",

8
src/components/common/Header.vue
View File

@ -11,7 +11,13 @@
{{username}}
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
<el-dropdown-item>关于作者</el-dropdown-item>
</a>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>

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

@ -37,19 +37,9 @@
},
{
icon: 'el-icon-tickets',
index: '2',
title: '常用表格',
subs: [
{
index: 'table',
title: '基础表格'
},
{
index: 'datasource',
title: 'datasource表格'
}
]
},
{
icon: 'el-icon-date',
index: '3',

3
src/components/page/BaseTable.vue
View File

@ -2,8 +2,7 @@
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-tickets"></i> 表格</el-breadcrumb-item>
<el-breadcrumb-item>基础表格</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-tickets"></i> 基础表格</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">

97
src/components/page/VueTable.vue
View File

@ -1,97 +0,0 @@
<template>
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-tickets"></i> 表格</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>
</div>
<datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
:actions="actions"
v-on:change="changePage"
v-on:searching="onSearch"
></datasource>
</div>
</div>
</template>
<script>
import axios from 'axios';
import Datasource from 'vue-datasource';
export default {
data(){
return {
url: './static/datasource.json',
information: {
pagination:{},
data:[]
},
columns: [
{
name: 'Id',
key: 'id',
},
{
name: 'Name',
key: 'name',
},
{
name: 'email',
key: 'email',
},
{
name: 'ip',
key: 'ip',
}
],
actions: [
{
text: 'Click',
class: 'btn-primary',
event: (e, row)=>{
row && this.$message('选中的行数： ' + row.row.id);
}
}
],
query:''
}
},
components: {
Datasource
},
methods: {
changePage(values) {
this.information.pagination.per_page = values.perpage;
this.information.data = this.information.data;
},
onSearch(searchQuery) {
this.query = searchQuery;
}
},
computed:{
getData(){
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';
};
axios.get(this.url).then( (res) => {
this.information = res.data;
})
}
}
</script>
<style src="../../../static/css/datasource.css"></style>

5
src/router/index.js
View File

@ -21,11 +21,6 @@ export default new Router({
path: '/table',
component: resolve => require(['../components/page/BaseTable.vue'], resolve)
},
{
// vue-datasource组件
path: '/datasource',
component: resolve => require(['../components/page/VueTable.vue'], resolve)
},
{
path: '/form',
component: resolve => require(['../components/page/BaseForm.vue'], resolve)

167
static/css/datasource.css
View File

@ -1,167 +0,0 @@
.vue-datasource *{
box-sizing: border-box;
font-size: 14px;
}
.vue-datasource .panel {
margin-bottom: 22px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.vue-datasource .panel-default {
border-color: #d3e0e9;
}
.vue-datasource .panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.vue-datasource .panel-default > .panel-heading {
height:56px;
color: #333333;
background-color: #fff;
border-color: #d3e0e9;
}
.vue-datasource .pull-left {
float: left !important;
}
.vue-datasource .pull-right {
float: right !important;
}
.vue-datasource .form-group {
margin-bottom: 15px;
}
.vue-datasource label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.vue-datasource .form-control {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.6;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccd0d2;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.vue-datasource .btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.6;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vue-datasource .btn-primary {
color: #fff;
background-color: #3097D1;
border-color: #2a88bd;
}
.vue-datasource .table {
width: 100%;
max-width: 100%;
margin-bottom: 22px;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
}
.vue-datasource .table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.vue-datasource .table th ,.vue-datasource .table td {
padding: 8px;
line-height: 1.6;
vertical-align: top;
border-top: 1px solid #ddd;
}
.vue-datasource .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.vue-datasource .success th ,.vue-datasource .success td{
background-color: #dff0d8;
}
.vue-datasource .pagination {
display: inline-block;
padding-left: 0;
margin: 22px 0;
border-radius: 4px;
}
.vue-datasource .pagination > li {
display: inline;
}
.pagination > li > a,.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.6;
text-decoration: none;
color: #3097D1;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
color: #777777;
background-color: #fff;
border-color: #ddd;
cursor: not-allowed;
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
z-index: 3;
color: #fff;
background-color: #3097D1;
border-color: #3097D1;
cursor: default;
}
.vue-datasource .pagination > li:first-child > a, .vue-datasource .pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.vue-datasource .text-center {
text-align: center;
}
@media (min-width: 768px){
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
}

5
static/css/theme-green/color-green.css
View File

@ -16,11 +16,6 @@
.pure-button{
background: #00d1b2;
}
.vue-datasource .btn-primary {
color: #fff;
background-color: #00d1b2 !important;
border-color: #00d1b2 !important;
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
background-color: #00d1b2 !important;
border-color: #00d1b2 !important;

162
static/data.json
View File

@ -1,162 +0,0 @@
{
"pagination": {
"total": 15,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"from": 1,
"to": 15
},
"data": [
{
"id": 1,
"name": "Jaylen Schmidt",
"email": "aheaney@example.org",
"city": "Conroyburgh",
"company": "Kunde, Gerhold and Runte",
"job": "Soil Scientist",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 2,
"name": "Ms. Desiree Franecki III",
"email": "pweissnat@example.net",
"city": "New Mathew",
"company": "Davis Ltd",
"job": "Customer Service Representative",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 3,
"name": "Clyde Corwin",
"email": "rolfson.lexus@example.com",
"city": "East Ron",
"company": "Zieme and Sons",
"job": "Claims Taker",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 4,
"name": "Mr. Tyrese Kuphal",
"email": "libby.heaney@example.com",
"city": "Cristianland",
"company": "Abernathy LLC",
"job": "Occupational Health Safety Technician",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 5,
"name": "Ms. Amya West PhD",
"email": "uheller@example.org",
"city": "Treutelmouth",
"company": "Mraz-Effertz",
"job": "Hazardous Materials Removal Worker",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 6,
"name": "Murphy Stamm IV",
"email": "ckautzer@example.com",
"city": "Myleneshire",
"company": "Sporer-Wolf",
"job": "Pipelaying Fitter",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 7,
"name": "Elsa Jast",
"email": "kaitlyn.lang@example.net",
"city": "Mariahstad",
"company": "Hackett LLC",
"job": "Record Clerk",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 8,
"name": "Hardy Mosciski DVM",
"email": "soledad44@example.net",
"city": "Jasminborough",
"company": "Haley Ltd",
"job": "Kindergarten Teacher",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 9,
"name": "Demarcus Littel",
"email": "americo84@example.com",
"city": "New Lilaton",
"company": "Satterfield Group",
"job": "Plant Scientist",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 10,
"name": "Dr. Shad Gleichner",
"email": "eleanora23@example.com",
"city": "Lake Whitneyberg",
"company": "Fay Group",
"job": "Rotary Drill Operator",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 11,
"name": "Milford Mann",
"email": "shartmann@example.net",
"city": "Lake Austinport",
"company": "Sporer-Langosh",
"job": "Social and Human Service Assistant",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 12,
"name": "Prof. Mustafa Lindgren Sr.",
"email": "lizeth.morissette@example.net",
"city": "Roweborough",
"company": "Mitchell-Ratke",
"job": "Shoe Machine Operators",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 13,
"name": "Mrs. Brittany Bode Sr.",
"email": "wiegand.mozelle@example.org",
"city": "South Maxwellville",
"company": "Reilly Inc",
"job": "Bridge Tender OR Lock Tender",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 14,
"name": "Dariana Bauch",
"email": "dessie.schamberger@example.net",
"city": "East Linnie",
"company": "Wuckert PLC",
"job": "Elementary and Secondary School Administrators",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 15,
"name": "Jalon Renner",
"email": "lulu45@example.net",
"city": "New Rashad",
"company": "Muller-Kuhn",
"job": "Manufactured Building Installer",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
}
]
}

71
static/datasource.json
View File

@ -1,71 +0,0 @@
{
"data": [{
"id": 1,
"name": "段娜",
"email": "g.rgiuory@kctbut.mw",
"ip": "68.28.4.232"
},
{
"id": 2,
"name": "蔡洋",
"email": "y.mwjjoje@lpkshev.tg",
"ip": "22.126.12.189"
},
{
"id": 3,
"name": "陈敏",
"email": "e.voaiiuo@mvng.sn",
"ip": "227.89.13.37"
},
{
"id": 4,
"name": "朱平",
"email": "e.lduuf@nkfypn.az",
"ip": "9.39.240.243"
},
{
"id": 5,
"name": "侯平",
"email": "t.czqjyndts@jmwenklns.md",
"ip": "178.162.29.113"
},
{
"id": 6,
"name": "常超",
"email": "d.dhysgem@uxpcutmlk.tt",
"ip": "192.50.103.170"
},
{
"id": 7,
"name": "许平",
"email": "g.fiqdonvbc@wanepptw.tv",
"ip": "73.20.99.60"
},
{
"id": 8,
"name": "毛超",
"email": "w.unyyejh@qus.gt",
"ip": "10.88.135.123"
},
{
"id": 9,
"name": "周磊",
"email": "e.qbejguqqg@ejpxhltoak.gw",
"ip": "244.221.237.210"
},
{
"id": 10,
"name": "胡秀英",
"email": "s.dszo@uxaojtj.sy",
"ip": "86.199.17.210"
}
],
"pagination": {
"total": 15,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"from": 1,
"to": 15
}
}