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

下面我们继续来开发医院设置的功能，刚才呢，咱们完成了删除功能的实现，那我们继续往下来做，下面咱们做什么呢？我们实验一个叫批量删除功能。咱们看这个功能该怎么实现。首先我们先看一下之前我们写的批量删除的接口，我们先找到接口应该在下面的这个位置。半尺瑞木，然后这个接口，咱这些写到我们传入的，大家看是个什么。是不是一个list集合呀，然后在list子集合中咱们去调service里边的方法，然后在方法中就根据这个集合删除里边的多条记录，实现一个批量删除功能，所以咱们下面就把这个批量删除的前端部分我们来做个实现，那我们看该怎么做。那各位说批量删除该怎么实现呢？首先第一个批量删除意思就是咱是不是要删除多条记录，所以首先第一步咱的做法就是我现在就可以加一个按钮，比如我这按钮名字我就叫。

黑档删除，而当我点击这个按钮，是不是可以实现多条医院设置删除，但是因为咱有多条，那多条怎么体现，我觉得各位同学应该都见用这种效果，就是咱的做法就是其实很简单，我们可以在每条记录前面。是不是加上一个复选框，比如说我现在选择第一个复选框，比如选择它。比如说又选择了第二个，然后选择之后我点偏项删除，那这两个记录是不是都可以删掉，而咱们选择过程中需要把你选的这个ID是不是串到方案中来，最终做到，所以咱们下面就来做这个事情，实现一个批量删除功能，那我们看具体该怎么进行实验。首先第一步呢，咱们先在这个JS文件中，把这方法我们先做定义，那下面咱们来定一下。

在这里边我先加个注释。批量删除的方法，然后这个方法我起个名字，比如我叫这个半尺。Hospital。然后在里边呢，我们要传入，就是你要删除那个医院设置的ID值，因为它有多个ID值，所以咱们就传入你这种集合形式传递，比如说起个名字就叫这个ID list的，然后下面的定义我们这个接口的路径，这个接口我还是从我的一边把它扑过来，我们叫半尺蕊木，然后把它拿过来。拿回来之后，它的提交方式是比delete，然后最后要传这个参数，但是这个参数传的话，咱们看接口中大家注意我们写了什么。是不是叫快的body，而块的body底是不是用Jason形式传递啊？我们之前提到过，如果Jason传递，那这里边怎么传参数？

咱们怎么写，是不是加上一个date，后面加这个叫ID list的，这样的话就可以把这值转成list的，就是转成这个Jason结构，然后最终进行这么一个传递，把list变成Json，然后传过去，咱们在接口中得到值，最终完成一个删除，所以这是我们的第一部分。在摘中定义批量删除的接口，这个单误就完成了，然后完成之后第二步呢，我们来到页面中，在页面中咱是不是要加个按钮，然后在每条记录前面是不是加个复选括号，而这个过程我们用的肯定也是element UI中的组件，那我下面给各位加一下，首先第一个我先在这里边呢加上一个按钮，这按钮我就从课件中直接复制了。因为在那按钮我想加到它的上边，所以我在yellow table这位置加上一个div，然后div中加上一个E8，一个按钮，按钮我起名就叫批量删除。

而在这里边，当我点击偏向删除，让他去调用咱这个方法，也这方我起名就叫remove Rose，在方法中写咱的这个功能，那我下面把这方法在下面我们来做一个定义。我就写到最上面吧，这个方法就是批量删除的方法。方法名字叫remove Rose。在里边咱们一会儿写它的具体内容，所以现在把这按钮我们就加上了，加上之后咱们看一下页面容，大家看啊，现在在我页面中是不是多了一个叫批量删除按钮，然后这个端之后咱们在每条记录前面是不是要加上一个复选框，那我们来加一下，也是用IUI中组件，那怎么加？给各位说一下，咱就来一个yellow table column，然后里边让它type叫这个selection selection表示就是一个复选框。

