chore: 首次簽入 Thinkyu ASP.NET 專案

- 加入 Visual Studio / ASP.NET .gitignore - 排除建置輸出、IDE 設定、NuGet packages、大型 MSI 安裝檔
2026-09-10 09:42:37 +08:00
commit 577060bc78
2496 changed files with 501389 additions and 0 deletions
@@ -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);