53、商品服务-API-三级分类-修改-基本修改效果完成

接下来我们编写修改功能，首先呢，我们需要为每一个分类后边添加一个修改按钮，当我们来点击这个修改按钮的时候，弹出一个对话框，这个对话框里边首先要回显我们当前分类的信息，然后我们再来动态的输入我们新的内容，输入完了以后点击确定，再去真正的修改当前分类的数据。我们首先呢实现页面效果，为每一个后边添加上修改按钮，我们来到我们的代码里边，这个EL tree里边，Span里边，这是当前节点的名字，后边呢有我们两个之前的添加和删除按钮，我们给他多来一个修改按钮，我们复制一个EL button，只不过这个修改按钮呢是在任何时候都要有的，所以我们把这个VF先去掉，然后呢，当我们来点击的时候，我们希望呢，调用一个修改方法，比如呢，我来写一个edit，我们直接来这样写，好让他呢直接调用我们这个edit方法。

那怎么调呢？我们就希望这有一个edit方法，这是点击修改以后调用的这个功能，好它呢会传入一个data，那就是当前节点的数据，我们console log在控制台打印一下，这写一个要修改的数据是哪个，我们把这个data放在这保存，先来看页面效果，那现在呢，发现每一个后边都多了一个按钮，我们把这个按钮的名字呢，我们改成edit。好，我们就叫edit。我们来看一下这个页面，接下来呢，每一个后边都有一个edit，当我们来点击edit的时候。那么这呢，就会打印要修改的数据，将当前节点就显示出来了，但我们需要让他打开一个对话框，这个对话框呢，我们还是复用我们以前的EL dialogue，那我们怎么用呢？我们只需要将它的dialogue visible变为true，所以当我们修改的时候呢，我们还是一样this.di visible等于true保存。现在我们看一下页面效果，当然点击修改这个对话框呢，就打开了，这块呢，还要展示分类的名称，那回显名称呢？我们要修改的数据里边有一个name，将它复制过来就行了。那如何复制？由于我们表单里边的这个数据都是跟category的name进行绑定的，所以我们只需要将category的name变一下就行了，当我们修改的时候呢，this.catory里边的name，那就等于这个是我们当前要修改的数据。它里边的name值保存现。

再看一下效果，我们来点击edit，那我们在这呢就回显出来了，包括我们来点击任何修改，我们点击edit这都有回显，但是我们真正的要点击确定去来修改数据，我们不止呢要回想我们这个分类的名字，我们修改的真正功能，我们来看一下逆向生的这个修改，我们是按照ID修改的，所以我们必须知道我们要修改的是哪个菜单的ID，当然不修改的内容呢，我们就可以不给它赋值了，那我们现在呢，给一个菜单ID，所以我们这需要还有一个菜单ID，这个菜单ID呢，我们先默认让它是空的。

那什么时候有呢？当来点击修改的时候，我们给这个菜单ID再附上值，所以我们在这来准备一下this.category点我们的菜单ID看ID，这ID等于什么呢？同样的，在要修改的数据里边也有这个信息，我们来看我们的页面，要修改的数据里边都有当前分类的ID，好。这里呢，我们就准备好了，但是呢，我们现在要做的是，当我们来点击修改，输入完信息，我们点击确定发送请求去修改，但是我们的这个对话框里边这个确定按钮啊，当时绑定的是添加方法，我们修改方法跟添加方法发送的都不是一个请求，而且呢，我们还要复用这个对话框，那怎么做呢？我们现在就相当于要区分当前对话框到底是由于我们点了修改打开的，还是点了添加打开的，那我们可以给data里边放上一个属性，我们比如叫dialogue t，我们对话框的类型，我们这个类型呢，我们默认给它一个空白字符串，当我们来点击修改打开，我们就把它变为edit。

比如这样，当我们点击添加打开，我们就把它变为and，好，这就是我们规定的对话框的两个类类型，那我们现在来看，当我们点击添加的时候，End，它会调用openend的方法，那这个openend的方法呢，我们就给它上来，将我们这个对话框的类型dialog type变为添加and，而如果我们点击修改，我们是调用edit方法，我们来看一下，当我们来点击。

