# 行動版獨立站台規劃

> 狀態：草案（待畫面定案後再進入開發）
> 日期：2026-09-02

## 一、背景

行動版目前是教育訓練系統站台內的一個子目錄（`MobileSurvey/`），已提供「課程滿意度調查填寫入口」。
下一階段要加入：

1. **講師評鑑**（跟課/行政人員在外訓後填寫）
2. **差旅單輸入**（人派系統 RPAR/RPAD，給客戶員工使用）

由於行動版功能持續擴充，決定將行動版拆分為**獨立部署的同網域子站**（如 `m.domain.com`），前端採用 **Vue 2 SPA**，後端維持 **.NET Framework 3.5** 不變。

## 二、現況盤點

兩個系統、共用同一個資料庫（`THINKYU_WEB_TY_P`）：

| 系統 | 位置 | 技術 | 相關資料表 / 類別 |
|---|---|---|---|
| 教育訓練系統 | `教育訓練系統\Web` | .NET 3.5 WebForms Web Application（`Education.dll`） | 滿意度調查、心得報告、課程報名、講師外訓滿意度（講師評鑑）、領據/差旅費/勞務費、asmx WebService + Vue2 |
| 人員派遣管理系統（人派系統） | `Thinkyu\Web` | 舊 WNET 框架 Web Site（App_Code） | RPAR（出差主檔）、RPAD（出差費用）、RPAB（出差簽核）、BPSN（員工）、BPAP（外部人員） |

### 既有資源

- asmx WebService 模式：`Services/*.asmx.cs` 回傳 `ServiceResponse { Success, Message, Data, TotalCount }`
- 前端資源已內建於 `Scripts/`：`vue.js` / `vue.min.js`、`axios.min.js`、`jquery-1.12.4.min.js`
- 主站頁面 `領據資料作業.aspx` 已是「Vue 2 + axios + asmx」的實作範例
- 行動版既有登入使用 `LoginBPSN`（員工帳號驗證）

## 三、目標架構

```
┌─────────────────────────────────────────────┐
│ 行動版站台 m.domain.com（獨立部署，靜態 SPA）       │
│  Vue 2 SPA（登入/滿意度調查/講師評鑑/差旅單）         │
│  axios 呼叫 API，token 認證（不依賴 Session）       │
└──────────────────┬──────────────────────────┘
                   │ HTTPS + token header（CORS）
┌──────────────────▼──────────────────────────┐
│ 教育訓練系統 www.domain.com（後端 API 提供者，維持 .NET 3.5）│
│  ┌ MobileApi.asmx（新增，sessionless）          │
│  │   Login / 滿意度調查 / 講師評鑑 / 差旅單       │
│  ├ 新增 DAC：DAC_差旅單(RPAR)、DAC_差旅費(RPAD)  │
│  ├ 沿用 DAC：DAC_滿意度調查、DAC_心得報告、      │
│  │           DAC_課程報名、DAC_講師外訓滿意度    │
│  └ 同一個 THINKYU_WEB_TY_P 資料庫               │
└─────────────────────────────────────────────┘
```

### 關鍵決策

1. **獨立 Session → sessionless token 認證**
   - 行動版自己的登入頁 → 呼叫 `MobileApi.Login(帳號, 密碼)` → 用 `LoginBPSN` 驗證 → 回傳加密 token（FormsAuth ticket 或 HMAC，不需額外套件）
   - 之後每個 API 呼叫帶 `X-Mobile-Token` header，由 `ServiceBase` 讀取 token 還原使用者
   - 完全不碰 Session / StateServer / machineKey 共享，跨子網域不處理 cookie，主站 InProc session 完全不受影響

2. **主站只新增 API，不改既有 asmx**
   - 既有 `領據處理.asmx` 等服務供主站 Vue 頁面使用，維持不動
   - 新增獨立 `Services/MobileApi.asmx` 集中放行動版方法

3. **人派 RPAR/RPAD 不直接引用**
   - 人派系統的 `RparDAC` / `RpadDAC` 相依於 WNET 框架（`Wellan.Data.WDAC`），訓練系統無法直接引用
   - 在訓練系統內比照 `DAC_領據` 模式新增 `DAC_差旅單`（RPAR）、`DAC_差旅費`（RPAD），存取同一 DB

4. **既有 MobileSurvey 收斂**
   - 滿意度調查在 SPA 內重寫，`MobileSurvey/` 舊頁面保留至新站驗收上線後下架

## 四、MobileApi.asmx 端點設計（草案）

```csharp
// 認證
Login(userId, password)                     // LoginBPSN 驗證 → 回 token + 姓名

// 滿意度調查（沿用現有 MobileSurvey 邏輯）
Survey_GetList(token)                       // 未填的選課清單（Select選課紀錄 + 填寫數=0）
Survey_GetForm(token, courseId, studentId)  // 課程內容 + 已填資料（心得/建議/分數）
Survey_Save(token, courseId, studentId, ...)// 存滿意度調查 + 滿意度調查講師 + 滿意度調查課程企劃 + 心得報告

// 講師評鑑（複刻 Forms/辦訓狀況/講師評鑑.aspx）
Eval_GetTeacherList(token)                  // 可評鑑的講師清單（來源待確認）
Eval_GetForm(token, teacherId)              // 單筆（既有或空白）
Eval_Save(token, teacherId, ...)            // DAC_講師外訓滿意度 InsertOne/UpdateOne

// 差旅單（人派 RPAR/RPAD）
Travel_GetMyList(token)                     // 該員工的 RPAR 清單
Travel_GetForm(token, rpren)                // RPAR 主檔 + RPAD 明細
Travel_GetCategories(token)                 // RPTYP 類別 / 費用別下拉（查 BCLS）
Travel_Save(token, RPAR主檔, List<RPAD明細>) // 主檔 + 明細同一 TransactionScope
Travel_DeleteDetail(token, rpren, rpitm)
```

