✅P54-57_三级分类-修改-拖拽分类功能

gong_yz大约 12 分钟

拖拽分类功能实现：src\views\modules\product\category.vue

拖拽效果实现

参考

开启拖拽功能

    <el-tree 
	  //通过 draggable 属性可让节点变为可拖拽
      draggable 
      //......省略一堆代码
    >

拖拽层级判断

Attributes：

| allow-drop | 拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type) | — | — | | | --- | --- | --- | --- | --- | --- |

allow-drop：属性值是个函数，返回值类型boolean
draggingNode：当前拖拽的节点
dropNode：目标节点
type：prev->目标节点之前，inner->目标节点里面，next->目标节点之后

加入拖拽判断

    <el-tree 
      :allow-drop="allowDrop" 
      //......省略一堆代码
    >

拖拽判断思路：

拖拽目标节点之前(prev)或之后(next)：文学的深度是1，如果将文学的拖拽到少儿的前面(prev)或者后面(next)，则可拖拽的依据是，少儿父亲节点的层级 + 文学深度 <= 3
拖拽目标节点里面(inner)：如果将文学放到少儿里面(inner)则可拖拽的依据是将少儿的层级加文学的深度<=3

拖拽方法：

  methods: {
	//是否可以被拖拽判断
    allowDrop(draggingNode, dropNode, type) {
      console.log("draggingNode:", draggingNode, "dropNode：", dropNode, "type：", type);
      //1、获取当前拖拽节点的最大层级
      this.countNodeLevel(draggingNode);
      //定义拖动节点的深度
      let maxDeep = 0;
      if (this.maxLevel == 0) {
        //节点本身，没有子节点
        maxDeep = 1;
      } else {
        //注意level是从页面实时获取的
        maxDeep = Math.abs(this.maxLevel - draggingNode.level) + 1;
      }
      //判断是否可拖拽
      if (type == "inner") {
        return maxDeep + dropNode.level <= 3;
      } else {
        return maxDeep + dropNode.parent.level <= 3;
      }
    },
    
    //获取当前节点的最大层级
    countNodeLevel(draggingNode) {
      if (draggingNode.childNodes != null && draggingNode.childNodes.length > 0) {
        for (let i = 0; i < draggingNode.childNodes.length; i++) {
          if (draggingNode.childNodes[i].level > this.maxLevel) {
            this.maxLevel = draggingNode.childNodes[i].level;
          } else {
            this.countNodeLevel(draggingNode.childNodes[i])
          }
        }
      }
    },
    
      //......省略一堆代码
  }

拖拽数据收集

参考

数据收集方法编写

引入node-drop事件

    <el-tree 
      //拖拽后数据收集
      @node-drop="handleDrop" 
      //......省略一堆代码
    >

拖拽影响说明：

被拖拽节点的parentCid改变
目标节点的所处层级排序改变
被拖拽节点的层级发生改变

被拖拽节点的parentCid改变

如果被拖拽的节点是被拖拽到目标节点的前面或者后面则被拖拽节点的父节点就是目标节点的父节点，如果是被拖拽到里面则被拖拽节点的父节点就是目标节点。

    //拖拽后调用方法
    handleDrop(draggingNode, dropNode, type, ev) {
      console.log("draggingNode:", draggingNode, "dropNode：", dropNode, "type：", type, "ev：", ev);
      //定义父节点
      let pCid = null;

      //1、当前节点最新的父节点id
      //如果节点被拖拽到了目标节点的前面或者后面，则被拖拽节点的父节点就是目标节点的父节点
      if (type == "before" || type == "after") {
        pCid = dropNode.data.parentCid == undefined ? 0 : dropNode.parent.data.catId;
      }
      //如果节点被拖拽到了目标节点里，那么目标节点的catId就是拖拽节点的父id
      else if (type == "inner") {
        pCid = dropNode.data.catId;
      }
    },

目标节点所处层级排序(sort)改变

