60、商品服务-API-品牌管理-效果优化与快速显示开关

接下来呢，我们优化一下逆向生成的品牌管理整个页面效果，首先我们将表头的显示状态后边这一块我们给它删掉，我们来到brand这一块，我们找到这个显示状态，我们就不要这一块了，保存。这块ES Li呢老报错，其实我们语法是没有什么错误的，ES lit的语法检查太严格了，我们直接把它关掉，我们来到build里边，Web package，我们将create link row这里边的整个对象，里边的属性我们给它注掉保存，这个呢需要重启一下项目，CTRLC，我们先把项目停掉，然后呢，我们在n PM run d。启动起来呢，我们打开这个品牌管理这块是显示正确的，那控制台呢也就不报错了，接下来我们希望在显示状态这给我们显示一个开关按钮，如果说这个品牌是显示的，那就是打开状态，如果是不显示，那就是关闭状态，包括我们可以动态的点击这个开关，调整它的显示不显示。那这一列的自定义显示该怎么做呢？我们可以参照我们组件里边有一个叫table表格，它下边呢们一直往下翻，它有一个自定义列的这个显示内容自定义列模板，比如我们这块姓名就是显示的一个自定义的样子，我们展开它的这个显示代码，想要用自定义的显示，我们是通过这个scope的slot，也就是view里边的slot插槽机制，我们可以给要修改的这一列定义一个templatet模板，在这个模板里边呢，定义slot scope属性，它可以接受一个参数scope，这个scope里边呢。

是封装了当前这个列所在的这一整行的所有数据，以及当前列的信息，包括它的索引，包括整个表格的一些状态信息，我们的scope都能获取到，然后在这个template里边定义我们要显示的整个效果，那我们就将这一块复制过来，我们粘贴到我们这个显示代码里边，Auto shift f代码整理一下，诶，这块整理呢，会出错，由于我们这个template标签，我们一整理啊，他把一开始的大templatet就给弄丢了，因为他遇见了这个第一个结束标签，用CTRLZ给它退回一下，前面的templatet就又出来了。好，我们现在就算是整理好了，Auto shift f。

那我们真正要显示的内容，我们把这一块给它删除掉，我们想显示一个开关状态，我们参照element里边的组件开关，我们来找到我们这有一个。Switch，我们就用这个开关，我们把Switch Switch我们拿过来，CTRLC。我们在这复制ctrl v al shift f这个开关呢，去来绑定一个值，那绑定的这个值其实就是这一列的显示状态，但这个显示状态我们可以使用这个scope进行获取，比如我们看这个示例代码，在这一块呢，要获取值就scope点肉点date，这是获取我们点肉，那就是当前行的，那我们也一样，VGA model绑定的值，那就是scope当前scope当前行里边的我们的show status就是这个数据。

我们保存看一下效果。现在呢，我们这个页面我们来打开，我们这一块呢，默认是没有显示的，当我们给它点开，我们还是希望它发送请求给我们进行显示，当然这个功能呢，我们稍后再做，我们刷新一下，现在呢默认是没显示，没显示的原因那是因为数据库的受status是空的，那空它一认为也是false，那没显示，如果我们来点击新增也是一样，在这一块的显示状态也应该变成一个开关，我们来修改一下它的这个新增逻辑，它的这个新增呢，其实是在我们这个e form，当我们来点击新增，它会触发这个函数去来弹框，那弹的这个新增框啊，它其实在这一块引入了and all update，我们可以看一下，它是将。

我们当前这个view组件所在的目录的brand and update将这个组件import导入进来了，导入起了一个组件名叫and all update，那要使用它就在这使用了，而且默认呢，给它绑定一个属性，这个属性在这是false，也就是这个组件是没有的，我们什么时候调成触了它就有了，相当于当我们来点击新增这个按钮的时候，我们一调成处那我们的这个组件。就显示了，而这个组件呢，其实里边就是一个模态框e dialogue，那么将它里边的显示状态我们也改掉。而且这个显示状态呢，不用EL input进行显示，我们还是用Switch我们的整个开关，把这个开关也拿来EL Switch。

