51-尚硅谷-尚医通-后台系统-医院设置前端-删除

各位大家好，欢迎继续学习，上硅谷上移通项目之前呢，我们完成了医院设置的列表功能，实现了条件查询再分页，那咱们下面在里边完成它的下功能。各位来看一下，这里面呢，除了列表功能之外，各位说我们还可以有什么功能？有什么功能，咱们应该看到是不是有这个医院设置的添加功能，包括它的修改，是不是还有删除功能，所以咱们下面先来完成一个医院设置的删除功能，把这个功能我们做一个实验。那删除功能怎么做？给各位先做一个基本的分析，各位看这是一个就是医院设置了列表部分。而咱现在是不是要做个删除功能，那大家说我们该怎么做？大家说怎么实现，首先第一个我们是不是要加一个删除按钮啊，也就是说在我们的每条记录后面，咱要加上一个删除的对面按钮。

比如说第一个列表后面我们加一个删除，然后第二行记录后面我们加一个删除，第三个后面是不是加一个删除，所以这是我们的第一部分，当我们现在点击这个删除，那他要把这行数据是不是要删掉，而删的过程中咱是不是要传入你这个医院设置信息的ID址，根据ID去做过删除，所以这是我们一个基本的这样过程。那在下面就把它做这么一个实线。首先第一步呢，我们先在每条记录后面先添加上这么一个按钮，那我写一下就是添加删除的按钮，那按钮怎么加，给各位说一下，因为咱们之前呢，在我的页面中，咱们用到的是不是这个。IUI，通过IUI是不是实现因面效果，所以我们下面就用IUI中的组件在里边给它加上一个按钮，也就是说在我们里边这个e table里面我们加上一个按钮，那我们来加一下，因为IUI中的组件这些固定代码，那我把这代码就从我的课件中把它直接就复制一下，我就把这段内容直接复制到我们的页面中来，那我们来看一下。

首先各位看啊，这一段内容呢，是一个叫EL table column是一个列表的这么一个column，然后在里边我们加一个叫to里，To中有一个叫yellow button yellow button是不是按钮，这个按钮就是一个删除的按钮，包括这里边我们写上一个就是删除，在这个是我们写的这么一个，然后给它加上之后，大家看啊，在我这个按钮里边呢，我们加上了这段内容。这段内容什么意思呢？大家看，首先按钮type是一个灯，就是一个不同的样式，然后在里边咱们绑定的一个事件，因为我们要实现，当我点击按钮，它是不要实现一个删除，所以咱们触发一个事件。

里边写方法，方法中你看我这行什么意思。咱之前说过，它是不是得到你每行那个ID值，因为我们要根据ID组删除，所以咱把ID传到方法中来，这样的话，我们在这个页面中就加上一个按钮，这是我们的第一步。然后加上之后，大家看按钮是不是加上了，当我点按钮，它就触发事件调方法，最终实现它的功能，所以咱们第一步就完成了。然后完成之后，下面再来做里边的第二步操作，我在里边写一下，第二步怎么做呢？因为现在我们点击事件，要触发这个事件，并且调用难的方法，所以第二步呢，我就来编写我们调用的删除的这个方法。在里边得到我们删除的那个itp值，这是咱们的第二步，然后下面给各位来写一下。

首先我的方法就叫remove data by ID，然后我在下面这个method里边，在之前说过，里面可以多个方法，然后里边呢，我介绍一个方法，这个方法就是删除。医院。设置的方法，然后它叫remove data，白地在里边的传入你要删的那个医院设置的ID值。这个方法我们就写出来了，然后写完之后我们做个测试，比如说我把ID值做个输出，咱就看一下ID值能不能得到，如果能得到，本来调接口这种做个实现。所以这个我们完成了，完成之后我们测试一下，首先我刷新。比如现在我点第一行记录到删除按钮，大家看ID1是弹出来了，然后我点第二行ID2点第三行是YD3，这样的话，咱们现在把这按钮并且事件，并且方法我们就创建出来了，这是里边的第二步操作，各位能给它做到，然后这个做到之后，咱们的第三步是不是要调咱们的接口做实践，比如说我们现在要调接口。

但是调接口的时候呢，按照咱们之前的开发过程，咱们是不是要在这个API里边定一个JS文件，然后里边把接口的路径是不是做个定义，所以咱第三步做这个事情，我写一下。在A片。文件夹里边那个JS文件中定义咱们操作的方法或者操作的接口的。入径，那我来自我定义，然后咱看一下啊，我把这个hospital set打开，里边有我们之前写的第一个方法，这个方法我先加个注释就是。医院设置。列表方法，然后第二个方法加个逗号，它是删除医院这个方法，这方法比如说咱起个名字，我就叫底delete。

Hospital site，然后在方法中呢，我们传入医院设置的ID值。把这个传入，传入之后下面写上接口路径，我把这段复制咱们快速改一下，然后它的路径前面应该是固定的，然后在后面看它是什么名字，我到这个CTRL中找一下。就是这个里边是不是就传一个ID址，所以它到这个hospital set位置，然后后面传入一个ID值ID址，咱们在这个模板字符串中用表达式。就可得到。另外他的提交方式大家看。删除用绳提交。是底例的极轴，所以这里边我们就写上一个叫底例头，因为它没有其他参数，这一部分就不需要写了，所以现在咱就在API的JS这个文件中，把我们删除到接口路径，我们就做这个定义，这一步就完成了，然后完成之后咱们再往下进行，大家说咱们下一步要干什么。