如果被拖拽节点被拖拽到目标节点的前面或者后面，则目标节点所处层级排序发生改变，如果被拖拽节点被拖拽到目标节点里面，则目标节点的子节点层级排序发生变化。

     //如果节点被拖拽到了目标节点的前面或者后面
	 if (type == "before" || type == "after") {
        subChild = dropNode.parent.childNodes;
      }
      //如果节点被拖拽到了目标节点里，那么目标节点的catId就是拖拽节点的父id
      else if (type == "inner") {
        subChild = dropNode.childNodes;
      }

当遍历到被拖拽节点时还需要更新它的parentCid

      //2、当前拖拽节点的最新顺序
      if (subChild != null && subChild.length > 0) {
        for (let i = 0; i < subChild.length; i++) {
          //如果遍历的是当前正在拖拽的节点
          if (subChild[i].data.catId == draggingNode.data.catId) {
            this.updateNodes.push({ catId, sort, parentCid });
          } else {
            this.updateNodes.push({ catId, sort });
          }
        }
      };

被拖拽节点的层级发生了改变

被拖拽节点的层级与遍历到被拖拽节点的层级不相等时，层级需要更新，如果是被拖拽到目标节点前面或者后面，则层级等于目标节点的层级，否则层级等于目标节点的层级加1，当然被拖拽节点的子节点层级也需要发生相应的改变。

      //2、当前拖拽节点的最新顺序
      if (subChild != null && subChild.length > 0) {
        for (let i = 0; i < subChild.length; i++) {
          //如果遍历的是当前正在拖拽的节点
          if (subChild[i].data.catId == draggingNode.data.catId) {
            let catLevel = draggingNode.level;
            if (subChild[i].level != draggingNode.level) {
              //当前节点的层级发生变化
              catLevel = subChild[i].level;
              //修改他子节点的层级
              this.updateChildNodesLevel(subChild[i]);
            }
            this.updateNodes.push({ catId: subChild[i].data.catId, sort: i, parentCid: pCid, catLevel: catLevel });
          } else {
            this.updateNodes.push({ catId: subChild[i].data.catId, sort: i });
          }
        }
        //3、当前拖拽节点的最新层级
        console.log("updateNodes", this.updateNodes);
      };

	//更新子节点层级
    updateChildNodesLevel(node) {
      if (node.childNodes.length > 0) {
        for (let i = 0; i < node.childNodes.length; i++) {
          var cNode = node.childNodes[i].data;
          this.updateNodes.push({
            catId: cNode.catId,
            catLevel: node.childNodes[i].level,
          });
          this.updateChildNodesLevel(node.childNodes[i]);
        }
      }
    },

完整handleDrop()方法

    //拖拽后调用方法
    handleDrop(draggingNode, dropNode, type, ev) {

      console.log("draggingNode:", draggingNode, "dropNode：", dropNode, "type：", type, "ev：", ev);
      //定义父节点
      let pCid = null;
      let subChild = null;

      //1、当前节点最新的父节点id
      //如果节点被拖拽到了目标节点的前面或者后面，则被拖拽节点的父节点就是目标节点的父节点
      if (type == "before" || type == "after") {
        pCid = dropNode.data.parentCid == undefined ? 0 : dropNode.parent.data.catId;
        subChild = dropNode.parent.childNodes;
      }
      //如果节点被拖拽到了目标节点里，那么目标节点的catId就是拖拽节点的父id
      else if (type == "inner") {
        pCid = dropNode.data.catId;
        subChild = dropNode.childNodes;
      }
      this.pCid.push(pCid);

      //2、当前拖拽节点的最新顺序
      if (subChild != null && subChild.length > 0) {
        for (let i = 0; i < subChild.length; i++) {
          //如果遍历的是当前正在拖拽的节点
          if (subChild[i].data.catId == draggingNode.data.catId) {
            let catLevel = draggingNode.level;
            if (subChild[i].level != draggingNode.level) {
              //当前节点的层级发生变化
              catLevel = subChild[i].level;                               
              //修改他子节点的层级
              this.updateChildNodesLevel(subChild[i]);
            }
            this.updateNodes.push({ catId: subChild[i].data.catId, sort: i, parentCid: pCid, catLevel: catLevel });
          } else {
            this.updateNodes.push({ catId: subChild[i].data.catId, sort: i });
          }
        }
        //3、当前最新状态拖拽节点
        console.log("updateNodes", this.updateNodes);
      };
    },

    //更新子节点层级
    updateChildNodesLevel(node) {
      if (node.childNodes.length > 0) {
        for (let i = 0; i < node.childNodes.length; i++) {
          var cNode = node.childNodes[i].data;
          this.updateNodes.push({
            catId: cNode.catId,
            catLevel: node.childNodes[i].level,
          });
          this.updateChildNodesLevel(node.childNodes[i]);
        }
      }
    },

