????
Your IP : 216.73.216.224
<% layout('../layouts/userLayout.eta') %>
<style>
.e-rowcell {
white-space: normal !important;
}
</style>
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Phông lưu trữ</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-item"><a href="/dashboard">Giao diện chính</a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Phông lưu trữ</li>
</ul>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<table id="fondTable" class="table table-bordered table-striped table-hover dt-responsive">
<thead>
<tr>
<th class="control" style="width: 20px"></th>
<th>Mã phông</th>
<th>Tên phông</th>
<th>Lịch sử phông</th>
<th>Thời gian</th>
<th>Tổng số trang đã số hóa</th>
<th class="none">Tổng số mét</th>
<th class="none">Công cụ tìm kiếm</th>
<th class="none">Ghi chú</th>
<th>Trạng thái</th>
<th class="none">Nhóm tài liệu</th>
<th class="control">Sửa/Xóa</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header bg-primary">
<div class="card-title text-white">Tạo phông mới</div>
</div>
<form id="add-fond-form" action="" method="POST" role="form">
<div class="card-body">
<div class="row">
<div class="col-md-6 form-group">
<label class="placeholder">Cơ quan hình thành phông</label>
<select type="text" name="organ" class="form-control" data-role="dropdownlist"
data-text-field="OrganName" data-value-field="OrganId"
data-placeholder="Chọn cơ quan hình thành phông" data-filter="contains" data-value-primitive="true"
data-bind="source:organs,value:newFond.organ,events:{change:updateNewCode}" required></select>
<span class="k-invalid-msg" data-for="organ"></span>
</div>
<div class="col-lg-3 col-sm-6 form-group">
<label class="placeholder">Mã phông</label>
<input id="fondCode" type="text" name="code" class="k-textbox form-control"
data-bind="value:newFond.code" readonly required>
<span class="k-invalid-msg" data-for="code"></span>
</div>
<div class="col-lg-3 col-sm-6 form-group">
<label class="placeholder">Phông số</label>
<input name="number" class="form-control" placeholder="Nhập số phông" type="text" data-min="1"
data-format="n0" data-decimals="0" data-role="numerictextbox"
data-bind="value:newFond.number,events:{change:updateNewCode}" required>
<span class="k-invalid-msg" data-for="number"></span>
</div>
</div>
<div class="row">
<!-- <div class="col-md-6 form-group">
<label class="placeholder">Nhóm tài liệu</label>
<select type="text" name="group" data-role="multiselect" data-value-primitive="true"
data-placeholder="Chọn nhóm tài liệu" data-text-field="GroupName" data-value-field="Id"
data-bind="source: filegroups, value: newFond.group" required></select>
<span class="k-invalid-msg" data-for="group"></span>
</div> -->
<div class="col form-check">
<input id="openCheck" class="k-radio mr-5" type="radio" name="state" value="0"
data-bind="checked:newFond.state,events:{change:updateNewCode}">
<label class="k-radio-label" for="openCheck">Phông mở</label>
<input id="closeCheck" class="k-radio" type="radio" name="state" value="1"
data-bind="checked:newFond.state,events:{change:updateNewCode}">
<label class="k-radio-label" for="closeCheck">Phông đóng</label>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12 form-group">
<label class="placeholder">Tên phông</label>
<input type="text" name="name" class="k-textbox form-control" data-bind="value:newFond.name"
placeholder="Nhập tên phông..." required>
<span class="k-invalid-msg" data-for="name"></span>
</div>
<div class="col-md-6 form-group">
<label class="placeholder">Lịch sử hình thành phông</label>
<textarea name="history" class="k-textbox form-control" rows="3" data-bind="value:newFond.history"
placeholder="Nhập nội dung lịch sử hình thành phông..."></textarea>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 form-group">
<label class="placeholder">Thời gian tài liệu</label>
<input type="text" name="archivestime" class="k-textbox form-control"
data-bind="value:newFond.archivestime" placeholder="Năm bắt đầu và kết thúc (1946-1975)">
</div>
<div class="form-group col-md-4 col-sm-6">
<label class="placeholder">Tổng số mét</label>
<input type="text" data-min="1" data-format="n0" data-decimals="0" data-role="numerictextbox"
class="form-control" name="papertotal" data-bind="value:newFond.papertotal"
placeholder="Nhập số mét">
</div>
<div class="form-group col-md-4 col-sm-6">
<label class="placeholder">Tổng số mục lục</label>
<input type="text" data-min="1" data-format="n0" data-decimals="0" data-role="numerictextbox"
class="form-control" name="totalcatalog" data-bind="value:newFond.totalcatalog"
placeholder="Nhập tổng số mục lục">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label class="placeholder" for="language">Ngôn ngữ</label>
<select name="language" data-role="multiselect" data-value-primitive="true"
data-placeholder="Chọn ngôn ngữ" data-text-field="LangName" data-value-field="LangCode"
data-bind="source:languages,value:newFond.language" required></select>
<span class="k-invalid-msg" data-for="language"></span>
</div>
<div class="col-md-6 form-group">
<label class="placeholder" for="lookuptool">Công cụ tra cứu</label>
<select name="lookuptool" data-role="multiselect" data-value-primitive="true" data-value-field="Id"
data-text-field="ToolName" data-placeholder="Chọn công cụ tìm kiếm"
data-bind="source:lookupTools,value:newFond.lookuptool"></select>
<span class="k-invalid-msg" data-for="lookuptool"></span>
</div>
<div class="col-md-6 form-group">
<label class="placeholder">Ghi chú</label>
<textarea name="description" class="k-textbox form-control" rows="2"
data-bind="value: newFond.description" placeholder="Nhập ghi chú về phông..."></textarea>
</div>
</div>
</div>
<div class="card-footer">
<div class="clearfix">
<button id="add-fond-btn" type="button" class="btn btn-success pull-right">
<span class="btn-label"><i class="fas fa-briefcase-medical"></i> Tạo mới</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Modal sửa phông-->
<div class="modal fade" id="edit-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Sửa phông</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="edit-form" action="" method="POST">
<div class="modal-body">
<div class="row">
<div class="col-md-6 form-group">
<label class="placeholder">Cơ quan hình thành phông</label>
<select id="edit-organ" name="organ" class="form-control" data-role="dropdownlist"
data-placeholder="Chọn cơ quan hình thành phông" data-text-field="OrganName" data-value-field="OrganId"
data-filter="contains" data-value-primitive="true"
data-bind="source: organs, value: fond.OrganId, events: {change: updateCode}" required></select>
<span class="k-invalid-msg" data-for="organ"></span>
</div>
<div class="col-lg-3 col-sm-6 form-group">
<label class="placeholder">Mã phông</label>
<input id="fondCode-modal" type="text" name="code" class="k-textbox form-control form-control"
data-bind="value: fond.FondCode" title="Mã phông không được để trống" readonly required>
<span class="k-invalid-msg" data-for="code"></span>
</div>
<div class="col-lg-3 col-sm-6 form-group">
<label class="placeholder">Phông số</label>
<input type="text" data-min="1" data-format="n0" data-decimals="0" data-role="numerictextbox"
name="number" class="form-control" placeholder="Nhập số phông"
data-bind="value: fond.FondNumber, events: {change: updateCode}" title="Chỉ được nhập số" required>
<span class="k-invalid-msg" data-for="number"></span>
</div>
</div>
<div class="row">
<div class="col form-check">
<label class="mr-5">
<input type="radio" name="state" data-bind="checked: fond.State, events: {change: updateCode}"
value="0"> Phông mở</label>
<label><input type="radio" name="state" data-bind="checked: fond.State, events: {change: updateCode}"
value="1"> Phông đóng</label>
<input type="hidden" name="id" data-bind="value: fond.UUID">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12 form-group">
<label class="placeholder">Tên phông</label>
<input type="text" name="name" class="k-textbox form-control" placeholder="Nhập tên phông..."
data-bind="value: fond.FondName" title="Tên phông không được để trống" required>
<span class="k-invalid-msg" data-for="name"></span>
</div>
<div class="col-md-6 form-group">
<label class="placeholder">Lịch sử hình thành phông</label>
<textarea name="history" class="k-textbox form-control" rows="2"
placeholder="Nhập nội dung lịch sử hình thành phông..." data-bind="value: fond.FondHistory"></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label class="placeholder">Tổng số mét</label>
<input type="text" data-min="1" data-format="n0" data-decimals="0" data-role="numerictextbox"
class="form-control" name="papertotal" placeholder="Nhập số mét" data-bind="value: fond.PaperTotal">
</div>
<div class="form-group col-md-4 col-sm-6">
<label class="placeholder">Tổng số mục lục</label>
<input type="text" data-min="1" data-format="n0" data-decimals="0" data-role="numerictextbox"
class="form-control" name="totalcatalog" placeholder="Nhập tổng số mục lục"
data-bind="value: fond.TotalCatalog">
</div>
<div class="form-group col-md-4 col-sm-6">
<label class="placeholder">Tổng số trang văn bản đã số hóa</label>
<input type="text" data-min="1" data-format="n0" data-decimals="0" data-role="numerictextbox"
class="form-control" name="paperdigital" placeholder="Nhập tổng số trang văn bản đã số hóa"
data-bind="value: fond.PaperDigital">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label class="placeholder" for="language">Ngôn ngữ</label>
<select name="language" data-role="multiselect" data-value-primitive="true"
data-placeholder="Chọn ngôn ngữ" data-text-field="LangName" data-value-field="LangCode"
data-bind="source:languages,value:selectedLanguages" required></select>
<span class="k-invalid-msg" data-for="language"></span>
</div>
<div class="col-md-6 form-group">
<label class="placeholder" for="lookuptool">Công cụ tra cứu</label>
<select name="lookuptool" data-role="multiselect" data-value-primitive="true" data-text-field="ToolName"
data-value-field="Id" data-placeholder="Chọn công cụ tìm kiếm"
data-bind="source:lookupTools,value:selectedTools"></select>
<span class="k-invalid-msg" data-for="lookuptool"></span>
</div>
<div class="col-md-6 form-group">
<label class="placeholder">Ghi chú</label>
<textarea name="description" class="k-textbox form-control" rows="2"
placeholder="Nhập ghi chú về phông..." data-bind="value: fond.Description"></textarea>
</div>
</div>
<div class="row">
<div class="col">
<label class="custom-control custom-checkbox">
<span class="custom-checkbox-label">Hiển thị trên biểu đồ </span>
<input class="custom-checkbox-input" type="checkbox" name="isvisible" data-bind="checked: fond.IsStatisticsVisible" value="1">
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button id="edit-btn" type="button" class="btn btn-warning"><i class="fas fa-edit"></i> Sửa</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-times"></i> Đóng</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var fondViewModel = kendo.observable({
fond: {},
newFond: {
organ: 'H08.9.23',
state: 1,
number: 1,
code: '001',
language: ['vi'],
lookuptool: [1, 3]
},
organs: new kendo.data.DataSource({
transport: {
read: {
url: "/quantri/coquan/json",
dataType: "json"
}
}
}),
languages: new kendo.data.DataSource({
transport: {
read: {
url: "/quantri/ngonngu/json",
dataType: "json"
}
},
schema: {
data: 'data'
}
}),
lookupTools: new kendo.data.DataSource({
transport: {
read: {
url: "/quantri/congcu/json",
dataType: "json"
}
},
schema: {
data: 'data'
}
}),
selectedLanguages: [],
selectedTools: [],
updateNewCode: function () {
var state = this.get("newFond.state");
if (parseInt(state)) this.set("newFond.code", this.get("newFond.number") ? this.get("newFond.number").toString().padStart(3, '0') : "");
else this.set("newFond.code", this.get("newFond.organ"));
},
updateCode: function () {
var state = this.get("fond.State");
if (parseInt(state)) this.set("fond.FondCode", this.get("fond.FondNumber") ? this.get("fond.FondNumber").toString().padStart(3, '0') : "");
else this.set("fond.FondCode", this.get("fond.OrganId"));
}
});
kendo.bind($("#add-fond-form"), fondViewModel);
kendo.bind($("#edit-form"), fondViewModel);
var fondTable = $("#fondTable").DataTable({
ajax: {
url: "/quantri/phong/json",
dataSrc: ""
},
ordering: false,
pageLength: 10,
language: { url: "/js/plugin/datatables/Vietnamese.json" },
rowId: 'UUID',
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return `Chi tiết phông`;
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
},
columns: [
{
className: 'details-control',
orderable: false,
data: "UUID",
render: function () { return `` },
type: "hidden"
},
{ data: "FondCode", className: 'text-center' },
{ data: "FondName", className: 'text-justify' },
{ data: "FondHistory", className: 'text-justify' },
{ data: "ArchivesTime", className: 'text-center' },
{ data: "PaperDigital", className: 'text-center' },
{ data: "PaperTotal", className: 'text-center' },
{
data: 'Tools',
render: function (data, type, row) {
return data.map(x => x['ToolName']).toString()
}
},
{ data: "Description", className: 'text-justify' },
{
data: "State",
className: 'text-center',
render: function (data, type, row) {
return `<span class="badge ${data ? 'badge-danger">Đóng' : 'badge-success">Mở'}</span>`
}
},
{
data: "KeyGroups",
render: function (data, type, row) {
var keyGroups = '';
for (var i = 0; i < data.length; i++) {
keyGroups += `<tr><td>${data[i].GroupName}</td><td>${data[i].startYear || ""}-${data[i].endYear || ""}</td></tr>`;
}
return `<table class="table table-striped table-bordered table-hover">
<thead><tr><th>Tên nhóm tài liệu</th><th>Thời gian nhóm tài liệu</th></tr>
<tbody>${keyGroups}</tbody>
</table>`;
}
},
{
data: null,
className: 'text-center',
render: function (data, type, row) {
return `<div class="btn-group">
<button class="btn btn-warning btn-xs btn-icon edit-btn"><i class="fas fa-edit"></i></button>
<button class="btn btn-danger btn-xs btn-icon delete-btn"><i class="fas fa-trash-alt"></i></button>
</div>`;
}
}
]
});
var addFondValidator = $("#add-fond-form").kendoValidator({
// errorTemplate: "<span class='text-danger'><i class='fas fa-exclamation-circle'></i> #=message#</span>",
messages: {
required: "Không được để trống",
number: "Chỉ được nhập số"
}
}).data("kendoValidator");
$("#add-fond-btn").on("click", function (e) {
if (addFondValidator.validate()) {
var data = new FormData(document.getElementById('add-fond-form'));
$.ajax({
url: "",
method: "POST",
data: $('#add-fond-form').serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, textStatus, jqXHR) {
location.replace(location.href);
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
})
} else {
Swal.fire({
text: "Vui lòng điền đầy đủ thông tin cần thiết",
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
//Xóa phông
$("#fondTable").on("click", ".delete-btn", function (e) {
var fond = fondTable.row((this).closest("tr")).data();
Swal.fire({
title: 'Xác nhận',
text: 'Bạn có muốn xóa phông?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#cd201f',
cancelButtonColor: '#467fcf',
confirmButtonText: 'Xóa phông',
cancelButtonText: 'Đóng lại'
}).then(function (result) {
if (result.value) {
$.ajax({
url: "",
type: "DELETE",
data: fond,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, textStatus, jqXHR) {
Swal.fire({
text: jqXHR.responseText,
type: 'info',
showConfirmButton: false,
timer: 1500
}).then(function () { fondTable.ajax.reload(null, false) })
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
})
});
// Edit phông
$("#fondTable").on("click", ".edit-btn", function (e) {
var rowData = fondTable.row($(this).closest("tr")).data();
fondViewModel.set("selectedGroups", rowData.KeyGroups.map(function (x) { return `${x.Id}` }));
fondViewModel.set("selectedLanguages", rowData.Language.split(","));
fondViewModel.set("selectedTools", rowData.LookupTools.split(",").map(function (x) { return parseInt(x) }));
fondViewModel.set("fond", rowData);
$("#edit-modal").modal("show");
})
var editFondValidator = $("#edit-form").kendoValidator({
errorTemplate: "<span class='text-danger'><i class='fas fa-exclamation-circle'></i> #=message#</span>",
messages: {
required: "Không được để trống",
number: "Chỉ được nhập số"
}
}).data("kendoValidator");
$("#edit-btn").on("click", function (e) {
if (editFondValidator.validate()) {
$.ajax({
url: "",
method: "PUT",
data: $("#edit-form").serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, textStatus, jqXHR) {
$("#edit-modal").modal("hide");
fondTable.ajax.reload(null, false);
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: "Vui lòng điền đầy đủ thông tin cần thiết",
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
})
} else {
Swal.fire({
text: "Vui lòng điền đầy đủ thông tin cần thiết",
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
});
</script>