96-尚硅谷-尚医通-后台系统-医院管理-医院排班-排班规则前端整合

各位大家好，刚才呢，咱们完成了根据医院编号加上科室编号查询排班规则数据，把接口我们已经完成了，那下面呢，咱们就快速把它的前端整合出来，也就是在页面中的这个位置，咱们把这个数据最终做个显示，那下面我们把它就来做一下，咱们看这个该怎么做。首先咱来到前端里边。在前端中呢，首先第一部分呢，因为我们目前的是这个结构，而我们要实现当我点击某一个科室，这位是不是显示它对应那个排班信息啊，那这里边我们先做第一个处理，什么处理呢？比如说我现在我点击这个内容，那这位置就把它的这个编号，包括名称等内容在里面做个显示，就咱们做一个前面这么一个提示的信息，那下面再来做一下，我们看怎么做啊，首先第一部分呢，就是在我的课件中把这结构给大家都写出来了。

那我把这结构给大家就直接复制过来了，因为用的都是IUI中的组件，也都是咱们之前学过的，那我现在先复制第一部分，把这部分先做复制。也就是咱们的最上边的这个位置，然后这个位置呢，我负责是什么呢？大家看一下，比如说我选择的时候，我就显示我这个就是。包括医院的名称，包括你的科室名称，包括你的日期，在上面做个显示，这是我们做的第一个，然后除了这个之外，咱们往下看，在我们的这位置，我这里边有这么一段标签，然后把这部分给大家分过来，就是咱们真正显示数据部分，也就这个排班日期部分，然后这部分我们来看一下啊，我这里怎么写的。首先大家看里边的第一部分，就这位置，咱们一会儿肯定是通过调接口得到你的排班数据的集合，我这个位置怎么做，把它是不是做了一个便利啊，然后便利之后显示它的日期，包括星期，包括里面这个就是。

它的这个可约束，包括剩余数量等信息，然后后面呢，你看这位置啊，我加了一个，就是简单的一个样式，比如说我们选择了某个日期，然后让它有一个选中的状态，通过了一个，虽然表达式做了一个，就是样式的变化，所以这是我们写的第二部分，各位把它直接复制可以了，因为都是IUI中用到的，然后除了这个之外，下面咱开始编写它的。Java词汇代码。那我们看怎么做啊。首先第一部分呢，咱们现在date中定义它的变量，还有一些相关的初始值，那我把这些给各位复制过来，然后咱们看一下有哪些啊，首先第一个叫active index是咱们刚才做那个样式的地方，比如说我选择某个日期，那它是个选中状态，通过它做判断，包括有你的科室编号，科室名称，工作日期，还有你的规则数据，还有里边这个院名称，包括分页中等等等值，包括你看我这个位置啊，当前是一。

每页比如说我们显示七条记录啊，这个咱就把它，我们把这个初始值做定义，然后定义之后咱往下看啊，下面咱要写上里边的几个方法，包括得到你的预约的这个规则信息，包括里边就是你点击某科室等等信息，所以下面还有这么一个方法，那我这里边我把这几个方法给各位，我就直接复制过来了，因为都是咱们之前写的类似的方法，没有什么本质上的变化，我把它。拿过来，咱先给到快速改一下，然后我带着各位把这些方法咱们详细看一下，里面到底做的是什么。然后包括这里边，我把重点给大家都标出了红颜色，我先给他都拿过来。然后咱们详细来看一下，这些到底都是什么意思，这个我也把它说过来，所以现在这个结构应该咱就完成了，完成之后咱们看一下啊，这个过程中我们做的到底是怎么样的一个效果，就这些方法到底他们都是干什么的，刚才我只做了布置，那我们来看一下啊，首先咱们从上往下看。

第一部分，当我现在就是点击某一个，这个就是相关的科室，比如咱们这里边有一个叫node click是不是点击，然后咱们调这个方法，那这个方法大家看做的什么事情啊，所以你看里边首先咱们判断，如果说它里面这个节点不等于空，那我们就捋退，如果它就是等于空，我们就下面把它值取到包值里边。得到这个值，然后最终调方法，这个叫get配置，Get的配置中呢，就是咱们做这个分页的显示，然后在分页里边咱就调这个叫get，筛掉ruler，这里边就是我们最终调那个接口部分，所以咱们要有一个接口叫这个接口，然后这个接口路径我在这里边咱们给它先定义出来。

这个接口就是查询你那个预约的这么一个规则，咱是这个接口，然后里边传入我们的那几个参数当前页。每页记录数，包括你那个就是医院的编号，还有你的部门的编号，这个咱给它都写出来，然后写完之后，下面写一下我们那个具体的路径，我把这个拿过来，路径呢，我们到里边复制一下，叫in hospital筛掉。这个咱们给他。拿过来，然后后面加上他的名字，Get，筛掉ruler。然后后面有几个值，大家看它的顺序啊，包含你的当前页，每页记录数，医院编号，还有你的部门编号，这几个我都复制过来，然后咱们用表达式把这个它取到，就是写到我们这个啊模板字符串中写出来，然后他用的是get提交这个写完之后咱在里边是不是调这个方法，包括你看传递个参数，最终得到咱的数据，数据中包含我们的第一个就是里边这个约的这个规则集合，包括总记录数，包括你的base map等等内容，所以现在这些我们都得到了，所以这时候我们的第一部分我再说一遍啊，就是现在我点击某一个课时。

