实战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呢？