57、商品服务-API-三级分类-修改-批量拖拽效果

前面我们前后连调通了我们节点拖拽功能，接下来我们做一些简单的优化，首先第一个我们有时在操作界面的时候，比如我想要添加，但是我们按住鼠标一不小心把它拖动了，那有可能会触发节点的拖动逻辑，所以我们希望整个这个界面需要拖动功能的时候才能拖动。那我们呢，可以给这添加一个开关按钮，我们如果开启拖拽功能的，那我们就可以在这儿拖拽，没有开启那我们就不允许拖拽，这样呢就能防止一些误操作。那这个按钮呢，我们可以参照组件里边有一个在form表单里边有Switch开关，我们拿一个开关过来，这个开关呢帮我们来控制是否开启我们这个拖拽功能，比如我们就使用这个开关，这个开关呢，我们只需要用EL Switch，我复制过来，我们将整个放到EL tree的前边，这是我们这个开关按钮，这个开关按钮呢，其中有一个叫active test，也就是它激活的时候显示什么激活，那就是开启拖拽，还有我们inac不激活的时候，我们就叫关闭拖拽。

这个开关呢，会绑定一个Y6值，那这个Y6啊，最终是来决定我们拖拽功能是否开启的，所以我们给这个拖拽功能动态绑定上一个属性，比如这个属性就叫dragable，这个dragable是处那就能拖拽，是false那就不能拖拽，而这个drag宝呢，是动态的跟Switch进行绑定的，那drag宝默认的值我们可以给它放到这，比如我们叫false，默认是不可以拖拽的，来保存一下，现在来看页面效果，重新刷新页面。那如果我们现在是关闭拖拽状态，那我们现在是拖不动的，当我们给它开启拖拽了，我们在这儿呢又可以拖动了，接下来我们继续优化，当我们开启拖拽以后，我们每拖一个节点，我们都会去来跟数据库。

这样频繁的与数据库交互也很麻烦，我们希望的是我们在这儿不停的改变节点顺序，当我们改变全部成功以后，我们这有一个保存按钮，统一将我们上次的所有修改一次性提交过去。那我们呢，就可以给这放一个按钮叫EL button，在Switch后边我们再来放一个EL button，我们用我们的这个按钮，这个按钮的功能呢，就是批量保存，当然它要绑定一个事件，我们用an click click，当点击它以后，我们要把我们上次更改了的所有数据保存，那我们就叫BA。

Save。那我们这个办赛方法呢，我们在man里边，我们来。添上这个方法呢，会被点击按钮的时候调用，而此时这个调用我们就可以将我们所有要更新的数据提交上去，那拖拽成功以后，拖拽成功以后我们只需要将数据加到这些update news里边，而真正发送请求我们就可以等点按钮的时候再发，所以我把发请求的这一块整个功能我来剪切过来，我放到我们这个方法里边。那这个方法的调用呢，就是我们点击这个按钮的时候，才会被调用我CTRLS进行保存，那么现在来看一下页面效果。当我没有开启拖拽功能的时候呢，这个按钮也应该是不存在的，所以我们给这儿再来判断一下，我们写一个V-if，如果dragable这是true的，那自然这个是按钮显示是first，那就不显示来保存，所以我们现在按钮呢是没有显示的，当我们开启拖拽了，我们就可以来显示这个按钮，而我们这个按钮呢，我们在整个拖动期间，我们都没有触发更新方法，我们拖动一个，拖动两个，拖动三个，我们将所有累计的拖动效果，这有60个，我们全部放到这个数组里边，所以此时呢，当我再来。

点击批量保存。我们这一块呢，就会说菜单数据保存成功，而这一块呢，报了一个错，说我们这个pcid没定义，我们来看我们这一块pcid的获取呢，我们来打开我们的c be方法。好，这个pcid是在之前的时候我们决定的。由于我们后来的这个方法还要使用，那我们就可以将PCD放到data这个属性域里边，那写一个pcid，它的默认值呢，我们先给它写一个零，当pcid有修改，比如在handle drop里边，我们通过这一块改掉了pcid以后，我们再给全局pcid做一个保存，这个pcid呢，那就等于我们现在的这个值。

