實戰Vue簡易項目（3）需求分析

頁面佈局

1. App頁面總體佈局分上中下 || 上下部門；
2. NavigationBar -> 導航欄，每一個頁面所共有；
3. MainContext -> 頁面的主體，隨內容可滾動；
4. TabBar -> Tab欄，頁面可選，有的有，有的無；

可分離組件

• 日期組件；
• 審批流組件：

• 列表組件；

可分離的工具庫

• 申請單類型： ‘事假’、‘病假’、‘年假’；

  • 對應數據類型應該爲Number，須要一個轉換爲對應icon的方法；

• 申請單狀態： ‘審批中’、‘已拒絕’、‘執行中’、‘已結束’；

  • 對應數據類型應該爲Number，須要一個轉換爲對應icon的方法；

• 審批狀態：‘未到達’、‘待處理’、‘已拒絕’、‘已贊成’；

  • 對應數據類型應該爲Number，須要一個轉換爲提示文字的方法；

• 日期時間字段

  • 可能須要時間格式化工具庫；

項目文件結構

如下是項目資源src/下的預期文件結構，能夠先不看，後續一步步填充，甚至可能修改：

• Views

  • Layout

    • 只需加載一次的視圖主結構；

  • 業務文件夾

    • index.vue
    • others

• Components

  • 公用的才提取出來；

• styles

  • 全局樣式文件
  • 公用樣式文件

• router

  • 路由配置文件

• store

  • 狀態管理文件

• assets

  • 圖片、字體等資源文件

• utils

  • 公用的工具；

• constants

  • 常量配置文件

• mixins

  • 通用繼承組件

---

接下來聊點具體的業務：

角色

當前項目中，有兩類人：

申請人

• 申請人對應着「個人申請」、「詳情頁」、「新建申請」三個視圖；

  • 「個人申請」分爲「審批中」、「已完成」；

    • 「審批中」的列表數據；
    • 「已完成」的列表數據；

  • 「詳情頁」有兩種狀況：

    • 「審批中」的申請單，無操做性；
    • 「執行中」的申請單，能夠「結束」申請單；

  • 「新建申請」：

    • 收集申請單必要字段；
    • 有「提交」操做；

審批人

• 審批人對應着「個人審批」、「詳情頁」兩個視圖；

  • 「個人審批」分爲「待處理」、「已完成」；

    • 「待處理」的列表數據；
    • 「已完成」的列表數據；

  • 「詳情頁」有兩種狀況：

    • 「待處理」的申請單，能夠「贊成」、「拒絕」申請單；
    • 「已完成」的申請單，無操做性；

表單數據

「新建申請」表單數據；

「詳情頁」（審批）意見；

章節回顧

• 該如何劃分視圖Views，爲何這樣劃分
• 該如何提取組件，爲何這樣提取
• 該如何分離工具，爲何這樣分離

思考

• 接下來如何實現Views呢？