137 lines
6.7 KiB
Plaintext
137 lines
6.7 KiB
Plaintext
<%@ Page Title="群組人員管理" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RoleManage.aspx.cs" Inherits="報到系統.Forms.RoleManage" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
|
|
<link href="<%= ResolveUrlWithSysVer("~/Content/RoleManage.css") %>" rel="stylesheet" type="text/css" />
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
|
|
<div id="roleManageApp" class="page-container">
|
|
<div class="page-header">
|
|
<h1 class="page-title">權限群組管理</h1>
|
|
<p class="page-description">管理系統群組及其成員，支援批次新增或移除</p>
|
|
</div>
|
|
|
|
<div class="role-manage-layout">
|
|
<!-- 左側：群組清單 -->
|
|
<div class="group-panel">
|
|
<h2 class="section-title">群組清單</h2>
|
|
<div class="group-item"
|
|
v-for="group in groupList"
|
|
:key="group.id"
|
|
:class="{ active: selectedGroup && selectedGroup.id === group.id }"
|
|
@click="selectGroup(group)">
|
|
<div class="group-name">{{ group.name }}</div>
|
|
<div class="group-description">{{ group.description }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右側：人員清單 -->
|
|
<div class="member-panel">
|
|
<!-- 群組成員列表 -->
|
|
<div class="member-list-section">
|
|
<h2 class="section-title">
|
|
群組成員
|
|
<span v-if="selectedGroup"> ({{ selectedGroup.name }})</span>
|
|
</h2>
|
|
|
|
<div v-if="!selectedGroup" class="empty-message">
|
|
請先選擇一個群組
|
|
</div>
|
|
|
|
<div v-else-if="loadingMembers" class="loading-message">
|
|
載入中...
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div class="member-list">
|
|
<div v-if="groupMembers.length === 0" class="empty-message">
|
|
此群組目前沒有成員
|
|
</div>
|
|
<div v-else
|
|
v-for="member in groupMembers"
|
|
:key="member.Value"
|
|
class="member-item"
|
|
:class="{ selected: isSelectedMember(member.Value) }"
|
|
@click="toggleMemberSelection(member.Value)">
|
|
<input type="checkbox"
|
|
class="member-checkbox"
|
|
:checked="isSelectedMember(member.Value)"
|
|
@click.stop="toggleMemberSelection(member.Value)">
|
|
<div class="member-info">
|
|
<span class="member-name">{{ member.Name }}</span>
|
|
<span class="member-id">({{ member.Value }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn btn-secondary"
|
|
:disabled="selectedMembers.length === 0"
|
|
@click="removeMembersFromGroup">
|
|
移除群組 ({{ selectedMembers.length }})
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 人員查詢 -->
|
|
<div class="member-search-section">
|
|
<h2 class="section-title">人員查詢</h2>
|
|
|
|
<div class="search-box">
|
|
<input type="text"
|
|
v-model="searchKeyword"
|
|
class="search-input"
|
|
placeholder="輸入員工編號或姓名搜尋..."
|
|
@keyup.enter="searchEmployees">
|
|
<button class="btn btn-primary"
|
|
style="margin-top: 10px; width: 100%;"
|
|
@click="searchEmployees">
|
|
搜尋
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="loadingSearch" class="loading-message">
|
|
搜尋中...
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div class="member-list">
|
|
<div v-if="searchResults.length === 0" class="empty-message">
|
|
{{ searchKeyword ? '查無結果' : '請輸入關鍵字進行搜尋' }}
|
|
</div>
|
|
<div v-else
|
|
v-for="employee in searchResults"
|
|
:key="employee.Value"
|
|
class="member-item"
|
|
:class="{ selected: isSelectedEmployee(employee.Value) }"
|
|
@click="toggleEmployeeSelection(employee.Value)">
|
|
<input type="checkbox"
|
|
class="member-checkbox"
|
|
:checked="isSelectedEmployee(employee.Value)"
|
|
@click.stop="toggleEmployeeSelection(employee.Value)">
|
|
<div class="member-info">
|
|
<span class="member-name">{{ employee.Name }}</span>
|
|
<span class="member-id">({{ employee.Value }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary"
|
|
:disabled="!selectedGroup || selectedEmployees.length === 0"
|
|
@click="addEmployeesToGroup">
|
|
加入群組 ({{ selectedEmployees.length }})
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">
|
|
<script src="<%= ResolveUrlWithSysVer("~/Scripts/RoleManage.js") %>"></script>
|
|
</asp:Content>
|