529 lines
19 KiB
JavaScript
529 lines
19 KiB
JavaScript
(() => {
|
||
'use strict';
|
||
|
||
new Vue({
|
||
el: '#messageAccountManageApp',
|
||
data: {
|
||
// API
|
||
apiName: 'MessageAccountManage',
|
||
// 搜尋條件
|
||
search: {
|
||
projectName: '',
|
||
platformCode: ''
|
||
},
|
||
// 搜尋結果
|
||
accountList: [],
|
||
loading: false,
|
||
// 分頁
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
totalCount: 0,
|
||
// 搜尋專案自動完成
|
||
projectSuggestions: [],
|
||
showProjectSuggestions: false,
|
||
projectSearchTimeout: null,
|
||
// 彈窗
|
||
showModal: false,
|
||
isNewMode: true,
|
||
editItem: {
|
||
ID: 0,
|
||
ProjectID: '',
|
||
MMSAccount: '',
|
||
MMSPassword: '',
|
||
PlatformCode: '',
|
||
projectName: '',
|
||
DB_APPNO: 0
|
||
},
|
||
// 編輯模式專案自動完成
|
||
editProjectSuggestions: [],
|
||
showEditProjectSuggestions: false,
|
||
editProjectSearchTimeout: null,
|
||
// 驗證錯誤訊息
|
||
validationErrors: {
|
||
ProjectID: '',
|
||
MMSAccount: '',
|
||
MMSPassword: ''
|
||
},
|
||
// 編輯狀態
|
||
showPassword: false,
|
||
// 平台
|
||
platforms: [],
|
||
currentPlatform: null,
|
||
showPlatformSettings: false,
|
||
showSwitchPanel: false,
|
||
switchPlatformCode: ''
|
||
},
|
||
computed: {
|
||
totalPages() {
|
||
return Math.ceil(this.totalCount / this.pageSize);
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('[MessageAccountManage] Vue app mounted');
|
||
// 初始載入資料
|
||
this.performSearch();
|
||
this.loadPlatforms();
|
||
this.loadCurrentPlatform();
|
||
},
|
||
methods: {
|
||
/**
|
||
* 依 PlatformCode 取得平台顯示名稱
|
||
*/
|
||
getPlatformName(platformCode) {
|
||
if (!platformCode) return '系統預設';
|
||
const p = this.platforms.find(function(x) { return x.PlatformCode === platformCode; });
|
||
return p ? p.PlatformName + '（' + p.PlatformCode + '）' : platformCode;
|
||
},
|
||
|
||
/**
|
||
* 執行搜尋
|
||
*/
|
||
async performSearch() {
|
||
this.currentPage = 1;
|
||
await this.loadAccounts();
|
||
},
|
||
|
||
/**
|
||
* 載入簡訊帳號資料
|
||
*/
|
||
async loadAccounts() {
|
||
this.loading = true;
|
||
try {
|
||
const response = await this.$api.call(this.apiName, 'Search', {
|
||
pageNo: this.currentPage,
|
||
pageSize: this.pageSize,
|
||
projectID: this.search.projectID || '',
|
||
platformCode: this.search.platformCode || ''
|
||
});
|
||
|
||
if (response.Success) {
|
||
this.accountList = response.Data || [];
|
||
this.totalCount = response.TotalCount || 0;
|
||
|
||
// 初始化密碼隱藏狀態 (使用 $set 確保響應式)
|
||
this.accountList.forEach(item => {
|
||
this.$set(item, 'showPassword', false);
|
||
});
|
||
|
||
console.log('[MessageAccountManage] 載入成功，共 ' + this.totalCount + ' 筆');
|
||
} else {
|
||
this.$message.error(response.Message || '查詢失敗');
|
||
this.accountList = [];
|
||
this.totalCount = 0;
|
||
}
|
||
} catch (error) {
|
||
console.error('[MessageAccountManage] 載入錯誤:', error);
|
||
this.$message.error('載入資料發生錯誤');
|
||
this.accountList = [];
|
||
this.totalCount = 0;
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 清除搜尋條件
|
||
*/
|
||
clearSearch() {
|
||
this.search = {
|
||
projectName: '',
|
||
platformCode: ''
|
||
};
|
||
this.projectSuggestions = [];
|
||
this.showProjectSuggestions = false;
|
||
this.performSearch();
|
||
},
|
||
|
||
/**
|
||
* 搜尋計畫 (搜尋區自動完成)
|
||
*/
|
||
searchProjects() {
|
||
// 清除之前的超時
|
||
if (this.projectSearchTimeout) {
|
||
clearTimeout(this.projectSearchTimeout);
|
||
}
|
||
|
||
const keyword = this.search.projectName.trim();
|
||
|
||
// 如果輸入為空，清空建議和ProjectID
|
||
if (!keyword) {
|
||
this.projectSuggestions = [];
|
||
this.search.projectID = '';
|
||
return;
|
||
}
|
||
|
||
// 延遲搜尋以避免過多API呼叫
|
||
this.projectSearchTimeout = setTimeout(async () => {
|
||
try {
|
||
const response = await this.$api.call(this.apiName, 'SearchProjects', {
|
||
keyword: keyword
|
||
});
|
||
|
||
if (response.Success) {
|
||
this.projectSuggestions = response.Data || [];
|
||
this.showProjectSuggestions = this.projectSuggestions.length > 0;
|
||
} else {
|
||
this.projectSuggestions = [];
|
||
this.showProjectSuggestions = false;
|
||
}
|
||
} catch (error) {
|
||
console.error('[MessageAccountManage] 搜尋計畫錯誤:', error);
|
||
this.projectSuggestions = [];
|
||
this.showProjectSuggestions = false;
|
||
}
|
||
}, 300);
|
||
},
|
||
|
||
/**
|
||
* 選擇計畫 (搜尋區)
|
||
*/
|
||
selectProject(suggestion) {
|
||
this.search.projectID = suggestion.Value;
|
||
this.search.projectName = `${suggestion.Value} - ${suggestion.Name}`;
|
||
this.projectSuggestions = [];
|
||
this.showProjectSuggestions = false;
|
||
},
|
||
|
||
/**
|
||
* 隱藏計畫建議 (搜尋區 - 延遲隱藏以允許點擊)
|
||
*/
|
||
hideProjectSuggestions() {
|
||
setTimeout(() => {
|
||
this.showProjectSuggestions = false;
|
||
}, 200);
|
||
},
|
||
|
||
/**
|
||
* 搜尋編輯模式的計畫 (自動完成)
|
||
*/
|
||
searchEditProjectSuggestions() {
|
||
// 清除之前的超時
|
||
if (this.editProjectSearchTimeout) {
|
||
clearTimeout(this.editProjectSearchTimeout);
|
||
}
|
||
|
||
const keyword = this.editItem.projectName.trim();
|
||
|
||
// 如果輸入為空，清空建議和ProjectID
|
||
if (!keyword) {
|
||
this.editProjectSuggestions = [];
|
||
this.editItem.ProjectID = '';
|
||
return;
|
||
}
|
||
|
||
// 延遲搜尋以避免過多API呼叫
|
||
this.editProjectSearchTimeout = setTimeout(async () => {
|
||
try {
|
||
const response = await this.$api.call(this.apiName, 'SearchProjects', {
|
||
keyword: keyword
|
||
});
|
||
|
||
if (response.Success) {
|
||
this.editProjectSuggestions = response.Data || [];
|
||
this.showEditProjectSuggestions = this.editProjectSuggestions.length > 0;
|
||
} else {
|
||
this.editProjectSuggestions = [];
|
||
this.showEditProjectSuggestions = false;
|
||
}
|
||
} catch (error) {
|
||
console.error('[MessageAccountManage] 搜尋編輯模式計畫錯誤:', error);
|
||
this.editProjectSuggestions = [];
|
||
this.showEditProjectSuggestions = false;
|
||
}
|
||
}, 300);
|
||
},
|
||
|
||
/**
|
||
* 選擇編輯模式的計畫
|
||
*/
|
||
selectEditProject(suggestion) {
|
||
this.editItem.ProjectID = suggestion.Value;
|
||
this.editItem.projectName = `${suggestion.Value} - ${suggestion.Name}`;
|
||
this.editProjectSuggestions = [];
|
||
this.showEditProjectSuggestions = false;
|
||
},
|
||
|
||
/**
|
||
* 隱藏編輯模式的計畫建議 (延遲隱藏以允許點擊)
|
||
*/
|
||
hideEditProjectSuggestions() {
|
||
setTimeout(() => {
|
||
this.showEditProjectSuggestions = false;
|
||
}, 200);
|
||
},
|
||
|
||
/**
|
||
* 換頁
|
||
*/
|
||
goToPage(page) {
|
||
if (page < 1 || page > this.totalPages) return;
|
||
this.currentPage = page;
|
||
this.loadAccounts();
|
||
},
|
||
|
||
/**
|
||
* 上一頁
|
||
*/
|
||
previousPage() {
|
||
if (this.currentPage > 1) {
|
||
this.goToPage(this.currentPage - 1);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 下一頁
|
||
*/
|
||
nextPage() {
|
||
if (this.currentPage < this.totalPages) {
|
||
this.goToPage(this.currentPage + 1);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 開啟新增彈窗
|
||
*/
|
||
openAddModal() {
|
||
this.isNewMode = true;
|
||
this.editItem = {
|
||
ID: 0,
|
||
ProjectID: '',
|
||
MMSAccount: '',
|
||
MMSPassword: '',
|
||
PlatformCode: this.currentPlatform ? this.currentPlatform.PlatformCode : '',
|
||
projectName: '',
|
||
DB_APPNO: 0
|
||
};
|
||
this.showEditProjectSuggestions = false;
|
||
this.showPassword = false;
|
||
this.clearValidationErrors();
|
||
this.showModal = true;
|
||
},
|
||
|
||
/**
|
||
* 開啟編輯彈窗
|
||
*/
|
||
openEditModal(item) {
|
||
this.isNewMode = false;
|
||
this.editItem = {
|
||
ID: item.ID,
|
||
ProjectID: item.ProjectID,
|
||
MMSAccount: item.MMSAccount,
|
||
MMSPassword: item.MMSPassword,
|
||
PlatformCode: item.PlatformCode || '',
|
||
projectName: item.ProjectName ? `${item.ProjectID} - ${item.ProjectName}` : item.ProjectID,
|
||
DB_APPNO: item.DB_APPNO
|
||
};
|
||
this.editProjectSuggestions = [];
|
||
this.showEditProjectSuggestions = false;
|
||
this.showPassword = false;
|
||
this.clearValidationErrors();
|
||
this.showModal = true;
|
||
},
|
||
|
||
/**
|
||
* 關閉彈窗
|
||
*/
|
||
closeModal() {
|
||
this.showModal = false;
|
||
},
|
||
|
||
/**
|
||
* 清除驗證錯誤訊息
|
||
*/
|
||
clearValidationErrors() {
|
||
this.validationErrors = {
|
||
ProjectID: '',
|
||
MMSAccount: '',
|
||
MMSPassword: ''
|
||
};
|
||
},
|
||
|
||
/**
|
||
* 驗證輸入
|
||
*/
|
||
validateInput() {
|
||
this.clearValidationErrors();
|
||
let isValid = true;
|
||
|
||
// 驗證計畫代號
|
||
if (!this.editItem.ProjectID || this.editItem.ProjectID.trim() === '') {
|
||
this.validationErrors.ProjectID = '計畫代號為必填欄位';
|
||
isValid = false;
|
||
} else if (this.editItem.ProjectID.length > 20) {
|
||
this.validationErrors.ProjectID = '計畫代號最長 20 個字元';
|
||
isValid = false;
|
||
}
|
||
|
||
// 驗證簡訊帳號
|
||
if (!this.editItem.MMSAccount || this.editItem.MMSAccount.trim() === '') {
|
||
this.validationErrors.MMSAccount = '簡訊帳號為必填欄位';
|
||
isValid = false;
|
||
} else if (this.editItem.MMSAccount.length > 50) {
|
||
this.validationErrors.MMSAccount = '簡訊帳號最長 50 個字元';
|
||
isValid = false;
|
||
}
|
||
|
||
// 驗證簡訊密碼
|
||
if (!this.editItem.MMSPassword || this.editItem.MMSPassword.trim() === '') {
|
||
this.validationErrors.MMSPassword = '簡訊密碼為必填欄位';
|
||
isValid = false;
|
||
} else if (this.editItem.MMSPassword.length > 50) {
|
||
this.validationErrors.MMSPassword = '簡訊密碼最長 50 個字元';
|
||
isValid = false;
|
||
}
|
||
|
||
return isValid;
|
||
},
|
||
|
||
/**
|
||
* 儲存簡訊帳號
|
||
*/
|
||
async saveAccount() {
|
||
if (!this.validateInput()) return;
|
||
|
||
try {
|
||
// 準備資料
|
||
const item = {
|
||
ID: this.editItem.ID,
|
||
ProjectID: this.editItem.ProjectID.trim(),
|
||
MMSAccount: this.editItem.MMSAccount.trim(),
|
||
MMSPassword: this.editItem.MMSPassword.trim(),
|
||
PlatformCode: this.editItem.PlatformCode.trim(),
|
||
DB_APPNO: this.editItem.DB_APPNO
|
||
};
|
||
|
||
const response = await this.$api.call(this.apiName, 'Save', {
|
||
isNew: this.isNewMode,
|
||
item: item
|
||
});
|
||
|
||
if (response.Success) {
|
||
this.$message.success(response.Message || '儲存成功');
|
||
this.closeModal();
|
||
this.loadAccounts();
|
||
} else {
|
||
this.$message.error(response.Message || '儲存失敗');
|
||
}
|
||
} catch (error) {
|
||
console.error('[MessageAccountManage] 儲存錯誤:', error);
|
||
this.$message.error('儲存發生錯誤');
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 刪除簡訊帳號
|
||
*/
|
||
async deleteAccount(item) {
|
||
if (!confirm(`確定要刪除計畫「${item.ProjectID}」的簡訊帳號設定嗎？`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await this.$api.call(this.apiName, 'Delete', {
|
||
id: item.ID,
|
||
dbAppNo: item.DB_APPNO
|
||
});
|
||
|
||
if (response.Success) {
|
||
this.$message.success(response.Message || '刪除成功');
|
||
this.loadAccounts();
|
||
} else {
|
||
this.$message.error(response.Message || '刪除失敗');
|
||
}
|
||
} catch (error) {
|
||
console.error('[MessageAccountManage] 刪除錯誤:', error);
|
||
this.$message.error('刪除發生錯誤');
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 切換密碼顯示/隱藏
|
||
*/
|
||
togglePasswordDisplay(item) {
|
||
this.$set(item, 'showPassword', !item.showPassword);
|
||
},
|
||
|
||
/**
|
||
* 切換編輯模式密碼顯示/隱藏
|
||
*/
|
||
toggleEditPasswordDisplay() {
|
||
this.showPassword = !this.showPassword;
|
||
},
|
||
|
||
/**
|
||
* 載入所有平台清單
|
||
*/
|
||
async loadPlatforms() {
|
||
try {
|
||
const res = await this.$api.call(this.apiName, 'GetPlatforms', {});
|
||
if (res.Success && res.Data) {
|
||
this.platforms = res.Data.map(p => Object.assign({ showPwd: false }, p));
|
||
if (!this.switchPlatformCode && this.platforms.length > 0) {
|
||
this.switchPlatformCode = this.platforms[0].PlatformCode;
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('[loadPlatforms]', e);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 載入目前預設平台
|
||
*/
|
||
async loadCurrentPlatform() {
|
||
try {
|
||
const res = await this.$api.call(this.apiName, 'GetCurrentPlatform', {});
|
||
if (res.Success) this.currentPlatform = res.Data;
|
||
} catch (e) {
|
||
console.error('[loadCurrentPlatform]', e);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 儲存單一平台帳號設定
|
||
*/
|
||
async savePlatformSetting(platform) {
|
||
try {
|
||
const res = await this.$api.call(this.apiName, 'SavePlatform', {
|
||
item: {
|
||
ID: platform.ID,
|
||
PlatformCode: platform.PlatformCode,
|
||
PlatformName: platform.PlatformName,
|
||
Account: platform.Account,
|
||
Password: platform.Password,
|
||
Remark: platform.Remark
|
||
}
|
||
});
|
||
if (res.Success) {
|
||
this.$message.success(res.Message || '儲存成功');
|
||
} else {
|
||
this.$message.error(res.Message || '儲存失敗');
|
||
}
|
||
} catch (e) {
|
||
console.error('[savePlatformSetting]', e);
|
||
this.$message.error('儲存發生錯誤');
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 切換預設平台
|
||
*/
|
||
async setCurrentPlatform() {
|
||
try {
|
||
const res = await this.$api.call(this.apiName, 'SetCurrentPlatform', { platformCode: this.switchPlatformCode });
|
||
if (res.Success) {
|
||
this.$message.success(res.Message || '切換成功');
|
||
this.showSwitchPanel = false;
|
||
await this.loadCurrentPlatform();
|
||
} else {
|
||
this.$message.error(res.Message || '切換失敗');
|
||
}
|
||
} catch (e) {
|
||
console.error('[setCurrentPlatform]', e);
|
||
this.$message.error('切換發生錯誤');
|
||
}
|
||
}
|
||
}
|
||
});
|
||
})();
|