拖拽功能完成

开启/关闭拖拽功能

参考

el-switch中v-model要用于绑定控制拖拽功能

<el-tree :draggable="draggable"></el-tree>

<el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽" active-color="#ff4949"></el-switch>

  data() {
    //这里存放数据
    return {
      draggable: false,
      //省略其他代码....
  }

批量保存

出现问题：每一次拖拽都要与数据库交互，交互的太频繁了，我们想要全部拖拽完成之后，将需要更新的数据一次性的全部发送给数据库。

解决问题：

<el-button v-if="draggable" @click="batchSave">批量保存</el-button>

批量保存方法：

  methods: {
	batchSave() {
      this.$http({
        url: this.$http.adornUrl("/product/category/update/sort"),
        method: "post",
        data: this.$http.adornData(this.updateNodes, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "拖拽成功！"
        });
        this.getMenuList();
        //默认菜单展示
        this.expandKey = this.pCid;
        //将数据置为原始数据，防止拖拽节点时不断的累加
        this.updateNodes = [];
        this.maxLevel = 0;
      });
    },
   //省略其它代码......
  }

后端代码

cfmall-product/src/main/java/com/gyz/cfmall/product/controller/CategoryController.java

	@Autowired
    private CategoryService categoryService;

	/**
     * 批量修改分类
     */
    @RequestMapping("/update/sort")
    public R updateSort(@RequestBody CategoryEntity[] category) {
        categoryService.updateBatchById(Arrays.asList(category));

        return R.ok();
    }

前端代码

src\views\modules\product\category.vue

