9.2 KiB
9.2 KiB
行動版獨立站台規劃
狀態:草案(待畫面定案後再進入開發) 日期:2026-09-02
一、背景
行動版目前是教育訓練系統站台內的一個子目錄(MobileSurvey/),已提供「課程滿意度調查填寫入口」。
下一階段要加入:
- 講師評鑑(跟課/行政人員在外訓後填寫)
- 差旅單輸入(人派系統 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 資料庫 │
└─────────────────────────────────────────────┘
關鍵決策
-
獨立 Session → sessionless token 認證
- 行動版自己的登入頁 → 呼叫
MobileApi.Login(帳號, 密碼)→ 用LoginBPSN驗證 → 回傳加密 token(FormsAuth ticket 或 HMAC,不需額外套件) - 之後每個 API 呼叫帶
X-Mobile-Tokenheader,由ServiceBase讀取 token 還原使用者 - 完全不碰 Session / StateServer / machineKey 共享,跨子網域不處理 cookie,主站 InProc session 完全不受影響
- 行動版自己的登入頁 → 呼叫
-
主站只新增 API,不改既有 asmx
- 既有
領據處理.asmx等服務供主站 Vue 頁面使用,維持不動 - 新增獨立
Services/MobileApi.asmx集中放行動版方法
- 既有
-
人派 RPAR/RPAD 不直接引用
- 人派系統的
RparDAC/RpadDAC相依於 WNET 框架(Wellan.Data.WDAC),訓練系統無法直接引用 - 在訓練系統內比照
DAC_領據模式新增DAC_差旅單(RPAR)、DAC_差旅費(RPAD),存取同一 DB
- 人派系統的
-
既有 MobileSurvey 收斂
- 滿意度調查在 SPA 內重寫,
MobileSurvey/舊頁面保留至新站驗收上線後下架
- 滿意度調查在 SPA 內重寫,
四、MobileApi.asmx 端點設計(草案)
// 認證
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.comAccess-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 + 差旅單輸入畫面 | 三支功能齊全 |
十、風險與注意事項
- 檔案編碼:repo 內中文檔名/內容為 Big5 編碼,新增、修改檔案須留意 encoding
- RPF01-10 語意:已確認至 RPF08(過路費),RPF09/10 需再對照人派畫面確認
- 差旅單與領據系統是兩回事:行動版寫 RPAR/RPAD(人派),不是訓練系統的
領據/差旅費表,勿混用 - RPTYP 出差類別代碼:需自人派
BCLS撈下拉值 - 舊 MobileSurvey 下架時機:新站驗收上線後再關閉入口,避免空窗
十一、待確認事項(畫面定案時一併確認)
- 採用 token sessionless(建議)或維持共用 cookie/session?
- 差旅單主檔(RPAR):員工是新增一筆出差(含類別、日期、時數)再填費用明細,還是只補填既有出差單的費用?
- 講師評鑑的講師清單來源:外部受訓紀錄還是訓練課程企劃的講師?
- 行動版滿意度調查是否比照現行 MobileSurvey 的完整流程(含心得/建議、填寫數判斷)?
- RPF09 / RPF10 是否使用,欄位名稱為何?