steve07s
/
Authorization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
							<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!doctype html>
<html class="fixed sidebar-left-collapsed">

<head>
	<!-- Basic -->
	<meta charset="UTF-8">
	<title>帳號權限管理系統</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">
	<meta name="author" content="JSOFT.net">
	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<!-- Web Fonts  -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

	<!-- Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />

	<!-- Specific Page Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/select2/select2.css" />
	<link rel="stylesheet" href="assets/vendor/jquery-datatables-bs3/assets/css/datatables.css" />

	<!-- Theme CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme.css" />

	<!-- Skin CSS -->
	<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />

	<!-- Theme Custom CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">

	<!-- Role Custom CSS -->
	<link rel="stylesheet" href="assets/stylesheets/role.css" />

	<!-- Head Libs -->
	<script src="assets/vendor/modernizr/modernizr.js"></script>
	<script src="assets/vendor/jquery/jquery.js"></script>


	<!-- Icon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico" />

	<!-- vue3 -->
	<script src="https://unpkg.com/vue@next"></script>
	<script src="./script/js/global.js"></script>
	<script src="/Common/script/js/user-image.js"></script>
	<style>
		td {
			font-size: 20px;
			color: black;
		}

		select {
			font-size: 12px;
			color: black;
		}

		.right {
			position: absolute;
			right: 8px;
		}
	</style>

	<script type="application/javascript">
		var roles;
		var users;
		var groups;
		var groupDropdown;
		var checkManager = 0;
		var table;
	</script>
</head>

