[Frontend][帳號管理] 帳號管理新增程序串接 驗證程序建置

Frontend/_accountManagement.html

@@ -35,9 +35,8 @@
                             <div class="col-auto"> <a href="#" class="btn btn-info">搜尋</a> </div>
                         </div>
                         <div class="frame-wrap">
-                            <div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#modal-center-add">+ 新增</a> </div>
+                            <div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#accManModal">+ 新增</a> </div>
                             <table id="accManTable" class="table table-bordered table-striped text-center m-0 w-100">
-                                
                             </table>
                         </div>
                     </div>
@@ -54,7 +53,6 @@
                         <div class="frame-wrap">
                             <div class="mb-3"> <a href="#" class="btn btn-success">+ 新增</a> </div>
                             <table id="rolManTable" class="table table-bordered table-striped text-center m-0 w-100">
-                                
                             </table>
                         </div>
                     </div>
@@ -64,7 +62,6 @@
                                 <div class="form-group">
                                     <label class="form-label" for="roleSel">角色</label>
                                     <select class="form-control select2bs4" id="roleSel">
-                                        
                                     </select>
                                 </div>
                             </div>
@@ -72,7 +69,6 @@
                         <div class="frame-wrap">
                             <div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#modal-center-users">+ 加入可用功能</a> </div>
                             <table id="rolAuthTable" class="table table-bordered table-striped text-center m-0 w-100">
-                               
                             </table>
                         </div>
                     </div>
@@ -81,7 +77,197 @@
         </div>
     </div>
 </main>
+<!-- Modal center Add -->
+<div class="modal fade" id="accManModal" 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="accManForm">
+                <div class="modal-body">
+                    <div class="row">
+                        <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" placeholder="Email">
+                            </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="inpAcc">帳號</label>
+                                <input type="text" id="inpAcc" name="inpAcc" class="form-control">
+                                <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" id="inpSameEmail" name="inpSameEmail" />
+                                    <label class="custom-control-label text-white" for="inpSameEmail">與email相同</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label" for="selRolAuth">角色權限</label>
+                                <select class="form-control" id="selRolAuth" name="selRolAuth">
+                                </select>
+                            </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>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
+                    <button type="submit" class="btn btn-primary" id="accManSendBtn" e-prevent>儲存</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
 
+<!-- Modal center 設備權限 -->
+<div class="modal fade" id="modal-center-cog" 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>0220100010</td>
+                            <td>電錶</td>
+                            <td>
+                                <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
+                                    <label class="custom-control-label" for="defaultUnchecked">啟用</label>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>0220100010</td>
+                            <td>照明設備</td>
+                            <td>
+                                <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
+                                    <label class="custom-control-label" for="defaultUnchecked">啟用</label>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>0220100010</td>
+                            <td>環境感測</td>
+                            <td>
+                                <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
+                                    <label class="custom-control-label" for="defaultUnchecked">啟用</label>
+                                </div>
+                            </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>
+
+<!-- Modal center 設備權限 -->
+<div class="modal fade" id="modal-center-users" 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>
     var rolAuthTable = null;
     $(function () {
@@ -147,7 +333,7 @@
                 "data": "userinfo_guid",
                 "render": function (data, type, row, meta) {
 
-                    let btnDiv = creDiv(["row", "m-0","justify-content-center"], { "style": "gap:10px" });
+                    let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
                     btnDiv.append(creBtnHtml("修改", "accManEdiBtn" + data, null, ["btn", "btn-info"]));
                     btnDiv.append(creBtnHtml("刪除", "accManDelBtn" + data, null, ["btn", "btn-danger"]));
                     return btnDiv.outerHtml();
@@ -208,7 +394,7 @@
         let ajaxObj = {
             url: baseApiUrl + "/User/RoleAuthList",
             method: "POST",
-            data: { SelectedRoleId :"882b7e2c-1205-4d7c-81dc-818b8d1c1b33"},
+            data: { SelectedRoleId: "882b7e2c-1205-4d7c-81dc-818b8d1c1b33" },
         }
         let tag = "#rolAuthTable";
 
@@ -273,7 +459,7 @@
 
         let url = baseApiUrl + "/User/RoleManagerList";
         let sendData = {
-            post:1,
+            post: 1,
         };
         objSendData.Data = sendData;
         ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
@@ -281,8 +467,10 @@
 
             } else {
                 $("#roleSel").html();
+                $("#selRolAuth").html();
                 $.each(res.data, (index, roleObj) => {
                     $("#roleSel").append(creOption(roleObj.full_name, roleObj.role_guid));
+                    $("#selRolAuth").append(creOption(roleObj.full_name, roleObj.role_guid));
                 })
             }
         }, null, "POST").send();
@@ -293,5 +481,38 @@
             let roleGuid = $(this).val();
             dtAjaxResetSendData(rolAuthTable, { SelectedRoleId: roleGuid })
         })
