水果网站怎么做的/win10必做的优化

一.加上批量删除功能的前端代码

这一步无需再修改后端的代码，直接在前端加上对应功能就好了。

加上批量删除功能的前端代码如下:

<!-- 分类维护 -->
<template><div><el-switch v-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"@node-click="handleNodeClick":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-button v-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-input v-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: {},data() {return {pCid: [],draggable: false, //决定是否可以拖拽updateNodes: [], //拖拽后需要修改的分类数组maxLevel: 0, //节点最大深度title: "",dialogType: "", //对话框类型，点击新增=add，点击修改=editcategory: {name: "",parentCid: 0,catLevel: 0,showStatus: 1,sort: 0,icon: "",productUnit: "",catId: ""},dialogVisible: false,menus: [],expandedKey: [],defaultProps: {children: "children",label: "name"}};},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {},//方法集合methods: {handleNodeClick(data) {console.log(data);},//获取分类维护列表getMenus() {this.$http({url: this.$http.adornUrl("/prodect/category/list/tree"),method: "get"}).then(({ data }) => {console.log("成功获取到数据" + data.data);this.menus = data.data;});},//删除remove(node, data) {var ids = [data.catId];this.$confirm(`是否删除【${data.name}】菜单, 是否继续?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.$http({url: this.$http.adornUrl("/prodect/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(() => {});},//批量删除batchDelete() {let catIds = [];let names = [];let checkedNodes = this.$refs.menuTree.getCheckedNodes();for (let i = 0; i < checkedNodes.length; i++) {catIds.push(checkedNodes[i].catId);names.push(checkedNodes[i].name);}this.$confirm(`是否批量删除【${names}】菜单?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.$http({url: this.$http.adornUrl("/prodect/category/delete"),method: "post",data: this.$http.adornData(catIds, false)}).then(({ data }) => {this.$message({message: "菜单批量删除成功",type: "success"});this.getMenus();});}).catch(() => {});},//点击新增按钮，弹出对话框，并赋值append(data) {this.title = "新增分类";this.dialogType = "add";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 = null;this.category.sort = 0;this.category.showStatus = 1;},//点击修改按钮，弹出对话框，并调用接口实时赋值edit(data) {this.title = "修改分类";this.dialogType = "edit";this.dialogVisible = true;//发送请求获取最新的数据填充this.$http({url: this.$http.adornUrl(`/prodect/category/info/${data.catId}`),method: "get"}).then(({ data }) => {console.log("成功获取到数据" + data.data);this.category.catId = data.data.catId;this.category.name = data.data.name;this.category.icon = data.data.icon;this.category.productUnit = data.data.productUnit;this.category.parentCid = data.data.parentCid;});},//新增操作addCategory() {this.$http({url: this.$http.adornUrl("/prodect/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];});},//修改操作editCategory() {var { catId, name, icon, productUnit } = this.category;var data = { catId, name, icon, productUnit };this.$http({url: this.$http.adornUrl("/prodect/category/update"),method: "post",data: this.$http.adornData(data, false)}).then(({ data }) => {this.$message({message: "菜单修改成功",type: "success"});//关闭对话框this.dialogVisible = false;//新增后刷新出新菜单this.getMenus();//默认展开新增菜单的父菜单this.expandedKey = [this.category.parentCid];});},//弹出框提交数据调用的方法submitData() {//类型为新增则调用新增方法，否则调用修改方法if (this.dialogType == "add") {this.addCategory();} else {this.editCategory();}},//是否允许拖拽的判断方法allowDrop(draggingNode, dropNode, type) {//1.被拖动的当前节点以及所在的父节点层数不能大于3//1).得出被拖动的当前节点总层数，赋值给maxLevelconsole.log("allowDrop:", draggingNode, dropNode, type);this.countNodeLevel(draggingNode);//2).被拖动的当前节点+所在的父节点的深度，使用绝对值let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;//3).作出判断，被拖动的当前节点以及所在的父节点层数是否大于3，决定能否拖拽if (type == "inner") {console.log("result:", deep + dropNode.level <= 3);return deep + dropNode.level <= 3;} else {console.log("result:", deep + dropNode.parent.level <= 3);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]);}}},//拖拽成功完成时触发的事件handleDrop(draggingNode, dropNode, dropType) {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]);}}},//批量保存的方法batchSave() {this.$http({url: this.$http.adornUrl("/prodect/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实例）created() {this.getMenus();},//生命周期 - 挂载完成（可以访问DOM元素）mounted() {},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
</style>

二.测试效果

选择测试数据，点击批量删除按钮，如下：：

点击确定：

删除后【图书、音像、电子书刊】三级分类如下：

批量删除测试成功。