<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"> <button type="button" class="btn btn-secondary" 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> <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", "render": function () { let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" }); btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn", null, ["btn", "btn-danger"])); 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", "render": function () { let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" }); btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn", null, ["btn", "btn-danger"])); 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") location.href = baseApiUrl + "/api/df?fileName=" + rel.data + "&token=" + localStorage.getItem("JWT-Authorization"); }, null, "POST").send(); } function selSysMain() { 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) pageAct.selSysMain = 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 () { selSysMain(); }); onEvent('change', '#selSysMain', function () { pageAct.selSysMain = $(this).val(); selSysSub(); }); onEvent("click", "#OpeFirmSendBtn", function () { let form = $("#opeFirmForm"); console.log(form); $(form).validate({ rules: { selSysMain: { required: true }, selSysSub: { required: true }, name: { required: true, maxlength: 50 } } }); //if ($(form).valid()) { // console.log($('#selSysMain').val()); // let url = baseApiUrl + "/operation/SaveOpeFirm"; // let sendData = { // device_system_category_layer2: $('#selSysMain').val(), // device_system_category_layer3: $('#selSysSub').val(), // name: $("#inpName").val(), // contact_person: $("#inpConPer").val(), // phone: $("#inpPhone").val(), // email: $("#inpEmail").val(), // tax_id_number: $("#inpTaxIdNum").val(), // remark: $("#inpRemark").val() // }; // objSendData.Data = sendData; // //$("#opeFirmModal").modal("hide"); // //ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { // // if (!res || res.code != "0000" || !res.data) { // // } else { // // toast_ok(common.AddSuc); // // $("#opeFirmModal").modal("hide"); // // } // //}, null, "POST").send(); //} }); } </script>