归还书籍是图书管理系统中最重要的一部分,也可以说是整个图书管理系统的中心。
归还书籍的视图页面需要使用到jQuery插件,layui插件,bootstrap插件。它有分页查询,归还书籍,超期书籍,延期书籍,和报废书籍几个部分,与其他地方不同的是,它不是新增修改删除,但又与新增修改删除有共同点。所以才会称为图书归还系统中的中心点。
<div>
<div class="container">
<!-- 顶部搜索和操作区域 -->
<div class="row justify-content-between mt-3">
<div class="col">
<form id="formSearch" autocomplete="off">
<div class="row">
<div class="row mt-2">
<label class="col-form-label col-auto" for="searchText">搜索:</label>
<input type="text" class="form-control col" style="width:500px" id="searchText" name="searchText" placeholder="模糊搜索书籍数据" oninput="tabStudentSearch()">
</div>
</div>
</form>
</div>
<div class="col-auto">
<button class="layui-btn layui-btn-radius layui-btn-normal" type="button" id="returnNav" onclick="returnBook()">归还</button>
</div>
<div class="col-auto">
<button class="layui-btn layui-btn-radius layui-btn-normal" type="button" id="delayNav">延期</button>
</div>
<div class="col-auto">
<button class="layui-btn layui-btn-radius layui-btn-normal" type="button" id="exceedNav">超期</button>
</div>
<div class="col-auto">
<button class="layui-btn layui-btn-radius layui-btn-normal" type="button" id="scrapNav">报废</button>
</div>
</div>
<!-- 表格部分 -->
<div class="row">
<div class="col">
<table id="tabStudent" lay-filter="tabStudent"></table>
</div>
</div>
</div>
<!--模态框 -->
<div class="modal fade" id="studentModal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<!-- 顶部 标题 关闭按钮 -->
<div class="modal-header">
<!--标题-->
<h5 class="modal-title" id="modalTitle">还书</h5>
<!--关闭按钮-->
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 内容部分 表单-->
<div class="modal-body">
<form id="formStudent">
<!--隐藏域 学生id-->
<input type="hidden" id="userId" name="userId" />
<input type="hidden" id="recordId" name="recordId" />
<input type="hidden" id="bookId" name="bookId" />
<input type="hidden" id="bookStateId" name="bookStateId" />
<div class="col-6">
<div class="layui-form-item">
<p style="font-size:13px;color:#414959;padding:0px 0px 3px 7px">借书账号</p>
<input type="text" name="account" id="account" placeholder="请填写" autocomplete="off" class="layui-input" disabled>
</div>
<div class="layui-form-item">
<p style="font-size:13px;color:#414959;padding:0px 0px 3px 7px">ISBN</p>
<input type="text" name="ISBN" id="ISBN" placeholder="请填写" autocomplete="off" class="layui-input" disabled>