|
|
@ -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() { |
|
|
|