chore: 首次簽入 Thinkyu ASP.NET 專案
- 加入 Visual Studio / ASP.NET .gitignore - 排除建置輸出、IDE 設定、NuGet packages、大型 MSI 安裝檔
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
/**
|
||||
* 使用 ApiMixin 的示例
|
||||
* 这个文件展示了如何简化 領據處理.js 中的 API 调用
|
||||
*/
|
||||
|
||||
// 原来的写法（冗长）:
|
||||
save() {
|
||||
// ... 验证代码 ...
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
url: `${API_BASE}/Save`,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8'
|
||||
},
|
||||
data: JSON.stringify(data)
|
||||
})
|
||||
.then(response => {
|
||||
const result = response.data.d || response.data;
|
||||
if (result.Success) {
|
||||
this.ShowSuccess(result.Message);
|
||||
// ... 处理成功逻辑 ...
|
||||
} else {
|
||||
this.ShowError('儲存失敗: ' + result.Message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Save error:', error);
|
||||
this.ShowError('儲存發生錯誤: ' + (error.message || '請檢查網路連線'));
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
// ===================================================================
|
||||
|
||||
// 使用 ApiMixin 的新写法（简洁）:
|
||||
async save() {
|
||||
if (!this.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const data = {
|
||||
isNew: this.mode === 'add',
|
||||
mainItem: this.mainData,
|
||||
laborItem: this.laborData,
|
||||
travelItem: this.travelData
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg('領據處理', 'Save', data, '儲存');
|
||||
|
||||
this.ShowSuccess(result.Message);
|
||||
// 返回查看模式
|
||||
this.mode = 'view';
|
||||
// 更新编号和数据
|
||||
if (this.mainData.編號 === '' && result.Data) {
|
||||
this.mainData.編號 = result.Data;
|
||||
this.編號 = result.Data;
|
||||
}
|
||||
this.backupData();
|
||||
} catch (error) {
|
||||
console.error('Save error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ===================================================================
|
||||
|
||||
// 其他 API 调用示例:
|
||||
|
||||
// 原来的 loadDropdownList:
|
||||
async loadDropdownList(key) {
|
||||
let value = null;
|
||||
await axios({
|
||||
method: 'post',
|
||||
url: `${API_BASE}/GetDropdownLists`,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8'
|
||||
},
|
||||
data: JSON.stringify({ key: key })
|
||||
})
|
||||
.then(response => {
|
||||
const result = response.data.d || response.data;
|
||||
if (result.Success) {
|
||||
value = result.Data || [];
|
||||
} else {
|
||||
console.error('取得下拉選單資料失敗:', result.Message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('載入下拉選單失敗:', error);
|
||||
});
|
||||
return value;
|
||||
}
|
||||
|
||||
// 使用 mixin 的新写法:
|
||||
async loadDropdownList(key) {
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'GetDropdownLists', { key });
|
||||
return result.Data || [];
|
||||
} catch (error) {
|
||||
console.error('載入下拉選單失敗:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// ===================================================================
|
||||
|
||||
// searchRecipient 的对比:
|
||||
|
||||
// 原来的写法:
|
||||
searchRecipient() {
|
||||
const key = this.mainData.領款人姓名;
|
||||
const identity = this.mainData.身分別;
|
||||
|
||||
if (key && key.length > 0) {
|
||||
if (!identity) {
|
||||
this.ShowWarning('請先選擇身分別');
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
url: `${API_BASE}/SearchRecipient`,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8'
|
||||
},
|
||||
data: JSON.stringify({ key, identity })
|
||||
})
|
||||
.then(response => {
|
||||
const result = response.data.d || response.data;
|
||||
if (result.Success) {
|
||||
this.recipientList = result.Data || [];
|
||||
this.showRecipientDropdown = this.recipientList.length > 0;
|
||||
} else {
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
this.ShowWarning(result.Message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('查詢領款人失敗:', error);
|
||||
});
|
||||
} else {
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 mixin 的新写法:
|
||||
async searchRecipient() {
|
||||
const key = this.mainData.領款人姓名;
|
||||
const identity = this.mainData.身分別;
|
||||
|
||||
if (!key || key.length === 0) {
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!identity) {
|
||||
this.ShowWarning('請先選擇身分別');
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'SearchRecipient', { key, identity });
|
||||
this.recipientList = result.Data || [];
|
||||
this.showRecipientDropdown = this.recipientList.length > 0;
|
||||
} catch (error) {
|
||||
console.error('查詢領款人失敗:', error);
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
this.ShowWarning(error.message);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* API Mixin - 统一的 API 调用管理
|
||||
* 用法: 在 Vue 组件中引入此 mixin，然后使用 this.callApi(endpoint, functionName, data)
|
||||
*/
|
||||
const ApiMixin = {
|
||||
methods: {
|
||||
/**
|
||||
* 调用 API 的通用方法
|
||||
* @param {string} endpoint - API 端点（.asmx 文件名，不需要扩展名），如 '領據處理'
|
||||
* @param {string} functionName - 方法名称，如 'Save', 'GetOne'
|
||||
* @param {object} data - 要传送的数据对象
|
||||
* @returns {Promise} 返回 Promise，包含 API 响应数据
|
||||
*/
|
||||
callApi(endpoint, functionName, data = {}) {
|
||||
console.log(`callApi [${endpoint}/${functionName}]`, data);
|
||||
return axios({
|
||||
method: 'post',
|
||||
url: `${API_BASE}/${endpoint}.asmx/${functionName}`,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8'
|
||||
},
|
||||
data: JSON.stringify(data)
|
||||
})
|
||||
.then(response => {
|
||||
const result = response.data.d || response.data;
|
||||
if (result.Success) {
|
||||
return Promise.resolve(result);
|
||||
} else {
|
||||
return Promise.reject(new Error(result.Message || '操作失败'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(`API 調用失敗 [${endpoint}/${functionName}]:`, error);
|
||||
return Promise.reject(error);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 调用 API 并显示错误消息的便捷方法
|
||||
* @param {string} endpoint - API 端点
|
||||
* @param {string} functionName - 方法名称
|
||||
* @param {object} data - 数据对象
|
||||
* @param {string} errorPrefix - 错误消息前缀
|
||||
* @returns {Promise}
|
||||
*/
|
||||
callApiWithErrorMsg(endpoint, functionName, data = {}, errorPrefix = '操作') {
|
||||
return this.callApi(endpoint, functionName, data)
|
||||
.catch(error => {
|
||||
this.ShowError(`${errorPrefix}失敗: ${error.message || '請檢查網路連線'}`);
|
||||
return Promise.reject(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
Vendored
+3
File diff suppressed because one or more lines are too long
@@ -0,0 +1,35 @@
|
||||
// Vue Mixin - Base64 工具
|
||||
// 提供 Base64 字串轉換為 Blob 的功能
|
||||
|
||||
var Base64Mixin = {
|
||||
methods: {
|
||||
/**
|
||||
* 將 Base64 字串轉換為 Blob 物件
|
||||
* @param {string} base64 - Base64 編碼字串
|
||||
* @returns {Blob} Excel 格式的 Blob 物件
|
||||
*/
|
||||
Base64ToBlob: function(base64) {
|
||||
try {
|
||||
if (!base64 || typeof base64 !== 'string') {
|
||||
throw new Error('Invalid input: Base64 string is required');
|
||||
}
|
||||
|
||||
var cleanBase64 = base64.replace(/\s/g, '');
|
||||
|
||||
if (!cleanBase64 || !/^[A-Za-z0-9+/]*={0,2}$/.test(cleanBase64)) {
|
||||
throw new Error('Invalid Base64 string format');
|
||||
}
|
||||
|
||||
var binaryString = atob(cleanBase64);
|
||||
var bytes = new Uint8Array(binaryString.length);
|
||||
for (var i = 0; i < binaryString.length; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
return new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
} catch (error) {
|
||||
console.error('Base64ToBlob error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
+2657
File diff suppressed because it is too large
Load Diff
Vendored
+11008
File diff suppressed because it is too large
Load Diff
+5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+18706
File diff suppressed because it is too large
Load Diff
+13
File diff suppressed because one or more lines are too long
@@ -0,0 +1,198 @@
|
||||
# Vue Date Mixin 使用說明
|
||||
|
||||
## 概述
|
||||
`vue-date-mixin.js` 是一個 Vue.js mixin，用於處理 ASP.NET ASMX Web Service 回傳的日期格式 `/Date(timestamp)/`。
|
||||
|
||||
## 功能
|
||||
|
||||
### 1. FormatDate(dateStr, separator)
|
||||
將日期格式化為指定分隔符的格式。
|
||||
|
||||
**參數:**
|
||||
- `dateStr`: 日期字串或 Date 物件
|
||||
- `separator`: 日期分隔符，預設為 `"-"`
|
||||
|
||||
**回傳值:**
|
||||
- 格式化後的日期字串
|
||||
|
||||
**範例:**
|
||||
```javascript
|
||||
this.FormatDate('/Date(1764622110737)/'); // 回傳: "2025-12-02" (使用預設 "-")
|
||||
this.FormatDate('/Date(1764622110737)/', '/'); // 回傳: "2025/12/02"
|
||||
this.FormatDate('/Date(1764622110737)/', '.'); // 回傳: "2025.12.02"
|
||||
this.FormatDate(new Date(), '-'); // 回傳: "2025-01-15"
|
||||
```
|
||||
|
||||
### 2. ConvertDatesInObject(obj, separator)
|
||||
遍歷物件或陣列，自動轉換所有符合 ASP.NET ASMX 日期格式的屬性。
|
||||
|
||||
**參數:**
|
||||
- `obj`: 要處理的物件或陣列
|
||||
- `separator`: 日期分隔符，預設為 `"-"`
|
||||
|
||||
**回傳值:**
|
||||
- 處理後的物件或陣列（所有日期欄位已轉換）
|
||||
|
||||
**範例:**
|
||||
```javascript
|
||||
// 使用預設分隔符 "-"
|
||||
const item = {
|
||||
編號: 1,
|
||||
生效日期: '/Date(1764622110737)/',
|
||||
備註: '測試'
|
||||
};
|
||||
const converted = this.ConvertDatesInObject(item);
|
||||
// converted.生效日期 = "2025-12-02"
|
||||
|
||||
// 使用自訂分隔符 "/"
|
||||
const converted2 = this.ConvertDatesInObject(item, '/');
|
||||
// converted2.生效日期 = "2025/12/02"
|
||||
|
||||
// 處理陣列
|
||||
const items = [
|
||||
{ 編號: 1, 生效日期: '/Date(1764622110737)/' },
|
||||
{ 編號: 2, 生效日期: '/Date(1764708510737)/' }
|
||||
];
|
||||
const converted = this.ConvertDatesInObject(items, '-');
|
||||
// 所有項目的生效日期都會被轉換為 "YYYY-MM-DD" 格式
|
||||
```
|
||||
|
||||
### 3. FormatDateTime(dateStr, separator)
|
||||
將日期時間格式化為指定分隔符的格式。
|
||||
|
||||
**參數:**
|
||||
- `dateStr`: 日期字串或 Date 物件
|
||||
- `separator`: 日期分隔符，預設為 `"-"`
|
||||
|
||||
**回傳值:**
|
||||
- 格式化後的日期時間字串
|
||||
|
||||
**範例:**
|
||||
```javascript
|
||||
this.FormatDateTime('/Date(1764622110737)/'); // 回傳: "2025-12-02 14:35:10"
|
||||
this.FormatDateTime('/Date(1764622110737)/', '/'); // 回傳: "2025/12/02 14:35:10"
|
||||
```
|
||||
|
||||
## 使用方式
|
||||
|
||||
### 1. 引入 Mixin
|
||||
在 `.ascx.cs` 檔案中註冊腳本：
|
||||
```csharp
|
||||
Page.ClientScript.RegisterClientScriptInclude("DateMixin",
|
||||
ParentPage.ResolveClientUrl("~/Scripts/vue-date-mixin.js"));
|
||||
```
|
||||
|
||||
### 2. 在 Vue 實例中使用
|
||||
```javascript
|
||||
function CreateApp() {
|
||||
app = new Vue({
|
||||
el: "#APP",
|
||||
mixins: [DateMixin], // 加入 mixin
|
||||
data: {
|
||||
Items: []
|
||||
},
|
||||
methods: {
|
||||
SelectPage() {
|
||||
axios.post('/Services/XXX.asmx/SelectPage', data)
|
||||
.then(response => {
|
||||
const result = response.data.d || response.data;
|
||||
|
||||
// 自動轉換所有日期欄位 (使用預設分隔符 "-")
|
||||
const items = this.ConvertDatesInObject(result.data || []);
|
||||
this.Items = items;
|
||||
|
||||
// 或使用自訂分隔符 "/"
|
||||
// const items = this.ConvertDatesInObject(result.data || [], '/');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## 日期分隔符選項
|
||||
|
||||
### 常用分隔符
|
||||
- `"-"` (預設): 2025-12-02
|
||||
- `"/"`: 2025/12/02
|
||||
- `"."`: 2025.12.02
|
||||
- `""` (空字串): 20251202
|
||||
|
||||
### 使用建議
|
||||
- **ISO 8601 標準**: 使用 `"-"` (例: 2025-12-02)
|
||||
- **台灣慣用**: 使用 `"/"` (例: 2025/12/02)
|
||||
- **歐洲慣用**: 使用 `"."` (例: 2025.12.02)
|
||||
- **HTML5 date input**: 使用 `"-"` (必須是 YYYY-MM-DD 格式)
|
||||
|
||||
## 支援的日期格式
|
||||
|
||||
### 輸入格式
|
||||
- ASP.NET ASMX 格式: `/Date(1764622110737)/`
|
||||
- 標準 JavaScript Date 物件
|
||||
- 任何可被 `new Date()` 解析的字串
|
||||
|
||||
### 輸出格式
|
||||
- FormatDate: `YYYY{sep}MM{sep}DD` (例: 2025-12-02, 2025/12/02)
|
||||
- FormatDateTime: `YYYY{sep}MM{sep}DD HH:mm:ss` (例: 2025-12-02 14:35:10)
|
||||
|
||||
## 注意事項
|
||||
|
||||
1. **預設分隔符**: 如果不提供 `separator` 參數，預設使用 `"-"`
|
||||
2. **自動遞迴處理**: `ConvertDatesInObject` 會自動處理巢狀物件和陣列
|
||||
3. **不改變原物件**: 方法會回傳新的物件，不會修改原始資料
|
||||
4. **安全性**: 包含空值檢查和錯誤處理
|
||||
5. **效能**: 只處理符合 `/Date(` 格式的字串，避免不必要的轉換
|
||||
|
||||
## 完整範例
|
||||
|
||||
```javascript
|
||||
let app = null;
|
||||
|
||||
function CreateApp() {
|
||||
app = new Vue({
|
||||
el: "#APP",
|
||||
mixins: [DateMixin],
|
||||
data: {
|
||||
Items: []
|
||||
},
|
||||
methods: {
|
||||
LoadData() {
|
||||
axios.post('/Services/MyService.asmx/GetData', {})
|
||||
.then(response => {
|
||||
const result = response.data.d;
|
||||
|
||||
if (result.success) {
|
||||
// 使用預設分隔符 "-" (適用於 HTML5 date input)
|
||||
this.Items = this.ConvertDatesInObject(result.data);
|
||||
|
||||
// 或使用 "/" 分隔符 (適用於顯示)
|
||||
// this.Items = this.ConvertDatesInObject(result.data, '/');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
FormatSingleDate() {
|
||||
// 格式化單一日期
|
||||
const dateStr = '/Date(1764622110737)/';
|
||||
console.log(this.FormatDate(dateStr)); // "2025-12-02"
|
||||
console.log(this.FormatDate(dateStr, '/')); // "2025/12/02"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## HTML5 Date Input 整合
|
||||
|
||||
當使用 HTML5 的 `<input type="date">` 時，**必須**使用 `"-"` 分隔符：
|
||||
|
||||
```html
|
||||
<input type="date" v-model="EditingItem.生效日期"/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
// 載入時使用 "-" 分隔符
|
||||
this.Items = this.ConvertDatesInObject(result.data, '-');
|
||||
|
||||
// 或省略參數使用預設值 "-"
|
||||
this.Items = this.ConvertDatesInObject(result.data);
|
||||
@@ -0,0 +1,127 @@
|
||||
// Vue Mixin - 日期轉換工具
|
||||
// 用於處理 ASP.NET ASMX Web Service 回傳的日期格式
|
||||
|
||||
var DateMixin = {
|
||||
methods: {
|
||||
/**
|
||||
* 格式化日期
|
||||
* @param {string|Date} dateStr - 日期字串或 Date 物件
|
||||
* @param {string} separator - 日期分隔符，預設為 "-"
|
||||
* @returns {string} 格式化後的日期字串
|
||||
*/
|
||||
FormatDate: function(dateStr, separator) {
|
||||
if (!dateStr) return '';
|
||||
|
||||
// 預設分隔符為 "-"
|
||||
if (separator === undefined) {
|
||||
separator = '-';
|
||||
}
|
||||
|
||||
// 處理 ASP.NET ASMX 的日期格式 /Date(1764622110737)/
|
||||
if (typeof dateStr === 'string' && dateStr.indexOf('/Date(') === 0) {
|
||||
var timestamp = parseInt(dateStr.match(/-?\d+/)[0]);
|
||||
var date = new Date(timestamp);
|
||||
var year = String(date.getFullYear()).padStart(4, '0');
|
||||
var month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(date.getDate()).padStart(2, '0');
|
||||
return year + separator + month + separator + day;
|
||||
}
|
||||
|
||||
// 如果已經是一般的 Date 物件或其他格式
|
||||
var date = new Date(dateStr);
|
||||
if (!isNaN(date.getTime())) {
|
||||
var year = String(date.getFullYear()).padStart(4, '0');
|
||||
var month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(date.getDate()).padStart(2, '0');
|
||||
return year + separator + month + separator + day;
|
||||
}
|
||||
|
||||
return dateStr;
|
||||
},
|
||||
|
||||
/**
|
||||
* 遍歷物件或陣列，自動轉換所有符合 ASP.NET ASMX 日期格式的屬性
|
||||
* @param {Object|Array} obj - 要處理的物件或陣列
|
||||
* @param {string} separator - 日期分隔符，預設為 "-"
|
||||
* @returns {Object|Array} 處理後的物件或陣列
|
||||
*/
|
||||
ConvertDatesInObject: function(obj, separator) {
|
||||
if (!obj) return obj;
|
||||
|
||||
// 預設分隔符為 "-"
|
||||
if (separator === undefined) {
|
||||
separator = '-';
|
||||
}
|
||||
|
||||
// 處理陣列
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map(function(item) {
|
||||
return this.ConvertDatesInObject(item, separator);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
// 處理物件
|
||||
if (typeof obj === 'object') {
|
||||
var result = {};
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
var value = obj[key];
|
||||
|
||||
// 檢查是否為 ASP.NET ASMX 日期格式
|
||||
if (typeof value === 'string' && value.indexOf('/Date(') === 0) {
|
||||
result[key] = this.FormatDate(value, separator);
|
||||
}
|
||||
// 遞迴處理巢狀物件或陣列
|
||||
else if (value !== null && typeof value === 'object') {
|
||||
result[key] = this.ConvertDatesInObject(value, separator);
|
||||
}
|
||||
else {
|
||||
result[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
return obj;
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化日期時間
|
||||
* @param {string|Date} dateStr - 日期字串或 Date 物件
|
||||
* @param {string} separator - 日期分隔符，預設為 "-"
|
||||
* @returns {string} 格式化後的日期時間字串
|
||||
*/
|
||||
FormatDateTime: function(dateStr, separator) {
|
||||
if (!dateStr) return '';
|
||||
|
||||
// 預設分隔符為 "-"
|
||||
if (separator === undefined) {
|
||||
separator = '-';
|
||||
}
|
||||
|
||||
var date;
|
||||
|
||||
// 處理 ASP.NET ASMX 的日期格式 /Date(1764622110737)/
|
||||
if (typeof dateStr === 'string' && dateStr.indexOf('/Date(') === 0) {
|
||||
var timestamp = parseInt(dateStr.match(/-?\d+/)[0]);
|
||||
date = new Date(timestamp);
|
||||
} else {
|
||||
date = new Date(dateStr);
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
return dateStr;
|
||||
}
|
||||
|
||||
var year = String(date.getFullYear()).padStart(4, '0');
|
||||
var month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(date.getDate()).padStart(2, '0');
|
||||
var hours = String(date.getHours()).padStart(2, '0');
|
||||
var minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
var seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return year + separator + month + separator + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,98 @@
|
||||
// Vue Mixin - 訊息提示功能
|
||||
// 提供浮動訊息提示 (Toast) 功能
|
||||
|
||||
// 訊息類型常數
|
||||
var ToastType = {
|
||||
SUCCESS: 'success',
|
||||
ERROR: 'error',
|
||||
WARNING: 'warning',
|
||||
INFO: 'info'
|
||||
};
|
||||
|
||||
var ToastMixin = {
|
||||
data: function() {
|
||||
return {
|
||||
// 訊息提示相關
|
||||
ShowMessage: false,
|
||||
MessageText: "",
|
||||
MessageType: ToastType.SUCCESS,
|
||||
|
||||
// 預設顯示時長(ms)
|
||||
defaultDuration: 5000,
|
||||
|
||||
// 將常數暴露給 Vue 實例使用
|
||||
ToastType: ToastType
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 顯示訊息提示
|
||||
* @param {string} message - 訊息內容
|
||||
* @param {string} type - 訊息類型: ToastType.SUCCESS, ToastType.ERROR, ToastType.WARNING, ToastType.INFO
|
||||
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
||||
*/
|
||||
ShowToast: function(message, type, duration) {
|
||||
if (type === undefined) {
|
||||
type = ToastType.SUCCESS;
|
||||
}
|
||||
if (duration === undefined) {
|
||||
duration = this.defaultDuration;
|
||||
}
|
||||
|
||||
this.MessageText = message;
|
||||
this.MessageType = type;
|
||||
this.ShowMessage = true;
|
||||
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.ShowMessage = false;
|
||||
}, duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* 顯示成功訊息
|
||||
* @param {string} message - 訊息內容
|
||||
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
||||
*/
|
||||
ShowSuccess: function(message, duration) {
|
||||
this.ShowToast(message, ToastType.SUCCESS, duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* 顯示錯誤訊息
|
||||
* @param {string} message - 訊息內容
|
||||
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
||||
*/
|
||||
ShowError: function(message, duration) {
|
||||
this.ShowToast(message, ToastType.ERROR, duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* 顯示警告訊息
|
||||
* @param {string} message - 訊息內容
|
||||
* @param {number} duration - 顯示時長（毫秒），預設 4000ms
|
||||
*/
|
||||
ShowWarning: function(message, duration) {
|
||||
if (duration === undefined) {
|
||||
duration = this.defaultDuration;
|
||||
}
|
||||
this.ShowToast(message, ToastType.WARNING, duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* 顯示資訊訊息
|
||||
* @param {string} message - 訊息內容
|
||||
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
||||
*/
|
||||
ShowInfo: function(message, duration) {
|
||||
this.ShowToast(message, ToastType.INFO, duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* 隱藏訊息提示
|
||||
*/
|
||||
HideToast: function() {
|
||||
this.ShowMessage = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Vendored
+11
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
||||
if (typeof(Sys.Browser.WebKit) == "undefined") {
|
||||
Sys.Browser.WebKit = {};
|
||||
}
|
||||
|
||||
if (navigator.userAgent.indexOf("WebKit/") > -1) {
|
||||
Sys.Browser.agent = Sys.Browser.WebKit;
|
||||
Sys.Browser.version = parseFloat(navigator.userAgent.match(/Webkit\/(\d+(\.\d+)?)/)[1]);
|
||||
Sys.Browser.name = "WebKit";
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,455 @@
|
||||
function CreateTrainFareApp() {
|
||||
const loadMarker = document.getElementById('TrainFareAPP');
|
||||
if (loadMarker) {
|
||||
DoCreateTrainFareApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateTrainFareApp() {
|
||||
trainFareApp = new Vue({
|
||||
el: "#TrainFareAPP",
|
||||
mixins: [DateMixin, ToastMixin, ApiMixin],
|
||||
data: {
|
||||
versions: [],
|
||||
selectedVersionId: '',
|
||||
isEditMode: false,
|
||||
|
||||
originStations: [],
|
||||
destStations: [],
|
||||
fareData: {},
|
||||
editFareData: {},
|
||||
|
||||
loading: false
|
||||
},
|
||||
mounted() {
|
||||
this.LoadVersions();
|
||||
},
|
||||
methods: {
|
||||
async LoadVersions() {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg('火車票價維護', 'GetVersions', {}, '載入版本清單');
|
||||
this.versions = result.Data || [];
|
||||
if (!this.selectedVersionId && this.versions.length > 0) {
|
||||
this.selectedVersionId = this.versions[0].Value;
|
||||
this.LoadFareTable();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('LoadVersions error:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async LoadFareTable() {
|
||||
if (!this.selectedVersionId) {
|
||||
this.originStations = [];
|
||||
this.destStations = [];
|
||||
this.fareData = {};
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'GetFareTable',
|
||||
{ versionId: this.selectedVersionId },
|
||||
'載入票價表'
|
||||
);
|
||||
|
||||
const data = result.Data || {};
|
||||
this.originStations = data.originStations || [];
|
||||
this.destStations = data.destStations || [];
|
||||
this.fareData = data.fares || {};
|
||||
this.editFareData = JSON.parse(JSON.stringify(this.fareData));
|
||||
this.isEditMode = false;
|
||||
} catch (error) {
|
||||
console.error('LoadFareTable error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
EnterEditMode() {
|
||||
this.editFareData = JSON.parse(JSON.stringify(this.fareData));
|
||||
this.isEditMode = true;
|
||||
},
|
||||
|
||||
CancelEdit() {
|
||||
this.editFareData = {};
|
||||
this.isEditMode = false;
|
||||
},
|
||||
|
||||
async SaveChanges() {
|
||||
if (!this.selectedVersionId) {
|
||||
this.ShowWarning('請先選擇版本');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'SaveFareTable',
|
||||
{
|
||||
versionId: this.selectedVersionId,
|
||||
fares: JSON.stringify(this.editFareData)
|
||||
},
|
||||
'儲存'
|
||||
);
|
||||
this.ShowSuccess('儲存成功');
|
||||
this.isEditMode = false;
|
||||
this.LoadVersions();
|
||||
this.LoadFareTable();
|
||||
} catch (error) {
|
||||
console.error('SaveChanges error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async DeleteVersion() {
|
||||
if (!this.selectedVersionId) {
|
||||
this.ShowWarning('請先選擇版本');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`確定要刪除版本 ${this.selectedVersionId} 嗎？`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'DeleteVersion',
|
||||
{ versionId: this.selectedVersionId },
|
||||
'刪除'
|
||||
);
|
||||
this.ShowSuccess('版本刪除成功');
|
||||
this.selectedVersionId = '';
|
||||
this.LoadVersions();
|
||||
this.LoadFareTable();
|
||||
} catch (error) {
|
||||
console.error('DeleteVersion error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
GetFare(origin, destination) {
|
||||
const key = `${origin}_${destination}`;
|
||||
return this.fareData[key] || '';
|
||||
},
|
||||
|
||||
GetFareInput(origin, destination) {
|
||||
if (origin === destination) return null;
|
||||
const key = `${origin}_${destination}`;
|
||||
return this.editFareData[key] || null;
|
||||
},
|
||||
|
||||
SetFareInput(origin, destination, value) {
|
||||
if (origin === destination) return;
|
||||
const key = `${origin}_${destination}`;
|
||||
// 轉換為整數，空值或非數字時設為 0
|
||||
const numValue = parseInt(value) || 0;
|
||||
this.$set(this.editFareData, key, numValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function CreateTrainFareImportExportApp() {
|
||||
const loadMarker = document.getElementById('TrainFareImportExportAPP');
|
||||
if (loadMarker) {
|
||||
DoCreateTrainFareImportExportApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateTrainFareImportExportApp() {
|
||||
const importExportApp = new Vue({
|
||||
el: "#TrainFareImportExportAPP",
|
||||
mixins: [DateMixin, ToastMixin, ApiMixin, Base64Mixin],
|
||||
data: {
|
||||
activeTab: 'export',
|
||||
versions: [],
|
||||
exportVersionId: '',
|
||||
exportResponse: null,
|
||||
|
||||
selectedFile: null,
|
||||
uploadedFilePath: null,
|
||||
importPreviewData: {},
|
||||
importOriginStations: [],
|
||||
importDestStations: [],
|
||||
checkResult: null,
|
||||
|
||||
loading: false
|
||||
},
|
||||
computed: {
|
||||
isImportButtonDisabled() {
|
||||
// 匯入按鈕禁用條件：
|
||||
// 1. 沒有上傳檔案
|
||||
// 2. 沒有驗證結果
|
||||
// 3. 驗證失敗
|
||||
// 4. 驗證未完成（success 不為 true）
|
||||
return !this.uploadedFilePath ||
|
||||
!this.checkResult ||
|
||||
!this.checkResult.success;
|
||||
},
|
||||
exportOriginStations() {
|
||||
return this.exportResponse?.Data?.originStations || [];
|
||||
},
|
||||
exportDestStations() {
|
||||
return this.exportResponse?.Data?.destStations || [];
|
||||
},
|
||||
exportData() {
|
||||
return this.exportResponse?.Data?.fares || {};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.LoadVersions();
|
||||
},
|
||||
watch: {
|
||||
exportVersionId() {
|
||||
// 版本選擇改變時，重置匯出數據
|
||||
this.exportResponse = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async LoadVersions() {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg('火車票價維護', 'GetVersions', {}, '載入版本清單');
|
||||
this.versions = result.Data || [];
|
||||
} catch (error) {
|
||||
console.error('LoadVersions error:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async DownloadTemplate() {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'GetExcelTemplate',
|
||||
{},
|
||||
'下載範本'
|
||||
);
|
||||
|
||||
// 下載 Excel 檔案
|
||||
const excelData = result.Data;
|
||||
if (!excelData) {
|
||||
this.ShowError('下載失敗：未取得範本檔案資料');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = this.Base64ToBlob(excelData);
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = '火車票價_匯入範本.xlsx';
|
||||
link.click();
|
||||
|
||||
this.ShowSuccess('範本下載成功');
|
||||
} catch (error) {
|
||||
console.error('DownloadTemplate error:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async ExportData() {
|
||||
if (!this.exportVersionId) {
|
||||
this.ShowWarning('請選擇版本');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'ExportFareData',
|
||||
{ versionId: this.exportVersionId },
|
||||
'匯出'
|
||||
);
|
||||
|
||||
// 儲存完整響應以供計算屬性使用
|
||||
this.exportResponse = result;
|
||||
|
||||
// 下載 Excel 檔案
|
||||
const excelData = result.ExcelData;
|
||||
if (!excelData) {
|
||||
this.ShowError('匯出失敗：未取得 Excel 檔案資料');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = this.Base64ToBlob(excelData);
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `火車票價_版本${this.exportVersionId}_${new Date().getTime()}.xlsx`;
|
||||
link.click();
|
||||
|
||||
this.ShowSuccess('匯出成功');
|
||||
} catch (error) {
|
||||
console.error('ExportData error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
OnFileSelected(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
this.selectedFile = file;
|
||||
this.checkResult = null;
|
||||
this.importPreviewData = {};
|
||||
this.importOriginStations = [];
|
||||
this.importDestStations = [];
|
||||
|
||||
this.UploadFile(file);
|
||||
},
|
||||
|
||||
UploadFile(file) {
|
||||
if (!file) {
|
||||
this.ShowError('請選擇檔案');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// 使用 .ashx Handler 上傳檔案
|
||||
const uploadUrl = `${API_BASE}/TrainFareUploadHandler.ashx`;
|
||||
|
||||
fetch(uploadUrl, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
try {
|
||||
const result = JSON.parse(text);
|
||||
|
||||
if (result && result.Success) {
|
||||
const uploadedFilePath = result.Data;
|
||||
this.ShowSuccess('檔案上傳成功');
|
||||
// 立即驗證上傳的檔案
|
||||
this.ValidateUploadedFile(uploadedFilePath);
|
||||
} else {
|
||||
const errorMsg = result ? result.Message : '上傳失敗';
|
||||
this.ShowError('上傳失敗：' + errorMsg);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Parse response error:', e);
|
||||
console.error('Response text:', text);
|
||||
this.ShowError('檔案上傳失敗：回應格式錯誤');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Upload error:', error);
|
||||
this.ShowError('檔案上傳失敗：' + error.message);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('UploadFile error:', error);
|
||||
this.ShowError('檔案上傳出錯：' + error.message);
|
||||
}
|
||||
},
|
||||
|
||||
async ValidateUploadedFile(filePath) {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'ValidateImportFile',
|
||||
{ filePath: filePath },
|
||||
'驗證檔案'
|
||||
);
|
||||
|
||||
this.checkResult = {
|
||||
success: result.Success,
|
||||
errors: result.Data?.Errors || []
|
||||
};
|
||||
|
||||
if (this.checkResult.success) {
|
||||
// 解析預覽資料
|
||||
this.uploadedFilePath = filePath;
|
||||
this.importPreviewData = result.Data?.Fares || {};
|
||||
this.importOriginStations = result.Data?.OriginStations || [];
|
||||
this.importDestStations = result.Data?.DestStations || [];
|
||||
this.ShowSuccess('檔案驗證成功');
|
||||
} else {
|
||||
this.ShowError('檔案驗證失敗');
|
||||
this.uploadedFilePath = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('ValidateUploadedFile error:', error);
|
||||
this.uploadedFilePath = null;
|
||||
}
|
||||
},
|
||||
|
||||
CancelImport() {
|
||||
this.selectedFile = null;
|
||||
this.uploadedFilePath = null;
|
||||
this.checkResult = null;
|
||||
this.importPreviewData = {};
|
||||
this.importOriginStations = [];
|
||||
this.importDestStations = [];
|
||||
const fileInput = document.querySelector('input[type="file"]');
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
},
|
||||
|
||||
async ImportData() {
|
||||
// 匯入按鈕已被禁用，不應該執行到這裡
|
||||
// 但仍保留安全檢查作為雙重保障
|
||||
if (!this.uploadedFilePath || !this.checkResult || !this.checkResult.success) {
|
||||
this.ShowWarning('請先上傳並驗證檔案');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'火車票價維護',
|
||||
'ImportFareData',
|
||||
{
|
||||
mode: 'new',
|
||||
versionId: null,
|
||||
filePath: this.uploadedFilePath
|
||||
},
|
||||
'匯入'
|
||||
);
|
||||
|
||||
this.ShowSuccess('匯入成功');
|
||||
this.CancelImport();
|
||||
|
||||
// 更新版本清單
|
||||
if (trainFareApp) {
|
||||
trainFareApp.LoadVersions();
|
||||
}
|
||||
this.LoadVersions();
|
||||
} catch (error) {
|
||||
console.error('ImportData error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
GetExportFare(origin, destination) {
|
||||
const key = `${origin}_${destination}`;
|
||||
return this.exportData[key] || '';
|
||||
},
|
||||
|
||||
GetImportFare(origin, destination) {
|
||||
const key = `${origin}_${destination}`;
|
||||
return this.importPreviewData[key] || '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//// 頁面載入時建立 Vue 應用
|
||||
//document.addEventListener('DOMContentLoaded', function () {
|
||||
// CreateTrainFareApp();
|
||||
// CreateTrainFareImportExportApp();
|
||||
//});
|
||||
@@ -0,0 +1,641 @@
|
||||
let taxReceiptApp = null;
|
||||
|
||||
function CreateTaxReceiptApp() {
|
||||
const loadMarker = document.getElementById('taxReceiptApp');
|
||||
if (loadMarker) {
|
||||
DoCreateTaxReceiptApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateTaxReceiptApp() {
|
||||
taxReceiptApp = new Vue({
|
||||
el: '#taxReceiptApp',
|
||||
mixins: [ToastMixin, ApiMixin],
|
||||
data: {
|
||||
activeTab: 0,
|
||||
currentYear: '',
|
||||
currentClosingMonth: '',
|
||||
newClosingMonth: '',
|
||||
loading: false,
|
||||
message: '',
|
||||
messageType: 'info',
|
||||
summaryTable: {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
identity: '',
|
||||
paymentMethod: '',
|
||||
identityOptions: [],
|
||||
paymentMethodOptions: [],
|
||||
dataList: [],
|
||||
loading: false,
|
||||
message: '',
|
||||
messageType: 'info'
|
||||
},
|
||||
detailTable: {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
identity: '',
|
||||
certificateType: '',
|
||||
identityOptions: [],
|
||||
certificateTypeOptions: [],
|
||||
dataList: [],
|
||||
selectAll: false,
|
||||
senderEmail: '',
|
||||
emailSubject: '',
|
||||
emailBody: '',
|
||||
loading: false,
|
||||
message: '',
|
||||
messageType: 'info',
|
||||
emailMessage: '',
|
||||
emailMessageType: 'info',
|
||||
previewData: [],
|
||||
showEmailPreview: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initializeData();
|
||||
this.loadSummaryTableDropdowns();
|
||||
this.loadDetailTableDropdowns();
|
||||
// 確保預覽窗口初始為關閉狀態
|
||||
this.detailTable.showEmailPreview = false;
|
||||
this.detailTable.previewData = [];
|
||||
},
|
||||
mounted() {
|
||||
this.loadClosingMonthData();
|
||||
// 再次確保預覽窗口初始為關閉狀態
|
||||
this.$nextTick(() => {
|
||||
this.detailTable.showEmailPreview = false;
|
||||
this.detailTable.previewData = [];
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initializeData() {
|
||||
// 取得現行年度
|
||||
const now = new Date();
|
||||
this.currentYear = now.getFullYear().toString();
|
||||
},
|
||||
|
||||
async loadClosingMonthData() {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetClosingMonth',
|
||||
{},
|
||||
'載入關帳年月資料'
|
||||
);
|
||||
|
||||
if (result && result.Data) {
|
||||
this.currentClosingMonth = result.Data.currentClosingMonth || '';
|
||||
// 初始化新關帳年月為目前月份
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
this.newClosingMonth = `${year}-${month}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('載入關帳年月失敗:', error);
|
||||
this.showMessage('載入關帳年月失敗: ' + (error.message || '請檢查網路連線'), 'danger');
|
||||
}
|
||||
},
|
||||
|
||||
validateMonth() {
|
||||
if (!this.newClosingMonth) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 驗證格式 YYYY-MM
|
||||
const pattern = /^\d{4}-\d{2}$/;
|
||||
if (!pattern.test(this.newClosingMonth)) {
|
||||
this.showMessage('年月格式不正確，請使用 YYYY-MM 格式', 'danger');
|
||||
this.newClosingMonth = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 驗證年份
|
||||
const [year, month] = this.newClosingMonth.split('-');
|
||||
const yearNum = parseInt(year);
|
||||
const monthNum = parseInt(month);
|
||||
|
||||
// 月份範圍驗證
|
||||
if (monthNum < 1 || monthNum > 12) {
|
||||
this.showMessage('月份必須介於 01 到 12 之間', 'danger');
|
||||
this.newClosingMonth = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 年份不能超過現在
|
||||
const currentYear = new Date().getFullYear();
|
||||
if (yearNum > currentYear) {
|
||||
this.showMessage('年份不能超過現在', 'danger');
|
||||
this.newClosingMonth = '';
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
async saveClosingMonth() {
|
||||
if (!this.newClosingMonth) {
|
||||
this.showMessage('請輸入調整的關帳年月', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// 再次驗證
|
||||
this.validateMonth();
|
||||
if (!this.newClosingMonth) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 確認操作
|
||||
if (!confirm(`確認要將領據關帳年月調整為 ${this.newClosingMonth} 嗎？\n此操作將影響領據的修改權限。`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const params = {
|
||||
closingMonth: this.newClosingMonth
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'UpdateClosingMonth',
|
||||
params,
|
||||
'保存關帳年月'
|
||||
);
|
||||
|
||||
if (result && result.Success) {
|
||||
this.showMessage('關帳年月已成功更新', 'success');
|
||||
this.currentClosingMonth = this.newClosingMonth;
|
||||
// 清除輸入欄位
|
||||
setTimeout(() => {
|
||||
this.clearForm();
|
||||
}, 1500);
|
||||
} else {
|
||||
this.showMessage(result.Message || '保存失敗，請稍後重試', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存失敗:', error);
|
||||
this.showMessage('保存失敗: ' + (error.message || '請檢查網路連線'), 'danger');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
clearForm() {
|
||||
this.newClosingMonth = '';
|
||||
this.message = '';
|
||||
},
|
||||
|
||||
showMessage(text, type = 'info') {
|
||||
this.message = text;
|
||||
this.messageType = type;
|
||||
|
||||
// 3 秒後自動隱藏訊息
|
||||
if (type === 'success' || type === 'info') {
|
||||
setTimeout(() => {
|
||||
this.message = '';
|
||||
}, 3000);
|
||||
}
|
||||
},
|
||||
|
||||
async loadSummaryTableDropdowns() {
|
||||
try {
|
||||
// 加載身分別選項
|
||||
const identityResult = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetDropdownLists',
|
||||
{ key: '身分別' },
|
||||
'載入身分別選項'
|
||||
);
|
||||
if (identityResult && identityResult.Data) {
|
||||
this.summaryTable.identityOptions = identityResult.Data.filter(item => item.Value !== '');
|
||||
}
|
||||
|
||||
// 加載付款方式選項
|
||||
const paymentResult = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetDropdownLists',
|
||||
{ key: '付款方式' },
|
||||
'載入付款方式選項'
|
||||
);
|
||||
if (paymentResult && paymentResult.Data) {
|
||||
this.summaryTable.paymentMethodOptions = paymentResult.Data.filter(item => item.Value !== '');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加載下拉清單失敗:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async searchSummaryTable() {
|
||||
this.summaryTable.loading = true;
|
||||
this.summaryTable.message = '';
|
||||
this.summaryTable.dataList = [];
|
||||
|
||||
try {
|
||||
const params = {
|
||||
起日: this.summaryTable.startDate ? this.parseDate(this.summaryTable.startDate) : null,
|
||||
迄日: this.summaryTable.endDate ? this.parseDate(this.summaryTable.endDate) : null,
|
||||
身分別: this.summaryTable.identity || null,
|
||||
付款方式: this.summaryTable.paymentMethod || null,
|
||||
輸出方式: 'DATA'
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SearchSummaryTable',
|
||||
params,
|
||||
'查詢個人費用彙整表'
|
||||
);
|
||||
|
||||
if (result && result.Success) {
|
||||
this.summaryTable.dataList = result.Data || [];
|
||||
if (this.summaryTable.dataList.length === 0) {
|
||||
this.summaryTable.message = '查詢完成，但未找到符合條件的資料';
|
||||
this.summaryTable.messageType = 'info';
|
||||
} else {
|
||||
this.summaryTable.message = `查詢完成，共找到 ${this.summaryTable.dataList.length} 筆資料`;
|
||||
this.summaryTable.messageType = 'success';
|
||||
}
|
||||
} else {
|
||||
this.summaryTable.message = result.Message || '查詢失敗，請稍後重試';
|
||||
this.summaryTable.messageType = 'danger';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查詢失敗:', error);
|
||||
this.summaryTable.message = '查詢失敗: ' + (error.message || '請檢查網路連線');
|
||||
this.summaryTable.messageType = 'danger';
|
||||
} finally {
|
||||
this.summaryTable.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async exportSummaryTable() {
|
||||
if (this.summaryTable.dataList.length === 0) {
|
||||
this.summaryTable.message = '沒有資料可以匯出，請先執行查詢';
|
||||
this.summaryTable.messageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
this.summaryTable.loading = true;
|
||||
this.summaryTable.message = '';
|
||||
|
||||
try {
|
||||
const params = {
|
||||
起日: this.summaryTable.startDate ? this.parseDate(this.summaryTable.startDate) : null,
|
||||
迄日: this.summaryTable.endDate ? this.parseDate(this.summaryTable.endDate) : null,
|
||||
身分別: this.summaryTable.identity || null,
|
||||
付款方式: this.summaryTable.paymentMethod || null,
|
||||
輸出方式: 'EXPORT'
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SearchSummaryTable',
|
||||
params,
|
||||
'匯出個人費用彙整表'
|
||||
);
|
||||
|
||||
if (result && result.Success && result.Data) {
|
||||
// 下載 Excel 檔案
|
||||
const excelData = result.Data;
|
||||
if (excelData.excelData && excelData.fileName) {
|
||||
this.downloadExcel(excelData.excelData, excelData.fileName);
|
||||
this.summaryTable.message = '匯出成功';
|
||||
this.summaryTable.messageType = 'success';
|
||||
} else {
|
||||
this.summaryTable.message = '匯出失敗：無法取得檔案';
|
||||
this.summaryTable.messageType = 'danger';
|
||||
}
|
||||
} else {
|
||||
this.summaryTable.message = result.Message || '匯出失敗，請稍後重試';
|
||||
this.summaryTable.messageType = 'danger';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('匯出失敗:', error);
|
||||
this.summaryTable.message = '匯出失敗: ' + (error.message || '請檢查網路連線');
|
||||
this.summaryTable.messageType = 'danger';
|
||||
} finally {
|
||||
this.summaryTable.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
parseDate(dateString) {
|
||||
if (!dateString) return null;
|
||||
const date = new Date(dateString);
|
||||
return date.toISOString().split('T')[0];
|
||||
},
|
||||
|
||||
formatCurrency(value) {
|
||||
if (!value) return '0';
|
||||
return new Intl.NumberFormat('zh-TW', {
|
||||
style: 'currency',
|
||||
currency: 'TWD',
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(value);
|
||||
},
|
||||
|
||||
downloadExcel(excelBase64, fileName) {
|
||||
const binaryString = atob(excelBase64);
|
||||
const bytes = new Uint8Array(binaryString.length);
|
||||
for (let i = 0; i < binaryString.length; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
const blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(link);
|
||||
},
|
||||
|
||||
async loadDetailTableDropdowns() {
|
||||
try {
|
||||
// 加載身分別選項
|
||||
const identityResult = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetDropdownLists',
|
||||
{ key: '身分別' },
|
||||
'載入身分別選項'
|
||||
);
|
||||
if (identityResult && identityResult.Data) {
|
||||
this.detailTable.identityOptions = identityResult.Data.filter(item => item.Value !== '');
|
||||
}
|
||||
|
||||
// 加載憑證類別選項
|
||||
const certResult = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetDropdownLists',
|
||||
{ key: '憑證類別' },
|
||||
'載入憑證類別選項'
|
||||
);
|
||||
if (certResult && certResult.Data) {
|
||||
this.detailTable.certificateTypeOptions = certResult.Data.filter(item => item.Value !== '');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加載下拉清單失敗:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async searchDetailTable() {
|
||||
this.detailTable.loading = true;
|
||||
this.detailTable.message = '';
|
||||
this.detailTable.dataList = [];
|
||||
this.detailTable.selectAll = false;
|
||||
|
||||
try {
|
||||
const params = {
|
||||
起日: this.detailTable.startDate ? this.parseDate(this.detailTable.startDate) : null,
|
||||
迄日: this.detailTable.endDate ? this.parseDate(this.detailTable.endDate) : null,
|
||||
身分別: this.detailTable.identity || null,
|
||||
憑證類別: this.detailTable.certificateType || null,
|
||||
輸出方式: 'DATA'
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SearchDetailTable',
|
||||
params,
|
||||
'查詢扣繳明細'
|
||||
);
|
||||
|
||||
if (result && result.Success) {
|
||||
var resultData = (result.Data || []).map(item => ({
|
||||
...item,
|
||||
selected: false,
|
||||
showDetail: false
|
||||
}));
|
||||
this.detailTable.dataList = resultData;
|
||||
|
||||
if (this.detailTable.dataList.length === 0) {
|
||||
this.detailTable.message = '查詢完成，但未找到符合條件的資料';
|
||||
this.detailTable.messageType = 'info';
|
||||
} else {
|
||||
this.detailTable.message = `查詢完成，共找到 ${this.detailTable.dataList.length} 筆資料`;
|
||||
this.detailTable.messageType = 'success';
|
||||
}
|
||||
} else {
|
||||
this.detailTable.message = result.Message || '查詢失敗，請稍後重試';
|
||||
this.detailTable.messageType = 'danger';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查詢失敗:', error);
|
||||
this.detailTable.message = '查詢失敗: ' + (error.message || '請檢查網路連線');
|
||||
this.detailTable.messageType = 'danger';
|
||||
} finally {
|
||||
this.detailTable.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async exportDetailTable(kind) {
|
||||
if (this.detailTable.dataList.length === 0) {
|
||||
this.detailTable.message = '沒有資料可以匯出，請先執行查詢';
|
||||
this.detailTable.messageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
this.detailTable.loading = true;
|
||||
this.detailTable.message = '';
|
||||
|
||||
try {
|
||||
const params = {
|
||||
起日: this.detailTable.startDate ? this.parseDate(this.detailTable.startDate) : null,
|
||||
迄日: this.detailTable.endDate ? this.parseDate(this.detailTable.endDate) : null,
|
||||
身分別: this.detailTable.identity || null,
|
||||
憑證類別: this.detailTable.certificateType || null,
|
||||
輸出方式: `EXPORT_${kind}`,
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SearchDetailTable',
|
||||
params,
|
||||
'匯出扣繳明細'
|
||||
);
|
||||
|
||||
if (result && result.Success && result.Data) {
|
||||
const excelData = result.Data;
|
||||
if (excelData.excelData && excelData.fileName) {
|
||||
this.downloadExcel(excelData.excelData, excelData.fileName);
|
||||
this.detailTable.message = '匯出成功';
|
||||
this.detailTable.messageType = 'success';
|
||||
} else {
|
||||
this.detailTable.message = '匯出失敗：無法取得檔案';
|
||||
this.detailTable.messageType = 'danger';
|
||||
}
|
||||
} else {
|
||||
this.detailTable.message = result.Message || '匯出失敗，請稍後重試';
|
||||
this.detailTable.messageType = 'danger';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('匯出失敗:', error);
|
||||
this.detailTable.message = '匯出失敗: ' + (error.message || '請檢查網路連線');
|
||||
this.detailTable.messageType = 'danger';
|
||||
} finally {
|
||||
this.detailTable.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
toggleSelectAll() {
|
||||
this.detailTable.dataList.forEach(item => {
|
||||
item.selected = this.detailTable.selectAll;
|
||||
});
|
||||
},
|
||||
|
||||
async previewEmail() {
|
||||
// 檢查是否有選中的項目
|
||||
const selectedItems = this.detailTable.dataList.filter(item => item.selected);
|
||||
|
||||
if (selectedItems.length === 0) {
|
||||
this.detailTable.emailMessage = '請先勾選要發送的項目';
|
||||
this.detailTable.emailMessageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
// 檢查郵件設定
|
||||
if (!this.detailTable.senderEmail) {
|
||||
this.detailTable.emailMessage = '請輸入寄件人郵箱';
|
||||
this.detailTable.emailMessageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.detailTable.emailSubject) {
|
||||
this.detailTable.emailMessage = '請輸入郵件主旨';
|
||||
this.detailTable.emailMessageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.detailTable.emailBody) {
|
||||
this.detailTable.emailMessage = '請輸入郵件內文';
|
||||
this.detailTable.emailMessageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
this.detailTable.loading = true;
|
||||
this.detailTable.emailMessage = '';
|
||||
|
||||
try {
|
||||
// 提取選中項目的編號作為講師非講師編號
|
||||
const 講師非講師編號 = selectedItems.map(item => item.講師_非講師編號);
|
||||
|
||||
const params = {
|
||||
起日: this.detailTable.startDate ? this.parseDate(this.detailTable.startDate) : null,
|
||||
迄日: this.detailTable.endDate ? this.parseDate(this.detailTable.endDate) : null,
|
||||
身分別: this.detailTable.identity || null,
|
||||
憑證類別: this.detailTable.certificateType || null,
|
||||
輸出方式: 'PREVIEW',
|
||||
講師非講師編號: 講師非講師編號,
|
||||
寄件人郵箱: this.detailTable.senderEmail,
|
||||
郵件主旨: this.detailTable.emailSubject,
|
||||
郵件內文: this.detailTable.emailBody
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SendEmail',
|
||||
params,
|
||||
'預覽郵件'
|
||||
);
|
||||
|
||||
if (result && result.Success && result.Data) {
|
||||
this.detailTable.previewData = result.Data || [];
|
||||
this.detailTable.showEmailPreview = true;
|
||||
this.detailTable.emailMessage = '';
|
||||
} else {
|
||||
this.detailTable.emailMessage = result.Message || '預覽失敗，請稍後重試';
|
||||
this.detailTable.emailMessageType = 'danger';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('預覽失敗:', error);
|
||||
this.detailTable.emailMessage = '預覽失敗: ' + (error.message || '請檢查網路連線');
|
||||
this.detailTable.emailMessageType = 'danger';
|
||||
} finally {
|
||||
this.detailTable.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
closeEmailPreview() {
|
||||
this.detailTable.showEmailPreview = false;
|
||||
this.detailTable.previewData = [];
|
||||
},
|
||||
|
||||
async sendEmail() {
|
||||
// 檢查是否有選中的項目
|
||||
const selectedItems = this.detailTable.dataList.filter(item => item.selected);
|
||||
|
||||
if (selectedItems.length === 0) {
|
||||
this.detailTable.emailMessage = '請先勾選要發送的項目';
|
||||
this.detailTable.emailMessageType = 'warning';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`確認要發送郵件給 ${selectedItems.length} 位收件者嗎？`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.detailTable.loading = true;
|
||||
this.detailTable.emailMessage = '';
|
||||
|
||||
try {
|
||||
// 提取選中項目的編號作為講師非講師編號
|
||||
const 講師非講師編號 = selectedItems.map(item => item.講師_非講師編號);
|
||||
|
||||
const params = {
|
||||
起日: this.detailTable.startDate ? this.parseDate(this.detailTable.startDate) : null,
|
||||
迄日: this.detailTable.endDate ? this.parseDate(this.detailTable.endDate) : null,
|
||||
身分別: this.detailTable.identity || null,
|
||||
憑證類別: this.detailTable.certificateType || null,
|
||||
輸出方式: 'SENDMAIL',
|
||||
講師非講師編號: 講師非講師編號,
|
||||
寄件人郵箱: this.detailTable.senderEmail,
|
||||
郵件主旨: this.detailTable.emailSubject,
|
||||
郵件內文: this.detailTable.emailBody
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SendEmail',
|
||||
params,
|
||||
'發送郵件'
|
||||
);
|
||||
|
||||
if (result && result.Success) {
|
||||
this.detailTable.emailMessage = `郵件已排定發送給 ${selectedItems.length} 位收件者`;
|
||||
this.detailTable.emailMessageType = 'success';
|
||||
|
||||
// 關閉預覽小窗
|
||||
this.detailTable.showEmailPreview = false;
|
||||
this.detailTable.previewData = [];
|
||||
|
||||
// 清空勾選
|
||||
this.detailTable.dataList.forEach(item => {
|
||||
item.selected = false;
|
||||
});
|
||||
this.detailTable.selectAll = false;
|
||||
} else {
|
||||
this.detailTable.emailMessage = result.Message || '發送失敗，請稍後重試';
|
||||
this.detailTable.emailMessageType = 'danger';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('發送失敗:', error);
|
||||
this.detailTable.emailMessage = '發送失敗: ' + (error.message || '請檢查網路連線');
|
||||
this.detailTable.emailMessageType = 'danger';
|
||||
} finally {
|
||||
this.detailTable.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSendEmail() {
|
||||
const hasSelected = this.detailTable.dataList.some(item => item.selected);
|
||||
const hasEmail = this.detailTable.senderEmail && this.detailTable.senderEmail.trim().length > 0;
|
||||
const hasSubject = this.detailTable.emailSubject && this.detailTable.emailSubject.trim().length > 0;
|
||||
const hasBody = this.detailTable.emailBody && this.detailTable.emailBody.trim().length > 0;
|
||||
return hasSelected && hasEmail && hasSubject && hasBody && !this.detailTable.loading;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
function CreateReceiptImportApp() {
|
||||
const loadMarker = document.getElementById('receiptImportApp');
|
||||
if (loadMarker) {
|
||||
DoCreateReceiptImportApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateReceiptImportApp() {
|
||||
new Vue({
|
||||
el: '#receiptImportApp',
|
||||
mixins: [DateMixin, ToastMixin, ApiMixin, Base64Mixin],
|
||||
data: {
|
||||
selectedFile: null,
|
||||
isProcessing: false,
|
||||
|
||||
validationMessages: [],
|
||||
validationSuccess: false,
|
||||
validatedRowCount: 0,
|
||||
|
||||
importMessages: [],
|
||||
importSuccess: false,
|
||||
importSuccessCount: 0,
|
||||
importFailCount: 0,
|
||||
importDone: false
|
||||
},
|
||||
methods: {
|
||||
async downloadTemplate() {
|
||||
try {
|
||||
this.isProcessing = true;
|
||||
const result = await this.callApiWithErrorMsg('領據處理', 'DownloadImportTemplate', {}, '下載範本');
|
||||
|
||||
const excelData = result.Data && result.Data.excelData;
|
||||
if (!excelData) {
|
||||
this.ShowError('下載失敗：未取得範本檔案資料');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = this.Base64ToBlob(excelData);
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = (result.Data && result.Data.fileName) || '領據資料匯入格式.xlsx';
|
||||
link.click();
|
||||
|
||||
this.ShowSuccess('範本下載成功');
|
||||
} catch (error) {
|
||||
console.error('downloadTemplate error:', error);
|
||||
} finally {
|
||||
this.isProcessing = false;
|
||||
}
|
||||
},
|
||||
|
||||
onFileSelected(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
this.selectedFile = file;
|
||||
this.validationMessages = [];
|
||||
this.validationSuccess = false;
|
||||
this.validatedRowCount = 0;
|
||||
this.importMessages = [];
|
||||
this.importSuccess = false;
|
||||
this.importSuccessCount = 0;
|
||||
this.importFailCount = 0;
|
||||
this.importDone = false;
|
||||
},
|
||||
|
||||
uploadFile() {
|
||||
if (!this.selectedFile) {
|
||||
this.ShowWarning('請先選擇檔案');
|
||||
return;
|
||||
}
|
||||
|
||||
this.isProcessing = true;
|
||||
this.validationMessages = [];
|
||||
this.validationSuccess = false;
|
||||
this.validatedRowCount = 0;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', this.selectedFile);
|
||||
|
||||
const uploadUrl = API_BASE + '/ReceiptUploadHandler.ashx';
|
||||
|
||||
fetch(uploadUrl, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('HTTP error! status: ' + response.status);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
try {
|
||||
const result = JSON.parse(text);
|
||||
|
||||
if (result && result.Success) {
|
||||
const uploadedFilePath = result.Data;
|
||||
this.ShowSuccess('檔案上傳成功');
|
||||
this.ValidateUploadedFile(uploadedFilePath);
|
||||
} else {
|
||||
const errorMsg = result ? result.Message : '上傳失敗';
|
||||
this.ShowError('上傳失敗：' + errorMsg);
|
||||
this.isProcessing = false;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Parse response error:', e, 'Response text:', text);
|
||||
this.ShowError('檔案上傳失敗：回應格式錯誤');
|
||||
this.isProcessing = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Upload error:', error);
|
||||
this.ShowError('檔案上傳失敗：' + error.message);
|
||||
this.isProcessing = false;
|
||||
});
|
||||
},
|
||||
|
||||
async ValidateUploadedFile(filePath) {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg('領據處理', 'ValidateImportFile', { filePath: filePath }, '驗證檔案');
|
||||
|
||||
const data = result.Data || {};
|
||||
|
||||
if (data.Success) {
|
||||
this.validationSuccess = true;
|
||||
this.validatedRowCount = data.RowCount || 0;
|
||||
const warnings = data.Warnings || [];
|
||||
if (warnings.length > 0) {
|
||||
this.validationMessages = ['驗證通過，但有以下重複資料警告：'].concat(warnings);
|
||||
this.ShowWarning('驗證通過，但有重複資料，請確認後再匯入');
|
||||
} else {
|
||||
this.validationMessages = ['驗證通過'];
|
||||
this.ShowSuccess('檔案驗證成功');
|
||||
}
|
||||
} else {
|
||||
this.validationSuccess = false;
|
||||
this.validationMessages = data.Errors || ['驗證失敗'];
|
||||
this.ShowError('檔案驗證失敗');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('ValidateUploadedFile error:', error);
|
||||
this.validationSuccess = false;
|
||||
} finally {
|
||||
this.isProcessing = false;
|
||||
}
|
||||
},
|
||||
|
||||
async importData() {
|
||||
if (!this.validationSuccess) {
|
||||
this.ShowWarning('請先上傳並驗證檔案');
|
||||
return;
|
||||
}
|
||||
if (this.importDone) {
|
||||
this.ShowWarning('匯入已完成，請點擊「重新匯入」開始新的匯入');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.isProcessing = true;
|
||||
const result = await this.callApiWithErrorMsg('領據處理', 'ImportReceiptData', {}, '匯入');
|
||||
|
||||
const data = result.Data || {};
|
||||
const successCount = data.successCount || 0;
|
||||
const failCount = data.failCount || 0;
|
||||
const failedRows = data.failedRows || [];
|
||||
|
||||
this.importSuccessCount = successCount;
|
||||
this.importFailCount = failCount;
|
||||
this.importMessages = failedRows;
|
||||
this.importSuccess = (failCount === 0);
|
||||
|
||||
if (this.importSuccess) {
|
||||
this.ShowSuccess('匯入成功，共匯入 ' + successCount + ' 筆');
|
||||
} else {
|
||||
this.ShowWarning('匯入完成，成功 ' + successCount + ' 筆，失敗 ' + failCount + ' 筆');
|
||||
}
|
||||
|
||||
this.importDone = true;
|
||||
} catch (error) {
|
||||
console.error('importData error:', error);
|
||||
this.importSuccess = false;
|
||||
} finally {
|
||||
this.isProcessing = false;
|
||||
}
|
||||
},
|
||||
|
||||
resetImport() {
|
||||
this.selectedFile = null;
|
||||
this.validationMessages = [];
|
||||
this.validationSuccess = false;
|
||||
this.validatedRowCount = 0;
|
||||
this.importMessages = [];
|
||||
this.importSuccess = false;
|
||||
this.importSuccessCount = 0;
|
||||
this.importFailCount = 0;
|
||||
this.importDone = false;
|
||||
|
||||
const fileInput = document.querySelector('#receiptImportApp input[type="file"]');
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
function CreateReceiptSearchApp() {
|
||||
const loadMarker = document.getElementById('receiptSearchApp');
|
||||
if (loadMarker) {
|
||||
DoCreateReceiptSearchApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateReceiptSearchApp() {
|
||||
window.__vms = window.__vms || {}
|
||||
|
||||
if (window.__vms.receiptSearchApp)
|
||||
return;
|
||||
|
||||
console.log('Create receiptSearchApp');
|
||||
|
||||
window.__vms.receiptSearchApp = new Vue({
|
||||
el: '#receiptSearchApp',
|
||||
mixins: [DateMixin, ToastMixin, ApiMixin],
|
||||
data: {
|
||||
searchParams: {
|
||||
計畫代號: '',
|
||||
計畫名稱: '',
|
||||
活動日期_1: '',
|
||||
活動日期_2: '',
|
||||
身分別: '',
|
||||
講師_非講師編號: '',
|
||||
憑證類別: '',
|
||||
活動類別: '',
|
||||
付款方式: ''
|
||||
},
|
||||
dropdown: {
|
||||
身分別: [],
|
||||
憑證類別: [],
|
||||
付款方式: []
|
||||
},
|
||||
dataList: [],
|
||||
selectedItems: [],
|
||||
selectAll: false,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
totalCount: 0,
|
||||
totalPages: 0,
|
||||
loading: false
|
||||
},
|
||||
created() {
|
||||
// 從 AJAX 取得查詢用下拉選單資料
|
||||
this.loadSearchDropdownLists();
|
||||
|
||||
// 取回保存的查詢條件
|
||||
this.searchParams.計畫代號 = document.getElementById('ctl00_ContentPlaceHolder1_hid計畫代號').value;
|
||||
this.searchParams.計畫名稱 = document.getElementById('ctl00_ContentPlaceHolder1_hid計畫名稱').value;
|
||||
this.searchParams.活動日期_1 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_1').value;
|
||||
this.searchParams.活動日期_2 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_2').value;
|
||||
this.searchParams.身分別 = document.getElementById('ctl00_ContentPlaceHolder1_hid身分別').value;
|
||||
this.searchParams.憑證類別 = document.getElementById('ctl00_ContentPlaceHolder1_hid憑證類別').value;
|
||||
this.searchParams.活動類別 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動類別').value;
|
||||
this.searchParams.付款方式 = document.getElementById('ctl00_ContentPlaceHolder1_hid付款方式').value;
|
||||
this.currentPage = 1 * document.getElementById('ctl00_ContentPlaceHolder1_hidCurrentPage').value || 1;
|
||||
this.pageSize = 1 * document.getElementById('ctl00_ContentPlaceHolder1_hidPageSize').value || 20;
|
||||
},
|
||||
computed: {
|
||||
displayPages() {
|
||||
const pages = [];
|
||||
const start = Math.max(1, this.currentPage - 2);
|
||||
const end = Math.min(this.totalPages, this.currentPage + 2);
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.search();
|
||||
},
|
||||
methods: {
|
||||
async loadSearchDropdownLists() {
|
||||
this.dropdown.身分別 = await this.loadSearchDropdownList("身分別");
|
||||
this.dropdown.憑證類別 = await this.loadSearchDropdownList("憑證類別");
|
||||
this.dropdown.付款方式 = await this.loadSearchDropdownList("付款方式");
|
||||
},
|
||||
async loadSearchDropdownList(key) {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetSearchDropdownLists',
|
||||
{ key: key },
|
||||
'載入下拉選單'
|
||||
);
|
||||
return result.Data || [];
|
||||
}
|
||||
catch(error) {
|
||||
console.error('載入下拉選單失敗:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.searchParams.計畫代號 = '';
|
||||
this.searchParams.計畫名稱 = '';
|
||||
this.searchParams.活動日期_1 = '';
|
||||
this.searchParams.活動日期_2 = '';
|
||||
this.searchParams.身分別 = '';
|
||||
this.searchParams.憑證類別 = '';
|
||||
this.searchParams.活動類別 = '';
|
||||
this.searchParams.付款方式 = '';
|
||||
this.search();
|
||||
},
|
||||
|
||||
async search() {
|
||||
this.loading = true;
|
||||
|
||||
const params = {
|
||||
pageIndex: this.currentPage,
|
||||
pageSize: parseInt(this.pageSize),
|
||||
活動日期_1: this.searchParams.活動日期_1 || null,
|
||||
活動日期_2: this.searchParams.活動日期_2 || null,
|
||||
身分別: this.searchParams.身分別 || null,
|
||||
講師_非講師編號: this.searchParams.講師_非講師編號 || null,
|
||||
憑證類別: this.searchParams.憑證類別 || null,
|
||||
計畫代號: this.searchParams.計畫代號 || null,
|
||||
計畫名稱: this.searchParams.計畫名稱 || null,
|
||||
活動類別: this.searchParams.活動類別 || null,
|
||||
付款方式: this.searchParams.付款方式 || null,
|
||||
orderBy: ''
|
||||
};
|
||||
|
||||
// 保存查詢條件
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid計畫代號').value = params.計畫代號;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid計畫名稱').value = params.計畫名稱;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_1').value = params.活動日期_1;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_2').value = params.活動日期_2;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid身分別').value = params.身分別;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid憑證類別').value = params.憑證類別;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid活動類別').value = params.活動類別;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid付款方式').value = params.付款方式;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hidCurrentPage').value = this.currentPage;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hidPageSize').value = this.pageSize;
|
||||
|
||||
try {
|
||||
let value = null;
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SelectPage',
|
||||
params,
|
||||
'查詢'
|
||||
);
|
||||
// 使用 ConvertDatesInObject 自動轉換日期
|
||||
this.dataList = this.ConvertDatesInObject(result.Data || [], '-');
|
||||
this.totalCount = result.TotalCount;
|
||||
this.totalPages = Math.ceil(this.totalCount / this.pageSize);
|
||||
this.selectedItems = [];
|
||||
this.selectAll = false;
|
||||
}
|
||||
catch (error) {
|
||||
console.error('查詢失敗:', error);
|
||||
}
|
||||
finally {
|
||||
this.loading = false;
|
||||
};
|
||||
},
|
||||
|
||||
searchButtonClick()
|
||||
{
|
||||
this.currentPage = 1;
|
||||
this.search();
|
||||
},
|
||||
|
||||
changePage(page) {
|
||||
if (page >= 1 && page <= this.totalPages) {
|
||||
this.currentPage = page;
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
|
||||
toggleSelectAll() {
|
||||
if (this.selectAll) {
|
||||
this.selectedItems = [...this.dataList];
|
||||
} else {
|
||||
this.selectedItems = [];
|
||||
}
|
||||
},
|
||||
|
||||
addNew() {
|
||||
// 切換到領據登錄與修改分頁
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value = '';
|
||||
window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab2', '');
|
||||
},
|
||||
|
||||
edit(編號) {
|
||||
// 切換到領據登錄與修改分頁，並進入該行資料的修改
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value = 編號;
|
||||
window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab2', '');
|
||||
},
|
||||
|
||||
async printSelected() {
|
||||
if (this.selectedItems.length === 0) {
|
||||
this.ShowWarning('請選擇要列印的領據');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const idList = this.selectedItems.map(item => item.編號);
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'Print',
|
||||
{ idList: idList },
|
||||
'列印領據'
|
||||
);
|
||||
|
||||
if (result.Success) {
|
||||
// 下載 Excel 檔案
|
||||
if (result.Data && result.Data.fileName) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
|
||||
link.download = result.Data.fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
this.ShowSuccess(result.Message);
|
||||
} else {
|
||||
this.ShowWarning(result.Message);
|
||||
}
|
||||
} else
|
||||
{
|
||||
this.ShowError('列印失敗: ' + (error.message || '請稍後重試'));
|
||||
}
|
||||
|
||||
// 列印完成後，刷新列表
|
||||
this.search();
|
||||
} catch (error) {
|
||||
this.ShowError('列印失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async doExport() {
|
||||
if (this.dataList.length === 0) {
|
||||
this.ShowWarning('請先查詢再匯出');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const idList = this.selectedItems.map(item => item.編號);
|
||||
|
||||
const params = {
|
||||
活動日期_1: this.searchParams.活動日期_1 || null,
|
||||
活動日期_2: this.searchParams.活動日期_2 || null,
|
||||
身分別: this.searchParams.身分別 || null,
|
||||
講師_非講師編號: this.searchParams.講師_非講師編號 || null,
|
||||
憑證類別: this.searchParams.憑證類別 || null,
|
||||
計畫代號: this.searchParams.計畫代號 || null,
|
||||
計畫名稱: this.searchParams.計畫名稱 || null,
|
||||
活動類別: this.searchParams.活動類別 || null,
|
||||
付款方式: this.searchParams.付款方式 || null,
|
||||
orderBy: ''
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'Export',
|
||||
params,
|
||||
'領據匯出'
|
||||
);
|
||||
|
||||
// 下載 Excel 檔案
|
||||
if (result.Data && result.Data.fileName) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
|
||||
link.download = result.Data.fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
this.ShowSuccess('匯出完成');
|
||||
} else {
|
||||
this.ShowError('匯出失敗，沒有檔案內容');
|
||||
}
|
||||
} catch (error) {
|
||||
this.ShowError('匯出失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
//async voidSelected() {
|
||||
// if (this.selectedItems.length === 0) {
|
||||
// this.ShowWarning('請選擇要作廢的領據');
|
||||
// return;
|
||||
// }
|
||||
// if (!confirm('確定要作廢/取消作廢選取的領據嗎？')) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this.loading = true;
|
||||
// try {
|
||||
// // 並行調用多個 API
|
||||
// const promises = this.selectedItems.map(item => {
|
||||
// return this.callApi('領據處理', 'Void', {
|
||||
// no: item.編號,
|
||||
// dbAppNo: item.DB_APPNO
|
||||
// });
|
||||
// });
|
||||
|
||||
// await Promise.all(promises);
|
||||
// this.ShowSuccess('作廢操作完成');
|
||||
// this.search();
|
||||
// } catch (error) {
|
||||
// console.error('Void error:', error);
|
||||
// this.ShowError('作廢操作失敗: ' + (error.message || '請檢查網路連線'));
|
||||
// } finally {
|
||||
// this.loading = false;
|
||||
// }
|
||||
//},
|
||||
|
||||
//async deleteSelected() {
|
||||
// if (this.selectedItems.length === 0) {
|
||||
// this.ShowWarning('請選擇要刪除的領據');
|
||||
// return;
|
||||
// }
|
||||
// if (!confirm('確定要刪除選取的領據嗎？此操作無法復原！')) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this.loading = true;
|
||||
// try {
|
||||
// // 並行調用多個 API
|
||||
// const promises = this.selectedItems.map(item => {
|
||||
// return this.callApi('領據處理', 'Delete', {
|
||||
// no: item.編號,
|
||||
// dbAppNo: item.DB_APPNO
|
||||
// });
|
||||
// });
|
||||
|
||||
// await Promise.all(promises);
|
||||
// this.ShowSuccess('刪除完成');
|
||||
// this.search();
|
||||
// } catch (error) {
|
||||
// console.error('Delete error:', error);
|
||||
// this.ShowError('刪除失敗: ' + (error.message || '請檢查網路連線'));
|
||||
// } finally {
|
||||
// this.loading = false;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,363 @@
|
||||
function CreateReceiptSearchApp() {
|
||||
const loadMarker = document.getElementById('receiptSearchApp');
|
||||
if (loadMarker) {
|
||||
DoCreateReceiptSearchApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateReceiptSearchApp() {
|
||||
window.__vms = window.__vms || {}
|
||||
|
||||
if (window.__vms.receiptSearchApp)
|
||||
return;
|
||||
|
||||
console.log('Create receiptSearchApp');
|
||||
|
||||
window.__vms.receiptSearchApp = new Vue({
|
||||
el: '#receiptSearchApp',
|
||||
mixins: [DateMixin, ToastMixin, ApiMixin],
|
||||
data: {
|
||||
searchParams: {
|
||||
計畫代號: '',
|
||||
計畫名稱: '',
|
||||
活動日期_1: '',
|
||||
活動日期_2: '',
|
||||
身分別: '',
|
||||
講師_非講師編號: '',
|
||||
憑證類別: '',
|
||||
活動類別: '',
|
||||
付款方式: '',
|
||||
領款人姓名: ''
|
||||
},
|
||||
dropdown: {
|
||||
身分別: [],
|
||||
憑證類別: [],
|
||||
付款方式: []
|
||||
},
|
||||
dataList: [],
|
||||
selectedItems: [],
|
||||
selectAll: false,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
totalCount: 0,
|
||||
totalPages: 0,
|
||||
loading: false
|
||||
},
|
||||
created() {
|
||||
// 從 AJAX 取得查詢用下拉選單資料
|
||||
this.loadSearchDropdownLists();
|
||||
|
||||
// 取回保存的查詢條件
|
||||
this.searchParams.計畫代號 = document.getElementById('ctl00_ContentPlaceHolder1_hid計畫代號').value;
|
||||
this.searchParams.計畫名稱 = document.getElementById('ctl00_ContentPlaceHolder1_hid計畫名稱').value;
|
||||
this.searchParams.活動日期_1 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_1').value;
|
||||
this.searchParams.活動日期_2 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_2').value;
|
||||
this.searchParams.身分別 = document.getElementById('ctl00_ContentPlaceHolder1_hid身分別').value;
|
||||
this.searchParams.憑證類別 = document.getElementById('ctl00_ContentPlaceHolder1_hid憑證類別').value;
|
||||
this.searchParams.活動類別 = document.getElementById('ctl00_ContentPlaceHolder1_hid活動類別').value;
|
||||
this.searchParams.付款方式 = document.getElementById('ctl00_ContentPlaceHolder1_hid付款方式').value;
|
||||
this.searchParams.領款人姓名 = document.getElementById('ctl00_ContentPlaceHolder1_hid領款人姓名').value;
|
||||
this.currentPage = 1 * document.getElementById('ctl00_ContentPlaceHolder1_hidCurrentPage').value || 1;
|
||||
this.pageSize = 1 * document.getElementById('ctl00_ContentPlaceHolder1_hidPageSize').value || 20;
|
||||
},
|
||||
computed: {
|
||||
displayPages() {
|
||||
const pages = [];
|
||||
const start = Math.max(1, this.currentPage - 2);
|
||||
const end = Math.min(this.totalPages, this.currentPage + 2);
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.search();
|
||||
},
|
||||
methods: {
|
||||
async loadSearchDropdownLists() {
|
||||
this.dropdown.身分別 = await this.loadSearchDropdownList("身分別");
|
||||
this.dropdown.憑證類別 = await this.loadSearchDropdownList("憑證類別");
|
||||
this.dropdown.付款方式 = await this.loadSearchDropdownList("付款方式");
|
||||
},
|
||||
async loadSearchDropdownList(key) {
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'GetSearchDropdownLists',
|
||||
{ key: key },
|
||||
'載入下拉選單'
|
||||
);
|
||||
return result.Data || [];
|
||||
}
|
||||
catch(error) {
|
||||
console.error('載入下拉選單失敗:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.searchParams.計畫代號 = '';
|
||||
this.searchParams.計畫名稱 = '';
|
||||
this.searchParams.活動日期_1 = '';
|
||||
this.searchParams.活動日期_2 = '';
|
||||
this.searchParams.身分別 = '';
|
||||
this.searchParams.憑證類別 = '';
|
||||
this.searchParams.活動類別 = '';
|
||||
this.searchParams.付款方式 = '';
|
||||
this.searchParams.領款人姓名 = '';
|
||||
this.currentPage = 1;
|
||||
this.search();
|
||||
},
|
||||
|
||||
async search() {
|
||||
this.loading = true;
|
||||
|
||||
const params = {
|
||||
pageIndex: this.currentPage,
|
||||
pageSize: parseInt(this.pageSize),
|
||||
活動日期_1: this.searchParams.活動日期_1 || null,
|
||||
活動日期_2: this.searchParams.活動日期_2 || null,
|
||||
身分別: this.searchParams.身分別 || null,
|
||||
講師_非講師編號: this.searchParams.講師_非講師編號 || null,
|
||||
憑證類別: this.searchParams.憑證類別 || null,
|
||||
計畫代號: this.searchParams.計畫代號 || null,
|
||||
計畫名稱: this.searchParams.計畫名稱 || null,
|
||||
活動類別: this.searchParams.活動類別 || null,
|
||||
付款方式: this.searchParams.付款方式 || null,
|
||||
領款人姓名: this.searchParams.領款人姓名 || null,
|
||||
orderBy: ''
|
||||
};
|
||||
|
||||
// 保存查詢條件
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid計畫代號').value = params.計畫代號;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid計畫名稱').value = params.計畫名稱;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_1').value = params.活動日期_1;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid活動日期_2').value = params.活動日期_2;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid身分別').value = params.身分別;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid憑證類別').value = params.憑證類別;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid活動類別').value = params.活動類別;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid付款方式').value = params.付款方式;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid領款人姓名').value = params.領款人姓名;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hidCurrentPage').value = this.currentPage;
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hidPageSize').value = this.pageSize;
|
||||
|
||||
try {
|
||||
let value = null;
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'SelectPage',
|
||||
params,
|
||||
'查詢'
|
||||
);
|
||||
// 使用 ConvertDatesInObject 自動轉換日期
|
||||
this.dataList = this.ConvertDatesInObject(result.Data || [], '-');
|
||||
this.totalCount = result.TotalCount;
|
||||
this.totalPages = Math.ceil(this.totalCount / this.pageSize);
|
||||
this.selectedItems = [];
|
||||
this.selectAll = false;
|
||||
|
||||
// 花花: 儲存當前頁編號清單及總頁數，供領據處理上下筆導航使用
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hidIdList').value =
|
||||
JSON.stringify(this.dataList.map(item => item.編號));
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hidNavTotalPages').value = this.totalPages;
|
||||
}
|
||||
catch (error) {
|
||||
console.error('查詢失敗:', error);
|
||||
}
|
||||
finally {
|
||||
this.loading = false;
|
||||
};
|
||||
},
|
||||
|
||||
searchButtonClick()
|
||||
{
|
||||
this.currentPage = 1;
|
||||
this.search();
|
||||
},
|
||||
|
||||
changePage(page) {
|
||||
if (page >= 1 && page <= this.totalPages) {
|
||||
this.currentPage = page;
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
|
||||
toggleSelectAll() {
|
||||
if (this.selectAll) {
|
||||
this.selectedItems = [...this.dataList];
|
||||
} else {
|
||||
this.selectedItems = [];
|
||||
}
|
||||
},
|
||||
|
||||
addNew() {
|
||||
// 切換到領據登錄與修改分頁
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value = '';
|
||||
window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab2', '');
|
||||
},
|
||||
|
||||
edit(編號) {
|
||||
// 切換到領據登錄與修改分頁，並進入該行資料的修改
|
||||
document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value = 編號;
|
||||
window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab2', '');
|
||||
},
|
||||
|
||||
async printSelected() {
|
||||
if (this.selectedItems.length === 0) {
|
||||
this.ShowWarning('請選擇要列印的領據');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const idList = this.selectedItems.map(item => item.編號);
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'Print',
|
||||
{ idList: idList },
|
||||
'列印領據'
|
||||
);
|
||||
|
||||
if (result.Success) {
|
||||
// 下載 Excel 檔案
|
||||
if (result.Data && result.Data.fileName) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
|
||||
link.download = result.Data.fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
this.ShowSuccess(result.Message);
|
||||
} else {
|
||||
this.ShowWarning(result.Message);
|
||||
}
|
||||
} else
|
||||
{
|
||||
this.ShowError('列印失敗: ' + (error.message || '請稍後重試'));
|
||||
}
|
||||
|
||||
// 列印完成後，刷新列表
|
||||
this.search();
|
||||
} catch (error) {
|
||||
this.ShowError('列印失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async doExport() {
|
||||
if (this.dataList.length === 0) {
|
||||
this.ShowWarning('請先查詢再匯出');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const idList = this.selectedItems.map(item => item.編號);
|
||||
|
||||
const params = {
|
||||
活動日期_1: this.searchParams.活動日期_1 || null,
|
||||
活動日期_2: this.searchParams.活動日期_2 || null,
|
||||
身分別: this.searchParams.身分別 || null,
|
||||
講師_非講師編號: this.searchParams.講師_非講師編號 || null,
|
||||
憑證類別: this.searchParams.憑證類別 || null,
|
||||
計畫代號: this.searchParams.計畫代號 || null,
|
||||
計畫名稱: this.searchParams.計畫名稱 || null,
|
||||
活動類別: this.searchParams.活動類別 || null,
|
||||
付款方式: this.searchParams.付款方式 || null,
|
||||
領款人姓名: this.searchParams.領款人姓名 || null,
|
||||
orderBy: ''
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'Export',
|
||||
params,
|
||||
'領據匯出'
|
||||
);
|
||||
|
||||
// 下載 Excel 檔案
|
||||
if (result.Data && result.Data.fileName) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
|
||||
link.download = result.Data.fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
this.ShowSuccess('匯出完成');
|
||||
} else {
|
||||
this.ShowError('匯出失敗，沒有檔案內容');
|
||||
}
|
||||
} catch (error) {
|
||||
this.ShowError('匯出失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
//async voidSelected() {
|
||||
// if (this.selectedItems.length === 0) {
|
||||
// this.ShowWarning('請選擇要作廢的領據');
|
||||
// return;
|
||||
// }
|
||||
// if (!confirm('確定要作廢/取消作廢選取的領據嗎？')) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this.loading = true;
|
||||
// try {
|
||||
// // 並行調用多個 API
|
||||
// const promises = this.selectedItems.map(item => {
|
||||
// return this.callApi('領據處理', 'Void', {
|
||||
// no: item.編號,
|
||||
// dbAppNo: item.DB_APPNO
|
||||
// });
|
||||
// });
|
||||
|
||||
// await Promise.all(promises);
|
||||
// this.ShowSuccess('作廢操作完成');
|
||||
// this.search();
|
||||
// } catch (error) {
|
||||
// console.error('Void error:', error);
|
||||
// this.ShowError('作廢操作失敗: ' + (error.message || '請檢查網路連線'));
|
||||
// } finally {
|
||||
// this.loading = false;
|
||||
// }
|
||||
//},
|
||||
|
||||
//async deleteSelected() {
|
||||
// if (this.selectedItems.length === 0) {
|
||||
// this.ShowWarning('請選擇要刪除的領據');
|
||||
// return;
|
||||
// }
|
||||
// if (!confirm('確定要刪除選取的領據嗎？此操作無法復原！')) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// this.loading = true;
|
||||
// try {
|
||||
// // 並行調用多個 API
|
||||
// const promises = this.selectedItems.map(item => {
|
||||
// return this.callApi('領據處理', 'Delete', {
|
||||
// no: item.編號,
|
||||
// dbAppNo: item.DB_APPNO
|
||||
// });
|
||||
// });
|
||||
|
||||
// await Promise.all(promises);
|
||||
// this.ShowSuccess('刪除完成');
|
||||
// this.search();
|
||||
// } catch (error) {
|
||||
// console.error('Delete error:', error);
|
||||
// this.ShowError('刪除失敗: ' + (error.message || '請檢查網路連線'));
|
||||
// } finally {
|
||||
// this.loading = false;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,926 @@
|
||||
function CreateReceiptEditApp() {
|
||||
const loadMarker = document.getElementById('receiptEditApp');
|
||||
if (loadMarker) {
|
||||
DoCreateReceiptEditApp();
|
||||
}
|
||||
}
|
||||
|
||||
function DoCreateReceiptEditApp() {
|
||||
|
||||
window.__vms = window.__vms || {}
|
||||
|
||||
if (window.__vms.receiptEditApp)
|
||||
return;
|
||||
|
||||
window.__vms.receiptEditApp = new Vue({
|
||||
el: '#receiptEditApp',
|
||||
mixins: [DateMixin, ToastMixin, ApiMixin],
|
||||
data: {
|
||||
mode: 'view', // view, add, edit
|
||||
編號: 0,
|
||||
originalMainData: null,
|
||||
originalLaborData: null,
|
||||
originalTravelData: null,
|
||||
mainData: {
|
||||
編號: 0,
|
||||
表單編號: '',
|
||||
活動日期: '',
|
||||
身分別: '',
|
||||
講師_非講師編號: '',
|
||||
領款人姓名: '',
|
||||
身分證字號: '',
|
||||
憑證類別: '',
|
||||
計畫代號: '',
|
||||
計畫名稱: '',
|
||||
活動地點: '',
|
||||
活動類別: '',
|
||||
活動名稱事由: '',
|
||||
製單人員: '',
|
||||
付款方式: '',
|
||||
作廢: 0,
|
||||
列印次數: 0,
|
||||
已關帳: false,
|
||||
DB_APPNO: 1,
|
||||
DB_CRDAT: '',
|
||||
DB_CRUSR: '',
|
||||
DB_CRUSR_NAME: '',
|
||||
DB_TRDAT: '',
|
||||
DB_TRUSR: '',
|
||||
DB_TRUSR_NAME: ''
|
||||
},
|
||||
laborData: {
|
||||
編號: '',
|
||||
領據編號: 0,
|
||||
費用別: '',
|
||||
單價: 0,
|
||||
數量: 0,
|
||||
單位: '',
|
||||
扣繳類別: '',
|
||||
合計金額: 0,
|
||||
應扣繳稅額: 0,
|
||||
服務費: 0,
|
||||
作廢: 0,
|
||||
DB_APPNO: 1
|
||||
},
|
||||
travelData: {
|
||||
編號: '',
|
||||
領據編號: 0,
|
||||
票價資訊: '',
|
||||
費用別: '',
|
||||
起點: '',
|
||||
訖點: '',
|
||||
捷運公車: 0,
|
||||
火車: 0,
|
||||
計程車: 0,
|
||||
高鐵飛機: 0,
|
||||
自行開車: 0,
|
||||
過路費停車費: 0,
|
||||
住宿費: 0,
|
||||
合計: 0,
|
||||
作廢: 0,
|
||||
DB_APPNO: 1
|
||||
},
|
||||
dropdown: {
|
||||
身分別: [],
|
||||
憑證類別: [],
|
||||
付款方式: [],
|
||||
勞務費_費用別: [],
|
||||
差旅費_費用別: [],
|
||||
扣繳類別: [],
|
||||
單位別: []
|
||||
},
|
||||
recipientList: [],
|
||||
showRecipientDropdown: false,
|
||||
planList: [],
|
||||
showPlanDropdown: false,
|
||||
originStations: [],
|
||||
showOriginDropdown: false,
|
||||
destStations: [],
|
||||
showDestDropdown: false,
|
||||
stations: [],
|
||||
showActivityLocationPhrase: false,
|
||||
activityLocationPhrases: [],
|
||||
showActivityCategoryPhrase: false,
|
||||
activityCategoryPhrases: [],
|
||||
showTicketPricePhrase: false,
|
||||
ticketPricePhrases: [],
|
||||
loading: false,
|
||||
variables: {
|
||||
領據執行業務所得課稅門檻: 0,
|
||||
領據薪資課稅門檻: 0,
|
||||
領據基本工資: 0,
|
||||
領據執行業務所得稅率: 0,
|
||||
領據薪資稅率: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 從 AJAX 取得下拉選單資料
|
||||
this.loading = true;
|
||||
this.loadVariables();
|
||||
this.loadDropdownLists();
|
||||
this.loadPhraseLists();
|
||||
this.loading = false;
|
||||
this.mainData.製單人員 = V製單人員;
|
||||
this.編號 = 0;
|
||||
if (document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value !== '') {
|
||||
this.編號 = parseInt(document.getElementById('ctl00_ContentPlaceHolder1_hid編號').value) || 0;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.編號 !== 0) {
|
||||
this.mode = 'view';
|
||||
this.loadData(this.編號)
|
||||
} else {
|
||||
this.mode = 'add';
|
||||
this.reset();
|
||||
this.backupData();
|
||||
this.setDefault();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'laborData.單價'() {
|
||||
this.calculateLaborTotal();
|
||||
},
|
||||
'laborData.數量'() {
|
||||
this.calculateLaborTotal();
|
||||
},
|
||||
'laborData.扣繳類別'() {
|
||||
this.calculateTax();
|
||||
},
|
||||
'mainData.身分別'() {
|
||||
if (this.mode === 'add' || this.mode === 'edit') {
|
||||
this.mainData.講師_非講師編號 = '';
|
||||
this.mainData.領款人姓名 = '';
|
||||
this.mainData.身分證字號 = '';
|
||||
this.recipientList = [];
|
||||
}
|
||||
},
|
||||
'travelData.捷運公車'() { this.calculateTravelTotal(); },
|
||||
'travelData.火車'() { this.calculateTravelTotal(); },
|
||||
'travelData.計程車'() { this.calculateTravelTotal(); },
|
||||
'travelData.高鐵飛機'() { this.calculateTravelTotal(); },
|
||||
'travelData.自行開車'() { this.calculateTravelTotal(); },
|
||||
'travelData.過路費停車費'() { this.calculateTravelTotal(); },
|
||||
'travelData.住宿費'() { this.calculateTravelTotal(); }
|
||||
},
|
||||
computed: {
|
||||
isViewMode() {
|
||||
return this.mode === 'view';
|
||||
},
|
||||
isEditMode() {
|
||||
return this.mode === 'edit' || this.mode === 'add';
|
||||
},
|
||||
canAddNew() {
|
||||
return this.mode === 'view';
|
||||
},
|
||||
canEdit() {
|
||||
return this.mode === 'view' && this.編號 !== 0;
|
||||
},
|
||||
canCancel() {
|
||||
return this.mode === 'add' || this.mode === 'edit';
|
||||
},
|
||||
canSave() {
|
||||
return this.mode === 'add' || this.mode === 'edit';
|
||||
},
|
||||
canReturnToList() {
|
||||
return this.mode === 'view';
|
||||
},
|
||||
closed() {
|
||||
return this.mainData.已關帳;
|
||||
},
|
||||
laborWarnings() {
|
||||
const warnings = [];
|
||||
const 扣繳類別 = this.laborData.扣繳類別 || '';
|
||||
|
||||
// 費用別警告
|
||||
if (['演講費', '撰稿費'].indexOf(this.laborData.費用別) >= 0 && 扣繳類別 === '50') {
|
||||
warnings.push('扣繳類別只能是執行業務所得');
|
||||
}
|
||||
|
||||
// 合計金額警告
|
||||
if (扣繳類別 === '50' && this.laborData.合計金額 >= this.variables.領據基本工資) {
|
||||
warnings.push(`薪資不得超過基本工資${this.variables.領據基本工資}(含)，超過請拆成不同日期的領據`);
|
||||
}
|
||||
if ((扣繳類別.startsWith('9A') || 扣繳類別.startsWith('9B')) && this.laborData.合計金額 >= this.variables.領據執行業務所得課稅門檻) {
|
||||
warnings.push(`執行業務所得不得超過${this.variables.領據執行業務所得課稅門檻}(含)，超過請拆成不同日期的領據`);
|
||||
}
|
||||
|
||||
return warnings;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadVariables() {
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'GetVariables', {});
|
||||
if (result.Data) {
|
||||
this.variables = result.Data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('載入片語清單失敗:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadDropdownLists() {
|
||||
this.dropdown.身分別 = await this.loadDropdownList("身分別");
|
||||
this.dropdown.憑證類別 = await this.loadDropdownList("憑證類別");
|
||||
this.dropdown.付款方式 = await this.loadDropdownList("付款方式");
|
||||
this.dropdown.勞務費_費用別 = await this.loadDropdownList("勞務費_費用別");
|
||||
this.dropdown.差旅費_費用別 = await this.loadDropdownList("差旅費_費用別");
|
||||
this.dropdown.扣繳類別 = await this.loadDropdownList("扣繳類別");
|
||||
this.dropdown.單位別 = await this.loadDropdownList("單位別");
|
||||
},
|
||||
|
||||
async loadDropdownList(key) {
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'GetDropdownLists', { key });
|
||||
return result.Data || [];
|
||||
} catch (error) {
|
||||
console.error('載入下拉選單失敗:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
async loadPhraseLists() {
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'GetPhraseLists', {});
|
||||
if (result.Data) {
|
||||
this.activityLocationPhrases = result.Data.activityLocation || [];
|
||||
this.activityCategoryPhrases = result.Data.activityCategory || [];
|
||||
this.ticketPricePhrases = result.Data.ticketPrice || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('載入公用變數失敗:', error);
|
||||
}
|
||||
},
|
||||
|
||||
toggleActivityLocationPhrase() {
|
||||
if (this.isViewMode) return;
|
||||
this.showActivityLocationPhrase = !this.showActivityLocationPhrase;
|
||||
this.showActivityCategoryPhrase = false;
|
||||
this.showTicketPricePhrase = false;
|
||||
},
|
||||
|
||||
toggleActivityCategoryPhrase() {
|
||||
if (this.isViewMode) return;
|
||||
this.showActivityCategoryPhrase = !this.showActivityCategoryPhrase;
|
||||
this.showActivityLocationPhrase = false;
|
||||
this.showTicketPricePhrase = false;
|
||||
},
|
||||
|
||||
toggleTicketPricePhrase() {
|
||||
if (this.isViewMode) return;
|
||||
this.showTicketPricePhrase = !this.showTicketPricePhrase;
|
||||
this.showActivityLocationPhrase = false;
|
||||
this.showActivityCategoryPhrase = false;
|
||||
},
|
||||
|
||||
insertPhrase(fieldName, phrase) {
|
||||
let input;
|
||||
if (fieldName === '活動地點') {
|
||||
input = this.$refs.活動地點Input;
|
||||
this.showActivityLocationPhrase = false;
|
||||
} else if (fieldName === '活動類別') {
|
||||
input = this.$refs.活動類別Input;
|
||||
this.showActivityCategoryPhrase = false;
|
||||
} else if (fieldName === '票價資訊') {
|
||||
input = this.$refs.票價資訊Input;
|
||||
this.showTicketPricePhrase = false;
|
||||
}
|
||||
|
||||
if (input) {
|
||||
const startPos = input.selectionStart || input.value.length;
|
||||
const endPos = input.selectionEnd || input.value.length;
|
||||
const currentValue = input.value;
|
||||
const newValue = currentValue.substring(0, startPos) + phrase + currentValue.substring(endPos);
|
||||
|
||||
if (fieldName === '活動地點') {
|
||||
this.mainData.活動地點 = newValue;
|
||||
} else if (fieldName === '活動類別') {
|
||||
this.mainData.活動類別 = newValue;
|
||||
} else if (fieldName === '票價資訊') {
|
||||
this.travelData.票價資訊 = newValue;
|
||||
}
|
||||
|
||||
// 更新游標位置
|
||||
this.$nextTick(() => {
|
||||
input.focus();
|
||||
input.setSelectionRange(startPos + phrase.length, startPos + phrase.length);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
calculateLaborTotal() {
|
||||
const price = parseFloat(this.laborData.單價) || 0;
|
||||
const qty = parseFloat(this.laborData.數量) || 0;
|
||||
this.laborData.合計金額 = Math.round(price * qty);
|
||||
this.calculateTax();
|
||||
},
|
||||
|
||||
async calculateTax() {
|
||||
const laborFee = parseInt(this.laborData.合計金額) || 0;
|
||||
const category = this.laborData.扣繳類別 || '';
|
||||
|
||||
if (laborFee > 0 && category) {
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'CalcTax', {
|
||||
laborFee,
|
||||
category
|
||||
});
|
||||
this.laborData.應扣繳稅額 = result.Data;
|
||||
} catch (error) {
|
||||
console.error('計算稅額失敗:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
} else {
|
||||
this.laborData.應扣繳稅額 = 0;
|
||||
}
|
||||
},
|
||||
|
||||
calculateTravelTotal() {
|
||||
this.travelData.合計 =
|
||||
(parseInt(this.travelData.捷運公車) || 0) +
|
||||
(parseInt(this.travelData.火車) || 0) +
|
||||
(parseInt(this.travelData.計程車) || 0) +
|
||||
(parseInt(this.travelData.高鐵飛機) || 0) +
|
||||
(parseInt(this.travelData.自行開車) || 0) +
|
||||
(parseInt(this.travelData.過路費停車費) || 0) +
|
||||
(parseInt(this.travelData.住宿費) || 0);
|
||||
},
|
||||
|
||||
searchStation(field) {
|
||||
const key = this.travelData[field];
|
||||
|
||||
if (key && key.length > 0) {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: `${API_TRAIN_FARE}/SelectStation`,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8'
|
||||
},
|
||||
data: JSON.stringify({ key })
|
||||
})
|
||||
.then(response => {
|
||||
const result = response.data.d || response.data;
|
||||
if (result.Success) {
|
||||
this.stations = result.Data || [];
|
||||
} else {
|
||||
this.stations = [];
|
||||
this.ShowWarning(result.Message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('查詢車站失敗:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async searchRecipient() {
|
||||
const key = this.mainData.領款人姓名;
|
||||
const identity = this.mainData.身分別;
|
||||
const activationDate = this.mainData.活動日期;
|
||||
|
||||
if (!key || key.length === 0) {
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!identity) {
|
||||
this.ShowWarning('請先選擇身分別');
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
return;
|
||||
}
|
||||
if (!activationDate) {
|
||||
this.ShowWarning('請輸入活動日期');
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'SearchRecipient', { key, identity, activationDate });
|
||||
this.recipientList = result.Data || [];
|
||||
this.showRecipientDropdown = this.recipientList.length > 0;
|
||||
} catch (error) {
|
||||
console.error('查詢領款人失敗:', error);
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
this.ShowWarning(error.message);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
hideRecipientDropdown() {
|
||||
setTimeout(() => {
|
||||
this.showRecipientDropdown = false;
|
||||
this.recipientList = [];
|
||||
}, 200);
|
||||
},
|
||||
|
||||
selectRecipient(recipient) {
|
||||
this.mainData.講師_非講師編號 = recipient.Value;
|
||||
this.mainData.領款人姓名 = recipient.Name;
|
||||
this.mainData.身分證字號 = recipient.IdNumber;
|
||||
this.mainData.憑證類別 = recipient.VoucherType;
|
||||
this.laborData.扣繳類別 = recipient.ConductType;
|
||||
this.recipientList = [];
|
||||
this.showRecipientDropdown = false;
|
||||
},
|
||||
|
||||
async searchPlan() {
|
||||
const key = this.mainData.計畫代號;
|
||||
const year = this.mainData.活動日期 ? new Date(this.mainData.活動日期).getFullYear() - 1911 : null;
|
||||
|
||||
if (year === null) {
|
||||
this.ShowWarning("請輸入活動日期");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!key || key.length === 0) {
|
||||
this.planList = [];
|
||||
this.showPlanDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'SearchPlan', { key, year });
|
||||
this.planList = result.Data || [];
|
||||
this.showPlanDropdown = this.planList.length > 0;
|
||||
} catch (error) {
|
||||
console.error('查詢計畫失敗:', error);
|
||||
this.planList = [];
|
||||
this.showPlanDropdown = false;
|
||||
this.ShowWarning(error.message);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
selectPlan(plan) {
|
||||
this.mainData.計畫代號 = plan.Code;
|
||||
this.mainData.計畫名稱 = plan.Name;
|
||||
this.planList = [];
|
||||
this.showPlanDropdown = false;
|
||||
},
|
||||
|
||||
hidePlanDropdown() {
|
||||
setTimeout(() => {
|
||||
this.showPlanDropdown = false;
|
||||
this.planList = [];
|
||||
}, 200);
|
||||
},
|
||||
|
||||
async searchOriginStation() {
|
||||
const key = this.travelData.起點;
|
||||
|
||||
if (!key || key.length === 0) {
|
||||
this.originStations = [];
|
||||
this.showOriginDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('火車票價', 'SelectOriginStation', { key });
|
||||
this.originStations = result.Data || [];
|
||||
this.showOriginDropdown = this.originStations.length > 0;
|
||||
} catch (error) {
|
||||
console.error('查詢起點失敗:', error);
|
||||
this.originStations = [];
|
||||
this.showOriginDropdown = false;
|
||||
this.ShowWarning(error.message);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
selectOriginStation(station) {
|
||||
this.travelData.起點 = station.Name;
|
||||
this.originStations = [];
|
||||
this.showOriginDropdown = false;
|
||||
},
|
||||
|
||||
hideOriginDropdown() {
|
||||
setTimeout(() => {
|
||||
this.showOriginDropdown = false;
|
||||
this.originStations = [];
|
||||
}, 200);
|
||||
this.calculateFare();
|
||||
},
|
||||
|
||||
async searchDestStation() {
|
||||
const key = this.travelData.訖點;
|
||||
|
||||
if (!key || key.length === 0) {
|
||||
this.destStations = [];
|
||||
this.showDestDropdown = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('火車票價', 'SelectDestStation', { key });
|
||||
this.destStations = result.Data || [];
|
||||
this.showDestDropdown = this.destStations.length > 0;
|
||||
} catch (error) {
|
||||
console.error('查詢訖點失敗:', error);
|
||||
this.destStations = [];
|
||||
this.showDestDropdown = false;
|
||||
this.ShowWarning(error.message);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
selectDestStation(station) {
|
||||
this.travelData.訖點 = station.Name;
|
||||
this.destStations = [];
|
||||
this.showDestDropdown = false;
|
||||
},
|
||||
|
||||
hideDestDropdown() {
|
||||
setTimeout(() => {
|
||||
this.showDestDropdown = false;
|
||||
this.destStations = [];
|
||||
}, 200);
|
||||
this.calculateFare();
|
||||
},
|
||||
|
||||
async calculateFare() {
|
||||
const 起站 = this.travelData.起點;
|
||||
const 迄站 = this.travelData.訖點;
|
||||
|
||||
if (!起站 || !迄站) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('火車票價', 'SelectFare', { 起站, 迄站 });
|
||||
this.travelData.火車 = result.Data;
|
||||
this.calculateTravelTotal();
|
||||
} catch (error) {
|
||||
console.error('查詢票價失敗:', error);
|
||||
this.ShowWarning(error.message);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async save() {
|
||||
if (!this.validate() || (this.laborWarnings || []).length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const data = {
|
||||
isNew: this.mode === 'add',
|
||||
mainItem: this.mainData,
|
||||
laborItem: this.laborData,
|
||||
travelItem: this.travelData
|
||||
};
|
||||
|
||||
const result = await this.callApiWithErrorMsg('領據處理', 'Save', data, '儲存');
|
||||
this.ShowSuccess(result.Message);
|
||||
// 新增存檔更新編號變數
|
||||
if (this.mode === 'add') {
|
||||
this.編號 = result.Data.編號;
|
||||
}
|
||||
// 返回查看模式
|
||||
this.mode = 'view';
|
||||
this.loadData(this.編號);
|
||||
this.backupData();
|
||||
} catch (error) {
|
||||
console.error('Save error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
validate() {
|
||||
if (!this.mainData.身分別) {
|
||||
this.ShowWarning('請選擇身分別');
|
||||
return false;
|
||||
}
|
||||
if (!this.mainData.領款人姓名) {
|
||||
this.ShowWarning('請輸入領款人姓名');
|
||||
return false;
|
||||
}
|
||||
if (!this.mainData.計畫代號) {
|
||||
this.ShowWarning('請輸入計畫代號');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
returnToList() {
|
||||
if ((this.mode === 'add' || this.mode === 'edit') && !confirm("是否放棄" + (this.mode === 'add' ? '新增' : '修改')))
|
||||
return;
|
||||
window.__doPostBack('ctl00$ContentPlaceHolder1$btnTab1', '');
|
||||
},
|
||||
|
||||
backupData() {
|
||||
this.originalMainData = JSON.parse(JSON.stringify(this.mainData));
|
||||
this.originalLaborData = JSON.parse(JSON.stringify(this.laborData));
|
||||
this.originalTravelData = JSON.parse(JSON.stringify(this.travelData));
|
||||
},
|
||||
|
||||
restoreData() {
|
||||
if (this.originalMainData) {
|
||||
this.mainData = JSON.parse(JSON.stringify(this.originalMainData));
|
||||
}
|
||||
if (this.originalLaborData) {
|
||||
this.laborData = JSON.parse(JSON.stringify(this.originalLaborData));
|
||||
}
|
||||
if (this.originalTravelData) {
|
||||
this.travelData = JSON.parse(JSON.stringify(this.originalTravelData));
|
||||
}
|
||||
},
|
||||
|
||||
addNew() {
|
||||
if (this.mode !== 'view') {
|
||||
return;
|
||||
}
|
||||
this.mode = 'add';
|
||||
this.reset();
|
||||
this.backupData();
|
||||
this.setDefault();
|
||||
},
|
||||
|
||||
edit() {
|
||||
if (this.mode !== 'view') {
|
||||
return;
|
||||
}
|
||||
this.mode = 'edit';
|
||||
this.backupData();
|
||||
},
|
||||
|
||||
cancel() {
|
||||
if (this.mode === 'view') {
|
||||
return;
|
||||
}
|
||||
if (!confirm("是否放棄" + (this.mode === 'add' ? '新增' : '修改') + "，資料將復原？")) {
|
||||
return;
|
||||
}
|
||||
this.restoreData();
|
||||
this.mode = 'view';
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.mainData = {
|
||||
編號: 0,
|
||||
表單編號: '',
|
||||
活動日期: '',
|
||||
身分別: '',
|
||||
講師_非講師編號: '',
|
||||
領款人姓名: '',
|
||||
身分證字號: '',
|
||||
憑證類別: '',
|
||||
計畫代號: '',
|
||||
計畫名稱: '',
|
||||
活動地點: '',
|
||||
活動類別: '',
|
||||
活動名稱事由: '',
|
||||
付款方式: '',
|
||||
作廢: 0,
|
||||
列印次數: 0,
|
||||
DB_APPNO: 1,
|
||||
DB_CRDAT: '',
|
||||
DB_CRUSR: '',
|
||||
DB_CRUSR_NAME: '',
|
||||
DB_TRDAT: '',
|
||||
DB_TRUSR: '',
|
||||
DB_TRUSR_NAME: '',
|
||||
};
|
||||
this.laborData = {
|
||||
編號: '',
|
||||
領據編號: 0,
|
||||
費用別: '',
|
||||
單價: 0,
|
||||
數量: 0,
|
||||
單位: '',
|
||||
扣繳類別: '',
|
||||
合計金額: 0,
|
||||
應扣繳稅額: 0,
|
||||
服務費: 0,
|
||||
作廢: 0,
|
||||
DB_APPNO: 1
|
||||
};
|
||||
this.travelData = {
|
||||
編號: '',
|
||||
領據編號: 0,
|
||||
票價資訊: '',
|
||||
費用別: '',
|
||||
起點: '',
|
||||
訖點: '',
|
||||
捷運公車: 0,
|
||||
火車: 0,
|
||||
計程車: 0,
|
||||
高鐵飛機: 0,
|
||||
自行開車: 0,
|
||||
過路費停車費: 0,
|
||||
住宿費: 0,
|
||||
合計: 0,
|
||||
作廢: 0,
|
||||
DB_APPNO: 1
|
||||
};
|
||||
},
|
||||
|
||||
setDefault()
|
||||
{
|
||||
this.mainData.DB_CRDAT = this.FormatDate(new Date());
|
||||
this.mainData.DB_CRUSR = document.getElementById('ctl00_hidCurrentUser').value;
|
||||
this.mainData.DB_CRUSR_NAME = document.getElementById('ctl00_hidCurrentUserName').value;
|
||||
},
|
||||
|
||||
async loadData(no) {
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg('領據處理', 'GetOne', { no }, '載入');
|
||||
|
||||
const data = result.Data;
|
||||
|
||||
this.mainData = {
|
||||
編號: data.編號,
|
||||
表單編號: data.表單編號,
|
||||
活動日期: this.FormatDate(data.活動日期),
|
||||
身分別: data.身分別,
|
||||
講師_非講師編號: data.講師_非講師編號,
|
||||
領款人姓名: data.領款人姓名,
|
||||
身分證字號: data.身分證字號,
|
||||
憑證類別: data.憑證類別,
|
||||
計畫代號: data.計畫代號,
|
||||
計畫名稱: data.計畫名稱,
|
||||
活動地點: data.活動地點,
|
||||
活動類別: data.活動類別,
|
||||
活動名稱事由: data.活動名稱事由,
|
||||
付款方式: data.付款方式,
|
||||
作廢: data.作廢,
|
||||
列印次數: data.列印次數,
|
||||
已關帳: data.已關帳,
|
||||
DB_APPNO: data.DB_APPNO,
|
||||
DB_CRDAT: this.FormatDate(data.DB_CRDAT),
|
||||
DB_CRUSR: data.DB_CRUSR,
|
||||
DB_CRUSR_NAME: data.DB_CRUSR_NAME,
|
||||
DB_TRDAT: data.DB_TRUSR !== null ? this.FormatDate(data.DB_TRDAT) : '',
|
||||
DB_TRUSR: data.DB_TRUSR !== null ? data.DB_TRUSR : '',
|
||||
DB_TRUSR_NAME: data.DB_TRUSR != null ? data.DB_TRUSR_NAME: ''
|
||||
};
|
||||
this.laborData = {
|
||||
編號: data.勞務費_編號,
|
||||
領據編號: data.編號,
|
||||
費用別: data.勞務費_費用別,
|
||||
單價: data.勞務費_單價,
|
||||
數量: data.勞務費_數量,
|
||||
單位: data.勞務費_單位,
|
||||
扣繳類別: data.勞務費_扣繳類別,
|
||||
合計金額: data.勞務費_合計金額,
|
||||
應扣繳稅額: data.勞務費_應扣繳稅額,
|
||||
服務費: data.勞務費_服務費,
|
||||
作廢: data.勞務費_作廢
|
||||
};
|
||||
this.travelData = {
|
||||
編號: data.差旅費_編號,
|
||||
領據編號: data.編號,
|
||||
票價資訊: data.差旅費_票價資訊,
|
||||
費用別: data.差旅費_費用別,
|
||||
起點: data.差旅費_起點,
|
||||
訖點: data.差旅費_訖點,
|
||||
捷運公車: data.差旅費_捷運公車,
|
||||
火車: data.差旅費_火車,
|
||||
計程車: data.差旅費_計程車,
|
||||
高鐵飛機: data.差旅費_高鐵飛機,
|
||||
自行開車: data.差旅費_自行開車,
|
||||
過路費停車費: data.差旅費_過路費停車費,
|
||||
住宿費: data.差旅費_住宿費,
|
||||
合計: data.差旅費_合計,
|
||||
作廢: data.差旅費_作廢
|
||||
};
|
||||
|
||||
if (data.main) {
|
||||
this.mainData = data.main;
|
||||
}
|
||||
if (data.labor) {
|
||||
this.laborData = data.labor;
|
||||
}
|
||||
if (data.travel) {
|
||||
this.travelData = data.travel;
|
||||
}
|
||||
this.backupData();
|
||||
} catch (error) {
|
||||
console.error('LoadData error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async print() {
|
||||
if (this.mainData.作廢 !== 0) {
|
||||
this.ShowError('已作廢不可列印');
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApiWithErrorMsg(
|
||||
'領據處理',
|
||||
'Print',
|
||||
{ idList: [this.mainData.編號 ] },
|
||||
'列印領據'
|
||||
);
|
||||
|
||||
if (result.Success) {
|
||||
// 下載 Excel 檔案
|
||||
if (result.Data && result.Data.fileName) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${result.Data.excelData}`;
|
||||
link.download = result.Data.fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
this.ShowSuccess(result.Message);
|
||||
} else {
|
||||
this.ShowWarning(result.Message);
|
||||
}
|
||||
} else {
|
||||
this.ShowError('列印失敗: ' + (error.message || '請稍後重試'));
|
||||
}
|
||||
} catch (error) {
|
||||
this.ShowError('列印失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loadData(this.編號);
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async voidVoucher() {
|
||||
if (this.mainData.作廢 === 0 && !confirm("是否確定作廢？") || this.mainData.作廢 !== 0 && !confirm("是否確定取消作廢？")) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'Void', {
|
||||
no: this.mainData.編號
|
||||
});
|
||||
this.loadData(this.mainData.編號);
|
||||
this.ShowSuccess('作廢操作完成');
|
||||
} catch (error) {
|
||||
console.error('Void error:', error);
|
||||
this.ShowError('作廢操作失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async voidLaborFee() {
|
||||
if (this.laborData.作廢 === 0 && !confirm("是否確定作廢勞務費？") || this.laborData.作廢 !== 0 && !confirm("是否確定取消作廢勞務費？")) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'VoidLaborFee', {
|
||||
receiptNo: this.mainData.編號
|
||||
});
|
||||
this.loadData(this.mainData.編號);
|
||||
this.ShowSuccess('勞務費作廢操作完成');
|
||||
} catch (error) {
|
||||
console.error('VoidLaborFee error:', error);
|
||||
this.ShowError('勞務費作廢操作失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async voidTravelFee() {
|
||||
if (this.travelData.作廢 === 0 && !confirm("是否確定作廢差旅費？") || this.travelData.作廢 !== 0 && !confirm("是否確定取消作廢差旅費？")) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const result = await this.callApi('領據處理', 'VoidTravelFee', {
|
||||
receiptNo: this.mainData.編號
|
||||
});
|
||||
this.loadData(this.mainData.編號);
|
||||
this.ShowSuccess('差旅費作廢操作完成');
|
||||
} catch (error) {
|
||||
console.error('VoidTravelFee error:', error);
|
||||
this.ShowError('差旅費作廢操作失敗: ' + (error.message || '請檢查網路連線'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,8 @@
|
||||
let V身分別 = [];
|
||||
let V憑證類別 = [];
|
||||
let V付款方式 = [];
|
||||
let V勞務費_費用別 = [];
|
||||
let V差旅費_費用別 = [];
|
||||
let V扣繳類別 = [];
|
||||
let V單位別 = [];
|
||||
let V製單人員 = "";
|
||||
Reference in New Issue
Block a user