144-尚硅谷-尚医通-前台用户系统-就诊人管理-前端整合（2）

在刚才的内容中呢，咱们完成了就诊人列表前端的整合，那咱们下面呢，快速把就诊人的添加、修改、删除，包括查看详情功能整合出来，因为这些切段代码跟我们之前写的代码都类似，所以我就按照课件中的流程把这代码给各位快速整出来就可以了，那咱们来做一下啊，首先第一部分我们先整合添加，咱们来到这个就诊人列表页面中，找到这个按钮，就是添加就诊人，在里边我们是绑定事件，然后调一个A的方法，在A的方法中让它跳转到我们的添加页面中去，这里边我加个注释，就是跳转到添加到页面中去，然后这个页面我们到的这个路径叫patient aid，这个路径我们之前提到过，那中有一个东西叫固定路由，如果说你写的是patient，它默认。

到里边找到patient的下边的in带点VO，但是如果说你写的是一个杠A的，那它默认会找到patient的下边这个A的页面。所以咱们现在就需要在里边建一个页面，页面名字就叫做a.vuee这是我们页面创建，让这个页面咱作为添加和修改用同一个页面，然后页面创建之后，我把页面中的内容错误的课件中给各位就直接复制过来，拿给他拿过来，然后咱们详细看一下页面中到底都有哪些内容，咱来看到啊，首先页面中的第一部分就是咱们的超链接部分。实名认证挂号订单就有人管理，然后在下面部分，因为咱要做这个添加嘛，所以大家看啊。下面部分有个什么，是不是一个form表单呀，咱需要填写些内容，而内容中你看到有你的姓名，有你的证件类型，证件类型咱需要进行选择，这部分咱是调用我们那个D口里边的相关接口，把这个类型给他做个加列表显示，包含身份证，包含你的户口本，然后这里边填写你的编号，包括性别，包括等等信息，这些都填完之后，最后我们点击里边那个就是添加，完成这么一个操作，包括各位看到里边有一些内容。

然后有这些信息等等，最后我们点这个添加按钮，把它实现出我们这个基本操作，然后在操作中，里边还有这个地方，就是你填写一些相关的地址，地址中呢，我们做了就是一个联动，比如说我们点击某个省，然后显示它里面的市，在显示里边的曲线等等，之前咱应该都做过类似效果，所以这是一个页面部分，然后除了这个之外，大家看啊，下面部分我先引入了样式，然后引入了两个JS文件，一个是D，就数据字典的，一个是patient做，就人管理的，上面有些初始值，然后下面data中我们做了一些定义。

在定义中呢，大家看啊，这部分是取到你那个异部那个省市区，就是咱们那个显示的某个省某个市某个区，然后这一部分给各位说一下，这部分什么意思呢？就是做一个校变规则，比如说咱表单中某个值必须要填写，或者说不需要填写，用它设有这个规则，包括咱以这个为例，各位看啊，这叫name块，等于处表示必须要填写，然后这个tri叫L。这是什么意思呢？就是当你啊失去焦点的时候，它就会触发，然后这里边如果你没有填写，会提示你说必须输入，这是做一个校验规则的一个这么一个。编写，然后下面我们写了方法，在方法中我们先找一下那个添加，刚才咱们写的是这个。添加里边呢，这问是地址处理，然后这里边做了一个判断，如果说你这里边就是没有ID值，我们做添加有ID值是不是做修改，跟咱之前做的一样，所以我们添加中就调用咱们接口中这个方法叫C，就是刚才我们定义的里边的这个方法，我们找一下这个C，也就是它，然后调用save，最终实现咱们的线下操作，添加之后再跳转回到这个patient的这个页面中来。

啊，这是一个添加，然后除了添加还有一个修改，因为各位知道修改的时候呢，咱一般就是通过路径是不是传那个救人的ID址，所以ID值咱需要通过路径得到，那怎么得到我里边的这个代什么通过这次点root.que.id把这得到，得到之后我们调这个fight date BYD得到里边那个信息，做一个回显，然后回显之后最终做修改，修改的时候呢，咱需要判断。如果说里边有ID址暂时修改，没有ID址做添加，所以这个位置就是一个修改，所以咱们调用咱们调中的方法，也就是刚才定义的这个方法，阿倍的白地最终做到一个修改，所以这是里边我们在A的一变中做到的添加和修改的这么一些方法定义，包括最终主要是里边有这个地方。

这些地方呢，是咱查那个数据字典表，得到里面的新闻信息，包含你的证件类型，包含你的省市区的等等信息，这个啊我们做了一个说明，所以各位按照课件中的流程把这个整合可以了，然后在写代码中大家看啊，里边还一个地方是咱之前没有提到的，这个地方是什么呢？就是做我们那个校验规则这么一个定义，就是用到我们刚才定义的上面的这个规则里边做校验，所以这就是A的页面的一个编写，咱们快速做了整合，一会儿咱做测试，然后除了这个之外，下面还有一个叫详情和删除这个操作，而详情删除什么意思？就是我点击这个按钮叫查看详情，进入到详情页面中，然后在详情页面中咱能做删除，包括修改，那我们找一下这个查看详情这个按钮，我们来找一下啊。

