|  |  | @ -1,7 +1,7 @@ | 
			
		
	
		
			
				
					|  |  |  | <template> | 
			
		
	
		
			
				
					|  |  |  | 	<section> | 
			
		
	
		
			
				
					|  |  |  | 		<!--工具条--> | 
			
		
	
		
			
				
					|  |  |  | 		<el-col :span="24" class="toolbar"> | 
			
		
	
		
			
				
					|  |  |  | 		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> | 
			
		
	
		
			
				
					|  |  |  | 			<el-form :inline="true" :model="filters"> | 
			
		
	
		
			
				
					|  |  |  | 				<el-form-item> | 
			
		
	
		
			
				
					|  |  |  | 					<el-input v-model="filters.name" placeholder="姓名"></el-input> | 
			
		
	
	
		
			
				
					|  |  | @ -16,31 +16,32 @@ | 
			
		
	
		
			
				
					|  |  |  | 		</el-col> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  | 		<!--列表--> | 
			
		
	
		
			
				
					|  |  |  | 		<template> | 
			
		
	
		
			
				
					|  |  |  | 			<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> | 
			
		
	
		
			
				
					|  |  |  | 				<el-table-column type="index" width="60"> | 
			
		
	
		
			
				
					|  |  |  | 				</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 				<el-table-column prop="name" label="姓名" width="120" 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="120" sortable> | 
			
		
	
		
			
				
					|  |  |  | 				</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 				<el-table-column prop="addr" label="地址" min-width="180" sortable> | 
			
		
	
		
			
				
					|  |  |  | 				</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 				<el-table-column inline-template :context="_self" label="操作" width="150"> | 
			
		
	
		
			
				
					|  |  |  | 					<span> | 
			
		
	
		
			
				
					|  |  |  | 		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> | 
			
		
	
		
			
				
					|  |  |  | 			<el-table-column type="selection" width="55"> | 
			
		
	
		
			
				
					|  |  |  | 			</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 			<el-table-column type="index" width="60"> | 
			
		
	
		
			
				
					|  |  |  | 			</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 			<el-table-column prop="name" label="姓名" width="120" 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="120" sortable> | 
			
		
	
		
			
				
					|  |  |  | 			</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 			<el-table-column prop="addr" label="地址" min-width="180" sortable> | 
			
		
	
		
			
				
					|  |  |  | 			</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 			<el-table-column inline-template :context="_self" label="操作" width="150"> | 
			
		
	
		
			
				
					|  |  |  | 				<span> | 
			
		
	
		
			
				
					|  |  |  | 					<el-button size="small" @click="handleEdit(row)">编辑</el-button> | 
			
		
	
		
			
				
					|  |  |  | 					<el-button type="danger" size="small" @click="handleDel(row)">删除</el-button> | 
			
		
	
		
			
				
					|  |  |  | 				</span> | 
			
		
	
		
			
				
					|  |  |  | 				</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 			</el-table> | 
			
		
	
		
			
				
					|  |  |  | 		</template> | 
			
		
	
		
			
				
					|  |  |  | 			</el-table-column> | 
			
		
	
		
			
				
					|  |  |  | 		</el-table> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  | 		<!--分页--> | 
			
		
	
		
			
				
					|  |  |  | 		<el-col :span="24" class="toolbar" style="padding-bottom:10px;"> | 
			
		
	
		
			
				
					|  |  |  | 		<!--工具条--> | 
			
		
	
		
			
				
					|  |  |  | 		<el-col :span="24" class="toolbar"> | 
			
		
	
		
			
				
					|  |  |  | 			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> | 
			
		
	
		
			
				
					|  |  |  | 			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;"> | 
			
		
	
		
			
				
					|  |  |  | 			</el-pagination> | 
			
		
	
		
			
				
					|  |  |  | 		</el-col> | 
			
		
	
	
		
			
				
					|  |  | @ -82,7 +83,7 @@ | 
			
		
	
		
			
				
					|  |  |  | <script> | 
			
		
	
		
			
				
					|  |  |  | 	import util from '../../common/js/util' | 
			
		
	
		
			
				
					|  |  |  | 	import NProgress from 'nprogress' | 
			
		
	
		
			
				
					|  |  |  | 	import { getUserListPage, removeUser, editUser, addUser } from '../../api/api'; | 
			
		
	
		
			
				
					|  |  |  | 	import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api'; | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  | 	export default { | 
			
		
	
		
			
				
					|  |  |  | 		data() { | 
			
		
	
	
		
			
				
					|  |  | @ -94,6 +95,7 @@ | 
			
		
	
		
			
				
					|  |  |  | 				total: 0, | 
			
		
	
		
			
				
					|  |  |  | 				page: 1, | 
			
		
	
		
			
				
					|  |  |  | 				listLoading: false, | 
			
		
	
		
			
				
					|  |  |  | 				sels: [],//列表选中列 | 
			
		
	
		
			
				
					|  |  |  | 				editFormVisible: false,//编辑界面显是否显示 | 
			
		
	
		
			
				
					|  |  |  | 				editFormTtile: '编辑',//编辑界面标题 | 
			
		
	
		
			
				
					|  |  |  | 				//编辑界面数据 | 
			
		
	
	
		
			
				
					|  |  | @ -248,6 +250,30 @@ | 
			
		
	
		
			
				
					|  |  |  | 				this.editForm.age = 0; | 
			
		
	
		
			
				
					|  |  |  | 				this.editForm.birth = ''; | 
			
		
	
		
			
				
					|  |  |  | 				this.editForm.addr = ''; | 
			
		
	
		
			
				
					|  |  |  | 			}, | 
			
		
	
		
			
				
					|  |  |  | 			selsChange: function (sels) { | 
			
		
	
		
			
				
					|  |  |  | 				this.sels = sels; | 
			
		
	
		
			
				
					|  |  |  | 			}, | 
			
		
	
		
			
				
					|  |  |  | 			//批量删除 | 
			
		
	
		
			
				
					|  |  |  | 			batchRemove: function () { | 
			
		
	
		
			
				
					|  |  |  | 				var ids = this.sels.map(item => item.id).toString(); | 
			
		
	
		
			
				
					|  |  |  | 				this.$confirm('确认删除选中记录吗?', '提示').then(() => { | 
			
		
	
		
			
				
					|  |  |  | 					this.listLoading = true; | 
			
		
	
		
			
				
					|  |  |  | 					NProgress.start(); | 
			
		
	
		
			
				
					|  |  |  | 					let para = { ids: ids }; | 
			
		
	
		
			
				
					|  |  |  | 					batchRemoveUser(para).then((res) => { | 
			
		
	
		
			
				
					|  |  |  | 						this.listLoading = false; | 
			
		
	
		
			
				
					|  |  |  | 						NProgress.done(); | 
			
		
	
		
			
				
					|  |  |  | 						this.$notify({ | 
			
		
	
		
			
				
					|  |  |  | 							title: '成功', | 
			
		
	
		
			
				
					|  |  |  | 							message: '删除成功', | 
			
		
	
		
			
				
					|  |  |  | 							type: 'success' | 
			
		
	
		
			
				
					|  |  |  | 						}); | 
			
		
	
		
			
				
					|  |  |  | 						this.getUsers(); | 
			
		
	
		
			
				
					|  |  |  | 					}); | 
			
		
	
		
			
				
					|  |  |  | 				}).catch(() => { | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  | 				}); | 
			
		
	
		
			
				
					|  |  |  | 			} | 
			
		
	
		
			
				
					|  |  |  | 		}, | 
			
		
	
		
			
				
					|  |  |  | 		mounted() { | 
			
		
	
	
		
			
				
					|  |  | 
 |