咱们接口有定义了，那下一步在我的页面中是不是要调这个接口，最终这单的功能，所以咱们的第四步调用我们定义那个接口，最终实现我们的功能，这就是他的第四步，那咱们最后把这步给它完成一下，我们看怎么来做。首先我们进入这里边，第一个咱们首先把JS文件是不是先引入进来呀，我这里边应该之前已经引入过了，就是这个叫hospital下，然后咱们在这个删除方法中调里边这个方法就可以了，它里面的方法名字刚才咱们写的应该叫delete，是不是一个hospital s。然后里边传入我们的ID，那再加上这个点赞，包括点开是不是可以了，这是一个删除调用。

但是各位要注意啊，咱们就是做这个删除功能中，我觉得各位同学应该在网上或者一些系统中都见过删除怎么做，那我问各位啊，当我点删除，你说首先应该做什么事情，他是直接把记录删掉。我觉得各位应该都见过，我们点删除按钮是不是应该先弹过框了，让咱们是否做过确认哟，比如确认我们说是否删除信息，你点确定删除，点取消是不删除，所以咱们现在也可以弹购确认框，然后做个操作，而确认框怎么做，在我们这个I的UI中有它相关的这个组件，然后用这个组件咱能做一个就是弹出一个确认框，就是确定和取消，那咱们现在把fe打开，我们从里边找一个确认框，再来看一下啊，比如我们找一下。

然后咱们找到里边，我们看这个消息提示中有没有啊确认框。发现这里边好像没有，然后咱找一个弹框，在弹框里面大家看啊，有一个叫。消信息提示，你看这个这个肯定不太合适，然后咱看这个叫确认消息，大家看。这是不合适，当我点确定里面，其实我们申诉成功，我点取消是不是就不多这个操作，所以咱们现在用这个就可以了，就是一个确认消息，然后在里边我们看一下它的源码，大家看。源码是不是这个结构，所以咱用它就能实现我们里边这个功能，那我现在把这个内容给各位就复制过去，然后咱们通过它快速改成我们的效果。各位注意啊，复制少别复制多，也别复制少，它前面是三个大括号，后面再去掉三个大括号，就是中间的部分，所以现在我把这个内容咱就给它分过来，然后实现我们的功能。

做复制，复制之后我们来看一下这怎么改。咱们详细看一下啊，首先这个格式我先稍微调整一下。也可以了啊，然后大家看，首先第一个它叫这次点Dollar符号confirm是坦克确认框，然后这里边是提示信息，说此操作将永久删除，这个我们改个名字，医院设置信息。是否继续有确定，有取消，然后大家看啊，下面有两个方法，一个叫点赞，一个叫点开，我说下什么意思，当你点确定的时候，它就执行这个N方法。角这里啊，就是确定。执行这个。方法，如果说你点取消又执行catch方法，因为咱们取消的时候，我是不是什么都不需要做呀，所以这个cash我就会去掉了，咱在点赞里面做功能，当你删除之后，提示咱们是不是删除成功。

所以这是关于这么一个结构，然后在里边我们来写一下。在这个点确定的时候，那我们就是调用。接口中的方法，然后就调这个hospital set里边的这个方法。然后这个方法中我们加上一个叫点阵。点在里边，比如说加上一个response。箭头函数点赞里边表示删除成功，Response是反映内容，因为咱们删除不需要反什内容，当时点赞就成功了，所以这是一个调的接口，然后咱们删除成功之后我们可以做。大家说啊，我们删除成功之后，你说要做什么事情，比如说点这个删除成功做什么，第一个是不是可以弹购确认信息啊，比如提示我们说这里边已经删除成功了，然后删除之后咱们让页面是不是要重新刷新一次，直到你上完之后的是不是那个最新数据，这咱们要做这个事情，然后写一下第一个提示信息，其实就是这段话提示用户说你这个医院设置已经删除成功了。

然后做完之后，我们的第二部分，咱们需要刷新我这个页面。就是让他得到你删完之后的最新数据，那大家说我这页面怎么刷新。大家看啊，是不是这个方法呀，那我现在就可以让他呢，怎么做，直接我们就是去调这个列表方法是不是就会刷新，也就会重新查一次，那往里面调一下，这次点盖头list。我默认啊，让他就查毕业的数据，所以这样的话呢，咱们现在就把这个删除功能，我们的前端部分咱们就完成了，就是这个代码咱们就就完了，然后咱们再看一遍，最终我们做测试，首先第一步我们做法就是在每行记录后面是不是加一个删除按钮，然后在里边绑定事件调用方法，方法中传入你每行的ID址，我们用scope传递。

然后写完之后咱们定义这个方法，方法中我们先弹个确认框。然后JS里面定义的接口路径，咱们去调这个接口中的方法，最终做到删除，删除之后提示用户删除成功，并且刷新我们的整个页面，所以这是关于删除功能的实现，咱们把这个前端部分就最终写完了。然后洗完之后，下面我们来做个测试，看一下效果啊，这是大家看啊，比如我现在我想删第一条记录。各位，线上表里边第一条记录呢，它目前的ID值。一然后它的delete是不是零了，而我现在设完之后，这个值是不是要变成一啊，因为咱们做的叫逻辑删除，那我现在试一下，我点删除大家看。

是不是弹过框了，当我点取消什么都不做，而我现在点确定，大家看其实咱们是不是删除成功了，然后你要数据应该就不存在了，咱到表里边也看一下。是变成了医药，也就是说这里边这个北大国际医院，大家看这里边应该就没有显示了，因为它已经删掉了，所以这就是关于删除医院设置功能的。这么一个事件。