P71 属性分组页面搭建
前端组件抽取&父子组件交互
前端页面中：
菜单
1、sys_admin.sql语句在gulimail_admin数据库执行。注意自己的数据库名称是否和文件中的一致。刷新页面后，发现页面新增。找到平台属性—属性分组。
2、在product文件夹，新建attrgroup.vue分组。设计为栅格格式。左侧菜单占6列，右侧表格占18列。见element-ui官网layout布局的分栏间隔。刷新，查看效果。
3、product同级新建common文件夹，建 category.vue文件。抽取出来一个简单的树形结构，用于上面的树形分组菜单展示。
attrgroup.vue导入并注册组件
<script>
import Category from "../common/category.vue";
components: { Category}
<el-col :span="6"><category></category>
</el-col>
模板、数据、方法、创建页面时获取数据。
getmenus
<el-tree:data="menus":props="defaultProps"node-key="catId"ref="menuTree"></el-tree>
menus: [],defaultProps: {children: "children",label: "name",},
表格
在上面的目录中，也就是生成器生成的文件。把attrgroup.vue同名文件下的内容div格式粘贴到表格模块，还有data、方法cv。
特别是AddOrUpdate导入和注册，需要cv一个新的文件进来。不要弄错了。
整体页面布局显示完成！
子传父值
要求左边菜单点击后，右边呈现详细信息。
子组件给父组件传递数据，事件机制。发送一个事件，携带上数据。
el-tree中有个 node-click 事件，包含3个参数。
@node-click="nodeclick"
nodeclick(data, node, component){console.log("树节点被点击：",data, node, component)console.log("刚才被点击的节点id:",data.catId)//向父组件发送事件this.$emit("tree-node-click",data, node, component)}
此外，父组件
<category @tree-node-click="treeNodeClick"></category>
treeNodeClick(data, node, component){console.log("父感知到子节点：",data.catId)},
P72 获取属性分组
后端
在AttrGroupController.java文件中有list路径获取信息，在此基础上面改为按catelogId查找
@RequestMapping("/list/{catelogId }")public R list(@RequestParam Map<String, Object> params,@PathVariable("catelogId") Integer catelogId){PageUtils page = attrGroupService.queryPage(params, catelogId);return R.ok().put("page", page);}
然后创建方法、添加实现
接口转到实现类，ctrl+alt+B；查看这个接口的所有实现类，ctrl+H，或者右边栏的层次结构
实现接口方法如下：接着之前的思路，包括按页查找
不要写错类名
SELECT * FROM `pms_attr_group` WHERE catelog_id = 1 and (attr_group_name like '%%' or attr_group_id = )
public PageUtils queryPage(Map<String, Object> params, Integer categoryId) {if(categoryId == 0){ //跟原来一样IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params),new QueryWrapper<AttrGroupEntity>());return new PageUtils(page);}else{QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>().eq("catelog_id", categoryId);String s = (String) params.get("key");if(!StringUtils.isEmpty(s)){ // 优秀的字符串处理方法wrapper.and((obj)->{ // consumer 函数式编程obj.eq("attr_group_id",s).or().like("attr_group_name",s);});}IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params),wrapper);return new PageUtils(page);}
前端
data中默认catId:0
只有节点level为3时才传递数据
if(node.level == 3){this.catId = data.catIdthis.getDataList()}
添加请求路径，记得改为飘号，动态的；否则，前端还是显示this.catId
url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
P73 分组新增&级联选择器
第一步
Cascader 级联选择器
在属性分组新增页面，的分类号模块，初始化catelogs:[]， 改为
<el-cascaderv-model="dataForm.catelogId" 绑定:options="catelogs" 有哪些数据可以选择></el-cascader>
把隔壁category.vue的getmenus方法，在这新建一个getCategory方法，数据传入catelogs里，并且初始化created
发现级联结构出现，但是没有文字！
第二步
在上面的选择器增加配置属性：并且data新加
:props="props"
props:{value:"catId",label:"name",children:"children"},
显示成功！但是三级目录下，即使子为空，仍显示
第三步
在 [localhost:20000/product/category/list/tree](http://localhost:20000/product/category/list/tree)中把目录的子属性当为空时去掉，在categoryEntity.java中子属性增加注释 @JsonInclude(JsonInclude.Include.NON_EMPTY)
测试正常！
第四步
在vue页面查看，控制选择，找到正确的页面，发现绑定的catelogId为3个。父父子
data中改为数组格式，并且发送请求，改为：-1不管用
catelogId: this.dataForm.catelogId[this.dataForm.catelogId.length-1]
P74 级联回显
第一步
将初始化数据获取，的分类号变为path
this.dataForm.catelogPath = data.attrGroup.catelogPath;
包括分类号 v-model绑定部分
第二步
attrGroup新增catelogPath属性，并标注为数据库不存在
@TableField(exist = false)
private Long[] catelogPath;
在info请求获取数据后，根据分类号id查找完整路径，再返回实体
Long catelogId = attrGroup.getCatelogId();
Long[] path = categoryService.findCatelogPath(catelogId);
attrGroup.setCatelogPath(path);
categoryService中新建方法，实现方法，记得反转
这里有List类型转为数组Long[] 类型toArray
@Overridepublic Long[] findCatelogPath(Long catelogId) {List<Long> path = new ArrayList<>();// 递归查找List parentPath = findParentPath(catelogId, path);Collections.reverse(parentPath);return (Long[]) parentPath.toArray(new Long[parentPath.size()]);}
private List findParentPath(Long catelogId, List<Long> path) {path.add(catelogId);CategoryEntity byId = this.getById(catelogId);if(byId.getParentCid() != 0){findParentPath(byId.getParentCid(), path);}return path;}
在测试类中测试，可以用@Slf4j打印查看输出
@Testpublic void categoryAllPath(){Long[] catelogPath = categoryService.findCatelogPath(225L);log.info(Arrays.toString(catelogPath));}
成功！
第三步
发现问题，关闭页面后，分类号数据仍存在。
在dialog对话框存在回调函数，@closed="dialogClose"
新建方法，进行清除
dialogClose(){this.dataForm.catelogPath = []},
并在级联选择器附近放入，可搜索 filterable 搜索框提示 placeholder="搜索"
