P6 树形数据新增 & 修改 & 拖拽效果完成

新增

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请求删除