ibms-dome/Frontend/_operation.html

698 lines
21 KiB
HTML
Raw Normal View History

<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-sm-12 col-xl-12">
<h1 class="p-2 mb-0">運維管理</h1>
<div class="row bg-dark p-2">
<div class="col-auto">
<div class="btn-group">
<button type="button" onclick="setType(1)" class="btn btn-secondary waves-effect waves-themed">維修</button>
<button type="button" onclick="setType(2)" class="btn btn-secondary waves-effect waves-themed">保義記錄</button>
<button type="button" onclick="setType(null)" class="btn btn-secondary waves-effect waves-themed">廠商資料</button>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button onclick="setDate('tdy')" type="button" class="btn btn-secondary waves-effect waves-themed">今天</button>
<button onclick="setDate('ytd')" type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button>
</div>
</div>
<div class="col-auto">
<div class="form-group">
<input class="form-control" id="startdate" type="date" name="date" value="">
</div>
</div>
<div class="col-auto">
<div class="form-group">
<input class="form-control" id="enddate" type="date" name="date" value="">
</div>
</div>
<div class="col-auto" style="display: none">
<div class="form-group">
<input type="text" id="serial_number" class="form-control" placeholder="表單號">
</div>
</div>
<div class="col-auto" style="display: none">
<a href="#" for="serial_number" onclick="snSearch()" class="btn btn-info">單號查詢</a>
</div>
<hr>
</div>
<div class="row bg-dark p-2 align-items-center">
<div class="col-auto">
<a href="#" onclick="selAllSysVal" class="btn btn-info">全部類別</a>
</div>
<div class="col-auto">
<div id="mainList" class="frame-wrap">
</div>
</div>
</div>
<div class="row bg-dark p-2 mb-5 align-items-center">
<div class="col-auto" style="padding-left: 133px">
<div id="subList" class="frame-wrap">
</div>
</div>
</div>
<div class="">
<div class="frame-wrap">
<div class="mb-3">
<a href="#" id="newForm" class="btn btn-success" data-toggle="modal" data-target="#opeFirmModal">+ 維修單</a>
<a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
<span class="fal fa-file-excel mr-1"></span>
匯出
</a>
</div>
<table id="opeFirmTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>
<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>
</div>
</div>
</div>
</div>
</main>
<!-- Modal center 廠商資料 -->
<div class="modal fade" id="opeFirmModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
新增廠商資料
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<form id="opeFirmForm">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="selSysMain">系統大類</label>
<select class="form-control" id="selSysMain" name="selSysMain">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="selSysSub">系統小類</label>
<select class="form-control" id="selSysSub" name="selSysSub">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpName">姓名</label>
<input type="text" id="inpName" name="inpName" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpConPer">聯絡人</label>
<input type="text" id="inpConPer" name="inpConPer" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpPhone">電話</label>
<input type="text" id="inpPhone" name="inpPhone" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpEmail">Email</label>
<input type="email" id="inpEmail" name="inpEmail" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpTaxIdNum">統一編號</label>
<input type="text" id="inpTaxIdNum" name="inpTaxIdNum" maxlength="8" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpRemark">備注</label>
<input type="text" id="inpRemark" name="inpRemark" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
2022-12-01 09:17:55 +08:00
<button type="button" class="btn btn-secondary" id="OpeFirmCanBtn" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="OpeFirmSendBtn" e-prevent>儲存</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal center 設備權限 -->
<div class="modal fade" id="opeRecModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
選擇功能
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped text-center m-0">
<thead class="thead-themed">
<tr>
<th>選擇</th>
<th>編號</th>
<th>功能名稱</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>系統監控</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>歷史資料</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>異常記錄</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>即時告警</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>5</td>
<td>運維管理</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>6</td>
<td>圖資管理</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>7</td>
<td>帳號管理</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">儲存</button>
</div>
</div>
</div>
</div>
2022-12-01 09:17:55 +08:00
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
確定刪除這一筆嗎?
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="confirmDelCanBtn" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="confirmDelBtn" e-prevent>儲存</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
pageAct.sub_system_tag = null;
pageAct.main_system_tag = null;
initMaiList();
$('input[type=checkbox][data-type=main]').parent().on('change', function () {
pageAct.main_system_tag = $('input[type=checkbox]:checked').map(function (i, v) { if ($(v).data('type') == 'main') return $(v).prop('id') }).toArray();
subList();
if ($('input[type=checkbox][data-type=main]:checked').length <= 0) {
pageAct.main_system_tag = null
pageAct.sub_system_tag = null;
}
refTable();
});
$('#subList').on('change', $('input[type=checkbox][data-type=sub]').parent(), function () {
pageAct.sub_system_tag = $('input[type=checkbox]:checked').map(function (i, v) { if ($(v).data('type') == 'sub') return $(v).prop('id') }).toArray();
if ($('input[type=checkbox][data-type=sub]:checked').length <= 0) {
pageAct.sub_system_tag = null;
}
refTable();
});
$('[onclick^=setType]').on('click', function () {
btnSelCss(this);
});
$(`[onclick^=setDate]`).on('click', function () {
if ($(this).hasClass('btn-dark')) {
$(this).removeClass('btn-dark');
$(this).addClass('btn-secondary');
setDate();
}
else
btnSelCss(this);
});
$('#startdate, #enddate').on('change', function () {
let startdate = new Date($('#startdate').val());
let enddate = new Date($('#enddate').val());
setDate(null, startdate, enddate)
});
$(`[onclick="setType(null)"]`).click();
initDate();
event();
});
function loadOpeFirmTable() {
$('#opeFirmTable_wrapper').css('display', 'block');
$('#opeRecTable_wrapper').css('display', 'none');
$('#serial_number').parent().parent().css('display', 'none');
$('[for=serial_number]').parent().css('display', 'none');
serial_number = $('#serial_number').val() || null;
let ajaxObj = {
url: baseApiUrl + "/operation/OpeFirList",
method: "POST",
data: { work_type: null, start_created_at: pageAct.startdate, end_created_at: pageAct.enddate, serial_number: pageAct.serial_number, main_system_tag: pageAct.main_system_tag, sub_system_tag: pageAct.sub_system_tag }
};
let tag = "#opeFirmTable";
let column_defs = [
{ "targets": [0], "width": "4%", "sortable": true },
{ "targets": [1], "width": "5%", "sortable": true },
{ "targets": [2], "width": "5%", "sortable": true },
{ "targets": [3], "width": "5%", "sortable": true },
{ "targets": [4], "width": "5%", "sortable": true },
{ "targets": [5], "width": "5%", "sortable": true },
{ "targets": [6], "width": "5%", "sortable": true }
];
let columns = [
{
"title": "廠商類別",
"data": "system_key",
},
{
"title": "廠商",
"data": "name",
},
{
"title": "聯絡人",
"data": "contact_person",
},
{
"title": "電話",
"data": "phone",
},
{
"title": "email",
"data": "email",
},
{
"title": "建立日期",
"data": "created_at"
},
{
"title": "功能",
"data": "id",
2022-12-01 09:17:55 +08:00
"render": function (data) {
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" }, null, null, {id: data});
btnDiv.append(creBtnHtml("修改", "opeFirmEdiBtn", null, ["btn", "btn-info"], { "toggle": "modal", "target": "#opeFirmModal"}));
btnDiv.append(creBtnHtml("刪除", "opeFirmDelBtn", null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" }));
return btnDiv.outerHtml();
}
},
];
opeFirmTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
}
function loadOpeRecTable() {
$('#opeFirmTable_wrapper').css('display', 'none');
$('#opeRecTable_wrapper').css('display', 'block');
$('#serial_number').parent().parent().css('display', 'block');
$('[for=serial_number]').parent().css('display', 'block');
let ajaxObj = {
url: baseApiUrl + "/operation/OpeRecList",
method: "POST",
data: { work_type: pageAct.work_type, start_created_at: pageAct.startdate, end_created_at: pageAct.enddate, serial_number: pageAct.serial_number, main_system_tag: pageAct.main_system_tag, sub_system_tag: pageAct.sub_system_tag }
}
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "8%", "sortable": true },
{ "targets": [3], "width": "8%", "sortable": true },
{ "targets": [4], "width": "8%", "sortable": true },
{ "targets": [5], "width": "8%", "sortable": true },
{ "targets": [6], "width": "8%", "sortable": true },
{ "targets": [7], "width": "8%", "sortable": true },
{ "targets": [8], "width": "8%", "sortable": false },
{ "targets": [9], "width": "8%", "sortable": false },
{ "targets": [10], "width": "8%", "sortable": false },
{ "targets": [11], "width": "8%", "sortable": false },
];
let columns = [
{
"title": "項目",
"data": "work_type_name",
},
{
"title": "位置",
"data": "location",
},
{
"title": "異常代號",
"data": "error_code",
},
{
"title": "表單號",
"data": "formId",
},
{
"title": "設備名稱",
"data": "device_name",
},
{
"title": "狀態",
"data": "status_name",
},
{
"title": "處理人員",
"data": "user_full_name",
},
{
"title": "預計施工時間",
"data": "start_time",
"render": function (data) {
return displayDate(data, "datetime");
}
},
{
"title": "檔案上傳",
"data": "start_time",
},
{
"title": "完成時間",
"data": "finish_time",
"render": function (data) {
return displayDate(data, "datetime");
}
},
{
"title": "建立時間",
"data": "created_at",
},
{
"title": "功能",
"data": "id",
2022-12-01 09:17:55 +08:00
"render": function (data) {
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
2022-12-01 09:17:55 +08:00
btnDiv.append(creBtnHtml("刪除", "opeRecDelBtn", null, ["btn", "btn-danger"], { "id": data }));
return btnDiv.outerHtml();
}
},
];
opeRecTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
}
function setType(wt) {
pageAct.work_type = wt;
if (wt == null) {
$('#newForm').data('target', '#opeFirmModal')
loadOpeFirmTable();
}
else {
$('#newForm').data('target', '#opeRecModal')
loadOpeRecTable();
}
}
function setDate(dateType = null, startdate = null, enddate = null) {
clearPageAct();
pageAct.startdate = startdate;
pageAct.enddate = enddate;
if (dateType == 'tdy') {
pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date'));
}
else if (dateType == 'ytd') {
pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'date'));
}
else {
$(`[onclick^=setDate]`).removeClass('btn-dark');
$(`[onclick^=setDate]`).addClass('btn-secondary');
}
refTable();
}
function initDate() {
$('#startdate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
$('#enddate').val(displayDate(new Date(new Date().setDate(new Date().getDate() + 1)), 'date').replaceAll('/', '-'));
}
function clearPageAct() {
pageAct.startdate = null;
pageAct.enddate = null;
pageAct.serial_number = null;
}
function snSearch() {
clearPageAct();
pageAct.serial_number = $('#serial_number').val() || null;
}
function initMaiList() {
let url = baseApiUrl + "/operation/MaiSysList";
function success(res) {
let strHtml = ``;
$.each(res.data, function (i, v) {
strHtml += `<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" data-type="main" id="${v.system_value}">
<label class="custom-control-label" for="${v.system_value}">${v.system_key}</label>
</div>`;
});
$('#mainList').html(strHtml);
}
ytAjax = new YourTeam.Ajax(url, null, success, null, "POST").send();
}
function subList() {
let sendData = {
main_system_tag: pageAct.main_system_tag
}
objSendData.Data = sendData;
let url = baseApiUrl + "/operation/SubSysList";
let strHtml = ``;
function success(res) {
$.each(res.data, function (i, v) {
strHtml += `<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" data-type="sub" id="${v.system_value}">
<label class="custom-control-label" for="${v.system_value}">${v.system_key}</label>
</div>`;
});
$('#subList').html(strHtml);
if (pageAct.sub_system_tag != null) {
$.each(pageAct.sub_system_tag, function (i, v) {
$('#' + v).click();
});
}
}
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
}
function refTable() {
if (pageAct.work_type == null)
loadOpeFirmTable();
else
loadOpeRecTable();
}
function exportExcel() {
let url = baseApiUrl + "/operation/OpeExportExcel";
objSendData.Data = {
work_type: pageAct.work_type,
startdate: pageAct.startdate == undefined ? null : pageAct.startdate,
enddate: pageAct.enddate == undefined ? null : pageAct.enddate,
};
ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
if (rel.code == "0000")
2022-12-01 09:17:55 +08:00
location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + localStorage.getItem("JWT-Authorization");
}, null, "POST").send();
}
2022-12-01 09:17:55 +08:00
function selSysMain(tag = null) {
let url = baseApiUrl + "/operation/MaiSysList";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
$("#selSysMain").html();
$("#selSysSub").html();
strHtml = ``;
$.each(res.data, (index, roleObj) => {
strHtml += `<option value='${roleObj.system_value}'>${roleObj.system_key}</option>`;
if (index == 0)
2022-12-01 09:17:55 +08:00
pageAct.selSysMain = tag ?? roleObj.system_value
})
$("#selSysMain").html(strHtml);
selSysSub();
}
}, null, "POST").send();
}
function selSysSub() {
url = baseApiUrl + "/operation/SubSysList";
sendData = {
main_system_tag: [pageAct.selSysMain],
};
objSendData.Data = sendData;
strHtml = ``;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
$.each(res.data, (index, roleObj) => {
strHtml += `<option value='${roleObj.system_value}'>${roleObj.system_key}</option>`;
})
$("#selSysSub").html(strHtml);
}, null, "POST").send();
}
function event() {
onEvent('click', '#newForm', function () {
2022-12-01 09:17:55 +08:00
pageAct.opeFirmAct = 'add';
$('#opeFirmModal input').map(function (i, v) { $(v).val('') });
selSysMain();
});
onEvent('change', '#selSysMain', function () {
pageAct.selSysMain = $(this).val();
selSysSub();
});
2022-12-01 09:17:55 +08:00
onEvent('click', '#opeFirmEdiBtn', function () {
let url = baseApiUrl + "/operation/OpeFirRead";
pageAct.opeFirmId = $(this).parent().data('id')
objSendData.Data = { id: pageAct.opeFirmId };
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
pageAct.opeFirmAct = 'edit';
selSysMain(res.data.device_system_category_layer2);
$('#opeFirmForm select[id=selSysMain]').val(res.data.device_system_category_layer2).change();
$('#opeFirmForm select[id=selSysSub]').val(res.data.device_system_category_layer3).change();
$('#opeFirmForm input[id=inpName]').val(res.data.name);
$('#opeFirmForm input[id=inpConPer]').val(res.data.contact_person);
$('#opeFirmForm input[id=inpPhone]').val(res.data.phone);
$('#opeFirmForm input[id=inpEmail]').val(res.data.email);
$('#opeFirmForm input[id=inpTaxIdNum]').val(res.data.tax_id_number);
$('#opeFirmForm input[id=inpRemark]').val(res.data.remark);
}
}, null, "POST").send()
});
onEvent("click", "#OpeFirmSendBtn", function () {
let form = $("#opeFirmForm");
2022-12-01 09:17:55 +08:00
$(form).validate({
rules: {
selSysMain: { required: true },
selSysSub: { required: true },
2022-12-01 09:17:55 +08:00
inpName: { required: true, maxlength: 50 }
}
});
2022-12-01 09:17:55 +08:00
if ($(form).valid()) {
let url = baseApiUrl + "/operation/" + (pageAct.opeFirmAct == "add" ? 'SaveOpeFirm' : 'EdtOneOpeFirm');
let sendData = {
device_system_category_layer2: $('#selSysMain').val(),
device_system_category_layer3: $('#selSysSub').val(),
name: $("#inpName").val() || null,
contact_person: $("#inpConPer").val() || null,
phone: $("#inpPhone").val() || null,
email: $("#inpEmail").val() || null,
tax_id_number: $("#inpTaxIdNum").val() || null,
remark: $("#inpRemark").val() || null
};
if (pageAct.opeFirmAct == "edit")
sendData.id = pageAct.opeFirmId;
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
//toast_ok(common.AddSuc);
//$("#opeFirmModal").modal("hide");
$("#OpeFirmCanBtn").click();
refTable();
}
}, null, "POST").send();
}
});
onEvent("click", "#opeFirmDelBtn", function () {
pageAct.opeFirmId = $(this).parent().data('id');
});
onEvent("click", "#confirmDelBtn", function () {
objSendData.Data = { id: pageAct.opeFirmId };
let url = baseApiUrl + "/operation/" + (pageAct.work_type == null ? "DelOpeFirm" : "DelOpeRecord");
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
//toast_ok(common.AddSuc);
//$("#delModal").modal("hide");
$("#confirmDelCanBtn").click();
refTable();
}
}, null, "DELETE").send();
});
}
</script>