FIC_Solar/SolarPower/Views/Company/Index.cshtml

@{
    ViewData["MainNum"] = "6";
    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">@ViewData["Title"]</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="subheader">
    <h1 class="subheader-title">
        <i class='subheader-icon fal fa-globe'></i> @ViewData["Title"]
    </h1>
</div>
<!-- Your main content goes below here: -->
<div class="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-hdr">
                <div class="panel-hdr color-warning-800">
                    <h2></h2>
                </div>
                <div class="panel-toolbar ml-2">
                    <div class="d-flex position-relative ml-auto" style="max-width: 8rem;">
                        <div class="form-group">
                            <select class="form-control" id="company_select">
                                <option value="0" selected>全部</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="panel-toolbar ml-2">
                    <div class="d-flex position-relative ml-auto" style="max-width: 8rem;">
                        <input type="text" id="company_name" class="form-control form-control-sm" placeholder="名稱" autocomplete="off">
                    </div>
                </div>
                <div class="panel-toolbar ml-2">
                    <div class="d-flex position-relative ml-auto" style="max-width: 8rem;">
                        <input type="text" id="company_phone" class="form-control form-control-sm" placeholder="電話" autocomplete="off">
                    </div>
                </div>
                <div class="panel-toolbar ml-2">
                    <div class="d-flex position-relative ml-auto" style="max-width: 8rem;">
                        <input type="text" id="company_taxIDNumber" class="form-control form-control-sm" placeholder="統編" autocomplete="off">
                    </div>
                </div>
                <button type="button" class="btn btn-primary btn-sm waves-effect waves-themed ml-2" onclick="SearchCompany()">搜尋</button>

            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <button type="button" class="btn btn-success waves-effect waves-themed mb-3" onclick="AddCompany()">
                        <span class="fal fa-plus mr-1"></span>
                        新增
                    </button>
                    <div class="frame-wrap">
                        <table id="company_table" class="table table-bordered table-hover m-0 text-center">
                            <thead class="thead-themed">
                                <tr>
                                    <th>#</th>
                                    <th>logo</th>
                                    <th>名稱</th>
                                    <th>統編</th>
                                    <th>電話</th>
                                    <th>地址</th>
                                    <th>註冊/上限人數</th>
                                    <th>電站數量</th>
                                    <th>建立時間</th>
                                    <th>功能</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--公司資料-->
<div class="modal fade" id="company-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" 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">
                <form class="company-form" id="company-form">
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label class="form-label" for="company_name_modal">名稱</label>
                            <input type="text" id="company_name_modal" name="company_name_modal" class="form-control">
                        </div>

                        <div class="form-group col-lg-6">
                            <label class="form-label" for="company_taxIDNumber_modal">統編</label>
                            <input type="text" id="company_taxIDNumber_modal" name="company_taxIDNumber_modal" class="form-control">
                        </div>

                        <div class="form-group col-lg-6">
                            <label class="form-label" for="company_phone_modal">電話</label>
                            <input type="text" id="company_phone_modal" name="company_phone_modal" class="form-control">
                        </div>

                        <div class="form-group col-lg-6">
                            <label class="form-label" for="company_address_modal">地址</label>
                            <input type="text" id="company_address_modal" name="company_address_modal" class="form-control">
                        </div>

                        <div class="form-group col-lg-6">
                            <label class="form-label" for="company_registerUpperLimit_modal">註冊上限人數</label>
                            <input type="number" id="company_registerUpperLimit_modal" name="company_registerUpperLimit_modal" class="form-control" min="0" oninput="value=value.replace(/\D+/g, '')">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="SaveComapny()">確定</button>
            </div>
        </div>
    </div>
</div>
<!--/.公司資料-->

<div class="modal fade" id="company-auth-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" 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 text-center">
                    <tbody>
                        <tr>
                            <td>選擇</td>
                            <td>編號</td>
                            <td>功能大項</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>

@section Scripts{
    <script>
        var companyTable;
        var selected_id = 0;

        $(function () {
            //#region 預先載入公司下拉式選單select_option
            var url_company_select_option = "/Company/GetCompanySelectOptionList";
            $.get(url_company_select_option, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                $("#company_select").empty();
                $("#company_select").append($("<option />").val(0).text("全部"));

                $.each(rel.data, function (index, val) {
                    $("#company_select").append($("<option />").val(val.value).text(val.text));
                });

                //預設查詢第一個
                $("#company_select").val($("#company_select option:first").val()).trigger('change');
            });
            //#endregion

            //#region 公司管理列表 DataTable
            companyTable = $("#company_table").DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "order": [[8, "desc"]],
                "columns": [{
                    "data": "id"
                }, {
                    "data": "logo"
                }, {
                    "data": "name"
                }, {
                    "data": "taxIDNumber"
                }, {
                    "data": "phone"
                }, {
                    "data": "address"
                }, {
                    "data": "registerRatio"
                }, {
                    "data": "spStationAmount"
                }, {
                    "data": "createdAt"
                }, {
                    "data": "function",
                }
                ],
                "language": {
                    "emptyTable": "無資料...",
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-id', data.id);
                },
                "ajax": {
                    "url": "/Company/CompanyList",
                    "type": "POST",
                    "data": function (d) {
                        d.SelectedCompanyId = $('#system_admin_account').val();
                        d.Name = $('#company_name').val();
                        d.Phone = $('#company_phone').val();
                        d.TaxIDNumber = $('#company_taxIDNumber').val();
                    },
                    "dataSrc": function (rel) {
                        if (rel.data.code == "9999") {
                            toast_error(rel.data.msg);
                            return;
                        }

                        data = rel.data.data;

                        if (data == null || data.length == 0) {
                            this.data = [];
                        }

                        return data;
                    }
                }
            });
            //#endregion
        });

        //#region 搜尋公司列表
        function SearchCompany() {
            companyTable.ajax.reload();
        }
        //#endregion

        //#region 新增系統管理員
        function AddCompany() {

            selected_id = 0;
            $("#company-modal .modal-title").html("公司基本資料 - 新增");
            $("#company-form").trigger("reset");

            $("#company-modal").modal();
        }
        //#endregion

        //#region 編輯公司資料
        $('#company_table').on("click", "button.edit-btn", function () {

            $("#company-modal .modal-title").html("公司基本資料 - 編輯");

            selected_id = $(this).parents('tr').attr('data-id');

            //取得單一公司基本資料
            var url = "/Company/GetOneCompany/";

            var send_data = {
                id: selected_id
            }

            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                $("#company_name_modal").val(rel.data.name);
                $("#company_taxIDNumber_modal").val(rel.data.taxIDNumber);
                $("#company_phone_modal").val(rel.data.phone);
                $("#company_address_modal").val(rel.data.address);
                $("#company_registerUpperLimit_modal").val(rel.data.registerUpperLimit);

                $("#company-modal").modal();
            }, 'json');

        });
        //#endregion

        //#region 公司資料表單驗證
        $("#company-form").validate({
            rules: {
                company_taxIDNumber_modal: {
                    required: true,
                },
            },
        });
        //#endregion

        //#region 儲存公司資料
        function SaveComapny() {

            if ($("#company-form").valid()) {
                var url = "/Company/SaveCompany";

                var send_data = {
                    Id: selected_id,
                    Name: $("#company_name_modal").val(),
                    TaxIDNumber: $("#company_taxIDNumber_modal").val(),
                    Phone: $("#company_phone_modal").val(),
                    Address: $("#company_address_modal").val(),
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                        return;
                    }
                    else if (rel.code == "9998") {
                        toast_error(rel.msg);

                        return;
                    }

                    toast_ok(rel.msg);
                    $('#company-modal').modal('hide');

                    companyTable.ajax.reload();
                }, 'json');
            }
        }
        //#endregion

        //#region 刪除公司
        $('#company_table').on("click", "button.del-btn", function () {

            selected_id = $(this).parents('tr').attr('data-id');

            //取得單一系統管理員
            var url = "/Company/DeleteOneCompany/";

            var send_data = {
                Id: selected_id
            }

            $.post(url, send_data, function (rel) {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                    return;
                }
                else if (rel.code == "9998") {
                    toast_error(rel.msg);
                    return;
                }

                toast_ok(rel.msg);
                companyTable.ajax.reload();
            }, 'json');

        });
        //#endregion
    </script>
}