咱们就调用这个方法叫handle node click，然后在方法中我们得到这个数据来用分页这个get配置，我们先查出第页数据，在第页数据中咱就调用接口中的这个内容返回咱们最终这个结果，然后大家看这一段在什么。什么意思呢？比如说咱们显示之后呢，默认咱们让第一个这个就是日期，包括信息做一个选中状态，默认让第一个选中，包括在上面，咱们就是在这个create里边写这个代码，就是得到你当天日期，我们标这个叫get current这个date得到当天日期，然后我们这里边我们就是。

在你这位置，就是如果说咱们现在不点击任何一个默认，就让第一个是个选入状态，所以这样的话呢，目前这个我们就完成了啊，把前端按照课件中的过程快速做整合，所以各位一起的话，通过我的课件你把这个整合出来就可以了，重点是咱们的后端接口部分，前端按照结构快速做整合。所以咱们现在这个就完成了啊，完成之后我们看一下这个效果什么样的。带着各位来看一下啊，首先比如现在我们记住。进入之后呢，大家看啊，这里边数据目前它没有出现，那我们看一下为什么啊，咱们点击F12看里边注意啊，这里边报了一个错，什么错呢？写到说这个配置啊，意思not depend，说它没有定义，那咱们来排查一下，看我是哪里写的不对啊，说这配置为什么有定义，来到里边来找一下这个过程啊。

那我们找一下里边看是哪里写的有问题，咱们排查一下啊。首先我们先看定义的部分，在定义里边各位应该看到问题啊，我这里是不是写错了，就这个吗？我们应该叫配置吗？而你这个写的不叫配置，所以这肯定取不到嘛，刚才就是这么一个小问题，咱们快速找到了，找到之后咱们再来看目前这效果是不是出来了，你看里边啊，就是现在我们一进入它是不是就选中了第一个，其实就是让第一个这个显示，包括里边有这些值啊，包括咱们点击有它数据啊，这是我们提到的。我再说一遍啊，当我第一次进入它就显示第一个这个科室中这个预约信息，也就是咱们刚才写的里边的这段话。显示默认的第一个，而我现在点击某一个，它就触发事件，然后做分页做显示啊，当然我们目前应该只有第一个有数据，其他的维加数据第一个应该就做到了，但是做到之后呢，大家发现啊，里面有个小问题。

分页是没有啊，咱的数据应该是有很多条，但是目前没有分页，那咱看一下为什么没有分页啊，比如说咱先大概调试一下啊，我们看啊，目前我这里边呢，每页应该显示七条记录，咱看是不是数据没那么多，比如说改成二，咱看对不对啊，咱就做个调试。然后改成二之后我再刷新咱发现啊，是不是有两个呀，就大家发现啊，这里边好像是有问题的，那咱看什么问题啊，先看一下接口中我们是不是写错了。咱们找一下啊，看接口中是不是写的不对。咱们排查一下啊，前面是做那个分组，包括统计，然后这里边是得到你的总的记录数，然后各位看到啊，不知道各位是否发现问题啊，我这里是发现了。

你看这个位置。参数是不是传错了，如果说你传abd，那它传的是不是上面这个条件加上你的统计加上这个值，而我们现在这样得到它的记住数传的是不是应该是这个total投AG啊，所以咱们这个参数传错了，分页就没有出来啊，那我们给它改一下，改完之后咱们把服务器再重新启动一下，然后咱们再做个测试。那我们给它重启，然后咱再试一下啊，代码结构应该是正确的，就是我们的第五课程。咱们等它先重启，然后测试。现在啊已经启动起来了，然后咱们来到页面中，比如现在我重新啊，我把这个啊给它还是改成这个七，就是每页显示。七条记录，然后咱们到页面中刷新看一下。大家看啊，就是目前我第一次进入默认就是第一个这个日期，比如我选择第一个是牌尔他，然后你看目前第一页显示七条记录，我有第二页，有第三页，有第四页是不是有这些数据，现在我们就做了这么一个显示啊，包括里边做了一个简单的排序，所以你看这分页是不是就出来了。

这个我们就做到了啊，而大家注意，当我现在选择某一个日期，它是不是就一个选著状态呀，就是咱刚才说的里边的这个地方，大家看一下啊，就这个位置。咱们用了一个三表式，用这个方法，然后在里边做了一个判断。当这个值等于active inex。然后这里边做这个就是样式的变化，让它是个选中状态啊，所以现在咱们这个就是显示科室里边的排班信息，这个功能我们就实现出来了，所以各位重点就把这个接口部分也好去写写这个过程麻烦点，前端部分你按照我的课件能给它快速整合就可以了，重点实段接口就是里边通过猫DB做这个聚合的分组，包括统计等等功能，这个我们就完成了啊，然后完成之后呢，咱们下面要做的就是当我现在比如说我点击某一个日期，是不是要显示里面这个详情信息啊，比如这个日期中有几个医生，然后医生是哪些，然后它里边什么时候出诊，是不是要做到，所以咱们一会儿就把这个功能做时间，目前先把这个预约规则数据在里边先做个显示。