<body>
	<section id="outFrame">
		<!-- start: header -->
		<header-menu></header-menu>
		<!-- end: header -->
		<div>
			<!-- start: sidebar -->
			<side-bar></side-bar>
			<!-- end: sidebar -->
			<section role="main" class="content-body">
				<header class="page-header">
					<h2>{{pageHeader}}</h2>
				</header>
			</section>

		</div>
	</section>

	<section role="main" id="content" class="content-body" style="padding-top: 6vh;">
		<section class="panel">
			<header class="panel-heading">
				<div class="panel-actions">
					<a href="#" class="fa fa-caret-down"></a>
					<a href="#" class="fa fa-times"></a>
				</div>
				<h2 id="testID" class="panel-title">所有系統</h2>
			</header>
			<div class="panel-body">
				<table class="table table-bordered table-striped mb-none" id="datatable">
					<thead>
						<tr>
							<th>員工編號</th>
							<th>使用者帳號</th>
							<th>使用者名稱</th>
							<th>所屬部門</th>
							<th>使用者權限(點擊以刪除權限)</th>
						</tr>
					</thead>
					<tbody id="table-data">

					</tbody>
				</table>
			</div>
		</section>

	</section>


	<script>
		vm.mount('#outFrame');
		$(function() {
			getGroup();
			getDeptUser();
		});

		function getDeptUser() {


			$.ajax({
				url: "./script/php/API/get_dept_user.php",
				type: "POST",
				dataType: "json"
			}).done(function(result) {
				roles = result.permissions;
				users = result.users;
				users.forEach(function(data) {

					let btn = getPermissions(data.GroupID, data.GroupName, data.UserID);
					$('#table-data').append(`<tr>
						<td>${data.UserID}</td>
						<td>${data.Account}</td>
						<td>${data.UserName}</td>
						<td>${data.DepartmentID}</td>
						<td id="${data.UserID}">
							<div class="btn-group">
								<button type="button" class="mb-xs mt-xs mr-xs btn btn-default dropdown-toggle" data-toggle="dropdown">新增身分 <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" style="cursor: default;">
									${groupDropdown}
								</ul>
							</div>
							${btn}
						</td>
					</tr>`);

				});
			}).error(function(error) {
				console.log(error);
			}).complete(function(e) {
				initTable();
			});
		}

		function getGroup() {
			$.ajax({
				url: "./script/php/API/get_group.php",
				type: "POST",
				dataType: "json"
			}).done(function(result) {
				groups = result;
				groupDropdown = '';
				groups.forEach(function(group) {
					groupDropdown += `<li class="li-${group.GroupID}"><a groupID="${group.GroupID}" class="groupDropdown" >${group.GroupName}</a></li>`;
				});
			}).error(function(error) {
				console.log(error);
			});
		}

		function getPermissions(groupIDs, groupNames, userID) {
			var result = "";

			groupIDs.forEach(function(groupID, index) {
				result += `<button id="btn-${userID}-${groupID}" onclick="delPermission('${userID}','${groupID}');" class="btn btn-${groupID}">${groupNames[index]}</button>  `;
				if (groupID == 'Manager') {
					checkManager++;
				}
			});
			return result;
		}

		function addPermission(groupID, groupName, userID) {
			var result = "";
			user = users.find(user => user.UserID == userID);
			if (!user.GroupName.includes(groupName)) {
				addPermissionDB(user.UserID, groupID);
				result += `<button id="btn-${userID}-${groupID}" onclick="delPermission('${userID}','${groupID}');" class="btn btn-${groupID}">${groupName}</button>  `;
				user.GroupName.push(groupName);
				user.GroupID.push(groupID);
				return result;
			} else {
				return result;
			}

		}

		function addPermissionDB(userID, groupID) {
			$.ajax({
				url: "./script/php/API/insert_role.php",
				type: "POST",
				dataType: "text",
				data: {
					UserID: userID,
					GroupID: groupID,
				}
			}).done(function(result) {
				if (result == 'success' && groupID == 'Manager') {
					checkManager++;
					alert('身分新增成功!');
				} else if (result == 'success') {
					alert('身分新增成功!');
				} else {
					console.log(result);
				}
			}).error(function(error) {
				console.log(error);
			});
		}

		function delPermission(userID, groupID) {
			if (groupID != 'User' && groupID != 'Guest') {
				if (groupID == 'Manager') {
					if (checkManager > 1) {
						delPermissionDB(userID, groupID);
						$(`#btn-${userID}-${groupID}`).remove();
					} else {
						alert('部門至少要有一名管理員!');
					}
				} else {
					delPermissionDB(userID, groupID);
					$(`#btn-${userID}-${groupID}`).remove();
				}

			} else {
				alert('身分最低為一般用戶!請勿刪除!');
			}

		}

		function delPermissionDB(userID, groupID) {
			$.ajax({
				url: "./script/php/API/delete_role.php",
				type: "POST",
				dataType: "text",
				data: {
					UserID: userID,
					GroupID: groupID,
				}
			}).done(function(result) {
				if (result == 'success' && groupID == 'Manager') {
					checkManager--;
					alert('身分刪除成功!');
				} else if (result == 'success') {
					alert('身分刪除成功!');
				} else {
					console.log(result);
				}
			}).error(function(error) {
				console.log(error);
			});
		}

		function initTable() {
			table = $('#datatable').DataTable({
				bProcessing: true,
				responsive: true,
				"searching": true,
				"pageLength": 10,
				"language": {
					"processing": "處理中...",
					"loadingRecords": "載入中...",
					"lengthMenu": "顯示 _MENU_ 項結果",
					"zeroRecords": "沒有符合的結果或是沒有資料",
					"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
					"infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
					"infoFiltered": "(從 _MAX_ 項結果中過濾)",
					"infoPostFix": "",
					"search": "",
					"paginate": {
						"first": '<i class="fa fa-step-backward"></i>',
						"previous": '<i class="fa fa-backward"></i>',
						"next": '<i class="fa fa-forward"></i>',
						"last": '<i class="fa fa-step-forward"></i>'
					},
					"aria": {
						"sortAscending": ": 升冪排列",
						"sortDescending": ": 降冪排列"
					}
				},
			});
			$('body .dropdown-toggle').dropdown();
			$("body").on('click', '.groupDropdown', function(e) {
				let groupName = $(this).text();
				let groupID = $(this).attr('groupID');
				let userAccount = $(this).closest("td").attr('id');
				console.log($(this))
				$(this).closest("td").append(addPermission(groupID, groupName, userAccount));
			})
		}
	</script>


	<!-- Vendor -->
	<script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
	<script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
	<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
	<script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

	<!-- Specific Page Vendor -->
	<script src="assets/vendor/select2/select2.js"></script>
	<script src="assets/vendor/jquery-datatables/media/js/jquery.dataTables.js"></script>
	<script src="assets/vendor/jquery-datatables/extras/TableTools/js/dataTables.tableTools.min.js"></script>
	<script src="assets/vendor/jquery-datatables-bs3/assets/js/datatables.js"></script>

	<!-- Theme Base, Components and Settings -->
	<script src="assets/javascripts/theme.js"></script>

	<!-- Theme Custom -->
	<script src="assets/javascripts/theme.custom.js"></script>

	<!-- Theme Initialization Files -->
	<script src="assets/javascripts/theme.init.js"></script>


	<!-- Examples -->
	<script src="assets/javascripts/tables/examples.datatables.default.js"></script>
	<script src="assets/javascripts/tables/examples.datatables.row.with.details.js"></script>
	<script src="assets/javascripts/tables/examples.datatables.tabletools.js"></script>


</body>

</html>