我们复制过来，我们在这呢，替换一下我们这个EL input要绑定的数据还是这个show status。好，我们把它删掉保存。现在来看一下页面效果。我们在表格上显示状态是这样子的，新增显示状态也是这样子的，同时这边的表单项名字宽度有点小，他们都挤到第二行了，所以我们把它宽度也调大，这个调整呢，也都在我们这个yellow form里边，Yellow form整个form呢，由我们品牌logo、地址等等的数据新增框，我们在这一块有一个label外，也就是我们表单里边每一个表单项的label的宽度，这个80呢有点小，我可以调成。一百四保存，现在整个页面效果呢，就稍微优化了，我点新增，诶这就有了，包括最重要的就是品牌的logo地址不是我们输的，这应该是一个文件上传框，而文件上传完了以后，真正的值是上传完后的图片地址。文件上传呢也是参照组件里边有一个叫upload，比如这个点击上传，这就有一个上传效果，我们就可以将它复制过来，EL upload，特别是在这要定义好我们当选中了某一个图片以后，我们点击上传以后，我们要上传给哪个地方，Action指的是我们要上传去的地址，包括整个EL upload能设置哪些属性，我们都可以参照文档来做。当然这里我们就先不复制这个文件上传了，那下一节课我们要详细讲解我们接下来要使用的文件上传技术，那我们呢，还是先来把我们这个。

个功能做完，比如我们品牌的快速显示与不显示，那我们就应该先来监听我们这个开关的状态，如果它改变了，那我们就应该给我们服务器发送请求，修改当前这一行一号品牌真正改变后的状态。那这个监听呢，我们可以参照element组件，在开关里边有一个叫事件，我们可以监听我们Switch开关的整个变化，那事件的名称呢，就是change回调函数，可以帮你传一个最新的状态的值，所以我们把它复制来，那希望给我们自己的开关，我们来到brand品牌的列表，品牌列表呢，有一列是我们这个开关，我们为它来绑定一个change事件，来写一个at change，当我们这个事件调用以后，事件发生以后，我们希望调一个方法叫update brand，我们修改品牌的status这个状态。

这个状态呢，我们来把它声明起来，把它放到我们的这个muscles方法里边。

放在这好，Update status，那这个状态呢？我们怎么知道它最新的状态，它在调用这个方法呢？会自动将我们这个状态传过来，我们只需要在这console。点log，我们打印一下最新状态，我们打印一下我们传过来的status，事件发生以后，我们只需要告诉他来调用我们这个方法，那么这个状态信息最新的值会传递过来来进行保存。我们来看一下我们页面效果，F12，打开控制台，我们看能不能监听到这个状态，我来展开，诶，它最新状态是触关闭，那就变成了force，但我们现在呢，有了这个状态以后，我们还得知道他修改的是哪个品牌的状态，所以我们在这儿呢，光接收最新的状态触false不行，那我们可以给这个方法传递一个参数，传递什么参数呢？我们将整行数据scope点肉全部传过来，这一整行数据呢，既包含了品牌的ID，品牌的名字等等，还有其他信息，所以我们只需要将scope点肉整个传递过来，那接下来呢，它这一块。

打印的这个就不是最新的状态了，那么就叫data最新信息，我们看一下当前这一列的这一整行的最新信息来保存。看一下页面效果，当我来展开，那最新信息呢，是一个对象，因为我们把一整行都传过来了，那现在的状态就应该是处，那我们再来。关闭，那它的最新状态，我现在就看到它是一个force，所以我们就应该将这个品牌ID的状态改成我们最新的这个状态，那么就在这儿发送修改请求。

发送请求，修改状态，这个修改呢，逆向生成的方法，里边也直接可以用CTRLN来找到品牌的brand controller，这个controller呢，都是对品牌的一些增删改，查品牌的列表，这是一个分页查询，这是查询某一个品牌信息，这有一个修改，修改呢带一个当前品牌的这个对象，这个对象里边呢，你只需要给我带一个品牌的ID和你要修改的其他信息，我们可以做一个测试，打开P曼，如果我们测试的情况下，我们先来发送请求，那发送呢，给网关发送请求，发送我们的product，我们来找到brand，发送的是这个请求。Product brand，当然我们发送的是修改请求，我们修改呢，在这CTRLC过来复制过来，而要修改什么数据，我们是通过response body获取请求体的，请求体还是一个杰森，把杰森转成这个对象的，所以我们在这呢将它调整为post请求，然后呢指定body body是一个杰森数据，而以前的那些表单提交方式，它是3W这种数据格式，我们现在整个前端项目呢，全变成节省好，现在呢，我们来提交一个对象，这个对象里边主要指定这两个信息，第一个是品牌的ID能复制过来，对象里边应该有一个属性品牌的ID1号，第二个我们要修改的品牌的值，比如我们要修改品牌的哪个值，假设我们要修改它的logo，那我们把这个logo复制过来，那它最新的值我们随便写一个，我们发送请求send。

