参照 ElementUI 官网：https://element.eleme.cn/#/zh-CN/component/tree
删除菜单
调整前端页面样式和功能
<!-- -->
<template>
<el-tree
:data="menus"
:props="defaultProps"
:expand-on-click-node="false"
show-checkbox
node-key="catId"
>
<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>
</span>
</span>
</el-tree>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
return {
menus: [],
defaultProps: {
children: "children",
label: "name",
},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
methods: {
// 获取数据列表
getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(({ data }) => {
// 解构
console.log("获取到数据", data.data);
this.menus = data.data;
});
},
append(data) {
console.log("data", data);
},
remove(node, data) {
console.log("remove", node, data);
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getMenus();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>
后端接口 ：CategoryController
/**
* 删除
* @RequestBody: 获取请求体，只有 post 请求才会有请求体，所以必须发送 post 请求
* SpringMVC 自动将请求体的数据（json）转为对应的对象
*/
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
// 检查当前删除的菜单，是否被别的地方引用
//categoryService.removeByIds(Arrays.asList(catIds));
// 自定义一个批量删除
categoryService.removeMenuByIds(Arrays.asList(catIds));
return R.ok();
}
CategoryServiceImpl
// 批量删除
@Override
public void removeMenuByIds(List<Long> asList) {
//TODO 检查当前删除的菜单是否被别的地方引用
baseMapper.deleteBatchIds(asList);
}
要实现逻辑删除，参照 Mybatis-Plus 官方文档：https://mp.baomidou.com/guide/logic-delete.html
步骤一：配置全局逻辑删除规则，1 逻辑已删除值 （此步骤可省略）
mybatis-plus:
mapper-locations: classpath:/mapper/**/*.xml
global-config:
db-config:
id-type: auto # 主键全局自增
logic-delete-value: 1
logic-not-delete-value: 0
步骤二：实体类字段上加上@TableLogic注解，它可以定义自己的规则
/**
* 是否显示[0-不显示，1显示]
*/
@TableLogic(value = "1", delval = "0")
private Integer showStatus;
postman 测试成功
完善
<!-- -->
<template>
<el-tree
:data="menus"
:props="defaultProps"
:expand-on-click-node="false"
show-checkbox
node-key="catId"
:default-expanded-keys="expandedKey"
>
<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>
</span>
</span>
</el-tree>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
return {
menus: [],
expandedKey: [], // 刪除子菜單之後，讓父菜單展開
defaultProps: {
children: "children",
label: "name",
},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
methods: {
// 获取数据列表
getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(({ data }) => {
// 解构
console.log("获取到数据", data.data);
this.menus = data.data;
});
},
append(data) {
console.log("data", data);
},
remove(node, data) {
var ids = [data.catId];
// 弹框提示
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({
message: "菜單刪除成功",
type: "success",
});
// 删除之后重新请求刷新页面
this.getMenus();
// 設置刪除後展開父菜單
this.expandedKey = [node.parent.data.catId]
})
.catch(() => {});
});
console.log("remove", node, data);
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getMenus();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>
主要就是做了一些细节，菜单删除后父菜单是否显示，提示框等，用封装好的 axios 发送请求到后端接口显示数据
写的时候菜单的节点属性什么的在浏览器控制台查看，这块看准点
添加菜单
以上面代码为基础，在 el-tree 标签中添加，它表示是否展开节点
:default-expanded-keys="expandedKey"
ElementUI 赋值对话框组件，dialogVisible 表示是否关闭对话框
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
data 中声明为 false 默认不打开
dialogVisible: false,
在 append 中添加，点击就会弹出对话框然后添加菜单
// 点击添加菜单，打开对话框
this.dialogVisible = true;
点击 append 触发事件，弹出对话框
修改 el-dialog 标签，添加内置表单，绑定单机函数 addCategory
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<el-form :model="category">
<el-form-item label="分类名称">
<el-input v-model="category.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCategory">确 定</el-button>
</span>
</el-dialog>
// 添加三级分类，category 双向绑定了
addCategory() {
console.log("向服务器提交的三级分类的数据", this.category);
this.$http({
url: this.$http.adornUrl("/product/category/save"),
method: "post",
data: this.$http.adornData(this.category, false),
}).then(({ data }) => {
this.$message({
message: "菜單保存成功",
type: "success",
});
// 关闭对话框并刷新页面
this.dialogVisible = false;
this.getMenus();
// 设置默认要展开的菜单
this.expandedKey = [this.category.parentCid];
});
},
data 属性中声明 category 初始值，双向绑定
category: {
// 向服务器提交 category，数据默认初始化，在 addCategory 函数中在计算，字段要和数据库中表字段对应，驼峰命名
name: "",
parentCid: 0,
catLevel: 0,
showStatus: 1,
sort: 0,
},
修改菜单
复制一个修改按钮
<el-button
type="text"
size="mini"
@click="() => edit(data)"
>
edit
</el-button>
data 数据
data() {
return {
title: "",
dialogType: "", // 点击修改把它变为 edit，点击添加变为 add
category: {
// 向服务器提交 category，数据默认初始化，在 addCategory 函数中在计算，字段要和数据库中表字段对应，驼峰命名
name: "",
parentCid: 0,
catLevel: 0,
showStatus: 1,
sort: 0,
icon: "",
productUnit: "",
catId: null,
},
dialogVisible: false,
menus: [],
expandedKey: [], // 刪除子菜單之後，讓父菜單展開
defaultProps: {
children: "children",
label: "name",
},
};
},
修改方法名字为 submitData，因为确定和修改用一个函数所以要判断一下
定义 submitData 方法，根据 dialogType 值做个判断来决定调用添加方法还是修改方法
submitData() {
if (this.dialogType == "add") {
this.addCategory();
}
if (this.dialogType == "edit") {
this.editCategory();
}
},
定义 添加 和 修改 方法
// 修改菜单
edit(data) {
console.log("要修改的数据", data);
this.dialogType = "edit"; // 当点击 edit 按钮时，修改 dialogType 属性为 edit，好让 submitData 判断
this.title = "修改分类";
this.dialogVisible = true; // 弹出对话框
// 向后端发送请求获取当前节点最新数据
this.$http({
url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
method: "get",
}).then(({ data }) => {
// 数据回显，请求成功,这个 data 是从服务器拿到的最新 data
console.log("要回显的数据", data);
this.category.name = data.data.name;
this.category.catId = data.data.catId;
this.category.icon = data.data.icon;
this.category.productUnit = data.data.productUnit;
this.category.parentCid = data.data.parentCid;
});
},
append(data) {
console.log("data", data);
this.dialogType = "add"; // 当点击 append 按钮时，修改 dialogType 属性为 add ，好让submitData 判断
this.title = "添加分类";
// 点击添加菜单，打开对话框
this.dialogVisible = true;
this.category.parentCid = data.catId;
this.category.catLevel = data.catLevel * 1 + 1;
},
修改三级分类的方法
// 修改三级分类
editCategory() {
// es6 新语法，解构函数，我们只修改这四个属性，只向后端传送这四个数据就可以
var { catId, name, icon, productUnit } = this.category;
this.$http({
url: this.$http.adornUrl("/product/category/update"),
method: "post",
data: this.$http.adornData({ catId, name, icon, productUnit }, false),
}).then(({ data }) => {
this.$message({
message: "菜单修改成功",
type: "success",
});
// 关闭对话框并刷新页面
this.dialogVisible = false;
this.getMenus();
// 设置默认要展开的菜单
this.expandedKey = [this.category.parentCid];
});
},
测试点击确定，调用后端接口完成修改
修改成功，看一眼 Network 的 update 方法，我们只发送了想发送的数据，也就是我们只修改的值
细节一：标签中设置 close-on-click-modal 属性为 false
细节二：点击修改之后再点击添加发现修改回显的数据在添加中也会回显，在 append 方法中添加，都给置空
细节三：开启拖拽功能
定义 allowDrop 函数，countNodeLevel 求总菜单总共多深赋值给 maxLevel
// 参数一：当前正在拖拽节点 参数二：被拖拽到哪个节点下面 参数三：被拖拽到节点前还是后还是里面去
allowDrop(draggingNode, dropNode, type) {
// 被拖动的当前节点以及所在的父节点总层数不能大于3
// 被拖动的当前节点
console.log("allowDrop:", draggingNode, dropNode, type);
this.countNodeLevel(draggingNode.data); // 返回当前节点层数
// 最大深度 + 当前正在拖动节点它的父节点深度不大于 3 就行了
// 当前节点拥有的深度
let deep = (this.maxLevel - draggingNode.data.catLevel) + 1;
console.log("深度：", deep);
if (type == "inner") {
return (deep + dropNode.level) <= 3;
} else {
return (deep + draggingNode.parent.level) <= 3;
}
},
// 求最大深度
countNodeLevel(node) {
// 找到所有子节点，求出最大深度
if (node.children != null && node.children.length > 0) {
for (let i = 0; i < node.children.length; i++) {
if (node.children[i].catLevel > this.maxLevel) {
this.maxLevel = node.children[i].catLevel;
}
// 递归看有没有子节点，继续统计深度
this.countNodeLevel(node.children[i]);
}
}
},
拖拽成功之后节点的顺序和父节点什么的有关参数都变了，我们要同步给数据库，用监听事件 node-drop 来解决
多多少少这个拖拽功能是感觉有点复杂…
// 拖拽成功之后的回调函数
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log("handleDrop: ", draggingNode, dropNode, dropType);
// 当前节点最新的父节点 id
let pCid = 0;
let siblings = null;
// 以 before after 关系进入
if (dropType == "before" || dropType == "after") {
pCid =
dropNode.parent.data.catId == undefined
? 0
: dropNode.parent.data.catId;
siblings = dropNode.parent.childNodes;
} else {
// 以 inner 关系进入
pCid = dropNode.data.catId;
siblings = dropNode.childNodes;
}
// 当前拖拽节点的最新顺序（重新排序）
for (let i = 0; i < siblings.length; i++) {
if (siblings[i].data.catId == draggingNode.data.catId) {
// 如果遍历的是当前正在拖拽的节点
let catLevel = draggingNode.data.catLevel;
if (siblings[i].level != draggingNode.level) {
// 当前节点层级发生变化
catLevel = siblings[i].level;
// 修改当前节点子节点层级，递归修改，因为子节点可能还有子节点
this.updateChildNodeLevel(siblings[i]);
}
// 都修改完了在这把数据收集起来,以 inner 方式进入要修改 pCid 和 catLevel
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 });
}
}
// 当前拖拽节点的最新层级
console.log("updateNodes", this.updateNodes);
},
// 到这已经是跟不上了......（笑哭）
updateChildNodeLevel(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.updateChildNodeLevel(node.childNodes[i]);
}
}
},
// 参数一：当前节点 参数二：被拖拽到的节点，参数三：节点类型
allowDrop(draggingNode, dropNode, type) {
// 被拖动的当前节点以及所在的父节点总层数不能大于3
// 被拖动的当前节点
console.log("allowDrop:", draggingNode, dropNode, type);
this.countNodeLevel(draggingNode.data); // 返回当前节点层数
// 最大深度 + 当前正在拖动节点它的父节点深度不大于 3 就行了
// 当前节点拥有的深度
let deep = this.maxLevel - draggingNode.data.catLevel + 1;
console.log("深度：", deep);
if (type == "inner") {
return deep + dropNode.level <= 3;
} else {
return deep + draggingNode.parent.level <= 3;
}
},
// 求最大深度
countNodeLevel(node) {
// 找到所有子节点，求出最大深度
if (node.children != null && node.children.length > 0) {
for (let i = 0; i < node.children.length; i++) {
if (node.children[i].catLevel > this.maxLevel) {
this.maxLevel = node.children[i].catLevel;
}
// 递归看有没有子节点，继续统计深度
this.countNodeLevel(node.children[i]);
}
}
},
数据修改完了，要把拖拽后变更的数据信息提交到后端
/**
* 批量修改
* @param category
* @return
*/
@RequestMapping("/update/sort")
//@RequiresPermissions("product:category:update")
public R updateSort(@RequestBody CategoryEntity[] category){
categoryService.updateBatchById(Arrays.asList(category));
return R.ok();
}
修改前端，发送数据
this.$http({
url: this.$http.adornUrl("/product/category/update/sort"),
method: "post",
data: this.$http.adornData(this.updateNodes, false),
}).then(({ data }) => {
this.$message({
message: "菜单顺序等修改成功",
type: "success",
});
// 关闭对话框并刷新页面
this.dialogVisible = false;
this.getMenus();
// 设置默认要展开的菜单
this.expandedKey = [pCid];
this.updateNodes = []; // 更新后的节点信息
this.maxLevel = 0;
});
待完善…
批量删除
// 批量删除
batchDelete() {
let catIds = [];
// 返回被选中节点的数组
let checkedNodes = this.$refs.menuTree.getCheckedNodes();
console.log("被选中的元素", checkedNodes);
// 根据 id 删除
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(() => {});
},
后端批量删除接口，之后在完善细节
/**
* 删除
* @RequestBody: 获取请求体，只有 post 请求才会有请求体，所以必须发送 post 请求
* SpringMVC 自动将请求体的数据（json）转为对应的对象
*/
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
// 检查当前删除的菜单，是否被别的地方引用
//categoryService.removeByIds(Arrays.asList(catIds));
// 自定义一个批量删除
categoryService.removeMenuByIds(Arrays.asList(catIds));
return R.ok();
}
// 批量删除
@Override
public void removeMenuByIds(List<Long> asList) {
//TODO 检查当前删除的菜单是否被别的地方引用
baseMapper.deleteBatchIds(asList);
}
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
