后台管理系统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>