74、商品服务-API-属性分组-分组修改&级联选择器回显

接下来我们编写修改回显分类的功能。首先我们来看一下完整的修改逻辑，我们来到我们代码的位置a tr group，我们先来找到修改按钮，当我们点击修改按钮的时候，它会触发一个end or update handle方法，在这个方法里边呢，会为我们传入分组ID来看一下这个方法的调用，CTRLF来搜索到这个方法，这个方法里边呢，首先将某一个属性按照all update visible置为处，那这个属性的作用相当于就是来判断我们是否要显示我们这个弹窗的。那接下来第二步我们把这个置为处，相当显示弹窗以后呢，调用this Dollar next take这个特殊写法的含义是当要显示的这个组件完全渲染以后，再来去调用一个方法，那接下来我们就会调用this.reference this就是当前唯有组件，就是我们它reference，那就是它里边的所有组件。但是要用哪个组件呢？有一个叫end or update，那这个组件名字我们可以看一下CTRLF来找一下，这个组件呢，其实是在end or update我们先引入的这个组件用来做新增和修改弹框的时候，我们在这个组件呢，为它起了一个reference名字，就叫end or update，相当于我们使用这个组件。那调用这个组件的什么方法呢？调用它的in，相当于我们点击修改按钮，会把ID传过来，调用init方法，我们来到这个组件，找到它的init方法。

接收我们传过来的ID，有就用我们的ID，没有就用零，同时呢，显示弹窗visible处，那就是显示弹窗，同样用这个特殊性的写法，Next t就是我们这个组件，显示完全以后怎么办呢？我们这有一个判断，如果我们的at tr group ID有值，那么就应该去来检索当前分组的详细信息，我们这会发一个请求，At tr group ino用他的ID检索出它的详细信息，检索到了以后呢，在这拿到服务端返回的所有数据填充到data form里边，所以我们看到。

我们点击修改以后呢，这些信息就填充回来了，但唯一的问题就是所属分类没有填充，没有填充的原因是我们点击修改，我们来看一下我们的network，我们点击修改，虽然查出了这个数据，但是它的这个分类的ID是一个225，而我们这块要能正确显示它必须是一个完整的路径，用数组封装的路径，所以说呢，我们在这儿缺少一个正确路径，那我们就可以在这。当他将其他数据显示完全以后，我们还应该查出看到ID的完整路径路径，那这个查询呢，我们可以再在这儿发送一个get请求去来查看完整路径。我们也可以希望服务端为我们查询这个at tr group详细信息的时候，如果能帮我们带上，比如服务端的返回数据里边就有一个假设，我们就叫catalog pass有它的这个完整路径，那么将这个完整路径如果能直接赋值给我们data from里边的这个cat log ids，那就好了。

行，我们以后都把这个catlo ids，我们叫cat pass吧，好，我们在这来找一下把它，那么我们都叫catlo pass。全部替换，那我们最终希望的结果就是在查询详情的时候，能帮我们也返回好我们整个分类的完整路径，那好，我们来修改一下我们的这个接口，在这呢，英仿at tr group ID，在at tr group controller里边要查询它的详情，默认呢返回at tr group entity，这nity里边呢，没有完整路径，那这个完整路径呢，我来给他返回一下，比如我们就叫LA。数组，我们就将cat log pass。当这个路径呢，不是数据库里边的字段，所以我们可以标注一个注解叫table field exist等于false。

在数据库中不存在，那接下来我们这个controlrler，在查到这个at tr group的时候，那我们还应该做一件事，就是把at t group里边整个完整路径放进去，那我们就希望能有一个service能帮我们查出完整路径，那我们现在已经查出了atr group，那我们就可以知道他当前这个at tr group所在的这个路径，我们希望呢，有一个方法能根据它当前所在路径找到完整路径，既然是来查我们三级分类的，所以我们就注入三级分类的service，我们在这儿注入一个category service，我们用这个service呢，假设它有一个方法叫fund count log pass，我们找到它的这个完整路径，这个方法呢，我们传入我们当前分类的ID，我们最终希望返回出整个完整路径pass，那把这个完整路径呢，我们最终设置上。

我们给前端返回的时候自动带上，那就能用了，那么就创建出这个方法al in，好，我们创建出这个方法，这个方法的作用就是找到catalog ID的完整路径。这个完整路径呢，它的格式就是父路径一直下面的子路径。还有他的这个孙子路径一直后代这么来写着，那么添加上这个方法的实现，那我们就希望最终通过这个方法能把我们整个完整的路径收集过来，比如在收集路径的时候呢，为了方便，我写一个list里边放一个浪，我们整个pass，我们放在这个list里边。New，一个a list。最终呢，我们将这个pass。我们可以给它to array转成这个数组，强制转换成我们这个浪数组，那么就希望在这里边能按照我们的层级关系，最终收集成我们这个，比如二号下边有20，五号下边有225号这样的路径。

