接   商品服务的三级分类——上 

七、完成逻辑删除后端接口

1、使用mybatis-plus自带的逻辑删除功能

application.xml 配置逻辑删除规则：

2、在实体类的制定字段上增加逻辑删除注解 

3、service层核心API：

4、开启debug级别日志，方便我们查看 Dao 层实际执行的SQL语句

5、再启动测试

调用：POST  localhost:10000/product/category/delete   [1432]

可以看到，Dao曾实际执行的是Update方法，即为逻辑删除：

八、完成前端删除逻辑

1、修改vue文件中的remove方法：向后台发送http请求：

2、为删除增加“确认删除”确认框：

3、我们还可以在删除成功后，给一个“删除成功”的提示消息：

4、在删除成功后，界面定位到操作的位置，即将操作节点的父节点再次展开

这里我们将会用到树节点的这个属性：  default-expanded-keys  

5、最后的完善效果如下：

九、快速完成新增效果

1、使用element-ui对话框组件“Dialog 对话框”，使用效果如下：

2、表单我们使用带嵌套内容的对话框

3、核心代码：

4、最后的效果如下：

十、实现基本修改效果

1、修改还是基于与新增相同的模态框 el-dialog

只需要有标识位区分新增和修改：

重要方法：

2、后端更新接口：

/product/category/update

只更新部位null的字段；

3、设置el-dialog模态框点击周围不关闭：

 :close-on-click-modal="false" 

十一、拖拽树节点实现类别更新

这部分内容，需要前端考虑得点非常多，每一个操作可能引起的哪些节点的哪些数据会发生改变，需要考虑得非常周到！

1、通过树节点的 draggable 属性来使得树支持拖拽功能；

2、当实现了支持拖拽功能后，节点就可以被拖拽了

拖拽有两种情况，

一种是放置在某几点前后，作为兄弟节点；type为prev或者next

一种是防止在节点上，作为它的子节点；type为inner

3、allow-drag 属性可以用来判断词节点是否允许被拖拽至此，是一个函数Function；

4、整个拖拽功能要考虑得点非常多：

4.1、首先要考虑什么样的情况可以拖拽，什么样的情况不可以拖拽：

——当前被拖拽的节点的深度为m，目标位置的节点层级为n，如果是拖拽在前后为兄弟节点，那么最终总层数为 m + （n – 1)，此时（n-1）相当于就是最终父节点的层级；

——当前被拖拽的节点的深度为m，目标位置的节点层级为n，如果是拖拽在目标节点内部，那么最终总层数为 m + n，此时n相当于是最终父节点的层级，与上一条就呼应上了；

无论如何，最终的结果都不可以大于3，即 result <= 3，才可以拖拽，否则拖拽不成功；

拖拽完成后会触发 node-drop事件，事件绑定方法会被传入4个参数，如下图：

4.2、当每一次拖拽成功后，会有哪些节点的哪些信息会被影响到：

——当前节点最新的父id=》pcid

——新的父节点的所有子节点（即最终的坐在位置的所有兄弟姐妹节点 siblings 的顺序sort）

——当前被拖拽节点的所有子节点的所在层级level会发生改变；

总结：

自己的pcid、sort，level都会发生改变；

目标位置的兄弟节点的sort会发生改变；

子节点的所在层级level会发生改变；

5、当将所有需要修改的节点全部统计出来后，使用数组，一次性提交给后台执行批量更新操作；

后端接口：

注意：

最后我们同样需要刷新菜单，展开到最总位置的父节点；

一定要记得将需要更新的数组 updateNodes清空，不然下一次就没法玩了；

以及maxLevel置为零；

6、为了防止误操作，我们可以将开启拖拽做成开关，批量提交按钮做成“批量保存”按钮，

这样，我们只有打开“开启拖拽”开关，才会支持拖拽，不然 draggable 一直为 false；

拖拽完成后，收集好数据，只有点击“批量保存”按钮，才会批量提交后台处理；

最终效果如下：

十二、批量删除功能的实现

1、批量删除的时候，我们肯定需要知道Tree上面所有被选择的节点数组：

可以使用 getCheckedNodes 方法，我们获取到当前组件使用：this.$refs.menuTree，

其中this.$refs代表所有组件（DOM元素），menuTree是我们为Tree设置的ref，可以理解为组件的唯一标识符；

代码如下：

2、操作效果如下：

十三、总结：

到这里，整个三级分类树的开发就全部完成了；更多细节，在实际工作中当然还会有更多的细节需要处理；

完整的 category.vue 代码如下：