????
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">Các cơ quan, tổ chức trong tỉnh</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="/main">Giao diện chính</a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Các cơ quan, tổ chức</li>
</ul>
</div>
<div class="row">
<div class="col-lg-8 col-md-6">
<div class="card">
<div class="card-body table-responsive">
<table id="organTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Mã cơ quan</th>
<th style="min-width: 200px">Tên cơ quan</th>
<th style="min-width: 50px">Địa chỉ</th>
<th>Số điện thoại</th>
<th>Fax</th>
<th>Email</th>
<th>Trang web</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header bg-primary">
<div class="card-title text-white">Thêm mới cơ quan, tổ chức</div>
</div>
<div class="card-body px-2">
<form id="organ-form" action="" method="POST">
<div id="notify-div" class="mb-2"></div>
<div class="d-flex justify-content-end mr-3">
<input type="hidden" name="id" data-bind="value: organ.UUID">
<div class="btn-group">
<button type="submit" class="btn btn-sm btn-primary" data-bind="html: saveBtnLabel"></button>
<button id="del-btn" type="button" class="btn btn-sm btn-danger"
data-bind="visible:organ.UUID, events:{click:delOrgan}">
<span class="btn-label"><i class="fas fa-times-circle"></i></span> Xóa
</button>
<button type="button" class="btn btn-sm btn-success"
data-bind="visible: organ.UUID, events:{click:reset}">
<span class="btn-label"><i class="fas fa-plus-circle"></i></span> Tạo mới
</button>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Mã cơ quan</label>
<div class="col-md-8 col-sm-6">
<input name="code" type="text" class="form-control input-full" data-bind="value: organ.OrganId"
title="Không được để trống" required>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Tên cơ quan</label>
<div class="col-md-8 col-sm-6">
<input name="name" type="text" class="form-control input-full" data-bind="value: organ.OrganName"
title="Không được để trống" required>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Địa chỉ</label>
<div class="col-md-8 col-sm-6">
<input name="address" type="text" class="form-control input-full" data-bind="value: organ.OrganAdd">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Website</label>
<div class="col-md-8 col-sm-6">
<input name="website" type="text" class="form-control input-full" data-bind="value: organ.Website">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Số điện thoại</label>
<div class="col-md-8 col-sm-6">
<input name="phone" type="text" class="form-control input-full" data-bind="value: organ.Telephone">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Fax</label>
<div class="col-md-8 col-sm-6">
<input name="fax" type="text" class="form-control input-full" data-bind="value: organ.Fax">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-4 col-sm-6">Email</label>
<div class="col-md-8 col-sm-6">
<input name="email" type="email" class="form-control input-full" data-bind="value: organ.Email"
title="Không đúng địa chỉ email">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var organTable = $("#organTable").DataTable({
ajax: {
url: "?list=true",
dataType: "json",
dataSrc: ""
},
language: { url: "/js/plugin/datatables/Vietnamese.json" },
ordering: false,
select: { style: 'single' },
rowId: 'UUID',
columns: [
{ data: "OrganId" },
{ data: "OrganName" },
{ data: "OrganAdd" },
{ data: "Telephone" },
{ data: "Fax" },
{ data: "Email" },
{
data: "Website",
render: function (data, type, row) {
return data ? `<a href="${data}">${data}</a>` : ''
}
}
]
});
// View model cho cơ quan, tổ chức
var organVM = kendo.observable({
organ: {},
reset: function () {
this.set('organ', {});
var selectedRows = organTable.rows({ selected: true });
if (selectedRows.count()) selectedRows.deselect();
},
saveBtnLabel: function (e) {
return this.get('organ.UUID') ? '<span class="btn-label"><i class="fas fa-save"></i></span> Lưu' : '<span class="btn-label"><i class="fas fa-save"></i></span> Lưu mới'
},
delOrgan: function () {
var $this = this;
Swal.fire({
title: 'Xác nhận',
text: `Bạn có muốn xóa cơ quan, tổ chức [${$this.get('organ.OrganName')}]?`,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#cd201f',
cancelButtonColor: '#467fcf',
confirmButtonText: 'Xóa',
cancelButtonText: 'Đóng lại'
}).then(function (result) {
if (result.value) {
$.ajax({
url: "",
type: "DELETE",
data: { id: $this.get('organ.UUID') },
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, textStatus, jqXHR) {
Swal.fire('Thông báo', 'Đã xóa thành công cơ quan tổ chức', 'info')
.then(function () { organTable.ajax.reload(null, false) })
},
error: function (jqXHR, textStatus, err) {
Swal.fire('Đã xảy ra lỗi', jqXHR.responseText, 'error')
}
});
}
})
}
});
kendo.bind($("#organ-form"), organVM);
organTable.on('select', function (e, dt, type, idxs) {
var organ = dt.row(idxs[0]).data();
organVM.set('organ', organ);
});
organTable.on('deselect', function (e, dt, type, idxs) {
organVM.reset();
})
//Tạo mới cơ quan
$("#organ-form").validate({
validClass: "success",
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
unhighlight: function (element) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-primary");
},
errorPlacement: function (error, element) {
$(element).closest(".form-group div").append(error);
},
submitHandler: function (domForm) {
$.ajax({
url: "",
method: organVM.get('organ.UUID') ? 'PUT' : 'POST',
data: $(domForm).serialize(),
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data, text, jqXHR) {
if (organVM.get('organ.UUID')) organTable.ajax.reload(null, false);
else {
Swal.fire('Thông báo', 'Đã tạo cơ quan tổ chức thành công', 'success')
.then(function () {
organVM.reset();
organTable.ajax.reload();
})
}
},
error: function (jqXHR, text, err) {
Swal.fire('Đã xảy ra lỗi', jqXHR.responseText, 'error')
}
});
}
})
});
</script>