新增
1、弹出对话框 dialog
,其中用dialogVisible
绑定:是否显示,为布尔类型
在插入dialog时,报错:根路径只能有一个元素
解决:用div标签把el-tree和el-dialog标签包起来
2、el-form
表单 :model
是数据对象 {}
点击“确定”时,@click="addCategory"
category
全局数据 log1("添加数据",this.category)
name信息还是要加 category中声明的,否则不是双向绑定
category:{name:"", parentCid:0, catLevel:0, showStatus:1, sort:0}
3、
append(data){
this.dialogVisible=true
this.category.parentCid = data.parentCid
this.category.catLevel = data.catLevel*1 + 1 担心是字符串
}
4、电商项目规定:默认3级菜单,不追加4级菜单
addCategory():
httppost 请求 url:"/product/category/save"
data:this.$http.adronData(this.category,false)
记得加this,否则报错显示未声明变量
(做过的)成功的话四步骤:提示消息 、关闭弹窗、默认展开子节点、刷新菜单
this.dialogVisible = false 不加引号
this.expandKeys = [this.category.parentCid] 加上【】
修改
1、在append
后面加edit
修改按钮,取消v-if
条件
点击修改,分类名称是原有存在的,主要发送请求是catId表示唯一修改
2、点击对话框的“确定”,可能发送add/edit请求,要进行区分
新建data dialogType:""
可能为add/edit ; 对话框的标题 title:""
可能为 新增分类/修改分类
当点对话框的“确定”时,先从submitData函数中判断,请求类型,再调用不同方法。addCategory
或者editCategory
3、新加 el-form-item
图标icon
和 计量单位productUnit
。还有默认值,都是空串
考虑到多人修改,在edit
获取名称和catId时,发送请求实时获取当前节点的最新数据
httpget 'product/category/info/${data.catId}' 飘号 路径请求 不携带请求体参数
请求成功后
log1("要回写的数据",data) 包括msg
this.category.name = data.data.name
this.category.catId = data.data.catId 还有icon productUnit
4、发送 update 请求。editCategory() httppost
如果this.category的信息整个发出,层级、显示状态…数据库会用默认的值替换。可以查看控制台的sql语句
结构 var {catId, name, icon, productUnit} = this.category
成功之后,四步骤
5、双击表单中的信息,发现对话框意外关闭。设置 close-on-click-model 为 false
报错:要布尔值,但得到是字符串
解决:前面加动态绑定
在弹窗关闭或者每次打开前,把category的数据设为默认值。但是发现第一种情况下,数据清空会有点早?奇奇怪怪
所以用第二种,this.category = this.$options.data().category
vscode同时编辑多行不同位置
1、alt + shift + 鼠标左键:多行选中每行同一位置
2、ctrl + shift + 右箭头:鼠标左移
3、右箭头:调整光标位置
4、ctrl + shift + 右箭头:选中光标后面字符串
5、替换或删除
拖拽效果
1、用draggable属性 和 allowDrop方法
2、要求被拖动节点的深度 + 目标节点的所在层级 <=3
3、先求被拖动节点的真正深度。定义全局数据
log1(draggingNode, dropNodes, type)
层级:父节点 level ; 当前节点 node.data.catLevel
maxLevel:1
var level = this.countChildLevel(draggingNode,data)
this.maxlevel = draggingNode.data.level
if(draggingNode.childNodes != null && draggingNode.childNodes.length() > 0){
for(let i=0;i<draggingNode.childNodes.length(); i++){
if(draggingNode.childNodes[i].catLevel > this.maxLevel){
this.maxLevel数据更新
}
this.countChildLevel(draggingNode.childNodes[i]) 递归调用
调用方法也必须 this,否则显示未定义
}
}
let deep = this.maxLevel - draggingNode.data.catLevel + 1
log1("真正深度是,",deep)
if(type == "inner"){
return deep + dropNodes.data.catLevel <= 3
}else{ 还有 prev和after 类型
return deep + dropNodes.parent.level <= 3
}
拖拽数据收集
node-drop
拖拽完成 v-on
绑定事件 handledrop方法
1、确认parentCid
和新位置兄弟节点。
inner
的话是目标节点子节点;其他情况是目标节点的父节点的子节点。
这里有一个问题,当catLevel=1
即一级菜单时,它的parent.data直接是一个array数组,
所以 parentCid == undefined ?0 :parentCid
2、把要更新的数据{catId,catLevel,sort}
放到 updateNodes
中。
2.1正常其他兄弟节点,只改顺序 sort
updateNodes:[]
this.updateNodes.push({catId:siblings[i].data.catId,sort:i})
报错:this.updateNodes.push[aaa:bbb]
解决:this.updateNodes.push({}]
2.2 源节点本身改父节点,顺序,是否改层级。
log1(看一个updateNodes)情况如何
2.3 原子节点改层级信息。创建新方法 updateChildNodes(node)
递归调用
每个节点的新level,可以直接实时查看,node.level
,而非静态的 catLevel
调用该函数时,传入的是新位置 sibling[i]
,而非 原来的位置 draggingNode
后端
原有的update是单个数据修改,新方法 updateSort /update/sort
参数 Category[] category
将数组转为集合
categoryService.updateBatchById(Arrays.asList(category))
httppost请求,然后3步骤,展开节点,显示成功信息,刷新菜单
最后清空 maxLevel updateNodes
为默认值
我的代码存在一个bug:当单独移除一个作为一级菜单,成功;
但是再往这个菜单拖数据,后台父节点、层级修改成功,但是页面没有效果?
拖拽完善
1、添加开关按钮,防止误操作 switch
2、不要每一次修改都进行请求,频繁和后端交互,要求批量保存 batchSave
,一次性发送 updateSort请求
拖拽只是保存修改数据。不过不开启拖拽,“批量保存”按钮不显示。
3、随着频繁拖拽,catLevel没有时效性,在判断“层级>3不能拖拽”时方面,把catLevel
改为level
4、默认展开的子节点,不止一个,改为数组
批量删除
按钮 type="danger"
绑定单击事件 batchDelete
1、找选中了哪些节点。
ref
是vue自带抓取标签控件的。
半选状态 A:A1 A2
其中 A1选中,A2未选中,则A就是半选中状态
ref:"menuTree"
let checkedNodes = this.$ref.menuTree.getCheckedNodes()
log1(checkedNodes)
2、拿到checkedNodes的catId,放入catIds数组,给一个确认删除的提示框,发delete post请求删除