那怎么收集呢？其实逻辑就是这样的，我们先得查出当前分类ID它的分类详情，比如我们用当前service，我们查目录的，那我们用this.get by ID，那先按照它的这个ID来查出当前分类的信息，而当前分类如果它还有负分类，那我们继续向上来找到它的份负分类，所以我们就应该是if，如果当前分类点get parent cid不等于零，它有一个有效的负分类，那么继续依此来找。其实这就是一个递归方法，而且每一次递归呢，要收集到当前的数据，那为了能迭代收集这些数据，我们来写一个递归方法，比如private，由于上一步的结果下一步还要用，我们就来写一个list，我们就让他返回list了，将上一步收集来的我们传入到下一步，让它继续使用，我们就将found parent。

Pass，我们传入我们要查找的节点ID，比如我们把这个节点ID传过来，那还要传入什么呢？我们可以先放在这，把我们逻辑写完，好把这个逻辑呢放在这。那么最终希望就是我们只调这么一个递归方法，放的parent of pass传入我们catalog ID，最终能将所有的这个路径收集过来，那为了能统一收集，我们就将这个初始的pass也给它传进去，所以我们这儿呢，还应该缺一个我们这个用来收集数据的容器，好，我们就叫list pass。那我们的收集逻辑是什么呢？我们想看他有没有父ID，有父ID了，把父亲的ID继续收集，如果有父亲了，把父亲的ID继续收集，所以我们要做做的一件事就是进来，我们要找他的父亲的ID并收集，那既然要找他父亲，那把他自己先收集过来，收集。

当前节点ID。怎么收集呢？我们就用传过来的这个容器点and，把当前节点的catalog ID我们先放进来，比如我们现在是查手机是225号的，那我们第一次进来，我们就先给里边放了一个225。然后呢，我们找到225号的详细信息，那一看他还有父亲，他的父ID不是零，那怎么办呢？我们就让他继续找父亲，放到parent pass，那他父亲的ID是什么呢？我们就当然是查到当前这个节点，我们拿到他父亲的ID，我们相当于要去找这个节点，他的父节点，包括那一找我们父节点，那一进来又是把这个当前负节点先加进来，然后继续在这儿找他父节点，所以我们继续用这个pass来收集数据，我们一直收集，那收集到最后我们发现它的parent cid等于零了，再也没有负节点了，那么就将整个完整返回，那么这个return pass。

所以呢，最终就会形成找到了225的负节点，比如叫25，我们又添了一个25，那进来发现它还有负节点，我们继续找。并且把它上一步收集的结果传递进来，假如最后一次呢，我们又找到了一个负节点，是二，我们去来找二，二一进来呢，把二填进去，我们再来找负节点，把当前节点信息拿过来一看，它的负节点是零了，不找了，那就把我们这次封装的所有数据直接返回，把我们这个pass返回，我们pass呢就是这样，那最终我们的pass就长成了这样，但实际上我们这个pass啊，它应该是逆序的，我们应该是225225才行。所以我们呢，我们就可以使用collection，我们这个集合工具类点一个reverse，我们把它逆序转换过来，们将这个parent pass转换一下，那最终这个转换呢，我们就会将它逆序出来，我们把最终逆序的这个结果返回就行了，这是我们来找一个路径的完整路径，那写完以后呢，来单元测试一下，来到test里边。

我们注入我们的category service，我们在这来，我们在这自动注入我们的category service，我们at autowaar，我们先来测试一下，来写一个public world test pass。按test。我们category service里边有一个方法叫fund。看到log pass，比如我们来找225号的，225号呢，是这个手机分类来找到它的整个副路径，我们把这个副路径呢打印出来。我们使用日志记录快速使用日志记录呢，使用cell for接这个注解，我们导了long bank，所long bank呢为我们提供了这个快速功能，只要我们标了这个注解，编译的时候呢，就会自动为我们生成一个变量叫log，我们直接用这个变量，比如我们叫info。

比如我们的完整路径来打印一下。大括号，我们一个占位符，我们要打印哪个站位呢？我们就把这个在这直接一打印，但这个直接打印数组，它可能打印出来是一个对象，我们将用a address点按list啊，转成list在控制台就好看了，来让起来。那么这呢，出现了一个错误。错误说不能将object数组转成long，我们派它pass，我们这个写法呢是错误的，它这to read的时候呢，我们需要传入一个要转换的数组，所以我们在这呢，写成一个又一个我们浪的数组，包括这个数组的长度有多少，我们就用parent pass的长度给它规定一下点size，那最终呢，我们这一块就转成了浪数组。

