53-尚硅谷-尚医通-后台系统-医院设置前端-锁定

大家好，我们继续完成医院设置相关功能开发，刚才呢，咱们完成了批量删除功能，那咱们下面再来开发另外一个功能，这个功能就是锁定和取消锁定。那这个功能咱们之前在写接口中曾经介绍过，我们来再重复一遍，大家看，在我们这个医院设置表里边呢，有一个字段，这字段叫做CS，它表示医院设置了一个状态，咱们当时曾经这么说的，我们约定好了。如果说状态值是一，表示这个设置我们可以使用，如果它是零，那就不能用，所以说我们当时在列表中做了一个判断，如果是一显示可用，如果是零显示不可用，因为咱之前都是一，所以咱们显示可用，比如说咱现在为了明显，我把这个值手动我改成零，然后改成零之后我们到这页面中，比如现在我们刷新。

大家看这按钮是不是叫不可用，而我们现在就来做一个功能，什么功能呢？给各位来说一下，我在里边给大家图上，咱们再画一下。各位看，如果说啊，现在我这状态是可用，那咱是不是可以做个操作设置成它是不是就不可用，或者说我们要锁定。我写一下。锁定，如果说它现在状态是不可用，咱能设置是不是要取消锁定，所以我们现在就做这个功能，当它是可用的时候，咱可以把它锁定，当它是不可用，咱们可以取消锁定，而这功能其实就是改一下C的这种状态值，改成零或者改成一。那咱们下面就把这个功能我们来做一个具体实现，咱们来写一下，首先第一步按照我们的流程，咱们还是在API这个JS文件中，把这个接口我们先做定义，然后里边写一下。

锁定和取消锁定，下面我们写上这个方法，不用它咱就来改一下这个方法。比如我们给它起个名字，我们叫lock hospital set，在里边有两个参数，咱们看接口中第一个参数是你的院设置ID，第二个是你的状态值，就是零或者一，那咱在里边写上两个参数，第一个ID。第二个thes。然后写完之后，在下面我们写上啊这口路径，这路径我们叫look，好的披set后面传入两个参数，那我写一下两个参数，咱们直接用表达式取值第一个ID。第二个。The。然后写完之后，下面有他的提交方式，它是一个。重看是一个put提交，所以咱们在里边我们写上一个叫put。

然后它没有其他参数，这一部分咱们可以去掉，所以第一步完成了，在JS文件中，我们先定义它这个接口，然后定义之后咱们来到页面中，在页面中做实现，怎么实现第一部分。咱是不是要加这个按钮，就是你是锁定或者说取消锁定而按钮，那我们用这个EL就是八寸是不是能实现，咱之前加过一个删除按钮，那我们下面在里边继续加一下，那我们来看一下。咱看到这个例子的一面中，第一个是咱之前加那个删除。然后现在我再加上两个按钮，一个叫锁定，一个叫解除锁定，那给各位我来加一下。比如说现在这个我们叫锁定，然后下一个叫解除锁定，或者说取消锁定。给我写一下，这个叫取消锁定，然后这里边因为咱为了区分一下，所以把它的按钮写成不同的那种，比如这个用这个pre，这个用dangerous，我们用这两个。

大家给他改一下啊。这个用pre就是锁定和取消锁定，而锁定取消锁定中有一个特点，大家注意，如果说你状态是可用，是不是叫锁定，如果你是不可用，是不是才显示需要锁定，所以咱对它做过判断，那大家说怎么写？咱之前讲到过啊，就是我们讲voe的时候曾经学过。在voe中呢，有一个很重要的指令，这指令叫什么？不知各位是否记得V-E应该有印象啊，所以咱们现在用V-if可以做一个判断，如果说你的状态值是一，那我们就显示锁定，如果是零，就显示取消锁定，那我们来判断一下，而状态值咱通过此扣点肉是不应该能取到，那我来取一下死扣点肉点上这个。

Thes，如果它的值是一，那我们就显示锁定，如果它的值是零，我们就显示。取消锁定，把这个写一下。所以现在咱们就完成了一个按钮的添加，然后添加之后我们在下面再来看一下页面图，大家看一个效果是不是有了，一个是锁定，一个叫取消锁定，这里边我们都出现了啊，就这两个按钮。那这里边啊，把它加上之后，咱们下面把这里边的具体的就是调用的过程我们来做一下，因为咱们现在点锁定和解除锁定是不是都要调单接口，所以我在里边讲一个方法，比如这个方法我们都叫lock，这个就是。好赛。我们叫这个名字，然后在里边呢，我们传，因为是两个参数，第一个参数就是里边这个ID值，第二个是不是传那个CS，因为咱们锁定这值是不是就零了，我直接乘个零，如果说它是就是取消锁定，那这值应该就变成一。

对，咱把它传下。不是，各位是不是能理解啊，如果你是锁定，那就是把这个值变成零，是不是可以锁定了，如果你是取消锁定，那这指数不就写成一，所以在里边我们写上了，就这么。一个方法，然后出来表参数，然后写完之后，在下面咱们把这个方法我们来编写一下，我就写到这个位置。就这里。我们这个方法做的功能就是锁定和。取消锁定，然后方法是这个local，好set里边两个参数，第一个就是ID，第二个叫CS，然后写完之后咱们调用接口中的方法，就是咱们刚才写的这个方法，Hospital这个set。然后在里边传入两个参数。抽完之后它就会掉咱的接口，然后加上一个点赞里边加上一个。

Response。检测函数，这就表示调用成功，大家应该知道，当我们锁定或者取消锁定之后，咱们的页面是不是要重新做个刷新啊，或者提示他说你成功，那我就直接把页面我们做个刷新，然后刷新页面就是调咱们那个方法应该就可以了，就是这个get。例子就可以了，就是做一个页面的刷新。所以咱们这样的话，就完成了锁定和取消锁定功能，这功能咱们就做到了，各位把这功能能给它圈出来。啊，这是我们完成的分泌功能，然后完成之后呢，咱们下面把这功能我们来做个测试，看一下它的效果是什么样的啊，我们来试一下啊。首先我在这里边，比如现在我先刷新。然后刷新之后，比如我现在啊，想把它做一个锁定，那我就点击锁定是不是就不可用了，比如说现在我想它取消锁定是不可用了，然后这一点是不是也可用了，然后它每次点锁定或者取消锁定里边的值是不是会跟着发生变化，所以这是关于我们完成的这么一个基本功能锁定还有。

取消锁定。所以大家把这功能能给他最终做到。有这么一个基本功能。然后这个功能大家注意啊，我们在写的过程中，你看我们这个做法是大家会发现咱们刚才不管我们是做列表功能，还是做删除功能，还是现在这个锁定，还有解除锁定功能，里边这过程是不是都是类似的呀，咱们都是定义接口页面中调用，然后在里边绑定事件调方法，最终是非样单的功能。所以通过这几个功能，大家要把这个前端开发流程给他要特别熟练，咱们项目中就按照这些流程完成咱们的开发，所以现在锁定取消锁定，我们就开发完成了。