為了練習Vue，來實做一個簡易的工單系統網站。一開始先做網站前期規畫思考，思考流程參考以下網站。
網站需求瞭解
此為一個簡易的工單系統網站，使用對象主要為業務及工程師，目的是方便雙方掌握專案進度。
網站架構規劃
在繪製網站架構前先思考兩者如何互相追蹤工單。大致流程為業務開工單並提交給工程師 → 工程師確認工單 → 專案結束後工程師完成工單。
架構規劃：
- 因兩個身分執行的事項有些微不同，需分開業務及工程師的介面。進入網站時使用者先選擇為業務或工程師。
- 每個人的工單不同，要有帳號密碼區分各自的頁面。
- 登入後進入工單畫面。
- 業務要開工單，所以有新增工單的按鈕。
- 新工單送出後，要知道工程師有沒有收到工單、確認這工單是否有問題，工單會進到工程師的待確認工單，業務的工單狀態為待工程師確認工單。
- 工單沒有問題工程師按下確認後工單會進到已接的工單，業務則是工程師已接工單。
- 待專案結束，工程師完成此工單，工單狀態為已完成的工單，業務則是工程師已完成工單。
因Vue主要特性為資料操控畫面，這邊先想好需要哪些資料：
- 工單名稱
- 技術人員主管、技術人員
- 工單類型：網站開發、網站修改、chatbot
- 測試日期
- 上線日期
- 檔案路徑
- 備註
如為網站開發又需要以下資料：網站標題、網站描述、網站關鍵字、追蹤碼
網頁版型設計
以Figma繪製網站介面。
選擇身分的部分設有兩個按鈕，分為開單人員(業務)跟技術人員(工程師)。
因為簡易工單，改為輸入信箱跟分機即可登入。
開單人員介面，左上有新增工單按鈕，使用Tab分開不同狀態的工單，從左到右循序漸進，以便追蹤工單狀態。
將預先思考的工單資料放置於草稿的表格中。
介面設有資料基本操作：增刪查改(CRUD)。
技術人員的工單有三個狀態的Tab，待確認設有確認及退回按鈕、已接單設有完成工單按鈕。
工單收合時只顯示工單編號、工單標題及狀態的日期。
後台功能設計
因需要信箱跟分機登入及儲存工單，因此需要建立一個資料庫，這邊使用google試算表做簡易資料庫。將使用者資料上傳到google sheet，再從google sheet傳遞工單到網站供使用者檢視。
以上就是簡易工單系統網站前期思考流程，接下來就是實作的部分，謝謝大家的觀看～~~