修改我们调用edit方法，那此时呢，对话框的类型就应该是修改，我们也复制一下CTRLCCTRLV。Edit，那当我们此时再来点击对话框的确定按钮，比如我们给他绑定一个方法叫submit me data提交数据，但是这个提交数据到底是提交保存请求还是修改请求，我们需要判断一下，我们把这个方法呢先来写上来们就写到这submit data里边，好，我们到底是要给它添加还是修改，我们在这判断一下，如果当前，诶如果当前的dialogue type，它等于and，它呢现在是and，那么呢，我们就是上一次点击添加打开的对话框，那么就来调用这个函数，我们就直接来调用this.and category，那否则如果我们这个对话框的类型是edit，是修改，那我们呢，就希望有一个修改方法，那我们就来去。

调用这个修改，那我们在这呢，给大家再来添一个叫edit category，诶我们添一个这个方法，那这个方法呢，就是我们真正的修改三级分类数据，如果我们是修改呢，我们就来调用这个方法，那这个方法呢，就应该是发送修改请求，好，我们把这个方法复制来来放到这。而且呢，我们再来做一个效果，那如果是添加我们这个对话框的提示叫添加分类，如果是修改呢，我们对话框叫修改分类，所以相当于我们对话框的提示消息，我们来看大的提示消息不是固定写死了，我们跟这里边的某一项数据进行绑定，跟谁绑定呢？比如我们这里边data里边也有一个抬头，这个抬头呢，跟我们这一块进行动态绑定，如何绑定我们写V杠棒的，或者我们来直接来写冒号，这都是缩写好我们这个冒号呢，我们要绑定一个什么，我们要绑定一个title的值，这个title的值呢，是在我们data里边声明好的，然后接下来当们点击了添加这个title呢，我们给它变一下，点击了添加，我们除过改变对话框的类型，我们再来改变我们这个title们title呢，现在就是添加分类，如果我们点击了修改。

那抬头呢，就是修改分类，我们在这儿放上修改分类保存，现在来看一下页面效果，当我们来点击添加，这是添加分类，当我们来点击修改，这是修改分类，而且回显内容，当然无论是添加还是修改，其实我们输入的不止这一项内容，我们来看数据表，里边除了这些有些是计算的之外，还有菜单的图标以及我们的计量单位，单位当然这个商品的。

这个数量呢，是我们以后每添加一个商品以后，在这个分类里边给它动态的增加的，我们这不是需要赋值的那么多来两个赋值框，一个是它的图标，一个是它的计量单位，我们在这一块呢，对话框里边再来写上两个form item，好一个呢叫图标。图标一个呢，叫我们的这个计量单位，计量单位这两个呢，都跟我们这些属性进行绑定，图标呢，有一个属性叫X，好，我们在这儿复制一下，那计量单位呢。

有一个属性叫product unit，我们在这也放一下，当然这些东西呢，我们都应该给它一个默认值，我们在category里边，好，我们的。计量单位，我们来默认给他一个空串，包括我们的图标，我们也默认给他一个空串。我们来保存一下，现在我们来看页面效果，当我来点击添加，那我们呢就要添加好多的这个数据，当我们来点击修改，我们除了回显我们分类名称外，我们图标以及计量单位都要回显，怎么回显呢？来打开我们这一块的代码，我们之前呢，在这儿已经回显了它的名字以及分类的ID，其实我们这个回弦呢不合适，为什么不合适，我们是在这儿点击了edit f12，我们来看一下控制台，我们拿到的是这一块的数据，这是我们上一次请求出菜单的这个数据，我们拿到直接将它的内容进行回显的。