<!-- 三级分类页面 -->
<template>
  <div>
    <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽" active-color="#ff4949"></el-switch>
    <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
    <el-tree 
      :data="menu" 	//data是后端传给前端的
      :props="defaultProps"  //数据回显
      show-checkbox 		//勾选
      :expand-on-click-node="false"  //点击内部按钮时分类不会展开，必须点击小箭头才可以展开
      node-key="catId"	//唯一标识
      :default-expanded-keys="expandKey"  //新增或删除操作后菜单展开
      draggable 	//开启拖拽功能
      :allow-drop="allowDrop"  //判断是否允许拖拽方法
      @node-drop="handleDrop"  //拖拽成功后执行的方法
      :draggable="draggable"   //开启/关闭拖拽开关
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <!-- 一级和二级目录才可以添加 -->
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">
            Append
          </el-button>
          <!-- 如果没有子节点才可以进行删除 -->
          <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">
            Delete
          </el-button>
          <el-button type="text" size="mini" @click="edit(data)">Edit</el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name"></el-input>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-input v-model="category.showStatus"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="category.sort"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="category.productCount"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="choose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {

    data() {
      //这里存放数据
      return {
        pCid: [],
        draggable: false,
        updateNodes: [],
        maxLevel: 0,
        title: "",
        //区分新增和编辑的类型
        dialogType: "",
        dialogFormVisible: false,
        category: {
          name: "",
          parentCid: "",
          catLevel: "",
          showStatus: 1,
          sort: 0,
          icon: "",
          productUnit: "",
          productCount: "",
        },
        menu: [],
        expandKey: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

      getMenuList() {
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get',
        }).then(({ data }) => {  // 1.使用解构即{}，将data对象解构出来
          console.log("获取三级分类数据：", data);
          // 2.将data中的data赋值给menu
          this.menu = data.data;
        });
      },

      choose() {
        if (this.dialogType == "add") {
          this.addCategory();
        } else if (this.dialogType == "edit") {
          this.editCategory();
        }
      },

      append(data) {
        console.log("append", data);
        this.title = "添加分类",
          this.dialogType = "add";
        this.dialogFormVisible = true;
        this.category.parentCid = data.catId;
        this.category.catLevel = data.cat_level * 1 + 1;
        console.log("append this category：", this.category);
      },

      remove(node, data) {
        var ids = [data.catId];
        // 反引号是新标准es6的功能，可以用$配合大括号来实现变量拼接
        this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false)
          }).then(({ data }) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getMenuList();
            //默认菜单展示
            this.expandKey = [node.parent.data.catId];
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log("remove", node, data);
      },

      // 添加分类
      addCategory() {
        this.$http({
          url: this.$http.adornUrl("/product/category/save"),
          method: "post",
          data: this.$http.adornData(this.category, false)
        }).then(({ data }) => {
          this.dialogFormVisible = false;
          this.$message({
            type: 'success',
            message: '新增成功'
          });
          //刷新分类数据
          this.getMenuList();
          this.expandKey = [this.category.parentCid];
        }).catch({
          type: 'info',
          message: '已取消删除'
        });
      },

      //修改分类
      edit(data) {
        console.log("要修改的分类数据对象为:", data);
        this.title = "商品分类修改",
          this.dialogFormVisible = true;
        this.dialogType = "edit";
        this.$http({
          url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
          method: "get",
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          console.log("编辑分类得数据回显：", data);
          // 通过catId进行更新分类数据
          this.category.catId = data.category.catId;
          this.category.name = data.category.name;
          // 扩展默认菜单
          this.category.parentCid = data.category.parentCid;
          // this.category.catLevel = data.category.catLevel;
          this.category.icon = data.category.icon;
          // this.category.productUnit = data.category.productUnit;
          this.category.productCount = data.category.productCount;
        });
      },

      editCategory() {
        let { catId, name, icon, productCount } = this.category;
        var data = {
          catId: catId,
          name: name,
          icon: icon,
          productCount: productCount
        };
        console.log("edit-data", data);
        //发送修改请求
        this.$http({
          url: this.$http.adornUrl("/product/category/update"),
          method: "post",
          data: this.$http.adornData(data, false),
        }).then(({ data }) => {
          //关闭对话框
          this.dialogFormVisible = false;
          this.$message({
            type: 'success',
            message: '修改成功'
          });
          //刷新分类数据
          this.getMenuList();
          //操作完成后分类数据展开
          this.expandKey = [this.category.parentCid];
          // 属性恢复默认值
          this.category.catId = null;
          this.category.parentCid = 0;
          this.category.catLevel = 0;
          this.category.name = "";
          this.category.icon = "";
          this.category.productUnit = "";
          this.category.productCount = 0;
        });
      },
      cancel() {
        this.dialogFormVisible = false;
        this.category.catId = null;
        this.category.parentCid = 0;
        this.category.catLevel = 0;
        this.category.name = "";
        this.category.icon = "";
        this.category.productUnit = "";
        this.category.productCount = 0;
      },


      // 》》》》》》》》》》》》》》》》》》》》》批量保存》》》》》》》》》》》》》》》》》》》》》》

      batchSave() {
        this.$http({
          url: this.$http.adornUrl("/product/category/update/sort"),
          method: "post",
          data: this.$http.adornData(this.updateNodes, false)
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "拖拽成功！"
          });
          this.getMenuList();
          //默认菜单展示
          this.expandKey = this.pCid;
          //将数据置为原始数据，防止拖拽节点时不断的累加
          this.updateNodes = [];
          this.maxLevel = 0;
        });
      },


      // 》》》》》》》》》》》》》》》》》》》》》分类拖拽功能》》》》》》》》》》》》》》》》》》》》》》

      //是否可以被拖拽判断
      allowDrop(draggingNode, dropNode, type) {
        console.log("draggingNode:", draggingNode, "dropNode：", dropNode, "type：", type);
        //1、获取当前拖拽节点的最大层级
        this.countNodeLevel(draggingNode);
        //定义拖动节点的深度
        let maxDeep = 0;
        if (this.maxLevel == 0) {
          //节点本身，没有子节点
          maxDeep = 1;
        } else {
          maxDeep = Math.abs(this.maxLevel - draggingNode.level) + 1;
        }
        //判断是否可拖拽
        if (type == "inner") {
          return maxDeep + dropNode.level <= 3;
        } else {
          return maxDeep + dropNode.parent.level <= 3;
        }
      },


      //获取当前节点的最大层级
      countNodeLevel(draggingNode) {
        if (draggingNode.childNodes != null && draggingNode.childNodes.length > 0) {
          for (let i = 0; i < draggingNode.childNodes.length; i++) {
            if (draggingNode.childNodes[i].level > this.maxLevel) {
              this.maxLevel = draggingNode.childNodes[i].level;
            } else {
              this.countNodeLevel(draggingNode.childNodes[i])
            }
          }
        }
      },

      //拖拽后调用方法
      handleDrop(draggingNode, dropNode, type, ev) {

        console.log("draggingNode:", draggingNode, "dropNode：", dropNode, "type：", type, "ev：", ev);
        //定义父节点
        let pCid = null;
        let subChild = null;

        //1、当前节点最新的父节点id
        //如果节点被拖拽到了目标节点的前面或者后面，则被拖拽节点的父节点就是目标节点的父节点
        if (type == "before" || type == "after") {
          pCid = dropNode.data.parentCid == undefined ? 0 : dropNode.parent.data.catId;
          subChild = dropNode.parent.childNodes;
        }
          //如果节点被拖拽到了目标节点里，那么目标节点的catId就是拖拽节点的父id
        else if (type == "inner") {
          pCid = dropNode.data.catId;
          subChild = dropNode.childNodes;
        }
        this.pCid.push(pCid);

        //2、当前拖拽节点的最新顺序
        if (subChild != null && subChild.length > 0) {
          for (let i = 0; i < subChild.length; i++) {
            //如果遍历的是当前正在拖拽的节点
            if (subChild[i].data.catId == draggingNode.data.catId) {
              let catLevel = draggingNode.level;
              if (subChild[i].level != draggingNode.level) {
                //当前节点的层级发生变化
                catLevel = subChild[i].level;                               
                //修改他子节点的层级
                this.updateChildNodesLevel(subChild[i]);
              }
              this.updateNodes.push({ catId: subChild[i].data.catId, sort: i, parentCid: pCid, catLevel: catLevel });
            } else {
              this.updateNodes.push({ catId: subChild[i].data.catId, sort: i });
            }
          }
          //3、当前拖拽节点的最新层级
          console.log("updateNodes", this.updateNodes);
        };
      },

      //更新子节点层级
      updateChildNodesLevel(node) {
        if (node.childNodes.length > 0) {
          for (let i = 0; i < node.childNodes.length; i++) {
            var cNode = node.childNodes[i].data;
            this.updateNodes.push({
              catId: cNode.catId,
              catLevel: node.childNodes[i].level,
            });
            this.updateChildNodesLevel(node.childNodes[i]);
          }
        }
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getMenuList();
    },
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() { },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有 keep-alive 缓存功能， 这个函数会触发
  };
</script>
<style  scoped></style>

BUG

bug未解决：拖拽的时候多个节点新增。问题描述：在不断拖拽的情况下，传给后端的参数不断在累加。

✅P54-57_三级分类-修改-拖拽分类功能

# 拖拽效果实现

# 拖拽数据收集

# 拖拽功能完成

# 开启/关闭拖拽功能

# 批量保存

# 后端代码

# 前端代码

# BUG