网站后台管理系统HTML模板-模板之家

<div id='app'>
    <div class='place'>
        <span>位置：</span>
        <ul class='placeul'>
            <li><a href='#'>首页</a></li>
            <li><a href='#'>管理员管理</a></li>
        </ul>
    </div>
    <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>
</div>
<script type='text/javascript'>
    $('.tablelist tbody tr:odd').addClass('odd');
    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;
                    }
                }
            }
        }
    });
</script>