246 lines
8.5 KiB
JavaScript
246 lines
8.5 KiB
JavaScript
let app = null;
|
|
|
|
let V人員類別 = null;
|
|
let V講師編號 = null;
|
|
let V憑證類別 = [];
|
|
let V扣繳類別 = [];
|
|
let V銀行分行 = [];
|
|
|
|
function CreatePaymentSettingApp() {
|
|
const loadMarker = document.getElementById('PaymentSettingAPP');
|
|
if (loadMarker) {
|
|
DoCreatePaymentSettingApp();
|
|
}
|
|
}
|
|
|
|
function DoCreatePaymentSettingApp() {
|
|
app = new Vue({
|
|
el: "#PaymentSettingAPP",
|
|
mixins: [DateMixin, ToastMixin, ApiMixin],
|
|
data: {
|
|
// 分頁相關
|
|
PageIndex: 1,
|
|
PageSize: 50,
|
|
Total: 0,
|
|
Items: [],
|
|
|
|
// 輸入參數
|
|
人員類別: "",
|
|
講師編號: "",
|
|
|
|
// 下拉選單資料
|
|
憑證類別Options: [],
|
|
扣繳類別Options: [],
|
|
|
|
// 新增/編輯狀態
|
|
Appending: false,
|
|
Editing: false,
|
|
|
|
// 銀行分行浮動選單相關
|
|
銀行分行: [],
|
|
ShowBankDropdown: false,
|
|
FilteredBankBranches: [],
|
|
|
|
// 編輯用空白物件範本
|
|
EmptyItem: {
|
|
編號: 0,
|
|
講師_非講師編號: "",
|
|
生效日期: "",
|
|
憑證類別: "",
|
|
扣繳類別: "",
|
|
匯款戶名: "",
|
|
匯款帳號: "",
|
|
銀行分行: "",
|
|
銀行分行代碼: "",
|
|
備註: ""
|
|
},
|
|
|
|
// 目前正在編輯的項目
|
|
EditingItem: {},
|
|
|
|
// 編輯表單錯誤訊息
|
|
EditErrorMessages: {
|
|
講師_非講師編號: "",
|
|
生效日期: "",
|
|
憑證類別: "",
|
|
扣繳類別: "",
|
|
匯款戶名: "",
|
|
匯款帳號: "",
|
|
銀行分行: "",
|
|
銀行分行代碼: "",
|
|
備註: "",
|
|
Clear() {
|
|
this.講師_非講師編號 = "";
|
|
this.生效日期 = "";
|
|
this.憑證類別 = "";
|
|
this.扣繳類別 = "";
|
|
this.匯款戶名 = "";
|
|
this.匯款帳號 = "";
|
|
this.銀行分行 = "";
|
|
this.銀行分行代碼 = "";
|
|
this.備註 = "";
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// 從全域變數取得初始資料
|
|
this.人員類別 = V人員類別;
|
|
this.講師編號 = V講師編號;
|
|
this.講師姓名 = V講師姓名;
|
|
this.憑證類別Options = V憑證類別;
|
|
this.扣繳類別Options = V扣繳類別;
|
|
this.銀行分行 = V銀行分行;
|
|
},
|
|
mounted() {
|
|
this.SelectPage();
|
|
},
|
|
methods: {
|
|
// === 資料載入方法 ===
|
|
async SelectPage() {
|
|
try {
|
|
// 使用 ASMX Web Service
|
|
const result = await this.callApiWithErrorMsg('付款設定', 'SelectPage', {
|
|
人員類別: this.人員類別,
|
|
講師編號: this.講師編號,
|
|
PageIndex: this.PageIndex,
|
|
PageSize: this.PageSize
|
|
}, '載入資料');
|
|
const items = this.ConvertDatesInObject(result.Data || [], '-');
|
|
this.Items = items;
|
|
this.Total = result.count || 0;
|
|
} catch (error) {
|
|
console.error('SelectPage error:', error);
|
|
}
|
|
},
|
|
|
|
// === 新增/編輯/刪除方法 ===
|
|
Append() {
|
|
this.EditingItem = JSON.parse(JSON.stringify(this.EmptyItem));
|
|
this.EditingItem.講師_非講師編號 = this.講師編號;
|
|
this.EditingItem.備註 = '更新內容：'
|
|
this.Appending = true;
|
|
},
|
|
|
|
Edit(item, index) {
|
|
this.EditingItem = JSON.parse(JSON.stringify(item));
|
|
this.EditingItem.Index = index;
|
|
this.Editing = true;
|
|
},
|
|
|
|
async Save() {
|
|
this.EditErrorMessages.Clear();
|
|
|
|
let messages = [];
|
|
// 驗證資料
|
|
if (!this.EditingItem.生效日期) {
|
|
this.EditErrorMessages.生效日期 = '請填寫';
|
|
messages.push('請填寫生效日期');
|
|
}
|
|
if (!this.EditingItem.憑證類別) {
|
|
this.EditErrorMessages.憑證類別 = '請選擇';
|
|
messages.push('請選擇憑證類別');
|
|
}
|
|
if (!this.EditingItem.扣繳類別) {
|
|
this.EditErrorMessages.扣繳類別 = '請選擇';
|
|
messages.push('請選擇扣繳類別');
|
|
}
|
|
if (!this.EditingItem.備註) {
|
|
this.EditErrorMessages.備註 = '請填寫';
|
|
messages.push('請填寫備註');
|
|
}
|
|
if (this.EditingItem.備註.length > 100) {
|
|
this.EditErrorMessages.備註 = '最多 100 個字';
|
|
messages.push('備註最長 100 個字');
|
|
}
|
|
|
|
if (messages.length > 0) {
|
|
this.ShowWarning(messages.join('、'));
|
|
return;
|
|
}
|
|
|
|
const isNew = this.Appending;
|
|
|
|
try {
|
|
await this.callApiWithErrorMsg('付款設定', 'Save',
|
|
{
|
|
itemStr: JSON.stringify(this.EditingItem),
|
|
isNew: isNew
|
|
},
|
|
'儲存'
|
|
);
|
|
this.ShowSuccess('儲存成功');
|
|
this.Appending = false;
|
|
this.Editing = false;
|
|
this.EditingItem = {};
|
|
this.SelectPage(); // 重新載入資料
|
|
} catch (error) {
|
|
console.error('付款設定 Save error:', error);
|
|
this.ShowError('儲存時發生錯誤: ' + (error.message || '請檢查網路連線'));
|
|
}
|
|
},
|
|
|
|
Cancel() {
|
|
this.EditingItem = {};
|
|
this.Appending = false;
|
|
this.Editing = false;
|
|
},
|
|
|
|
async Delete(item, index) {
|
|
if (!confirm('確定要刪除此筆資料？')) return;
|
|
|
|
try {
|
|
await this.callApiWithErrorMsg('付款設定', 'Delete',
|
|
{
|
|
編號: item.編號,
|
|
DB_APPNO: item.DB_APPNO
|
|
},
|
|
'儲存'
|
|
);
|
|
this.ShowSuccess('刪除成功');
|
|
this.SelectPage(); // 重新載入資料
|
|
} catch (error) {
|
|
console.error('付款設定 Delete error:', error);
|
|
this.ShowError('刪除時發生錯誤: ' + (error.message || '請檢查網路連線'));
|
|
}
|
|
},
|
|
|
|
GetOptionName(options, value) {
|
|
const option = options.find(o => o.Value === value);
|
|
return option ? option.Name : '';
|
|
},
|
|
|
|
// === 銀行分行浮動選單方法 ===
|
|
FilterBankBranch() {
|
|
const keyword = this.EditingItem.銀行分行代碼;
|
|
if (!keyword || keyword.trim() === '') {
|
|
this.FilteredBankBranches = this.銀行分行.slice(0, 20);
|
|
return;
|
|
}
|
|
|
|
const lowerKeyword = keyword.toLowerCase();
|
|
this.FilteredBankBranches = this.銀行分行.filter(branch => {
|
|
return branch.Value.toLowerCase().includes(lowerKeyword) ||
|
|
branch.Name.toLowerCase().includes(lowerKeyword);
|
|
}).slice(0, 20);
|
|
},
|
|
|
|
ShowBankBranchList() {
|
|
this.FilterBankBranch();
|
|
this.ShowBankDropdown = true;
|
|
},
|
|
|
|
HideBankBranchList() {
|
|
setTimeout(() => {
|
|
this.ShowBankDropdown = false;
|
|
}, 200);
|
|
},
|
|
|
|
SelectBankBranch(branch) {
|
|
this.EditingItem.銀行分行代碼 = branch.Value;
|
|
this.EditingItem.銀行分行 = branch.Name;
|
|
this.ShowBankDropdown = false;
|
|
}
|
|
}
|
|
});
|
|
}
|