@{ ViewData["MainNum"] = "4"; ViewData["SubNum"] = "2"; ViewData["Title"] = "聯絡清單"; } <ol class="breadcrumb page-breadcrumb"> <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li> <li class="breadcrumb-item active">聯絡清單</li> <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li> </ol> <div class="row"> <div class="col-12"> <div id="panel-5" class="panel"> <div class="panel-container show"> <div class="panel-content"> <div class="subheader"> <h1 class="subheader-title"> <span>聯絡清單</span> </h1> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <div class="btn-group btn-group-md" id="Disasterlist"> </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3"> <div class="pr-3 "> <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" @*style="border: 1px dashed;"*@ onclick="Allgroupingselect()">全選</button> </div> <div class="pr-3 row col"> <div class="frame-wrap" id="groupinglist"> </div> </div> <div class="card border mb-g w-100 mb-5" id="emergency_setting_card"> <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between"> <div class="card-title font-weight-bold">聯絡清單</div> <div class="text-right "> <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" onclick="ExportPDF()">匯出PDF</a> <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" onclick="ExportExcel()">匯出Excel</a> </div> </div> <div class="card-body"> <div class="w-100"> <div class="col-12"> <table id="emergency_contact_table" class="table table-bordered table-hover m-0 text-center"> <thead class="thead-themed"> <tr> <th>組別</th> <th>姓名</th> <th>部門</th> <th>電話</th> <th>LINE ID</th> <th>電子信箱</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> @section Scripts { <script> var Selectadisaster; var selectgroupidlist = new Array(0); var Allgroupidlist = new Array(0); var Allgroupingbool = false; var EmergencyContact; $(function () { EmergencyContact = $("#emergency_contact_table").DataTable({ "columns": [ { "data": "groupingName", }, { "data": "full_name" }, { "data": "departmentName" }, { "data": "phone" }, { "data": "lineid" }, { "data": "email" } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.emergency_guid); }, "ajax": { "url": "/EmergencyContact/EmergencyContactTable", "type": "POST", "data": function (d) { d.selectgroupidlist = selectgroupidlist }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } return data; } } }); GetDisasterList(); }) //取得災難類別 function GetDisasterList() { var url = "/EmergencyContact/DisasterList"; var send_data = {}; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#Disasterlist').empty(); var Disasterstr = ""; $.each(rel.data, function (index, val) { if (index == 0) { Disasterstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)"> ' + val.name + '</button>'; } else { Disasterstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)">' + val.name + '</button>'; } }); $('#Disasterlist').append(Disasterstr); $('#Disasterlist').find('.btn-success').trigger('click'); return; } }, 'json'); } //選擇災難類別 function SelectDisaster(Disaster, e) { Selectadisaster = Disaster; if ($("#Disasterlist").find('.btn').hasClass("btn-success")) { $("#Disasterlist").find('.btn').removeClass("btn-success").addClass("btn-secondary"); } $(e).removeClass("btn-secondary").addClass("btn-success"); GetGroupingList(); Allgroupingbool = false; selectgroupidlist = []; //selectsetting = 0; EmergencyContact.ajax.reload(); } //取得編組列表 function GetGroupingList() { var url = "/EmergencyContact/GetGroupingList"; var send_data = { system_parent_id: Selectadisaster }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { var grouping = ""; $('#groupinglist').empty(); Allgroupidlist = []; $.each(rel.data, function (index, val) { Allgroupidlist.push(val.id); grouping += '<div class="btn-group mb-2 mr-2" grouping = "' + val.id + '">'; grouping += '<button type="button" class="btn btn-outline-success select" onclick="SelectGrouping(' + val.id + ',this)">' + val.name + '</button>'; grouping += '</div>'; }); $('#groupinglist').append(grouping); return; } }, 'json'); } //選擇組別 function SelectGrouping(grouping, e) { if ($(e).hasClass("btn-outline-success")) { $(e).removeClass("btn-outline-success").addClass("btn-success"); selectgroupidlist.push(grouping); } else if ($(e).hasClass("btn-success")) { $(e).removeClass("btn-success").addClass("btn-outline-success"); var a = selectgroupidlist.filter(function (n, i) { if (n === grouping) { selectgroupidlist.splice(i, 1); } }); } EmergencyContact.ajax.reload(); } //全選所有組別 function Allgroupingselect() { if (Allgroupingbool) { $('#groupinglist').find(".btn-success").removeClass("btn-success").addClass("btn-outline-success"); selectgroupidlist = []; Allgroupingbool = false; } else { $('#groupinglist').find(".btn-outline-success").removeClass("btn-outline-success").addClass("btn-success"); selectgroupidlist = Allgroupidlist; Allgroupingbool = true; } EmergencyContact.ajax.reload(); } //匯出pdf function ExportPDF() { if (selectgroupidlist.length == 0) { Swal.fire( { title: "PDF匯出失敗", icon: 'warning', html: '請先選擇組別', }); return; } else { var send_data = { disaster: $('#Disasterlist').find('.btn-success').html(), groupidlist: selectgroupidlist } window.location = "/EmergencyContact/ExportPDF?post=" + JSON.stringify(send_data); } } //匯出Excel function ExportExcel() { if (selectgroupidlist.length == 0) { Swal.fire( { title: "Excel匯出失敗", icon: 'warning', html: '請先選擇組別', }); return; } else { var send_data = { disaster: $('#Disasterlist').find('.btn-success').html(), groupidlist: selectgroupidlist } window.location = "/EmergencyContact/ExportExcel?post=" + JSON.stringify(send_data); } } </script> }