但是呢，现在有一个问题，假设呢，我们现在有好几个工作人员都在用这个管理系统，我上一次呢，是十分钟前我刷出的这个菜单，而别人在这儿呢，已经修改了我们这个菜单的名字，我呢又不知道，我点击了修改按钮，我还是把我菜单上一次刷新的内容把它提取出来，在这回显，那这就不是一个最新的数据，所以我们每次回显啊，不能偷懒写在这儿，把以前的数据拿来回写，那我们正确的做法应该是发送请求，获取当前节点最新的数据，然后我们再给他进行修改。那怎么发请求呢？我们来还是发送http get请求，这个get请求呢，我们想要查出当前节点的数据，Al shift f，那怎么查？我们也来看一下我们逆向生成的代码里边其实呢，都生成了一个东西。

叫product category info，我们查出某一个的节点信息，在这呢带上我们节点的ID，我们是按照ID给我们查出当前内容，这个内容呢返回放在category里边，当然我们以后呢，统一把所有内容都放在data里边，放在这儿，所以我们需要发这么一个请求，我们在这来写一下，好发送请求发给谁，发给我们当前product category。下的，我们这有一个叫info count ID，而且这个分类ID呢，这是动态获取的，这怎么获取呢？我们刚才点了哪个修改，那就应该是获取它的这个分类ID，我们查出它的真正内容，那我们在这来写一个反引号来动态取出它的ID，我们使用Dollar符大括号，因为我们点修改以后呢，把当前节点的这个data数据传过来了，这个里边有分类的ID，看到ID我们在这儿发送get请求以后，我们也不用携带什么参数，请求成功以后，那就在这儿，这是我们请求成功，那请求成功以后呢，我们再来将我们真正的这些数据进行回显，这个data是我们从服务器拿过来的data，要怎么取出它里边的。

内容进行回写，我们先可以来重启一下我们这一块的代码，因为我们刚才改了返回值，我们返回的是这个data，我们来看发送请求以后，它获取到的数据，console.log，我们在这打印要回显的数据，我们把服务器给我们返回的这个data呢，我们来看一下，我把这一块呢先来注掉。

注掉保存。我们现在来看一下我们这一块的代码，我把控制台清空一下。好，我们在这点击修改，点击修改呢，要回响的数据，我们看到呢，这是我们发送请求要来的message success code0data里边呢，还有一个data，这个data里边才有分类的ID，分类的名字，以及其他从数据库拿到的信息，所以啊，我们这个data里边的data塔，那我们把这块打开，那要要到名字CTRL加斜杠，我们应该是返回的这个data塔，这个对象里边还有一个data塔，那整个data塔呢，是这么一个对象，对这个data塔里边的data里边的name，包括这个data塔里边的探ID，我把这两个回响来了以后呢，还要我们回显这个图标以及计量单位，如果数据库存了的话，我们在这来打开图标this.category点它的图标是什么，那我们还是来取出图标以及计量单位，我们都来给它进行回。

一下this.category.product unit，我们也是取出服务器返回的这个数据，好，我们在这儿呢，给它回显完成保存，那接下来呢，就应该是当我们将数据都回显出来以后，我来点击确定发送请求去来更新数据，这个请求呢，我们还是发给我们这一块的update方法，这个请求呢，我们来看我们要发哪些，我们首先呢要将它的分类ID发送出去，包括分类的名字我们是修改了的，分类的计量单位以及图标有可能进行修改，剩下的东西在这是不修改的，它的负分类ID以及层级，我们后边要做一个拖拽功能，这个拖拽呢，可以改变它的附菜单是哪个，包括它的整个排序是哪个，那这一块呢，我们先要修改，只是改它的名字，以及后续的这两个内容。

所以啊，我们希望修改的时候呢，也只发送分类的ID，分类的名字，以及后边这两个内容，所以我们在这回显的时候呢，我们将其他内容也没回显，而我们真正要修改，我们来看一下，我们会调用submit data，如果是修改呢，发送这个修改请求，那修改请求呢，我们继续往出发，那首先得发一个post请求，Auto shift f发给谁呢？我们把这一块的路径复制过来，那是我们product category update c。我们来到这是它的这个update方法。它的update方法，而我们真正要发的数据，我们得提取一下，我们不能将this category整个发出去，因为this category整个发出去的话呢，它还包含了显示的状态排序以及层级，这些层级呢，我们没给他回显，如果发出去呢，数据库就会用这些默认值把他以前的这些层级呢给它替换掉，但如果我们不发，相当于这些如果为空的话，那我们这次更新啊。

