Table界面增加增、删、改功能

src/common/util.js

@@ -0,0 +1,61 @@
+var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
+var DEFAULT_PATTERN = 'yyyy-MM-dd';
+function padding(s, len) {
+    var len = len - (s + '').length;
+    for (var i = 0; i < len; i++) { s = '0' + s; }
+    return s;
+};
+
+export default {
+    getQueryStringByName: function (name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);
+        var context = "";
+        if (r != null)
+            context = r[2];
+        reg = null;
+        r = null;
+        return context == null || context == "" || context == "undefined" ? "" : context;
+    },
+    formatDate: {
+
+
+        format: function (date, pattern) {
+            pattern = pattern || DEFAULT_PATTERN;
+            return pattern.replace(SIGN_REGEXP, function ($0) {
+                switch ($0.charAt(0)) {
+                    case 'y': return padding(date.getFullYear(), $0.length);
+                    case 'M': return padding(date.getMonth() + 1, $0.length);
+                    case 'd': return padding(date.getDate(), $0.length);
+                    case 'w': return date.getDay() + 1;
+                    case 'h': return padding(date.getHours(), $0.length);
+                    case 'm': return padding(date.getMinutes(), $0.length);
+                    case 's': return padding(date.getSeconds(), $0.length);
+                }
+            });
+        },
+        parse: function (dateString, pattern) {
+            var matchs1 = pattern.match(SIGN_REGEXP);
+            var matchs2 = dateString.match(/(\d)+/g);
+            if (matchs1.length == matchs2.length) {
+                var _date = new Date(1970, 0, 1);
+                for (var i = 0; i < matchs1.length; i++) {
+                    var _int = parseInt(matchs2[i]);
+                    var sign = matchs1[i];
+                    switch (sign.charAt(0)) {
+                        case 'y': _date.setFullYear(_int); break;
+                        case 'M': _date.setMonth(_int - 1); break;
+                        case 'd': _date.setDate(_int); break;
+                        case 'h': _date.setHours(_int); break;
+                        case 'm': _date.setMinutes(_int); break;
+                        case 's': _date.setSeconds(_int); break;
+                    }
+                }
+                return _date;
+            }
+            return null;
+        }
+
+    }
+
+};

src/components/Home.vue

@@ -15,12 +15,12 @@
 			<!--<el-col :span="4">-->
 			<aside style="width:230px;">
 				<h5 class="admin"><i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员：测试</h5>
-				<el-menu style="border-top: 1px solid #475669;" default-active="/page1" class="el-menu-vertical-demo" @open="handleopen"
+				<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
 					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
 					<el-submenu index="1">
 						<template slot="title"><i class="el-icon-message"></i>导航一</template>
-						<el-menu-item index="/page1">页面1</el-menu-item>
-						<el-menu-item index="/page2">页面2</el-menu-item>
+						<el-menu-item index="/table">Table</el-menu-item>
+						<el-menu-item index="/form">Form</el-menu-item>
 						<el-menu-item index="/page3">页面3</el-menu-item>
 					</el-submenu>
 					<el-submenu index="2">
@@ -39,7 +39,7 @@
 					<el-col :span="24" style="margin-bottom:15px;">
 						<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
 						<el-breadcrumb separator="/" style="float:right;">
-							<el-breadcrumb-item :to="{ path: '/page1' }">首页</el-breadcrumb-item>
+							<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
 							<el-breadcrumb-item>{{currentPathNameParent}}</el-breadcrumb-item>
 							<el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
 						</el-breadcrumb>
