98-尚硅谷-尚医通-后台系统-医院管理-医院排班-排班详情前端整合

下面呢，我们来整合一下查询排班详情的前端部分，咱们把前端在页面中做个显示，那下面我们就来写一下，首先我们来到前端中，咱们在JS文件中把接口在里边先做定义，那这里边我们快速定义出来。这个接口就是查询我们这个排班的详情信息。然后这个方法我再改个名字，比如我们叫这个get schedule。然后里边传入有这么三个参数，第一个就是院编号，第二个是科室编号，第三个是在那个工作日期，我们叫work。Date。然后下面呢，写上我们相应这个接口路径，那接口路径我从里边直接咱就复制过来，加上这个名字叫做get筛里边三个参数第一个。

医院编号第二个科室编号第三个工作日期。三个咱们都点进去，然后最后是一个get提交，这样的话咱们把这接口就定出来了，然后定义之后呢，来到咱们这个筛掉页面，在页面中呢，最终咱肯定是把这内容在我们里边的这个位置是做个显示啊，那这显示呢，其实咱们就是把我们接口返回那个历次集合转成一个这些数组，然后把这数组在里边给它遍历出来就可以了，跟咱之前写的应该一模一样，那我现在把这个就是显示部分给各位，就直接复制过来。用这个UI中的EL table，把这个直接显示就可以了。那我现在把它就。复制一下，然后咱们快速看一下啊，应跟之前是一样的，用yellow table。然后里边显示我们这里边，我们就要筛掉丽萨这么一个名字，然后下面呢，有它相应的这些值，咱们把值在里边最终就显示出来就可以了啊，那这格式我给它快速调整一下啊，就这么一个结构，第一个序号，然后第二部分是里边这个就是职称啊，比如说我们这个里边医生他的职称是什么，包括显示医生的名称。

这是我们的第二部分，然后第三部分有我们这个号源，比如这个号是上午还是下午，在这个号源里边呢，然有一个字段，就这个work time work time模式，零那就是上午，如果是一，那就是下午，然后下面有一些，比如说可预约的这个数量，包括剩余数量，以及我们这个挂号费，包括这个医生他擅长的这个技能是哪些，所以现在这部分咱给他就最终写出来了，就说我们里边的。这么一个结构。然后这个写完之后呢，咱下面写这个Java book，就把这值得到，然后最终给他最后显示可以了，那我们来写一下啊，首先第一个我们在date中呢，先定义这么一个变量初始值，就刚才我们写的这个名字叫筛，例子是咱们得到那个。

排班的这个详情的这么一个集合，然后得到这个之后，咱在下面这个位置，我们就来写一下这个方法，那我来写一下啊。查询。排班等。讲究信息，那这个方法，比如起个名字，我就叫get这个schedule。地太。啊，为了区分啊，我就get底筛掉，我就跟之前不一样啊，然后在里边呢，我们就可以调用咱们接口中刚才咱们写的这个方法做个实现，那咱们现在给它就调一下啊，咱们调这个OSPAAPI里边的这个方法，那这方法刚才我们刚定义过，咱们把它直接复制过来，就是里边的这个方法。

就是我们的这个值，然后在里边呢，传入咱们的三个参数，那我写一下啊，第一个参数元编号。然后第二个参数是我们这个部门的编号DP扣，第三个是你的工作日期叫work date，然后写完之后，下面我们加上一个点，然后加上一个response这么一个。箭头函数，然后通过response得到里面的数据，最终数据复制给咱刚才写那个筛掉list就可以了，然后最终我们再做个调用，那下面的单就做一个赋值，就把这个给它就能得到，那我来写一下啊，在里边我们写一个this，点这个schedule，例子等于response.data。这样的话就可以了，然后可以之后咱们把这个方法在里边调用一下，那我们看在哪里调用啊，因为咱们第一次进入这里边是默认的，所以这位置我们肯定要做个调用，就是调用。

查询排班讲解方法，我们写一个这次点这个get detail摘掉，里边要多调用，然后除了这个之外，咱们再找另一个地方，应该是在我们这个select date里面的调用，因为select date里边就是咱们一点击在那个日期，比如现在我点击这个位置，那里边会把它做显示。那比如说我们看一下上面这个结构中，也就是我们的。这个地方。你看是不是有个click，我们有这个select date，当咱们一点，那把这值到里边，我们就给它最终调一下接口中的方法，然后把里面的详情信息在里面做个显示，所以咱们到这里呢，就把这过程我们就最终完成了，就是里边的这么一个结构啊，那咱们可以再检查一遍啊，然后最终我们来做个测试。

首先我们上面是页面部分，然后下面呢，首先在这个方法中，我们先做一次调用，因为你第一次进入要调用，另外我们在这个叫select，这里边我们做了一个调用，也就是这个位置。我们给它啊，就是也是最终调用一下，所以这样的话呢，咱们把它就完成了啊，就是关于我们的这个结构，呃，这调用应该不在这里，应该是在这位置啊，咱们点那个就是科室的时候调用你写到这位置啊，就是你点左边科室，然后显示里边第一个默认第一个选中，然后咱们把第一个里边这个详情也给他查出来。啊，就这么一个结构，这样的话，咱现在我们就完成了前端的整合，然后完成之后呢，我们到里边咱们来做个测试，看一下最终效果怎么样，咱给他重新最开始测试一下啊。比如现在我点击医院列表。进入到医院列表页面中，现在我点排班，在排班里边大家看左边是你的科室，这部分是你这个就是排班的日期，下面是不是有详情，比如现在我们点这个里边会有它对应的这个数据啊，包括单点这里边数据应该就做了这么一个显示，所以这样的话呢，咱现在把这就完成了啊，应该我只有第一个有数据，后面没有数据啊，咱们把有数据的过程在这里边都完成了显示，这样的话，这个前端部分咱们就整合完成了。