可媲美Element Plus Tree组件研发之保存节点变更

咱们的JuanTree组件功能开发完基本的增删改操作，接下来就是保存操作了。为了方便组件的使用者，我们将内置dirtyData的封装，这样用户对接后台服务提交Tree数据的变更将变得非常简单。

这种封装不但简化了组件用户的开发工作，而且提升了产品的用户体验，组件状态不用做任何的刷新，各种操作对用户都是无感知的噢~

用法

只需要获取组件的引用调saveDirty方法即可：

用法非常简单！！

dirtyData中封装好了增删改的数据，注意！！这里我们暂时只考虑改节点标签名，真正将我们的JuanTree投入项目使用，往往我们要维护更多的后台模型相关的元数据，可以在此基础上很方便的进行扩展噢~

用户可以从dirtyData中分拣数据包装与后台接口交互的入参然后调取后台接口服务，后台提交成功后，再在ajax回调中调用done(...)以完成tree脏数据的flush完成同步。这个过程tree组件无需做任何的刷新和重新初始化噢~。只需要把设置好后台id的新增数据列表作为参数传给done进行调用即可。

看下面的示例演示：

提交的数据，组件内部实现了格式封装：

{
   
   
  "insert": [
    {
   
   
      "name": "新节点12",
      "parentId": "aaa"
    },
    {
   
   
      "name": "新节点11",
      "parentId": "bbb",
      "children": [
        {
   
   
          "name": "新节点223"
        }
      ]
    }
  ],
  "update": [
    {
   
   
      "id": "b11",
      "name": "b11112"
    },
    {
   
   
      "id": "b22",
      "name": "b2233"
    }
  ],
  "delete": [
    "55",
    "66",
    "77"
  ]
}

下面看具体的实现。

ts类型调整

export interface IFlatTreeNode extends ITreeNode {
   
   
  ...
  // 内部append方法，内部实现用的，不提供给用户，这里会接收一个data
  append: (child: SingleEditNode, data: IFlatTreeNode[]) => IFlatTreeNode
  // 内部删除方法
  remove: (flatData: IFlatTreeNode[], treeData: ITreeNode[]) => IFlatTreeNode[]
  ...
  temporary?: boolean // 新增未提交后端则属于临时节点
  backId?: IdType // 对应后端模型的id
}

这里调整了新增节点的类型为SingleEditNode，因为用户每次执行append操作只会新增一个节点，也就是叶子节点，只是叫法上进行了一下优化，有单节点就有嵌套节点，后续涉及。

remove方法增加了被移除扁平化节点列表的返回值，这便于收集节点编辑后的变更项。

然后增加了一个temporary的可选属性，来表明一个节点是否属于临时节点，注意，临时节点是临时新增的，只有前端id，并没有同步到后台。

最后增加了一个backId属性，它对应后台模型的id。这里我们区分前端id和后台id。

同样，提供给用户操作的接口中append方法的入参类型也调整下：

export interface ITreeNodeOperation {
   
   
  append: (node: SingleEditNode) =>