thinkyu/報到系統/Scripts/RoleManage.js

// ========================================
// 群組人員管理 - Vue.js 應用
// 檔案位置：Scripts/RoleManage.js
// ========================================

(function() {
    'use strict';

    // 等待 DOM 載入完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initRoleManageApp);
    } else {
        initRoleManageApp();
    }

    function initRoleManageApp() {
        new Vue({
            el: '#roleManageApp',
            data: {
                groupList: [
                    { id: 'SG01', name: '系統管理群組', description: '擁有系統最高權限，可管理所有功能' },
                    { id: 'SG02', name: '客戶管理群組', description: '可管理活動及參加人員' },
                    { id: 'SG03', name: '現場工作群組', description: '可進行現場報到作業' },
                    { id: 'SG04', name: '查詢群組', description: '僅可查詢報到資料' }
                ],
                selectedGroup: null,
                groupMembers: [],
                searchKeyword: '',
                searchResults: [],
                selectedMembers: [],
                selectedEmployees: [],
                loadingMembers: false,
                loadingSearch: false
            },
            mounted: function() {
                console.log('[RoleManage.js] Vue instance mounted');
                if (this.groupList.length > 0) {
                    this.selectGroup(this.groupList[0]);
                }
            },
            methods: {
                selectGroup: async function(group) {
                    this.selectedGroup = group;
                    this.selectedMembers = [];
                    await this.loadGroupMembers();
                },

                loadGroupMembers: async function() {
                    if (!this.selectedGroup) return;

                    this.loadingMembers = true;
                    try {
                        var response = await this.$api.call('RoleManageService', 'GetGroupMembers', {
                            groupID: this.selectedGroup.id
                        });

                        if (response.Success) {
                            this.groupMembers = response.Data || [];
                            console.log('[RoleManage] 載入群組成員: ' + this.groupMembers.length + ' 位');
                        } else {
                            this.$message.error(response.Message);
                            this.groupMembers = [];
                        }
                    } catch (error) {
                        console.error('[RoleManage] 載入群組成員失敗:', error);
                        this.$message.error('載入群組成員失敗');
                        this.groupMembers = [];
                    } finally {
                        this.loadingMembers = false;
                    }
                },

                searchEmployees: async function() {
                    if (!this.searchKeyword.trim()) {
                        this.$message.warning('請輸入搜尋關鍵字');
                        return;
                    }

                    this.loadingSearch = true;
                    this.selectedEmployees = [];
                    try {
                        var response = await this.$api.call('RoleManageService', 'SearchEmployees', {
                            keyword: this.searchKeyword
                        });

                        if (response.Success) {
                            this.searchResults = response.Data || [];
                            console.log('[RoleManage] 搜尋結果: ' + this.searchResults.length + ' 位');
                        } else {
                            this.$message.error(response.Message);
                            this.searchResults = [];
                        }
                    } catch (error) {
                        console.error('[RoleManage] 搜尋員工失敗:', error);
                        this.$message.error('搜尋員工失敗');
                        this.searchResults = [];
                    } finally {
                        this.loadingSearch = false;
                    }
                },

                addEmployeesToGroup: async function() {
                    if (!this.selectedGroup) {
                        this.$message.warning('請先選擇群組');
                        return;
                    }

                    if (this.selectedEmployees.length === 0) {
                        this.$message.warning('請選擇要加入的員工');
                        return;
                    }

                    try {
                        var response = await this.$api.call('RoleManageService', 'AddMemberToGroup', {
                            groupID: this.selectedGroup.id,
                            employeeIDs: this.selectedEmployees
                        });

                        if (response.Success) {
                            this.$message.success(response.Message);
                            this.selectedEmployees = [];
                            await this.loadGroupMembers();
                            await this.searchEmployees();
                        } else {
                            this.$message.error(response.Message);
                        }
                    } catch (error) {
                        console.error('[RoleManage] 加入群組失敗:', error);
                        this.$message.error('加入群組失敗');
                    }
                },

                removeMembersFromGroup: async function() {
                    if (!this.selectedGroup) {
                        this.$message.warning('請先選擇群組');
                        return;
                    }

                    if (this.selectedMembers.length === 0) {
                        this.$message.warning('請選擇要移除的成員');
                        return;
                    }

                    if (!confirm('確定要從「' + this.selectedGroup.name + '」移除 ' + this.selectedMembers.length + ' 位成員嗎？')) {
                        return;
                    }

                    try {
                        var response = await this.$api.call('RoleManageService', 'RemoveMemberFromGroup', {
                            groupID: this.selectedGroup.id,
                            employeeIDs: this.selectedMembers
                        });

                        if (response.Success) {
                            this.$message.success(response.Message);
                            this.selectedMembers = [];
                            await this.loadGroupMembers();
                        } else {
                            this.$message.error(response.Message);
                        }
                    } catch (error) {
                        console.error('[RoleManage] 移除群組失敗:', error);
                        this.$message.error('移除群組失敗');
                    }
                },

                toggleMemberSelection: function(employeeId) {
                    var index = this.selectedMembers.indexOf(employeeId);
                    if (index > -1) {
                        this.selectedMembers.splice(index, 1);
                    } else {
                        this.selectedMembers.push(employeeId);
                    }
                },

                toggleEmployeeSelection: function(employeeId) {
                    var index = this.selectedEmployees.indexOf(employeeId);
                    if (index > -1) {
                        this.selectedEmployees.splice(index, 1);
                    } else {
                        this.selectedEmployees.push(employeeId);
                    }
                },

                isSelectedMember: function(employeeId) {
                    return this.selectedMembers.indexOf(employeeId) > -1;
                },

                isSelectedEmployee: function(employeeId) {
                    return this.selectedEmployees.indexOf(employeeId) > -1;
                }
            }
        });
    }
})();