的。那在这呢，就会看到成功看数据库刷新，那么这个logo呢，就会有，那后台接口呢，是准备好的，逆向生成的都可以用，那么前台直接发送请求，Http post，请求地址呢，Auto shift f，我们把请求地址直接从postman里边复制过来，我们都是发给网关的前缀，不用写好要发的数据，这个数据呢，这个data里边是我们在控制台看到当前这一行的最新信息，其他不用发，只需要发品牌的ID和它的显示状态，所以我们解构这个data，我来let let一个什么，我们解构这个data里边的这两个字段，一个叫品牌ID，把品牌ID和。

我们的show status这个字段拿出来，从传过来的data里边拿过来，然后呢，将它发送给后台，那要发的就是品牌要发的。

属性就是品牌ID，它的值呢，那就是解构出来的这个，包括显示状态也是结构出来的这个，那一个对象的属性名跟属性值要用的变量名都一样的情况下，我们就又简写为这样，好，那我们数据发出去，如果执行成功了，我们就应该提示，我们以前呢是用this.dollar message进行提示的，诶我们用过这个，然后呢，里边传一个对象，那提示的是一个成功消息，那type就应该是一个。Success，我们以前经常复制这个，那它的真正的消息message就是我们给一个提示，叫状态更新成功。保存，现在我们来看一下页面效果。我们先来刷新。

现在华为的这个状态呢，是一个不显示的，我们给它打开，但是我们发现这是一个四代半request错误请求的原因是什么？来监控network，我们在发update请求的时候，我们请求数据，哎，品牌BRAND1受S呢，它是true，而我们真正要发给数据库的这个受status，我们来看一下表的定义，它是一个数字零或者一，所以啊，我们在这呢，解构出来的这个受status，我们要做一个判断，受status的值，如果受status是处，那就是一，否则就是零，我们直接写一个三元运算保存。现在来看一下页面效果刷新。还是这个显示状态展开，诶状态呢，更新成功了，我们再来刷新一下。但是呢，我们发现此时这一块呢，还是显示关闭状态，而我们数据库呢，已经变为一，这个原因是什么呢？我们可以参照一下element的文档，因为我们这个开关啊，它打开那是处，关闭那是false，但是呢，我们可以改变它的这个值，比如有一个叫active value，如果它被激活的话，那就是处，不激活那就是false，但是我们也可以给它改成激活是一，不激活是零，所以我们给它设置上两个新的属性，我们来到我们的这一块开关。

往上翻，我们这有一个active inac，好，我们来写一下active value，那我们激活的这个值，这个值呢，那就应该是一，还有它的inacive value，那就应该是零，诶这块没有逗号，我们把这个inac也拿来，就是它不激活的时候，哪个值导致的是开关关闭状态，那inac呢就是零，而且呢，我们是数字零一，所以我用冒号给它绑定的这是一个数字一更零保存，我们现在来看一下页面效果。

我们来刷新我们的页面，刷新。我们发现这一块的显示状态就OK了，包括如果我来改掉了数据库，我变成了零，我们来保存，现在看一下状态刷新。那这就是关闭了，那我重新给它打开，打开我们发送请求，状态也更新成功了，更新成功的数据，那就是一，那我们再来关闭发送请求给它，把状态更成零，我们看数据库刷新，诶现在变成零，而且这一块呢，我们就可以不用这么写了，那么在这一块在监听状态的时候呢，还把它判断是true还是false变为一零，而现在我们都已经动态绑定成一零了，那我们在这儿获取到的最新信息，我们可以看一下控制台。

每次的这个最新信息，那它的show status就已经是零跟一了，我们就不用做这个三元判断删掉保存，那最终的我们这个快速的更新品牌效果，那就已经做好了，更新成功，现在是关闭状态，再给它打开，我们来看一下数据库，诶现在又变成一，那下一节课呢，我们就给他做他的品牌logo的文件上传功能。