后台管理系统 - 管理员管理
<div id='app'>
<div class='place'>
<span>位置：</span>
<ul class='placeul'>
<li><a href='#'>首页</a></li>
<li><a href='#'>管理员管理</a></li>
</ul>
</div>
<pre><code><div class='rightinfo'>
<form method='post'>
<ul class='forminfo'>
<li style='display:inline-block;'><label>账户名</label><input name='username' type='text' class='dfinput' v-model='formQuery.username'/></li>
<li style='display:inline-block;'><label>姓名</label><input name='name' type='text' class='dfinput' v-model='formQuery.name'/></li>
<li style='display:inline-block;'><label>&nbsp;</label><input name='' type='button' class='btn' value='查询' @click='readAdmins'/></li>
</ul>
</form>
<div class='tools'>
<ul class='toolbar'>
<li class='click'>
<a href='#'>
<span><img src='../images/t01.png'/></span>添加管理账户
</a>
</li>
<li class='click' @click='removes'>
<span><img src='../images/t03.png'/></span>批量删除
</li>
</ul>
</div>
<table class='tablelist'>
<thead>
<tr>
<th><input name='' type='checkbox' value='' checked='checked' v-model='allChecked'/></th>
<th>账户名</th>
<th>姓名</th>
<th>性别</th>
<th>是否锁定</th>
<th>发布时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='admin in table.data' :key='admin.id'>
<td><input name='' type='checkbox' :value='admin.id' v-model='multipleSelection'/></td>
<td>{{admin.username}}</td>
<td>{{admin.name}}</td>
<td>
<template v-if='admin.sex==1'>男</template>
<template v-else>女</template>
</td>
<td>
<span :style='admin.unLocked?'color: green;':' color:red;''>{{unLockedMap[admin.unLocked]}}</span>
</td>
<td>
{{admin.createTime}}
</td>
<td>
<a href='<%=basePath%>backstage/adminmanage/toUpdateAdmin?id=${admin.id}' class='tablelink'>编辑</a>
<a name='deleteAdmin' href='#' class='tablelink' @click='remove(admin.id)'> 删除</a></td>
</tr>
</tbody>
</table>
<div class='pagin'>
<div class='message'>共<i class='blue'>{{table.totalRecords}}</i>条记录,当前显示的是第{{table.page}}页</div>
<ul class='paginList'>
<li class='paginItem'><a href='javascript:;' @click='pageChange(1)'>首页</a></li>
<li class='paginItem'><a href='javascript:;' @click='pageChange(table.page-1)'><span class='pagepre'></span></a></li>
<li class='paginItem'><a href='javascript:;' @click='pageChange(table.page+1)'><span class='pagenxt'></span></a></li>
<li class='paginItem'><a href='javascript:;' @click='pageChange(table.maxPage)'>末页</a></li>
</ul>
</div>
</div>
</code></pre>
</div>
<script type='text/javascript'>
$('.tablelist tbody tr:odd').addClass('odd');
<pre><code>new Vue({
el: '#app',
data: {
table: {//记录表格的数据
data: [],//表格当前页的数据
page: 1,//表格当前页，为分页预留
pageSize: 20,//每页的最大记录数
totalRecords: 0,//总记录数
},
unLockedMap: {true: '未锁定', false: '已锁定'}, //字典值
formQuery:{},//查询条件
multipleSelection:[],//选中的账户对象
allChecked:false,//全选按钮的显示状态，false表示没有勾选，true表示勾选
},
methods: {
readAdmins() {
//从服务端读取管理员列表
//把这个表单参数和分页参数合并传递
const query=Object.assign(this.formQuery,{ query:this.table.page, pageSize:this.table.pageSize });
axios.get('/backstage/adminmanage', { params: query }).then(response => {
const responseData = response.data;
if (responseData.success) {
this.table = responseData.data;//获取当前页的数
}
})
},
pageChange(page){//传要跳转的页面参数
this.table.page=page;
this.readAdmins();
},
remove(id){//删除指定账户
if(confirm('是否确认要删除选中的记录?删除后无法恢复')) {//如果在对话框点击确认
axios.delete('/backstage/adminmanage', {
params: {
ids: id
}
}).then(response => {
const responseData = response.data;
if (responseData.success) {
this.readAdmins();//重新加载表格数据
}
})
}
},
removes(){//批量移除账户
if(this.multipleSelection.length>0){//
if(confirm('是否确认要删除选中的记录?删除后无法恢复')){//如果在对话框点击确认
axios.delete('/backstage/adminmanage',{
params:{
ids:this.multipleSelection.toString()
}
}).then(response => {
const responseData = response.data;
if (responseData.success) {
this.readAdmins();//重新加载表格数据
}
})
}
}
}
},
mounted() {
this.readAdmins();
},
watch:{
multipleSelection:{//监听复选框，如果这个复选框选中了该页的所有记录，则默认勾选，否则不勾选
handler(newValue,oldValue){
if (newValue.length==this.table.data.length){//如果已经选中了当前页的所有记录
this.allChecked=true;
}else{
this.allChecked=false;
}
}
}
}
});
</code></pre>
</script>
原文地址: https://www.cveoy.top/t/topic/pcTx 著作权归作者所有。请勿转载和采集!