> 詳細欄位與驗證規則以上線前對齊現行頁面（`講師評鑑.aspx`、人派 `fmRparWorker.ascx`）為準。

## 五、差旅單資料結構（人派系統）

### RPAR（出差主檔）
`RPREN`（員工編號）、`RPNUM`（出差單號）、`RAITM`、`RPCNM`、`RPPYN`（計畫）、
`RPRDT/RPEDT`（起訖日期）、`RPTYP`（類別）、`RPTCT/RPTC1-3`（時數）、`RPFTR`（差旅費）、
`RPDOC`（事由/備註）、`RPUST`（狀態）、`RPPLC`（差旅地點）、`RPRTM/RPETM`、簽核欄位

### RPAD（出差費用明細）
`RPREN`、`RPITM`（明細序號）、`RPSTP/RPEDP`（起地點/迄地點）、`RPVCH`（單據號數）、
`RPDOC`（備註）、`RPDAT`（日期）、`RPSUM`（合計）

費用欄位對應（已自人派 `fmRparWorker.ascx` 確認）：

| 欄位 | 名稱 |
|---|---|
| RPF01 | 汽車 |
| RPF02 | 火車 |
| RPF03 | 捷運 |
| RPF04 | 高鐵 |
| RPF05 | 飛機 |
| RPF06 | 住宿費 |
| RPF07 | 雜費 |
| RPF08 | 過路費 |
| RPF09 | 待確認 |
| RPF10 | 待確認 |

`RPSUM = RPF01 + ... + RPF10`（新增/修改時自動計算）

## 六、前端 SPA 結構

```
m.domain.com/
  index.html
  js/
    vue.min.js、axios.min.js、jquery-1.12.4.min.js   ← 複製主站已用版本
    app.js（路由 + token 管理 + 共用 api-mixin/toast）
  pages/
    login.html        登入
    survey-list.html  滿意度調查清單
    survey-form.html  滿意度調查填寫（課程內每堂 + 整體 + 心得/建議）
    eval-list.html    講師評鑑清單
    eval-form.html    講師評鑑填寫
    travel-list.html  我的差旅單清單
    travel-form.html  差旅單/差旅費用輸入（動態明細列 + 即時合計）
  css/mobile.css
```

不採用打包工具（webpack/vite 皆不合 .NET 3.5 部署環境），沿用主站「原生 JS + Vue2 本地檔」做法，部署＝丟靜態檔。

## 七、部署與 CORS

- 行動版 SPA：靜態檔部署至 `m.domain.com`（IIS 靜態站台）
- 主站 `Global.asax` 對 `/Services/MobileApi.asmx` 回覆：
  - `Access-Control-Allow-Origin: https://m.domain.com`
  - `Access-Control-Allow-Headers: X-Mobile-Token, Content-Type`
  - token 認證不需 cookie，CORS 只做 origin + header，無 credentials
- `Web.config` 不需改 session / machineKey（sessionless）

## 八、權限原則

- 滿意度調查：僅限學員本人填寫自己的課程
- 講師評鑑：僅限跟課 / 行政人員
- 差旅單：僅限員工本人

## 九、時程建議（分三階段）

| 階段 | 內容 | 產出 |
|---|---|---|
| P1 骨架 | MobileApi.asmx（token 認證、CORS）+ LoginBPSN 登入 + SPA 登入頁/框架 + 部署 | 可登入的空站台 |
| P2 調查 + 評鑑 | 滿意度調查（移植現 MobileSurvey 邏輯）+ 講師評鑑 | 兩支功能上線 |
| P3 差旅單 | DAC_差旅單/DAC_差旅費（RPAR/RPAD）+ Travel_* API + 差旅單輸入畫面 | 三支功能齊全 |

## 十、風險與注意事項

1. **檔案編碼**：repo 內中文檔名/內容為 Big5 編碼，新增、修改檔案須留意 encoding
2. **RPF01-10 語意**：已確認至 RPF08（過路費），RPF09/10 需再對照人派畫面確認
3. **差旅單與領據系統是兩回事**：行動版寫 RPAR/RPAD（人派），**不是**訓練系統的 `領據/差旅費` 表，勿混用
4. **RPTYP 出差類別代碼**：需自人派 `BCLS` 撈下拉值
5. **舊 MobileSurvey 下架時機**：新站驗收上線後再關閉入口，避免空窗

## 十一、待確認事項（畫面定案時一併確認）

1. 採用 token sessionless（建議）或維持共用 cookie/session？
2. 差旅單主檔（RPAR）：員工是**新增一筆出差**（含類別、日期、時數）再填費用明細，還是**只補填既有出差單的費用**？
3. 講師評鑑的講師清單來源：**外部受訓紀錄**還是**訓練課程企劃的講師**？
4. 行動版滿意度調查是否比照現行 MobileSurvey 的完整流程（含心得/建議、填寫數判斷）？
5. RPF09 / RPF10 是否使用，欄位名稱為何？