ibms-dome/FrontendWebApi/Views/EmergencyContact/Index.cshtml

@{
    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": "/api/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;
                        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>
}