93-尚硅谷-尚医通-后台系统-医院管理-医院排班-显示科室前端整合

各位大家好，我们继续来开发医院排班功能，刚才咱们完成了根据医院编号查询医院中的所有科室功能，那下面呢，咱们把它的前端做整合，咱们看怎么做。首先我们写一下啊，第一部分咱们在这个列表部分是不是加上一个按钮，按钮，比如我们叫排班刀，点排班，咱们就到一个页面中显示我们的信息，所以咱就来做这个功能，那首先第一部分呢，我们做什么呢？给大家说一下，按照之前做法，咱是不是还是要加一个隐藏路由啊，跟之前的查看应该是一模一样的，那我现在用它，我快速改一下啊。在里边，比如给它起个名字，因为是一个排班信息嘛，我们就叫这个名字，咱叫这个筛掉这个名字，我把这个啊给它先拿过来筛掉。写到我们的这个位置。

然后后面是根据医院的编号，那比如说为了区分，我把它改个名字，我叫这个hos扣等。这个拿过来，然后这里边我就叫排班。这个我们叫。彩边，然后这位置加上它的名字，它就叫这个schedule。这样的话把这个就完成了，完成之后呢，下面咱们把这页面先做创建，咱们来到这个好的P到里边，我们创建一个页面叫这个筛掉点不。这样的话，我们把这个隐藏路由就加上了，然后加上之后呢，我们来到这个列表页面中，咱们参考之间的查看，在里边加上这个叫排班，那比如说我把它加到这个查看的后边，我们给它改成我们刚才写那个路径叫这个筛掉。

这个，然后这里边改个名字，我们叫这个。排班，包括后面大家注意这个位置啊，咱现在要传的并不是ID，是不是咱们那个医院的编号，所以改成叫hos扣啊医院的编号，这样的话，咱们把这个路径就写完了，然后写完之后呢，来到JS文件中，咱们把它那个接口在里边定出来。那我来写一下啊，查看医院的那个科室。这位置改个名字，我们叫这个get这个。筛掉。根据这个医院的编号。这里边传入就是医院的编号。这样的话，咱把这个方法就创建出来了，然后创建之后呢，下面咱们把它的路径在里边我们做一个定义。那我们来定一下啊，定一下它这个路径，然后路径我到里边复制一下，咱们是这个路径A的me hospital department department。

这个拿过来，后面加上咱们这个名字，Get department list。然后里边传入你的这个名字。Code啊，咱为了区看，因为这查的是科室嘛，咱就要这个比啪的问。就叫DPTBY，好code，然后它是get提交，这样的话咱把这个就完成了，比如说现在这定义都做完了，做完之后呢，最后咱来到页面中，在页面中写那种页面中咱们做的用的肯定是IUI中的组件，因为刚才给大家介绍到了咱们页面显示是不是有三部分，左边部分是科室使用列表，然后右边有你的日期，包括详情，咱现在做的是显示这个列表部分。

那我现在把I的UI部分，我从课件中我就直接给它复制一下，我先把这一段复制过来，咱先看一下目前的结构是什么样的，然后咱们来编写里边的Java代码。那我们来查看一下啊，首先前面这些都是固定结构。然后你看在里边啊，首先里边的第一部分啊，有我们这个相关的内容，我把内容给大家说过来啊，咱们是这个内容。然后在内容中呢，大家看到啊，里边是这么一个结构啊，咱们看一下目前我里边的这个写法。各位应该能看到啊，在写法中咱加上这个言论标签，然后这个部分呢，放的是咱们左侧那个部门的，也说咱们的科室的信息，给它放到这位置，包括科室信息中，里边用了一个标签叫yellow tree yellow tree里边把它就能用树形结构做个显示，一会儿咱会做这个，然后除了这个之外，下面还有这么一个结构。

各位看这个结构啊，呃，咱往右给他拉一点，然后这个结构呢，叫E肉，在这里边是做咱那个排班的日期，下面一个是做那个详细信息，这两部分咱们一会儿做个实现，目前写的是上面的这么一个结构啊，就是里边的这部分。所以大家看清楚结构，这是左边部分，这是右边的上边啊，这是下边，也就这是我们的科室，这是那个日期，这是它的相应的信息，这样的话这结构就有了，然后结构有之后，下面咱们写这个Java这个代码，首先咱们把这个文件先引入import，我们叫hospital。A片from加上路径at斜杠A片。好皮这个就引入了，引入之后呢，里边加上我们的代码写法，第一个是不是这个date。

