医疗小程序04添加就诊人

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 配置页面跳转

现在基本页面已经搭建好了，我们要从列表页面跳转到新增页面，给按钮配置点击事件，打开新增页面

当点击列表的数据，配置点击事件，打开详情页面，并且传入数据标识

最终效果

打开列表页面，可以看到当前登录人添加的就诊人列表信息

点击添加就诊人，可以添加信息

点击列表的人员，可以查看详细信息

总结

本篇我们讲解了就诊人功能框架的搭建，包括列表查询、新增、查看详情几个功能。并且用页面跳转事件完成了页面之间的链接，下一篇我们继续完善页面效果，让他和一个真实的就诊小程序的效果保持一致，敬请期待。