那以后我们在这要使用pcid，我们就用唯有实例保存的上一次的pcid。当然我们整个保存更新完了以后，我们不只要清空update notes等这些方法，我们还要把这个pcid的值我们也要置为原值，把它呢变为原来的零，虽然说这个操作是可以不必要的，因为我们每次只要拖拽了这个PD，还会重新变化。但是呢，操作完成将初始时属性置为它默认值应该是一个良好的习惯，而且如果我们现在是使用批量保存的方式，那它现在还有一个最大的问题，就是当我们不停的拖拽改变顺序以后，某一个节点的层级可能会发生变化，它再往其他节点里边拖，我们在判断层级能不能拖的时候，我这一块稍微写的有点问题，我们来看一下有一个叫a drop，我们判断它能不能拖动，我们是来看当前节点的数据库里边count level的值，而数据库呢，我们来回拖了几次，其实数据库还没有实时更新，我们批量保存以后才更新的，所以我们现在应该看这个节点能不能拖到哪个位置。

是要按照当前节点所处的这个数，真正的层级位置以及当前节点的最大深度来决定的，而不是使用我们数据库里边的这个level，所以呢，我们只需要在这儿做一个简单的修改，我们将所有判断level的属性，我们用成它节点真正的这个level，在数里边的这个level，这是来求深度，包括呢，我们之前在看控制台的时候，我们这块的计算老会有负值，那这个负值呢是不对的，所以我们给它做一个绝对值，我们计算出一个绝对值。

这是我们节点的深度，包括我们在递归来求这个节点深度的时候，我们都是使用的是它数据库封装的，求准的相关信息，我们可以来看一下。我们一直使用的呢，是我们data里边的children这些子节点的信息，而我们现在应该使用插noes，它里边呢，真正封装了当前节点所处的这个层级，我们使用它就行了，所以我们在这便历的时候，我们不用丘疹了，我们用它的插的路拿到数的真正子节点。

我们在这儿传的这个节点呢，也不是传传数据库封装的这个信息数据，我们就直接将当前节点传进来，拿到它的子节点，便利循环所有的子节点，然后找到他们这个每一个子节点，用它真正的level跟我们的max level来进行一个对比，我们这一块呢，也改成差的news的level，包括我们在这继续进行递归，我们还是要将它的所有子节点，当前这个节点再来求它所有子节点。控制台这个语句呢，我们就不需要了，我们把它注掉al shift f，代码整理一下，我们保存重新来测试。我们把页面清空，现在当我们开启拖拽以后，我们来拖上很多，比如我把手机配件先拖到前边，这是第一个，第二个在数码里边，我们将。智能设备也拖到数码的前边，第三个我们将家用电器的大家电我们拖到图书里边，我们相当于修改了这么多的信息，那我们想要真正的修改呢，我们只需要点一个批量保存，诶我们发现呢，这块菜单顺序就修改成功了，但是这一块呢，并没有展开我们的负节点，那原因呢，是因为我们在这儿批量保存，批量保存成功以后呢，我们虽然让它展开这个负节点，数组已经给了，但是负节点呢，又动态的给它变成了零，相当于又回到原值，只是展开这些根元素了，所以我们将这个零滞空，这是第一种情况。第二种情况我们会发现我们刚才在批量拖拽的时候，我们牵扯到要展开好多的这个负节点，所以我们应该将整个要展开的负节点我们变成一个数组，所有要展开的负节点呢，我们都给它存。

起来，我们在这儿来看一下handle照，当我们更新成功以后，我们给数组里边push，保存一下我们当前要展开的这个负节点。

每修改一个菜单，这个菜单呢，最终都要看出来，我们这些负节点呢，就给它放到这儿，那最终当我们批量成功以后，我们需要展开的节点呢，那就是我们整个这个负节点数组。保存来看一下页面效果刷新。我们先开启拖拽功能，比如我们先调音响的位置，那首先要展开的一个副节点，那就是图书，第二个我们来调一下手机通讯的位置，然后接下来呢，我们来将DA我们放到其他前边。我们来点击批量保存，诶我们保存成功以后呢，我们发现手机图书音响，诶这些菜单呢，就是默认展开的。

当然我们以后再来进行拖拽，我来拖拽厨具的时候，那么所有要更新的节点在上一次批量保存成了以后，我们就清空掉了，它会重新来保存我们所有需要修改的这个节点信息。那批量拖拽的功能呢，我们就简单做完了。