thinkyu/報到系統/DOC/群組人員管理.md

群組人員管理

畫面檔：

~/Forms/RoleManage.aspx

畫面排列：

左側 1/3：群組清單區域

• 顯示所有系統群組以及說明的列表。 右側 2/3：人員清單區域
• 左半部：該群組下所有成員列表（群組成員）
• 右半部：人員查詢區域
  • 查詢條件：員工編號或姓名
  • 查詢結果：符合條件的員工列表（可加入群組） 功能說明：
• 從右側人員查詢結果中選擇成員，點擊「加入群組」按鈕，將該成員加入左側所選群組中。
• 從左側群組成員列表中選擇成員，點擊「移除群組」按鈕，將該成員從群組中移除。
• 支援多選成員進行批次加入或移除操作。

資料來源：

• 群組清單及說明：程式內定義的 GroupList 常數陣列（位置：RoleManage.aspx 裡 Vue data 的 GroupList，內容我會補充上去） GroupList 結構：[{ id: '群組代碼', name: '群組名稱', description: '群組說明' }, ...]
• 群組成員列表：來自 DAC_BWEH.SelectByGroupId，DAC_BWEH 為群組與員工對應表，儲存哪些員工屬於哪些群組，查詢結果的 Name 是員工姓名，Value 是員工編號。
• 人員查詢，來自 Models.DAC_BPSN.Select，查詢結果的 Name 是員工姓名，Value 是員工編號。

前端程式碼：

• 使用 Vue.js 實現動態資料綁定與操作。
• 不使用 Server control

後端程式碼：

• 使用 WebService 實現非同步資料交換。
• 提供 API 端點處理成員搜尋、成員加入與移除群組的請求。

WebService 端點：Services/RoleManageService.asmx

• SearchEmployees(string keyword)：搜尋員工，關鍵字可為員工編號或姓名 回傳：BaseResponse（Success, Message, Data: NameValueList, TotalCount）

• GetGroupMembers(string groupID)：取得群組成員列表 回傳：BaseResponse（Success, Message, Data: NameValueList, TotalCount）

• AddMemberToGroup(string groupID, string[] employeeIDs)：將成員加入群組 回傳：BaseResponse（Success, Message, TotalCount: 成功加入筆數）

• RemoveMemberFromGroup(string groupID, string[] employeeIDs)：將成員從群組移除 回傳：BaseResponse（Success, Message, TotalCount: 成功移除筆數）

操作流程：

1. 從左側群組清單中選擇一個群組
2. 右側自動載入該群組的現有成員
3. 使用右側查詢區域搜尋要加入的人員
4. 選擇人員後點擊「加入群組」或從成員列表中「移除群組」