我们的ctrler里边的这个更新，它其实是一个动态更新为空的字段，它就不会更，所以我们不想更新的数据，我们不往出发就行了，来我们还是来到这儿，把这一块呢，还是改成它的默认值，那我们这一块真正的修改请求我给他发哪些数据在这修改，我来准备一下，我来这么来写，我挖一个data，我先放在这，我要发的数据呢，是this.category但这个category里边呢，我只发部分我要的数据，怎么发哪些数据，我写一个大括号，这个大括号大家知道这是叫结构表达式，我从category对象里边，我只解构出我要用的内容，比如它的ID，也就是这四项。

这个ID以及name以及。Aiken。以及他的。计量单位，我把这四个内容解构出来，然后呢，我将它做成一个对象发出去，那这个结构呢，相当于会有四个变量，那我们最终呢，想要发的整个对象是这样子的，相当于呢，我们属性名叫cat ID，它的属性值呢，就叫这个结构出来的count ID这个变量包括呢，我们要发name，那它的值呢，就是结构出来的这个name，我们要发icon，它的这个值呢，就是解构出来的icon，我们要发product unit。

它的值就是product unit，前边都是K，这个K必须按照我们加B里边的属性名来写，这样就能一一封装，而后边呢，都是值，我们又说了，最简单的写法就是如果KV都是同一个名字，那我们就这么来写就行了。我们把冒号呢可以省略，把这一块可以省略，把这一块可以省略，那这个呢，就是我们要发的对象，那我把这个对象呢，就直接给这一放，这是我们将要发送出去的数据，数据成功了以后，我们在这来提示一下，比如this.message我们叫菜单修改成功，同样修改成功的后续操作还是这样，关闭对话框，刷新菜单，以及我们修改了哪个菜单，还要展示出它的副菜单，我们来看一下，如果我来修改了这个菜单，那它的这个副菜单呢，默认还是要展开的，我们还是把这块的内容呢，直接复制过来，关闭对话框，刷新菜单，展开它的副菜单，但这个副菜单呢，我们在这儿做修改的时候。

在回显数据的时候，没有回显负菜单的ID，那如果我们要展开，那就变成了默认的这个负菜单零了，所以这个需求呢，我们必须来再来回想一下副菜单的ID，那在这儿回想回想一下parent的cid，那就是从服务器里边拿到的，那我们真正在这要展开的，那就直接从this category里边拿到当前副菜单的ID，我来保存auto shift f代码整理一下，我们来重新看一下我们整个页面效果，注意观察network。

我们现在想要修改一个数据，比如手机里边有一个手机通讯，我点一个edit，手机通讯呢，我们就叫一手机通讯一，然后呢，图标我们随便给一个值，计量单位一件两件，我们来写一个件，好当我来点击确定，我发现呢菜单修改成功，当然我们来看发送的请求，发送的请求呢，这有一个叫update，这个update发了一个post请求，而发送的请求数据我们来看一下，这个数据呢，其实就是一个杰S，只发送了我们想要的数据，就是分类的ID，分类的这个名字，它的图标，它的这个统计数量，包括我们的SQL语句，我们来看一下，我们来进行更新的时候，由于我们只发了这几个字段，所以我们set的时候只set了icon name product unit。并且呢，我们是按照ID给它进行修改的，但是如果我将代码改成这样，我把这一块注掉，我呢要发的数据还是当前整个对象。

This category，那么就相当于我们一修改呢，就将这些parent cid can show status这全发出去了，一全发出去，我们的SQL语句就会多加几个set字段，那如果我们写这种也是可以的，那怎么写呢？那就应该将他以前的这几个字段也回显过来，我们来给大家看一下，如果不回显这几个字段，就会导致我们数据表里边这几个字段被默认值给它更新掉，所以我们就来回显这几个字段，我们把这些呢都回旋起来，有parent cid you can't level。我们把它复制过来，就等于can'level包括呢，其他的这几个我们全部给它回想can't level show status，还有我们的thought排序，这几个关键要用的字段我们都保存过来，那这样的话，我们在修改的时候就可以把整个对象发出去了，这就是几种不同的写法，我来保存看一下这种效果对不对，来刷新一下。