我们重新测试一下走。那么现在看到运行成功来看控制台的打印完整路径二三十四二二五没问题了，那以后呢，我们再请求分组信息的时候，们自己也会给他查出当前分组所属这个分类ID的完整路径。拿到这个完整路径以后，我们在这就可以给它catalog pass附上值，我们这个catalog pass啊，我们是跟我们表单里边绑定的，而且我们表单里边的这个catalog pass就是我们开C开用来回显的数据，那现在来测试一下完整效果保存。我们先刷新，当我们来点击修改。点击修改呢，我们会发一个四号查询四号信息，这四号信息呢，应该具有我们完整的路径啊，这个完整路径呢，这没有响应，我们忘了上一次没有重启，来把这个项目呢，重新启动一下。

我们已经修改了这个info的完整逻辑了。我们把它关掉，我们来重新刷新。我们现在来看一下效果。当来点击修改，点击修改首先我们发号发送四号请求，在这一块呢，我们已经有了完整路径二三十四，225，那这一块呢，就会正确回显，当然当我们把它的这个三级分类改掉以后，我来点确定。也会成功。四号屏幕，那这一块就成231了，而且呢，它现在默认查询的是什么呢？我们来看最后一次请求，它默认查询的是分类ID是零的，也就是查所有的分组信息的，现在每一个呢都能正确会显，我们点这个修改它会显手机点这个修改它会显移动电源，包括呢，我们现在来查询，我现在只要手机的分类下的数据，点手机只有这两个，我们想要移动电源的，我们点移动电源那就有这一个，那这的基本工作呢，我们就做完了，当然我们还可以再进行一些细化，比如我点修改的时候，我们在这还想快速的能检索到我们想要的内容，或者是我们新增的时候，我们发现这选分类的时候还是上一次的结果，那我们可以就在上一次关对话框以后，我们将这个整个分类路径给它清除掉，我们来看一下找到这个对话框，我们来监听这个对话框的关闭，只要对话框被关掉了，无论是点击确定关掉的，还是点击取消关掉的，我们都应该清空我们这个看到。

Log past数据，要不然还保存着上一步修改的操作，我们可以来到element里边。找到EL dialogue往下看，下边呢就有我们对话框，我们来找到它的。属性设置，我们来看一下它有没有这个回调。比如events events里边有一个叫closed，就是这个对话框关闭时的回调，那我们可以给这个对话框绑定事件，这个对话框at closed，如果它被关闭了以后，我们就来调用这个方法，比如叫dialogue close。

调这个方法的时候呢，将这些数据清空一下，好在muscle里边绑定dialogue close，当掉了这个方法，我们就让this.data form里边的cat log pass等于一个空数组保存。那现在呢，就不会出现那个效果了啊，刷新一下，我们点修改，现在回显了，但我们把这个对话框关闭，再点新增，这一块都是初始值提供我们选择，包括我们为了能在这快速的选中我们一项数据，我还可以来element能看我们的节点，选择CAC开，我来往上找，它里边呢有一个叫可搜索的，我们找一下这有一个可搜索，我们只需要一个属性filterable。我们把这个复制过来，我们加到我们这个CAC开里边粘贴好，现在呢，我们这个对话框就变成可搜索的了，来看一下效果。

我们整个刷新。进行回显的时候呢，这儿可以回显到效果，包括我们还可以在这儿进行搜索，比如我们来搜一个蓝牙，蓝牙。蓝牙，那么就可以搜索到我们这个蓝牙耳机，我们快速选择。点击确定。这个呢也能修改成功，包括我们新增的时候，我也可以在这儿快速搜索手机。所有跟手机有关的呢，我们都可以快速选择。当这个搜索的这块，默认应该显示一个可搜索的状态，比如我们这儿试试搜索什么。只需要用一个plans hold好我们CTRLC。把它放到这儿。比如实时搜索手机。

我们就可以提示它是一个快速的搜索功能，诶我们在这就可以来搜索。那至此呢，我们这个查找分类下的属性分组功能以及新增修改删除都写完了，特别是这些删除都已经是逆向生成的，我们都不用管，大家呢也可以完善它里边的细节，而且以后其他页面的功能我就不再带大家来编写前端代码了，大家去来复制我的前端代码，把我们之前整个文件夹的内容搬过来，我们以后就对照着接口文档我们编写相关的接口，编写完了以后我们联调测试就行了，我们已经开发完的这些功能，最起码也是能保证大家再看我们后续其他业务模块里边的前端代码是没什么问题的，包括要做一些定制化修改都是没问题的。那么希望呢，就通过这么三个模块的前端开发，让大家对整个前端项目的开发流程能有一个大致的掌握。