这里边扎人详情在这个位置。然后里边呢，我们调这个授方法，在授方法中传入你的ID值，刚才都传过来了，然后最终它就在里边做这个操作啊，所以我们是写到了这个地方，然后各位看啊，在这个方法中呢，我们就是到这个页面中patient的受，所以咱们需要在里边呢，创建一个受点voe的页面，里边做这个详情显示的这个功能，那我现在在里边创建。咱们建一个叫受点voe的这个页面。然后在页面中写入我们的内容，我把内容给各位复制过来，咱们来看一下这个内容啊，因为他做的是一个详情显示，所以内容中都是用这个差值表达式把那种显示，比如说大家看包含姓名，证件类型，证件号码，性别，出生日期等等一些内容，然后最后有两个按钮，一个叫删除就诊人，一个叫修改，咱就完成这几个功能，那我们看最终的调用过程，先一种文件啊，就是最基本的引入，然后你看下面啊。

在create里边调这个叫f date BYD，然后在里边通过路由把值得到，得到之后调用接口中的get by ID方法得到里边的数据，我们做这个就是详情的显示，这是我们的第一部分，我写个注释。这里边就是根据ID查询出那个就诊人的信息，然后我们做显示，显示之后下面两方法，一个是一个是修改remove，就是删除，那我们根据ID调用接口方法把它删掉，然后再跳转到会议页面，修改的话咱要到这个A的页面，到A的页面的时候呢，把你ID传过去，就刚才我们写的这个地方。

咱们在里边呢，这里得到你传回来的ID值，然后调方法，最终做显示修改，现在这个里边就是那个修改的跳转到A的页面中做到。所以咱们现在通过这个过程，就把里边这个就诊人的增加，修改，删除，查询功能，它的前端咱们就完整的整合，里边就是这么一过程，现在我们就洗完了，然后洗完之后呢，最后咱把功能我们来做一个完整的测试，看一下效果是什么样的，那我们来测试一下哈，比如说咱重新测试，首先我先进入到就诊人管理中第一部分显示列表，然后在列表中目前有两个值，一个测试一，一个张三，比如说我们测试第一个功能添加就是人咱们一点。

大家看啊，进入到是不是一个添加页面，在添加页面中，咱们输入里边一些信息，比如说随便输入一个，假如这个人我叫李四类型，我选择身份证，然后这个号码我随便写一个，比如说三。六零啊，380随便来一个啊。然后下面有他的性别，包括出生日期，包括手机号，我随便写一个手机号。下面有它的状况包括啊，你看啊，我这里边呢，在这个必须填写的前面加了一个是不是一个红色的星号，表示必须要有包括啊这里边比如咱们选择一个省市，包括这位置写一个详细地址。所以现在这些值都填写了，当然这些可以有些没有咱就不填了，然后最终点保存，现在就完成添加，添加之后大家看里边是不是有这个李四，咱就完成了救人的添加，然后咱们到表里边，咱看一下救人信息是不是有这个，就是李四，就这个啊，你之前有这个，现在我们加一个李四，包括它都是这个ID，是九下边的这个值，现在咱们把这个就完成出来了。

这是我们做到的这么一个效果。然后除了这个之外，下面咱们还有这个查看详情，包括删除，那我们看一下啊，首先我们先点击查看详情，大家看页面中是不是就显出他的详细信息啊，就是咱们刚才填写信息，然后信息中咱们点修改，就诊人在里边做个数据回显，咱是不是能做修改，然后包括这里边，比如咱们修改之后，我这个值应该也能做到一个就是删除的功能，那我们再是一个删除，删除的话还是来到这个详情页面中，咱们点击删除就诊人现在你看这页面中。

是不是就不显示了，我们就完成删除，包括来看表里边啊，在表里边呢，它是这么一个特点，各位看里边有一个字段不是各位是否记得意思，Deleted这个值是零表示没有删除，是一表示你删除，因为咱们加了一个是逻辑删除的这么一个方式。所以现在救人管理这个模块我们就完成了，主要是里边的接口和前端，各位把重点放到接口部分，把前端按照流程能整合出来，所以这个功能我们就完成了，然后这个完成之后呢，在我们这个认证过程中还有一个功能，就是里边的这个功能。大家注意啊。因为咱们啊，现在操作系统是咱的用户前台系统，而咱应该有一个后台管理系统，比如现在我的用户进行了认证，他提交了认证信息，那认证信息在我的管理员部分，对信息是不是要做个审核呀，当审核通过之后，是不是才表示真正完成认证，或者说认证成功，所以咱最后要做一个这个认证的一个审核功能，也就是说在我们这个。

用户表里边。有一个字段，这个字段。这个字段叫o thes，当它是零表示未认证，是一，表示认证中只有这个值变成二，才表示认证通过，所以咱一会儿来做这个审核功能，不单是在里边，还有其他功能，比如说你的用户的锁定详情等等功能，这咱一会儿完成，目前咱做的是就诊人管理的功能的实现。