谷粒商城【成神路】-【4】——分类维护

目录

1.删除功能的实现

2.新增功能的实现

3.修改功能的实现

4.拖拽功能

1.删除功能的实现

1.1逻辑删除

逻辑删除：不删除数据库中真实的数据，用指定字段，显示的表示是否删除

  • 1.在application.yml中加入配置
mybatis-plus:global-config:db-config:logic-delete-value: 1     #1代表删除logic-not-delete-value: 0 #0代表没删除
  • 2.实体类字段添加@TableLogic注解
    /*** 是否显示[0-不显示，1显示]*/@TableLogic(value = "1",delval = "0")private Integer showStatus;

@TableLogic的属性值： 

1.2 service层删除

1.检查删除的菜单是否被其他地方引用

2.controller层直接调用service

  /*** 删除** @param asList*/@Overridepublic void removeMenuByIds(List<Long> asList) {//TODO 1.检查当前删除的菜单，是否被其他地方引用baseMapper.deleteBatchIds(asList);}

2.新增功能的实现

因为后端已经生成了save添加功能的接口，所以只对前端代码做改动即可

提示：后端带有@RequestBody注解的要用post请求

<template><div><el-tree:data="menus":props="defaultProps":expand-on-click-node="false"show-checkboxnode-key="catId":default-expanded-keys="expandedKey"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"type="text"size="mini"@click="() => append(data)">Append</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree><el-dialogtitle="提示":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></div>
</template><script>
export default {data () {return {category: {name: '', parentCid: 0, catLevel: 0, showStatus: 1, sort: 0},dialogVisible: false,menus: [],expandedKey: [],defaultProps: {children: 'children',label: 'name'}}},methods: {handleNodeClick (data) {console.log(data)},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('append', data)this.dialogVisible = truethis.category.parentCid = data.catIdthis.category.catLevel = data.catLevel * 1 + 1},// 添加三级分类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]})},remove (node, data) {var ids = [data.catId]this.$confirm(`是否删除【${data.name}】菜单？`, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 发送post请求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)}},created () {this.getMenus()}
}
</script>

3.修改功能的实现

后端用直接生成好的接好，直接调用

    /*** 批量修改*/@RequestMapping("/update/sort")public R updateSort(@RequestBody CategoryEntity[] category){categoryService.updateBatchById(Arrays.asList(category));return R.ok();}/*** 修改*/@RequestMapping("/update")//@RequiresPermissions("product:category:update")public R update(@RequestBody CategoryEntity category){categoryService.updateById(category);return R.ok();}

前端直接调用接口即可~（全部放到后面）

4.拖拽功能

全部都是vue+elementUI完成，直接上代码

<template><div><el-switchv-model="draggable"active-text="开启拖拽"inactive-text="关闭拖拽"></el-switch><el-button v-if="draggable" @click="batchSave">批量保存</el-button><el-button type="danger" @click="batchDelete">批量删除</el-button><el-tree:data="menus":props="defaultProps":expand-on-click-node="false"show-checkboxnode-key="catId":default-expanded-keys="expandedKey":draggable="draggable":allow-drop="allowDrop"@node-drop="handleDrop"ref="menuTree"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"type="text"size="mini"@click="() => append(data)">添加</el-button><el-button type="text" size="mini" @click="edit(data)">修改</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">删除</el-button></span></span></el-tree><el-dialog:title="title":visible.sync="dialogVisible"width="30%":close-on-click-modal="false"><el-form :model="category"><el-form-item label="分类名称"><el-input v-model="category.name" autocomplete="off"></el-input></el-form-item><el-form-item label="图标"><el-input v-model="category.icon" autocomplete="off"></el-input></el-form-item><el-form-item label="计量单位"><el-inputv-model="category.productUnit"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="submitData">确 定</el-button></span></el-dialog></div>
</template><script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';export default {//import引入的组件需要注入到对象中才能使用components: {},props: {},data() {return {pCid: [],draggable: false,updateNodes: [],maxLevel: 0,title: "",dialogType: "", //edit,addcategory: {name: "",parentCid: 0,catLevel: 0,showStatus: 1,sort: 0,productUnit: "",icon: "",catId: null,},dialogVisible: false,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;});},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(() => {});},batchSave() {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.getMenus();//设置需要默认展开的菜单this.expandedKey = this.pCid;this.updateNodes = [];this.maxLevel = 0;// this.pCid = 0;});},handleDrop(draggingNode, dropNode, dropType, ev) {console.log("handleDrop: ", draggingNode, dropNode, 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);},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) {//1、被拖动的当前节点以及所在的父节点总层数不能大于3//1）、被拖动的当前节点总层数console.log("allowDrop:", draggingNode, dropNode, type);//this.countNodeLevel(draggingNode);//当前正在拖动的节点+父节点所在的深度不大于3即可let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;console.log("深度：", deep);//   this.maxLevelif (type == "inner") {// console.log(//   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`// );return deep + dropNode.level <= 3;} else {return deep + dropNode.parent.level <= 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]);}}},edit(data) {console.log("要修改的数据", data);this.dialogType = "edit";this.title = "修改分类";this.dialogVisible = true;//发送请求获取当前节点最新的数据this.$http({url: this.$http.adornUrl(`/product/category/info/${data.catId}`),method: "get",}).then(({ 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;this.category.catLevel = data.data.catLevel;this.category.sort = data.data.sort;this.category.showStatus = data.data.showStatus;/***         parentCid: 0,catLevel: 0,showStatus: 1,sort: 0,*/});},append(data) {console.log("append", data);this.dialogType = "add";this.title = "添加分类";this.dialogVisible = true;this.category.parentCid = data.catId;this.category.catLevel = data.catLevel * 1 + 1;this.category.catId = null;this.category.name = "";this.category.icon = "";this.category.productUnit = "";this.category.sort = 0;this.category.showStatus = 1;},submitData() {if (this.dialogType == "add") {this.addCategory();}if (this.dialogType == "edit") {this.editCategory();}},//修改三级分类数据editCategory() {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];});},//添加三级分类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];});},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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/448025.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

备战蓝桥杯---数据结构与STL应用（进阶4）

备战蓝桥杯---数据结构与STL应用（进阶4）

今天主要围绕并查集的一些今典题目展开&#xff1a; 在这里&#xff0c;我们把逻辑真的组合&#xff0c;用并查集即可。一开始&#xff0c;我觉得把a,b,c等价&#xff0c;把第一个赋a,接下来推即可&#xff0c;但这样在判断矛盾时还需要选择合适的点find&#xff0c;于是我们把…
阅读更多...
构建LLM辅助生物威胁制造预警系统 人类越发展获取的超能力越大，破坏力越大，威胁越大。我们需要什么样的预警系统？既克服威胁又具有超能力 安全基础

构建LLM辅助生物威胁制造预警系统 人类越发展获取的超能力越大，破坏力越大，威胁越大。我们需要什么样的预警系统？既克服威胁又具有超能力 安全基础

https://openai.com/research/building-an-early-warning-system-for-llm-aided-biological-threat-creation 人类越发展获取的超能力越大&#xff0c;破坏力就越大&#xff0c;威胁越大。 人工智能就是为了赋予人人都能有超能力&#xff0c;而一旦被恶意或无意使用又威胁到人…
阅读更多...
C/C++ (stdio.h)标准库详解

C/C++ (stdio.h)标准库详解

cstdio,在C语言中称为stdio.h。该库使用所谓的流与物理设备&#xff08;如键盘、打印机、终端&#xff09;或系统支持的任何其他类型的文件一起操作。 在本文将会通过介绍函数参数&#xff0c;举出实际的简单例子来帮助大家快速上手使用函数。 目录 一、流 二、库函数 1、F…
阅读更多...
jenkins 下载插件sentry-cli失败 证书过期

jenkins 下载插件sentry-cli失败 证书过期

现状 npm set ENTRYCLI_CDNURLhttps://cdn.npm.taobao.org/dist/sentry-cli npm set sentrycli_cdnurlhttps://cdn.npm.taobao.org/dist/sentry-cli 原因是npm原域名停止解析&#xff0c;在访问上面sentry-cli的cdn资源的时候 证书过期无法下载。 解决&#xff1a; 替换证书过期…
阅读更多...
二、基本数值类型、数组和类型转换

二、基本数值类型、数组和类型转换

文章目录 基本数值类型、数组和类型转换1.1 整数类型1.2 浮点数类型1.3 布尔类型1.4 字符类型1.5 数组类型1.5.1 一维数组1.5.2 多维数组 1.6 数据类型的转换1.6.1 自动类型转换1.6.2 强制类型转换 基本数值类型、数组和类型转换 本文为书籍《Java编程的逻辑》1和《剑指Java&a…
阅读更多...
Linux进程信号处理：深入理解与应用（1）

Linux进程信号处理：深入理解与应用（1）

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;its 6pm but I miss u already.—bbbluelee 0:01━━━━━━️&#x1f49f;──────── 3:18 &#x1f504; ◀️…
阅读更多...
江科大stm32学习笔记10——对射式红外传感器

江科大stm32学习笔记10——对射式红外传感器

一、接线 上电之后可以看到对射式红外传感器亮两个灯&#xff0c;如果此时用挡光片挡住两个黑色方块中间的部分&#xff0c;则只亮一个灯。 二、代码 将4-1的工程文件夹复制粘贴一份&#xff0c;重命名为“5-1 对射式红外传感器计次”&#xff0c;打开keil&#xff0c;右键添…
阅读更多...
【FPGA Verilog】各种加法器Verilog

【FPGA Verilog】各种加法器Verilog

1bit半加器adder设计实例 module adder(cout,sum,a,b); output cout; output sum; input a,b; wire cout,sum; assign {cout,sum}ab; endmodule 解释说明 &#xff08;1&#xff09;assign {cout,sum}ab 是连续性赋值 对于线网wire进行赋值&#xff0c;必须以assign或者dea…
阅读更多...
银行数据仓库体系实践（16）--数据应用之财务分析

银行数据仓库体系实践（16）--数据应用之财务分析

总账系统 在所有公司中&#xff0c;财务分析的基础都是核算&#xff0c;那在银行的系统体系中&#xff0c;核算功能在业务发生时由业务系统如核心、贷款、理财中实现登记&#xff0c;各业务系统会在每天切日后统计当天各机构的核算科目的发生额与余额&#xff0c;并统一送到总账…
阅读更多...
day35 柠檬水找零 根据身高重建队列 用最少数量的箭引爆气球

day35 柠檬水找零 根据身高重建队列 用最少数量的箭引爆气球

题目1&#xff1a;860 柠檬水找零 题目链接&#xff1a;860 柠檬水找零 题意 一杯柠檬水5美元&#xff0c;每位顾客只买一杯柠檬水&#xff0c;支付5美玉&#xff0c;10美元&#xff0c;20美元&#xff0c;必须正确找零 开始时并没有零钱 若可以正确找零&#xff0c;则返回…
阅读更多...
【教程】苹果上架常见要求的有哪些？

【教程】苹果上架常见要求的有哪些？

引言 苹果上架要求是苹果公司对于提交应用程序到苹果商店上架的要求和规定。这些要求主要是为了保证用户体验、应用程序的质量和安全性。开发者在准备提交应用程序之前&#xff0c;务必了解并遵守苹果上架要求&#xff0c;以确保应用程序能够通过苹果公司的审核。 1. 合法合规…
阅读更多...
[C++]类和对象(中)

[C++]类和对象(中)

一:类的六个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。空类中并不是什么都没有&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会生成的成员函数称为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023