完成基本表单

README.md

@@ -1,21 +1,46 @@
-# manage-system
+前言
 
-> A Vue.js project
+这个解决方案适合什么场景，为什么采用这个解决方案，有什么有点与缺点，后续扩展与维护，自己想说点什么就说什么。
 
-## Build Setup
+1、目录结构介绍
 
-``` bash
-# install dependencies
-npm install
+2、安装步骤
 
-# serve with hot reload at localhost:8080
-npm run dev
+3、组件使用说明与演示
 
-# build for production with minification
-npm run build
+4、调试部署上传
 
-# build for production and view the bundle analyzer report
-npm run build --report
-```
+5、单元测试（可选）
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+6、其他注意事项
+
+表格
+
+基础表格
+
+Datatable
+
+参考 Datatable中文网
+
+表单
+
+基本表单
+
+编辑器
+
+可以参考富文本编辑器markdow支持组件 Laverna https://laverna.cc/index.html
+
+文件上传
+
+上传组件使用webuploader http://fex.baidu.com/webuploader/getting-started.html
+
+图片裁剪
+
+日期控件
+
+UI元素
+
+弹出框alert
+确认框confirm
+提示框
+树形图

package.json

@@ -1,53 +1,54 @@
 {
-    "name": "manage-system",
-    "version": "1.0.0",
-    "description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
-    "author": "lin-xin <2981207131@qq.com>",
-    "private": true,
-    "scripts": {
-        "dev": "node build/dev-server.js",
-        "build": "node build/build.js"
-    },
-    "dependencies": {
-        "element-ui": "^1.1.6",
-        "vue": "^2.1.10",
-        "vue-router": "^2.2.0"
-    },
-    "devDependencies": {
-        "autoprefixer": "^6.7.2",
-        "babel-core": "^6.22.1",
-        "babel-loader": "^6.2.10",
-        "babel-plugin-transform-runtime": "^6.22.0",
-        "babel-preset-es2015": "^6.22.0",
-        "babel-preset-stage-2": "^6.22.0",
-        "babel-register": "^6.22.0",
-        "chalk": "^1.1.3",
-        "connect-history-api-fallback": "^1.3.0",
-        "css-loader": "^0.26.1",
-        "eventsource-polyfill": "^0.9.6",
-        "express": "^4.14.1",
-        "extract-text-webpack-plugin": "^2.0.0-rc.2",
-        "file-loader": "^0.10.0",
-        "friendly-errors-webpack-plugin": "^1.1.3",
-        "function-bind": "^1.1.0",
-        "html-webpack-plugin": "^2.28.0",
-        "http-proxy-middleware": "^0.17.3",
-        "webpack-bundle-analyzer": "^2.2.1",
-        "semver": "^5.3.0",
-        "opn": "^4.0.2",
-        "ora": "^1.1.0",
-        "shelljs": "^0.7.6",
-        "url-loader": "^0.5.7",
-        "vue-loader": "^10.3.0",
-        "vue-style-loader": "^2.0.0",
-        "vue-template-compiler": "^2.1.10",
-        "webpack": "^2.2.1",
-        "webpack-dev-middleware": "^1.10.0",
-        "webpack-hot-middleware": "^2.16.1",
-        "webpack-merge": "^2.6.1"
-    },
-    "engines": {
-        "node": ">= 4.0.0",
-        "npm": ">= 3.0.0"
-    }
+  "name": "manage-system",
+  "version": "1.0.0",
+  "description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
+  "author": "lin-xin <2981207131@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "element-ui": "^1.1.6",
+    "vue": "^2.1.10",
+    "vue-router": "^2.2.0",
+    "vue-tables-2": "^0.4.33"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "css-loader": "^0.26.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.2",
+    "file-loader": "^0.10.0",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "function-bind": "^1.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "opn": "^4.0.2",
+    "ora": "^1.1.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^10.3.0",
+    "vue-style-loader": "^2.0.0",
+    "vue-template-compiler": "^2.1.10",
+    "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.16.1",
+    "webpack-merge": "^2.6.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  }
 }

src/components/common/sidebar.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="sidebar">
-        <el-menu default-active="1-1" class="el-menu-vertical-demo" theme="dark" unique-opened>
+        <el-menu default-active="basetable" class="el-menu-vertical-demo" theme="dark" unique-opened router>
             <el-submenu index="1">
                 <template slot="title"><i class="el-icon-menu"></i>表格</template>
-                <el-menu-item index="1-1">基础表格</el-menu-item>
-                <el-menu-item index="1-2">Datatable</el-menu-item>
+                <el-menu-item index="basetable">基础表格</el-menu-item>
+                <el-menu-item index="vuetable">Datatable</el-menu-item>
             </el-submenu>
             <el-submenu index="2">
                 <template slot="title"><i class="el-icon-date"></i>表单</template>
-                <el-menu-item index="2-1">基本表单</el-menu-item>
+                <el-menu-item index="baseform">基本表单</el-menu-item>
                 <el-menu-item index="2-2">编辑器</el-menu-item>
                 <el-menu-item index="2-3">文件上传</el-menu-item>
             </el-submenu>

src/components/page/BaseForm.vue

@@ -0,0 +1,94 @@
+<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 label="步步高" value="bbk"></el-option>
+                        <el-option label="小天才" value="xtc"></el-option>
+                        <el-option 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() {
+                console.log('submit!');
+            }
+        }
+    }
+</script>
+
+<style>
+    .form-box{
+        width:600px;
+    }
+    .form-box .line{
+        text-align: center;
+    }
+    .el-time-panel__content::after, .el-time-panel__content::before {
+        margin-top: -7px;
+    }
+</style>

src/components/page/BaseTable.vue

@@ -2,15 +2,15 @@
     <div class="table">
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item>表单</el-breadcrumb-item>
+                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
                 <el-breadcrumb-item>基础表格</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
 
         <el-table :data="tableData" border style="width: 100%">
-            <el-table-column prop="date" label="日期" sortable width="180">
+            <el-table-column prop="date" label="日期" sortable width="150">
             </el-table-column>
-            <el-table-column prop="name" label="姓名" width="180">
+            <el-table-column prop="name" label="姓名" width="120">
             </el-table-column>
             <el-table-column prop="address" label="地址" :formatter="formatter">
             </el-table-column>
@@ -22,7 +22,7 @@
                     </el-tag>
                 </template>
             </el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="操作" width="180">
                 <template scope="scope">
                     <el-button size="small"
                             @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

src/components/page/VueTable.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="table">
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
+                <el-breadcrumb-item>基础表格</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function(){
+            return {
+            }
+        }
+    }
+</script>
+
+<style></style>

src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-default/index.css';
 
 Vue.use(ElementUI);
 

src/router/index.js

@@ -8,6 +8,14 @@ export default new Router({
         {
             path: '/basetable',
             component: resolve => require(['../components/page/BaseTable.vue'], resolve)
+        },
+        {
+            path: '/vuetable',
+            component: resolve => require(['../components/page/VueTable.vue'], resolve)
+        },
+        {
+            path: '/baseform',
+            component: resolve => require(['../components/page/BaseForm.vue'], resolve)
         }
     ]
 })