目录
- [1 创建数据源](#1 创建数据源)
- [2 搭建列表页面](#2 搭建列表页面)
- [3 搭建添加页面](#3 搭建添加页面)
- [4 搭建详情页面](#4 搭建详情页面)
- [5 配置页面跳转](#5 配置页面跳转)
- 最终效果
- 总结
我们现在的医疗小程序已经实现了用户的登录和注册，相当于系统已经知道你是谁的问题。在医疗场景里，不是登录人看病，而是登录人添加了就诊卡后，用卡号来看病。
一个登录人可以有多个就诊卡，每次切换一张卡来进行挂号预约。本篇我们介绍一下就诊人功能的搭建过程。
1 创建数据源
我们先需要设计一下表结构，来看我们需要用户填写那些信息
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | 文本 | 主键，自增 |
| user_id | 关联关系 | 所属用户ID，外键关联用户表 |
| card_no | 自动编号 | 院内就诊卡号 |
| is_child_no_id | 布尔值 | 是否"无身份证患儿"。1=是；0=否 |
| name | 文本 | 就诊人姓名 |
| gender | 枚举 | 性别：男M/女F/未知U |
| birth_date | 日期 | 出生日期 |
| ethnicity_code | 枚举 | 民族 |
| nationality_code | 枚举 | 国籍 |
| area | 所在地区 | 省市县 |
| address_detail | 文本 | 详细住址 |
| phone | 电话 | 就诊人手机号 |
| id_type | 枚举 | 证件类型（is_child_no_id=0 时必填） |
| id_number | 文本 | 证件号码（is_child_no_id=0 时必填；身份证可用 CHAR(18)） |
| guardian_name | 文本 | 监护人姓名（is_child_no_id=1 时必填） |
| guardian_relation | 枚举 | 与患儿关系 |
| guardian_id_type | 枚举 | 监护人证件类型（is_child_no_id=1 时必填） |
| guardian_id_number | 文本 | 监护人证件号码（is_child_no_id=1 时必填） |
| guardian_phone | 手机 | 监护人手机号 |
| is_active | 布尔值 | 是否启用/有效（0/1） |
点击数据模型，创建我们的就诊人表
添加数据模型名称和标识，添加关联用户字段，和用户表建立关系
依次添加其余字段
2 搭建列表页面
对于这类常规操作场景，我们通常有几个动作，列表查看、新增、修改、查看详情、删除动作。不同动作需要不同的页面。
点击创建页面的图标，先添加就诊人列表页面
在网格布局的第一列里添加普通容器，里边放置单行输入组件和按钮
单行输入修改一下模板，改为搜索模板
按钮的尺寸改为小
设置普通容器的布局为横向排列，垂直居中
将第二行的列数量改为1
里边添加数据列表组件，模板选择图文列表，数据模型选择就诊人表
里边的样式我们先不设置，等把框架搭建好最后设置数据的显示样式
第三行我们添加普通容器里边放置一个按钮组件
3 搭建添加页面
列表页面框架搭建好之后，继续新增页面，添加就诊人添加页面
添加表单容器，选择就诊人表
我们的表单是分两种状态，一种是有身份证的，一种是无证件的患儿，需要通过开关按钮来控制字段的显示
先把无身份证患儿移入标题里
覆盖一下组件样式，取消下边的下划线
bash
:root {}
:scope .wd-form-item-wrap{
border: none;
}绑定就诊人手机号的条件展示，当开关打开的时候隐藏
设置监护人姓名组件的条件展示，当开关打开的时候显示
在表单提交成功后增加一个返回上一页的事件
4 搭建详情页面
创建一个就诊人详情页面
进入详情页，我们需要知道是哪一条数据，需要接收从列表页面传入的数据标识，创建一个URL参数id
添加数据详情组件，选择就诊人表
增加一个数据筛选条件，当数据标识等于传入的参数查询出数据来
5 配置页面跳转
现在基本页面已经搭建好了，我们要从列表页面跳转到新增页面，给按钮配置点击事件，打开新增页面
当点击列表的数据，配置点击事件，打开详情页面，并且传入数据标识
最终效果
打开列表页面，可以看到当前登录人添加的就诊人列表信息
点击添加就诊人，可以添加信息
点击列表的人员，可以查看详细信息
总结
本篇我们讲解了就诊人功能框架的搭建，包括列表查询、新增、查看详情几个功能。并且用页面跳转事件完成了页面之间的链接，下一篇我们继续完善页面效果，让他和一个真实的就诊小程序的效果保持一致，敬请期待。