+
+        onEvent("click", "#accManSendBtn", function () {
+            let form = $("#accManForm");
+            $(form).validate({
+                rules: {
+                    inpEmail: { required: true, email: true },
+                    inpName: { required: true, minlength: 2, dbLimit: 50 },
+                    inpAcc: { required: true, email: true, dbLimit: 50 },
+                    selRolAuth: { required: true },
+                    inpPhone: { phone: true },
+                }
+            });
+            if ($(form).valid()) {
+                let url = baseApiUrl + "/User/SaveUser";
+                let sendData = {
+                    Id:0,
+                    Account:$("#inpAcc").val(),
+                    Name: $("#inpName").val(),
+                    Email: $("#inpEmail").val(),
+                    Phone: $("#inpPhone").val(),
+                    RoleId: $("#selRolAuth").val(),
+                };
+                objSendData.Data = sendData;
+                ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+
+                    } else {
+                        toast_ok(common.AddSuc);
+                        $("#accManModal").modal("hide");
+                    }
+                }, null, "POST").send();
+            }
+        })
     }
 </script>

Frontend/css/site.css

@@ -1,20 +1,4 @@
 
-.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header {
-    background: rgba(0, 0, 0, 0.03);
-}
-
-.btn-sm-2 {
-    padding: 2px 19px;
-}
-
-.table.dataTable td {
-    word-break:break-all;
-}
-
-/* ================================================================ */
-/*                             單一方法                             */
-/* ================================================================ */
-
 :root {
     --yt-main-gray: #c2c7d0;
     --yt-main-black: #212529;
@@ -31,6 +15,28 @@
     --yt-yellow-1:#ffc902;
 }
 
+
+.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header {
+    background: rgba(0, 0, 0, 0.03);
+}
+
+.btn-sm-2 {
+    padding: 2px 19px;
+}
+
+.table.dataTable td {
+    word-break:break-all;
+}
+
+label[id$='-error'].error {
+    color: var(--yt-red-2);
+}
+
+/* ================================================================ */
+/*                             單一方法                             */
+/* ================================================================ */
+
+
 /* cursor */
 .cur-def { cursor:default !important;}
 .cur-poi { cursor:pointer !important;}

Frontend/index.html

@@ -2055,6 +2055,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
     <script src="lib/datagrid/datatables/datatables.bundle.js"></script>
     <script src="lib/notifications/toastr/toastr.min.js"></script>
+    <script src="lib/jquery-validation/dist/jquery.validate.min.js"></script>
+    <script src="lib/jquery-validation/dist/localization/messages_zh_TW.js"></script>
     <script src="js/yourteam/yourteam.ajax.class.js"></script>
     <script src="js/yourteam/yourteam.jquery.datatables.js"></script>
     <script src="js/yourteam/yourteam.utility.class.js"></script>

Frontend/js/init.js

@@ -6,6 +6,15 @@ var varApiUrl = "/api/";  //API路徑
 var varPathImg = "/Upload/Images/";
 var varPathFile = "/Upload/Files/";
 var statusArr = { 1: "啟用", 0: "未啟用", 9: "刪除" };
+var common = {
+    AddSuc:"新增成功",
+    EditSuc:"編輯成功",
+    DelSuc:"刪除成功",
+    AddErr:"新增失敗，",
+    EditErr:"編輯失敗，",
+    DelErr: "刪除失敗，",
+    SysErr: "系統內部發生錯誤，請聯繫系統管理員"
+}
 var objSendData = { Data: null };
 
 //重新轉址 for Niagara4

Frontend/js/site.js

@@ -19,6 +19,30 @@ $.fn.outerHtml = function () {
     return $(this).prop("outerHTML");
 }
 
+/** 
+ * jquery validate 初始設定 | 輸出含原元素 html
+ */
+$.validator.setDefaults({
+    onkeyup: function (element, event) {
+        $(element).valid();
+    },
+    //errorPlacement: function (error, element) {
+    //    if (element.hasClass("removedTitle"))
+    //        error.insertAfter(element.next("img"));
+    //    else
+    //        error.insertAfter(element);
+    //}
+});
+
+jQuery.validator.addMethod("phone", function (phoneNumber, element) {
+    phoneNumber = phoneNumber.replace(/\s+/g, "");
+    return phoneNumber.match(/^[0-9]{9,10}$/);
+}, "請輸入正確電話號碼格式");
+
+jQuery.validator.addMethod("dbLimit", function (value, element,param) {
+    return value.length > param;
+}, "超出輸入限制");
+
 /**
  * 設置 bootstrap dropdown 為下拉選單 
  * @param {any} menuEle .dropdown-menu element
@@ -41,6 +65,10 @@ function setDropdownItem(menuEle) {
     })
 }
 
+onEvent("click", "[e-prevent]", function (e) {
+    e.preventDefault();
+})
+
 /**
  * 預設設備圖像
  * @param {any} obj
@@ -55,6 +83,7 @@ function dtAjaxResetSendData(table,sendData) {
         d = sendData;
         return JSON.stringify(d)
     }
+    table.ajax.reload();
 }
 
 /**
@@ -102,6 +131,6 @@ function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text
 }
 
 function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
-    attr = value != null ? attr.value = value : attr;
+    value != null ? attr.value = value : "";
     return creEle("option", text, id, name, cls, data, attr);
 }

Frontend/login.html

@@ -177,8 +177,6 @@
                 contentType:"application/json; charset=UTF-8",
                 dataType: 'json',
                 success: function (rel) {
-                    console.log(rel)
-                    
                     //rel = JSON.stringify(rel);
                     if (rel.code != "0000") {
                         toast_error(rel.msg || "系統內部發生錯誤，請聯絡系統管理員");
@@ -192,7 +190,7 @@
                     }
                 },
                 error: function (xhr, textStatus, thrownError) {
-                    alert(textStatus);
+                    toast_error(textStatus);
                 }
             });
         }