10.21-10.23

谷粒商城

product三级分类

拖拽修改

 1.是否允许拖拽

    allowDrop(draggingNode, dropNode, type) {//1、被拖动的当前节点以及所在的父节点总层数不能大于3//1）、被拖动的当前节点总层数console.log("allowDrop:", draggingNode, dropNode, type);this.maxLevel=draggingNode.level;this.countNodeLevel(draggingNode);//当前正在拖动的节点+父节点所在的深度不大于3即可let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;console.log("拖拽前节点最大深度：",this.maxLevel,"拖拽后节点树的高度：", deep);this.maxLevel=0;if (type == "inner") {return deep + dropNode.level <= 3;} else {return deep + dropNode.parent.level <= 3;}},

计算被拖拽节点那颗子树的高度，无论是插入目标节点内还是排在目标节点前后，拖拽后树 的深度都不能超过3.

    countNodeLevel(node) {//找到所有子节点，求出最大深度if (node.childNodes != null && node.childNodes.length > 0) {for (let i = 0; i < node.childNodes.length; i++) {if (node.childNodes[i].level > this.maxLevel) {this.maxLevel = node.childNodes[i].level;}this.countNodeLevel(node.childNodes[i]);}}},

求子树中所有节点的最大深度

this.maxLevel=draggingNode.level;初值默认为被拖拽子树根节点的深度

2.将需要更新的节点存入数组

    handleDrop(draggingNode, dropNode, dropType, ev) {console.log("tree drop: ", dropNode.label, dropType);//1、当前节点最新的父节点idlet pCid = 0;let siblings = null;if (dropType == "before" || dropType == "after") {pCid =dropNode.parent.data.catId == undefined? 0: dropNode.parent.data.catId;siblings = dropNode.parent.childNodes;} else {pCid = dropNode.data.catId;siblings = dropNode.childNodes;}this.pCid.push(pCid);//2、当前拖拽节点的最新顺序，for (let i = 0; i < siblings.length; i++) {if (siblings[i].data.catId == draggingNode.data.catId) {//如果遍历的是当前正在拖拽的节点let catLevel = draggingNode.level;if (siblings[i].level != draggingNode.level) {//当前节点的层级发生变化catLevel = siblings[i].level;//修改他子节点的层级this.updateChildNodeLevel(siblings[i]);}this.updateNodes.push({catId: siblings[i].data.catId,sort: i,parentCid: pCid,catLevel: catLevel,});} else {this.updateNodes.push({ catId: siblings[i].data.catId, sort: i });}}//3、当前拖拽节点的最新层级console.log("updateNodes", this.updateNodes);},

根节点的parentCid赋值为0

inner操作将目标节点作为parent，else将目标节点的parent作为parent。

被拖拽节点要更新sort与parentCid，其余兄弟节点更新sort

3.向服务器发更新请求

    batchSave() {this.$http({url: this.$http.adornUrl("/product/category/update/drop"),method: "post",data: this.$http.adornData(this.updateNodes, false)}).then(({ data }) => {this.$message({message: "菜单拖拽保存成功",type: "success"});//刷新出新的菜单this.getMenus();//设置需要默认展开的菜单this.expandedKey = this.pCid;this.updateNodes = [];this.maxLevel = 0;this.pCid=[];});},

各变量恢复初值

批量删除

    batchDelete() {let catIds = [];let checkedNodes = this.$refs.menuTree.getCheckedNodes();console.log("被选中的元素", checkedNodes);for (let i = 0; i < checkedNodes.length; i++) {catIds.push(checkedNodes[i].catId);}this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(catIds, false)}).then(({ data }) => {this.$message({message: "菜单批量删除成功",type: "success"});this.getMenus();});}).catch(() => {});},    

指定ref引用

调用Tree组件的getCheckedNodes方法，获得被勾选节点的id列表，发送给服务器。