那我现在找他就加到里边去，然后咱看一下啊，之前呢，咱应该用了一个叫type inex，是不是一个序号啊，也如是里边显示1234，然后现在我在上面再加上一个叫EL table column type叫selection，然后里边加上它一个宽度，这就表示可以加上一个不选框，咱是通过IUI中的组件做到的，就是typeb等于select。然后加上之后我们来看一下，大家看啊。前面是不是有互选括号，并且在里边已经帮我们实现了一个小功能，就是咱们通俗说的全选，全部选，你看里边是不是都可以，在这个我们就把页面部分做到了，加上了复选框，然后加上之后咱下面做的就是比如我现在选择。

负向框，然后我点击批量删除它，根据我选的这个就是医院设置把内容收费删掉，就咱们下面就来做这个事情，当然在做这个过程中啊，有一个小问题，因为我现在每次选复选框，咱是不是要得到它里面的ID值，比如我要得到你选的是哪个复选框？并且把里面的ID值在学校得到，所以这个怎么做，给各位说一下啊，首先第一个。咱们可以在复远框的位置啊，给它绑定一个事件，就这个事件大家看叫selection change。什么意思，就是你每次选择这事件会触发什么意思，比如说我现在大家看啊，比如现在我选择这个附件框，那事件会触发，我选择它事件它会触发，每次触发的时候，它就会把里面的ID给我们传到方中来，那我现在就在里边给他绑定上这个事件，绑定事件我们想这个e table商边。

那各位来写一下。在这里边咱们就绑定事件，而每次你选择了复选框之后，这事件都会触发，在触发之后，在里边都会调用咱们这个方法，那我下面就来把这个方法写一下。给各位写到下边这些就是相关的内容，都是由我们的IVUI给咱封装的，然后写一下就用于获取你选择复选框的那个。ID址。叫handle selection。然后这里边呢，我们可以加上一个变量，用这个变量就能得到你希望那种，比如说咱们加上一个比如叫select这么一个参数，然后可以得到把这个这select就是得到你选的那个复选框中的那个值，它把每次选的值就会给你传到这里面来。

我们可以做这个事情，然后这个做到之后，咱们下面啊，为了效果明显，我们可以做一个简单的测试，怎么测试呢？比如现在我加一个console.logo把它做一个输出，就这个。Selection，我们得靠输出项。然后咱们来试一下啊，看现在这效果是什么样的，如果是主咱们预期的效果，咱再往下做，因为咱们预期效果就是这次select是不是你每次选那个复选框的ID值啊，应该是这个效果。那咱我们来操作一下哈，所以现在我刷新。大家看啊，首先呢，我选第一个。包括选这个，然后它里面呢，就会有这个值给它就传进去。咱们现在把这个F12点开大家看啊，其实里边有值在里面输出了，比如说咱们看一下啊，比如我再重新试一下，哎，我重新刷新。所以大家看现在我选择这个第一个，你看里边啊，是不是还给我们传一个值，然后这个值就是我们这个相关的ID值是不是就是二，比如现在我在里边，我可以再选择一个，里边是不是有多了一个值地值，除了我们那个，咱看啊里边有这个ID是二，然后第二个ID是他选的第二个来看这个值。

各位看是不是这个三影，所以你发现啊，就是我们现在每次选择互选框，事件是会触发，然后他把你选择的互选框的值就给我们传到这个方法中来，咱通过这个参数叫selection，就能得到你选的互选框中的这个值，当然它的值里边会包含很多值，比如咱也看到了，比如里边的值里边都会有，当然咱们只关心是不是那个ID值，所以咱们把这值得到就可以了，现在这个我们就触发出来了。然后出发之后，因为这些值我们都需要，所以咱从里边把值可以给它取出来，最终做咱的操作，那我给他就取一下啊，怎么取，我来写一下，首先第一个呢，我在date中呢，先定义这么一个变量，因为大家看到它这个值因为会有多个，而多个值是不是一个数组形式啊，所以我在里边咱就来一个变量，我想这位置。