@@ -60,8 +60,8 @@
   export default {
     data() {
       return {
-		  currentPathName:'导航一',
-		  currentPathNameParent:'页面一',
+		  currentPathName:'Table',
+		  currentPathNameParent:'导航一',
         form: {
           name: '',
           region: '',
@@ -96,7 +96,7 @@
 			logout:function(){
 				var _this=this;
 				this.$confirm('确认退出吗?', '提示', {
-					type: 'warning'
+					//type: 'warning'
 				}).then(() => {
 					_this.$router.replace('/login');
 				}).catch(() => {

src/components/Login.vue

@@ -44,8 +44,8 @@
         var _this=this;
         this.$refs.ruleForm2.validate((valid) => {
           if (valid) {
-            //_this.$router.push('/page1');
-            _this.$router.replace('/page1');
+            //_this.$router.push('/table');
+            _this.$router.replace('/table');
           } else {
             console.log('error submit!!');
             return false;

src/components/nav1/Page1.vue

@@ -1,130 +0,0 @@
-<template>
-	<section>
-		<el-col :span="24" class="toolbar">
-			<el-form :inline="true" :model="formInline" class="demo-form-inline">
-				<el-form-item>
-					<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0">
-					</el-date-picker>
-				</el-form-item>
-				<el-form-item>
-					<el-date-picker v-model="value1" type="date" placeholder="结束日期" :picker-options="pickerOptions0">
-					</el-date-picker>
-				</el-form-item>
-				<el-form-item>
-					<el-input v-model="formInline.user" placeholder="姓名"></el-input>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary">查询</el-button>
-				</el-form-item>
-			</el-form>
-		</el-col>
-
-		<template>
-			<el-table :data="tableData" highlight-current-row style="width: 100%;">
-				<el-table-column type="index" width="50">
-				</el-table-column>
-				<el-table-column prop="name" label="姓名" width="180" sortable>
-				</el-table-column>
-				<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
-				</el-table-column>
-				<el-table-column prop="age" label="年龄" width="100" sortable>
-				</el-table-column>
-				<el-table-column prop="birth" label="生日" width="180" sortable>
-				</el-table-column>
-				<el-table-column prop="addr" label="地址" sortable>
-				</el-table-column>
-				<el-table-column inline-template :context="_self" label="操作" width="100">
-					<span>
-					<el-button type="text" size="small">编辑</el-button>
-					<el-button type="text" size="small" @click="handleDel(row)">删除</el-button>
-				</span>
-				</el-table-column>
-			</el-table>
-		</template>
-
-		<!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
-			<el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
-				:total="400" style="float:right">
-			</el-pagination>
-		</el-col>-->
-	</section>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-				formInline: {
-					user: ''
-				},
-				pickerOptions0: {
-          disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
-				value1:'',
-        tableData: [{
-						id:1000,
-            name: 'lanqy1',
-            sex: 1,
-            age: 20,
-						birth:'1996-03-02',
-						addr:'广东广州天河体育中心'
-          }, {
-						id:1001,
-            name: 'lanqy2',
-            sex: 1,
-            age: 20,
-						birth:'1996-03-02',
-						addr:'广东广州天河体育中心'
-          }, {
-						id:1002,
-            name: 'lanqy3',
-            sex: 0,
-            age: 20,
-						birth:'1996-03-02',
-						addr:'广东广州天河体育中心'
-          }, {
-						id:1003,
-            name: 'lanqy4',
-            sex: 1,
-            age: 20,
-						birth:'1996-03-02',
-						addr:'广东广州天河体育中心'
-          }]
-     }
-    },
-    methods: {
-			//性别显示转换
-			formatSex:function(row,column){
-				return row.sex==1?'男':row.sex==0?'女':'未知';
-			},
-			handleDel:function(row){
-				//console.log(row);
-				var _this=this;
-				this.$confirm('确认删除该记录吗?', '提示', {
-					type: 'warning'
-				}).then(() => {
-					for(var i=0;i<_this.tableData.length;i++){
-						if(_this.tableData[i].id==row.id){
-							_this.tableData.splice(i,1);
-						}
-					}
-				}).catch(() => {
-							
-				});
-			}
-    }
-  }
-</script>
-
-<style scoped>
-	.toolbar .el-form-item {
-		margin-bottom: 10px;
-	}
-	
-	.toolbar {
-		background: #fff;
-		padding: 10px 10px 0px 10px;
-	}
-</style>

src/components/nav1/Table.vue

@@ -0,0 +1,303 @@
+<template>
+	<section>
+		<!--工具条-->
+		<el-col :span="24" class="toolbar">
+			<el-form :inline="true" :model="formInline" class="demo-form-inline">
+				<el-form-item>
+					<el-input v-model="formInline.user" placeholder="姓名"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button>查询</el-button>
+				</el-form-item>
+				<el-form-item>
+					<el-button @click="handleAdd">新增</el-button>
+				</el-form-item>
+			</el-form>
+		</el-col>
+
+		<!--列表-->
+		<template>
+			<el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
+				<el-table-column type="index" width="50">
+				</el-table-column>
+				<el-table-column prop="name" label="姓名" width="180" sortable>
+				</el-table-column>
+				<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
+				</el-table-column>
+				<el-table-column prop="age" label="年龄" width="100" sortable>
+				</el-table-column>
+				<el-table-column prop="birth" label="生日" width="180" sortable>
+				</el-table-column>
+				<el-table-column prop="addr" label="地址" sortable>
+				</el-table-column>
+				<el-table-column inline-template :context="_self" label="操作" width="100">
+					<span>
+					<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
+					<el-button type="text" size="small" @click="handleDel(row)">删除</el-button>
+				</span>
+				</el-table-column>
+			</el-table>
+		</template>
+
+		<!--分页-->
+		<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
+			<el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+				:total="400" style="float:right">
+			</el-pagination>
+		</el-col>
+
+		<!--编辑界面-->
+		<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false">
+			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
+				<el-form-item label="姓名" prop="name">
+					<el-input v-model="editForm.name" auto-complete="off"></el-input>
+				</el-form-item>
+				<el-form-item label="性别">
+					<!--<el-select v-model="editForm.sex" placeholder="请选择性别">
+						<el-option label="男" :value="1"></el-option>
+						<el-option label="女" :value="0"></el-option>
+					</el-select>-->
+					<el-radio-group v-model="editForm.sex">
+						<el-radio class="radio" :label="1">男</el-radio>
+						<el-radio class="radio" :label="0">女</el-radio>
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="年龄">
+					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
+				</el-form-item>
+				<el-form-item label="生日">
+					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
+				</el-form-item>
+				<el-form-item label="地址">
+					<el-input type="textarea" v-model="editForm.addr"></el-input>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click.native="editFormVisible = false">取 消</el-button>
+				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
+			</div>
+		</el-dialog>
+	</section>
+</template>
+
+<script>
+	import util from '../../common/util'
+	import NProgress from 'nprogress'
+
+  export default {
+    data() {
+      return {
+				formInline: {
+					user: ''
+				},
+				pickerOptions0: {
+					disabledDate(time) {
+						return time.getTime() < Date.now() - 8.64e7;
+					}
+				},
+				value1:'',
+				editFormVisible:false,//编辑界面显是否显示
+				editFormTtile:'编辑',//编辑界面标题
+				//编辑界面数据
+				editForm: {
+					id:0,
+					name: '',
+					sex: -1,
+					age: 0,
+					birth: '',
+					addr: ''
+				},
+				editLoading:false,
+				btnEditText:'提 交',
+				editFormRules:{
+					name:[
+						{ required: true, message: '请输入姓名', trigger: 'blur' }
+					]
+				},
+				tableData: [{
+					id:1000,
+					name: 'lanqy1',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1001,
+					name: 'lanqy2',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1002,
+					name: 'lanqy3',
+					sex: 0,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1003,
+					name: 'lanqy4',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1004,
+					name: 'lanqy5',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1005,
+					name: 'lanqy6',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1006,
+					name: 'lanqy7',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}, {
+					id:1007,
+					name: 'lanqy8',
+					sex: 1,
+					age: 20,
+					birth:'1996-03-02',
+					addr:'广东广州天河体育中心'
+				}],
+				listLoading:false
+     		}
+    },
+    methods: {
+			//性别显示转换
+			formatSex:function(row,column){
+				return row.sex==1?'男':row.sex==0?'女':'未知';
+			},
+			//删除记录
+			handleDel:function(row){
+				//console.log(row);
+				var _this=this;
+				this.$confirm('确认删除该记录吗?', '提示', {
+					//type: 'warning'
+				}).then(() => {
+					_this.listLoading=true;
+					NProgress.start();
+					setTimeout(function(){
+						for(var i=0;i<_this.tableData.length;i++){
+							if(_this.tableData[i].id==row.id){
+								_this.tableData.splice(i,1);
+
+								_this.listLoading=false;
+								NProgress.done();
+								_this.$notify({
+									title: '成功',
+									message: '删除成功',
+									type: 'success'
+								});
+
+								break;
+							}
+						}
+					},1000);
+				}).catch(() => {
+							
+				});
+			},
+			//显示编辑界面
+			handleEdit:function(row){
+				this.editFormVisible=true;
+				this.editFormTtile='编辑';
+				this.editForm.id=row.id;
+				this.editForm.name=row.name;
+				this.editForm.sex=row.sex;
+				this.editForm.age=row.age;
+				this.editForm.birth=row.birth;
+				this.editForm.addr=row.addr;
+			},
+			//编辑 or 新增
+			editSubmit:function(){
+				var _this=this;
+
+				_this.$refs.editForm.validate((valid)=>{
+					if(valid){
+						
+						_this.$confirm('确认提交吗？','提示',{}).then(()=>{
+							_this.editLoading=true;
+							NProgress.start();
+							_this.btnEditText='提交中';
+							setTimeout(function(){
+								_this.editLoading=false;
+								NProgress.done();
+								_this.btnEditText='提 交';
+								_this.$notify({
+									title: '成功',
+									message: '提交成功',
+									type: 'success'
+								});
+								_this.editFormVisible = false;
+
+								if(_this.editForm.id==0){
+									//新增
+									_this.tableData.push({
+										id:new Date().getTime(),
+										name: _this.editForm.name,
+										sex: _this.editForm.sex,
+										age: _this.editForm.age,
+										birth: _this.editForm.birth==''?'':util.formatDate.format(new Date(_this.editForm.birth),'yyyy-MM-dd'),
+										addr: _this.editForm.addr
+									});
+								}else{
+									//编辑
+									for(var i=0;i<_this.tableData.length;i++){
+										if(_this.tableData[i].id==_this.editForm.id){
+											_this.tableData[i].name=_this.editForm.name;
+											_this.tableData[i].sex=_this.editForm.sex;
+											_this.tableData[i].age=_this.editForm.age;
+											_this.tableData[i].birth=_this.editForm.birth==''?'':util.formatDate.format(new Date(_this.editForm.birth),'yyyy-MM-dd');
+											_this.tableData[i].addr=_this.editForm.addr;
+											break;
+										}
+									}
+								}
+							},1000);
+						
+						});
+
+					}
+				});
+
+			},
+			//显示新增界面
+			handleAdd:function(){
+				var _this=this;
+
+				this.editFormVisible=true;
+				this.editFormTtile='新增';
+				
+				this.editForm.id=0;
+				this.editForm.name='';
+				this.editForm.sex=1;
+				this.editForm.age=0;
+				this.editForm.birth='';
+				this.editForm.addr='';
+			}
+    }
+  }
+</script>
+
+<style scoped>
+	.toolbar .el-form-item {
+		margin-bottom: 10px;
+	}
+	
+	.toolbar {
+		background: #fff;
+		padding: 10px 10px 0px 10px;
+	}
+</style>

src/main.js

@@ -11,8 +11,8 @@ import 'nprogress/nprogress.css'
 import Login from './components/Login.vue'
 import Home from './components/Home.vue'
 import Main from './components/Main.vue'
-import Page1 from './components/nav1/Page1.vue'
-import Page2 from './components/nav1/Page2.vue'
+import Table from './components/nav1/Table.vue'
+import Form from './components/nav1/Form.vue'
 import Page3 from './components/nav1/Page3.vue'
 import Page4 from './components/nav2/Page4.vue'
 import Page5 from './components/nav2/Page5.vue'
@@ -31,8 +31,8 @@ const routes = [
     name: '导航一',
     children: [
       { path: '/main', component: Main },
-      { path: '/page1', component: Page1, name: '页面1' },
-      { path: '/page2', component: Page2, name: '页面2' },
+      { path: '/table', component: Table, name: 'Table' },
+      { path: '/form', component: Form, name: 'Form' },
       { path: '/page3', component: Page3, name: '页面3' },
     ]
   },