[Frontend][帳號管理] 帳號管理新增程序串接 驗證程序建置
This commit is contained in:
parent
96e5099833
commit
40b5d4f99f
@ -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 () {
|
||||
@ -146,8 +332,8 @@
|
||||
"title": "功能",
|
||||
"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";
|
||||
|
||||
@ -270,10 +456,10 @@
|
||||
}
|
||||
|
||||
function getRoleSel() {
|
||||
|
||||
|
||||
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>
|
||||
|
||||
@ -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;}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user