这里边就是加上这么一个变量可以，变量就代表你那个多个ID值放到里面去，然后变量写完之后，咱在下面这个位置就做一个负值，比如给它赋值一下啊，就来一个这点，这个变量等于这个。Select。就等于它。这样的话完成赋值，然后完成赋值之后，这里边我们值都有了，有之后我们下面一点击批量删除，是不是调这个方法，这个方法中可以做我们的具体内容。那我们下面在里边把这功能我们给他继续完成一下。好，咱们开始写一下啊，首先批量删除它，首先是不是也弹个确认框了，跟咱这个结构类似，那我现在把这个内容给各位复制过来，咱用它快速改一下。

现在首先复制，然后复制之后我们看一下这里提示说此操作将永久删除医院设置信息是否继续，当我们点确定是不是继续哦，继续的话，他就调咱们接口中的方法做实验，接口来进行定过了，然后他就调里边的这个方法，我们刚才起名叫饭吃。比如说我改个名字啊，叫半尺瑞木。Hospital set调这个方法，那我现在把这方法给各位拿过来，然后调完方法之后，里边是不是传输一个集合呀，也就是你的多个ID值，最终我们删除之后提示成功，并且刷页面，所以咱们现在把这值要传过来，那这个值比如现在我在里边几个变量，我就叫这个ID粒子等于一个空的一个数值。把这个先反过来。而这个I list的值，我们目前是不是在刚才这个变量中，所以咱从变量里边把里边那个ID值取到是可以了，因为这个变量大家看。

他是个什么？是不是一个数组，那大家说咱们怎么从里边把D值取到，再给它放到这里面去，我们就要怎么做。个位数怎么实现？这里给大家强调，它是不是个数组，所以数组的话，咱是不是要遍历，就是遍历数组得到里边的每个ID值，再给它设置到我们这个ID list里面去，所以咱们下面给它就做这么一个遍历，然后把这取出来再给它放进去，那来便利一下啊，便利我就直接来一个后循环便利了。那我们写一下，我来一个YI等于零，I小于这个这点这个变量点认识。然后来一个I加加，这写完之后，咱们得到里边的每个这个就是ID值，就是每个那个。

Selection我们选的那个对象啊，比如说我叫这个OBBD，然后等于这次点这个变量，因为它是一个数组，数组取值，咱是不是通过下标取，然后取完之后我们想得到里边的每个ID值，那就是OBG，是不是点ID，那里边我起个名字就叫IID。这样的话，咱们把每ID值得到了，然后得到之后把每个ID值是不是要给它设置到这个ID list中去，就是往这里边放数据，那怎么放啊，在这里边一个方法叫这个push方法，咱通过push方法可以给他就放进去。那我来放一下push，然后里边就放这个ID值，而这么做之后，在ID中就咱们所有的I值，然后最终咱们传到方法中来，再去调咱的接口，是不是就可以实现一个批量删除功能，所以这样的话，咱现在把这个就完成了。

这是我们视线的。批量删除功能。然后完成之后给各位再来重复一遍，最终咱做个测试，就看一下我们刚才怎么做的。首先第一步在里边呢，就是我的做法就是在每条记录前面先加个复选框，我们加这个typeb等于selection，并且咱们加上一个批量删除按钮，绑定事件要方法，而我们附小框，每次点需要得到里面的值，所以它每次点会触发一个事件叫selection，甚至我们写这个方法，在方法里边我们就得到你选那个负向框的值放到变量中，然后发完之后，当我点偏向删除，丢掉方法。但是方法中需要得到你的多ID值，所以咱从变量中，因为它一个数组，把它变历得到每个对象，再得到每个对象中态地值放到ID丽中，最终传到接口中，实现出一个批量删除功能。

所以这个就是咱们完成的这么一个批量删除的时间，咱们就写完了，主要是这过程稍微麻烦点，但是各位先给它写出来，然后完成之后，咱们最终给他就来测试一下，看一下最终的效果什么样的。那我来刷新测试。比如我现在啊，我想把第一个和第二个这两条记录进行删除，那我现在是不是选择了两条记录，然后现在我点批量删除坦克确认框点取消，什么都不做，然后我现在点确定。大家看提示咱们是不是成功了，然后成功之后咱到表里边看一下，大家看。值是不是都是一楼，就是目前就完成了一个批量删除医院设置功能。