还是我们来修改手机分类下的手机通讯，我来点一个edit，我把它呢去掉，现在这些叉叉叉键都有了，我现在再来点击确定，我们注意看这一块的SQL语句，我们来点击确定，我们菜单修改成功，我们来看此时的这个circleq语句，我们发的多，所以它的parent c cid icon name product unit sal等等这些字段相当于被全量更新上来了，这就是我们修改要注意的细节，那当然我们最终还是推荐大家，我们这么来用就行了，好，我们把这个对象呢，解构出来的放在这儿，我们发送我们只要修改的部分数据。

我们再来做一个整体测试，我先来保存来到我们这个页面，比如我们要修改手机通讯，我点edit，我们把它的这个图标呢，我来改一下，诶，我发现这个鼠标稍微往过这么一划，在外边一点，我们这个对话框就消失了，这样呢很不友好，我们来在组件里边参照一下对话框里边的设置来改变一下，在它的这个属性里边呢，有一个叫。Close on click model，就是是否可以通过点击model来关闭对话框，默认呢，是处的，我们把这个功能给它关掉，好把这个功能呢，CTRLC我来复制过来，我们来把它放在EL dialogue，这是这个的属性，Dialogue的属性给它整一个，然后呢，我们来把它变为false保存，我们来看页面效果，现在呢，诶我们发现这一块报了个错，这个报错呢，说我们这个close。

On click model，它希望是一个布尔值，而我们现在得到的是一个字符串，那这种呢，是一个字符串，那个布尔值呢，我们直接给它冒号，虽然动态绑定一个值，我们直接给它写成for，这个值好保存起来，我来刷新一下，我先点击edit点旁边，诶现在呢，不消失了，我们来修改一下，我来点击修改，我来把图标呢改成AA，手机通讯我改成一，我点击确定。然后呢，我们再来点击添加，诶我们发现这个点击添加的时候，我们这个分类名称，图标，计量单位这些是跟修改里边一个样的，为什么？这是由于我们上一次点击了这个修改以后，我们发送请求将数据全部设置在这儿，当我们再来点添加的时候，这些回显了的修改的数据要给它清空掉，所以呢，我们来清空上这些值，我们把其他的这些值我们全给它改回默认值，否则就会出现那个问题。2SHIFT f来看一下要改哪些值，在添加分类里边除了负ID以及层级，它的这个排序呢，顺序默认都是零，包括它的这个显示状态默认呢，都是一是要让他们进行显示的，那这个层级以及负分类ID，我们在这儿用这种方式赋值，Name没有包括这个KID，大家一定注意。

Cat ID在这呢，必须滞空，这样滞空的话，我们添加发送这个category cat ID就是浪的，这样就相当于不带ID的添加，因为我们ID是自增的icon以及product unit都应该给成一个默认值，现在添加的这个默认值呢是空串，那后来表单输了什么，它再来动态的绑定进来就行了，我们把这些默认值都写好以后，我再来保存，看一下页面效果，我们来刷新一下页面，我现在呢先来点击修改，我把这个手机通讯一我来改掉，我点击确定，我再给手机通讯下边我准备添加一个，我点openend，诶这些呢就清空掉了，只不过这个分类的名字呢还没清空掉，诶我们来看一下分类的这个名字，添加的时候呢，把这个名字也指定一下。

分类的名字，那名字呢，默认也是空创。重新保存，来看一下页面整体效果，我再来刷新，我们给手机通讯，我先把它修改，改成通讯，1.1个确定，我在给手机通讯下边添加东西，我点个openend，诶这块呢，都是默认的了，我随便写一个图标计量单位，我点个确定，我发现手机通讯下边就有东西了，我再来点击删除，那么整个功能呢，我就做好了。