Date里边我们加上一个。然后第二个呢，加上一个叫C的。这里边加个括号。然后最后加上一个叫。Methods定义咱们的句子方法，这些各位同学应该是特别熟练了啊，咱之前一直在这么来写，然后写完之后第一部分呢，定义它的初始值。那这部分我就从里边直接复制了啊，因为咱们需要的就这一个值。然后咱们快速看一下啊，首先第一个值叫date，就是咱们得到接口反应数据，然后第二部分大家看啊，这部分要特别一点，它叫default。什么意思呢？也就是说啊，然后做一个树形结构显示，然后你实用结构的它的子节点children准，咱用这个children准，就是咱们数据中叫children，然后它的名字咱取的是这个department name，也就是咱们啊，你看啊直接点是不是有children，然后名字是不是用这个DEP name就是这个意思，根据它得到叠点，然后取里边这个dp name做个显示。

啊，这是我们一个结构，然后最后一个叫hot code，就是咱们那个医院的编号，所以这是date中几个初始值，然后写完之后咱往下，我们在MY中，我们可以写个方法，这个方法就是根据医院的编号，然后得到你那个相关的信息，那咱们来写一下这个方法。我写到这个位置啊。那这方法起个名字。我叫这个fech。Data。里边我们做这个调用好的PAPI，点上我们刚才这个方法，Get d PT摆这个。扣倒，然后里边传上这个值，我们就写这个值，就是这一次点。

好的，扣，这值咱们一会儿来取，然后下面加上一个点字。Response。解成函数，这样的话，大家看这个是不是就完成了啊，咱们就完成了里边这么一个结构啊，就是里边的这么一个写法。然后这个结构我们完成之后啊，这应该写到下面啊，写的位置啊，应该是麦里边。然后这个完成之后呢，咱们看啊，就是现在我们通过这个调用得到这个数据，咱们把数据得到之后，最终是不是要给这个date里边，就date中做一个赋值，比如说date.date等于咱们最终的这个数据。那我来写一下啊。这次点it等于response。点上date，这样的话在date中就有咱们这种数据，然后数据中通过default pros取它的子节点，包括内容，这过程都是由这个yellow tree做到的，包括你看啊里面这个结构冒号date。

是不是咱这个数据这里边有个default pros，就是它的子节点该怎么做啊，这样的话咱现在就完成了，完成之后咱在create里边做调用，调的过程中呢，因为咱是通过路径去传这个值，所以把它先得到我们写一下啊这点。好的。这个啊。Code等于这次点这个叫root。点P。点上那个叫。House code把这个值得到，然后得到之后，下面咱就可以调用这个方法啊，就是这点这个fech date，这样的话，这个代码我们现在就把它快速完成了，跟咱之前的写法基本上是一致的。然后这个写完之后呢，大家看我课件中啊，最后有一段就是样式，咱们把样式复制过来，这样式为了控制就是你写的位置，我们这个列表在左边，然后右边有它的上面的日期，包括下面的详情，所以把这个样式咱放到页面的最后，就是我们的这个结构。

这样的话呢，咱们这段代码我们就最终写完了啊，就是咱们写到最终的这么一个效果。然后这个代码我们再检查一遍，最终我们做个测试啊，首先代码中我们用到I u e tree组件，把它用数据显示，而在显示过程中，咱们首先定义初始值，包括咱们调方法得到这个数据，在过程中咱们通过路由取道里边那个就是医院的编号，然后把编号传到方法中，最终得到结果，结果会有数通结构完成显示。这样的话，页面前端部分我们就完成了，完成之后最后咱们做一个测试，看一下最终效果什么样的。

现在我们打开浏览器，在浏览器中，比如说我先刷新大家看啊，目前页面中是不是多了一个叫排班这个按钮，那我现在点击排班，大家看效果啊，我们看什么样的。各位清楚看到，在我页面的左边部分是不是有咱们的所有的科室，然后科室里边，比如说我们先这么点啊，大家看哈，第一层是不是它的那个大科室，然后在大科室里边是不是有它的小科室，比如说我们现在我们看这大科室有这么多，包括有很多，比如说我们现在点击某一个大科室，咱就点这专科里边是不是有很多小科室，包括比如你点这妇产科里边是不是也有很多的小科室，所以这样的话呢，咱就把这个根据医院编号查询里边的所有科室的接口部分，包括前端的显示部分，我们就完成了。