????
Your IP : 216.73.216.209
<% layout('../layouts/userLayout.eta') %>
<style>
.k-listview {
display: flex !important;
border-style: none;
background-color: transparent;
}
</style>
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Danh mục phông</h4>
<ul class="breadcrumbs">
<li class="nav-home"><a href="/"><i class="flaticon-home"></i></a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-home">Danh mục</li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Phông</li>
</ul>
</div>
<div class="row clearfix" id="fond-list"></div>
<div id="fond-pager"></div>
</div>
</div>
<script type="text/x-kendo-template" id="fond-template">
<div class="fond col-xl-2 col-md-3 col-sm-4 col-6">
<div class="card grid-item" title="#:FondName#">
<div class="grid-thumb mx-3 mt-3 p-3">
<img class="card-img" src="/img/tailieu/archive.png">
</div>
<div class="card-body">
<div class="fw-bold text-truncate">#:FondName#</div>
<span>Mã: #:FondCode#</span>
<div class="text-muted small">#:countFile# hồ sơ</div>
</div>
</div>
</div>
</script>
<!-- Thông tin chi tiết phông -->
<div class="modal fade" id="fond-detail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Thông tin phông</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<td>Phông số</td>
<td data-bind="text: fond.FondNumber"></td>
</tr>
<tr>
<td>Tên phông</td>
<td data-bind="text: fond.FondName"></td>
</tr>
<tr>
<td>Lịch sử phông</td>
<td data-bind="text: fond.FondHistory"></td>
</tr>
<tr>
<td>Số trang</td>
<td data-format="n0" data-bind="text: fond.PaperDigital"></td>
</tr>
<tr>
<td>Số bản sao bảo hiểm</td>
<td data-bind="text: fond.CopyNumber"></td>
</tr>
<tr>
<td>Ghi chú</td>
<td data-bind="text: fond.Description"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Đóng lại</button>
</div>
</div>
</div>
</div>
<ul id="context-menu">
<li class="info-item"><i class="fas fa-info-circle text-info mr-3"></i> Thông tin</li>
<!-- <li class="edit-item"><i class="fas fa-pencil-alt text-warning mr-3"></i> Sửa phông</li>
<li class="delete-item"><i class="fas fa-trash-alt text-danger mr-3"></i> Xóa phông</li> -->
<li class="list-item"><i class="fas fa-th-list text-primary mr-3"></i> Danh sách hồ sơ</li>
</ul>
<div class="quick-sidebar">
<a href="#" class="close-quick-sidebar"><i class="fas fa-times"></i></a>
<div class="quick-sidebar-wrapper"></div>
</div>
<script type="text/javascript">
$(function () {
var fondVM = kendo.observable({ fond: {} });
kendo.bind($('#fond-detail'), fondVM);
//Danh sách phông
var fondList = $('#fond-list').kendoListView({
dataSource: {
transport: {
read: {
url: '/danhmuc/phong/json',
dataType: 'json'
}
},
pageSize: 10
},
// selectable: 'single',
template: kendo.template($("#fond-template").html())
}).data('kendoListView');
$('#fond-pager').kendoPager({
dataSource: fondList.dataSource,
input: true,
refresh: true,
buttonCount: 4,
messages: {
display: "Hiển thị {0}-{1} trong tổng số {2} phông",
empty: "Không có dữ liệu",
page: "Trang thứ",
of: "trong {0} trang",
first: "Trang đầu",
previous: "Trang trước",
next: "Trang sau",
last: "Trang cuối",
refresh: "Tải lại"
}
});
$('#fond-list').on('click', '.fond .card', function (e) {
var fond = fondList.dataItem($(this)).toJSON();
location.replace('/danhmuc/phong/chitiet?code=' + fond.FondCode)
});
// Context menu
$('#context-menu').kendoContextMenu({
target: '#fond-list',
filter: '.fond',
animation: { duration: 500 },
select: function (e) {
var fond = fondList.dataItem($(e.target)).toJSON();
if ($(e.item).hasClass('info-item')) {
fondVM.set('fond', fond);
$('#fond-detail').modal('show');
} else if ($(e.item).hasClass('list-item')) {
location.replace('/danhmuc/phong/chitiet?code=' + fond.FondCode)
}
}
})
})
</script>