# 群組人員管理

## 畫面檔：
  ~/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. 選擇人員後點擊「加入群組」或從成員列表中「移除群組」