api树结构

<template>
  <div class="sortDiv">
    <el-button type="primary" @click="openDialog">新建一级</el-button>
    <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-on-click-node="false" :render-content="renderContent">
    </el-tree>
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    一级节点<el-input v-model="rootName" autocomplete="off"></el-input>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoot">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
    :title="type==='add' ? '新增':'编辑'"
    :visible.sync="editdialogVisible"
    width="30%"
    :before-close="handleEditClose">
    节点<el-input v-model="name" autocomplete="off"></el-input>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="type==='add' ? addName() : editName()">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTree,addNode } from '@api/modules/tree'
export default {
  name: 'Sort',
  data() {
    return {
      sortData: [
        {
          id: 1,
          label: '一级 1',
          checkItem: true,
          children: [
            {
              id: 4,
              label: '二级 1-1',
              checkItem: false
            },
            {
              id: 9,
              label: '二级 1-2',
              checkItem: false
            },
            {
              id: 10,
              label: '二级 1-3',
              checkItem: false
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          checkItem: true,
          children: [
            {
              id: 5,
              label: '二级 2-1',
              checkItem: true
            },
            {
              id: 6,
              label: '二级 2-2',
              checkItem: true
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          checkItem: true,
          children: [
            {
              id: 7,
              label: '二级 3-1',
              checkItem: true
            },
            {
              id: 8,
              label: '二级 3-2',
              checkItem: false
            }
          ]
        }
      ],
      dialogVisible: false,
      editdialogVisible:false,
      rootName:"",
      name:"",
      type:"add"
    };
  },
  mounted() {
    this.getTree()
  },
  methods: {
    getTree(){
      getTree().then((res)=>{
        this.sortData = res.data.list
      })
      .catch((err)=>{
        console.log(err);
        this.sortData = []
      })
    },
    openDialog(){
        this.dialogVisible = true
    },
    /**
     * @description: 新增根节点
     * @param {*}
     * @return {*}
     */
    addRoot(){
      const data = {
          id: this.sortData.length,
          label: this.rootName,
          isRoot: true,
      }
      this.addNode(data)
      this.dialogVisible = false
    },
    addNode(data){
      addNode(data).then(res=>{
        if (res.code==='1') {
          alert('新增成功')
        }
      })
    },
    edit(node, data){
        this.type = "edit"
        this.editdialogVisible = true
        this.name = data.label
    },
    handleEditClose(){
this.$confirm('确认关闭？')
        .then(_ => {
        done();
        })
        .catch(_ => {});
    },
  handleClose(done) {
    this.$confirm('确认关闭？')
        .then(_ => {
        done();
        })
        .catch(_ => {});
    },
    addName(){
        const data = {
          id: this.sortData.length,
          label: this.rootName,
          isRoot: false,
        }
        this.addRoot(data)
        this.editdialogVisible = false
    },
    editName(){
        //todo 掉编辑接口
        this.editdialogVisible = false
    },
    delete(node, data){
        this.$confirm('确认删除？')
        .then(_ => {
            //掉删除接口
        })
        .catch(_ => {});
    },
    //获取数据
    getData () {
      let result = this.$refs['sortTree'].data;
      let sortRulesMaps = [];
      result.forEach((element, index) => {
        let item = null;
        if (element.checkItem) {
          if (element.children && element.children.length > 0) {
            item = {
              orderIndex: index,
              sortField: element.label,
              rule: ['OTHERS']
            };
            element.children.forEach(i => {
              if (i.checkItem) {
                item.rule.push(i.label);
              }
            });
            item.rule = item.rule.join('_');
          }
        }
        item && sortRulesMaps.push(item);
      });
    },
    changeNode(r, node, data) {
      data.checkItem = r;
    },
    add(){
        this.type = "add"
        this.name = ""
        this.editdialogVisible = true
    },
    //自定义内容
    renderContent(h, { node, data }) {
      return (
        <span class="custom-tree-node">
          <span>{data.label}</span>
          <span>
           <el-button
              size="mini"
              type="text"
              on-click={() => this.add(node, data)}
              style="color:#707375;margin-left:10px"
            >
              <i class="el-icon-plus">新增</i>
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.edit(node, data)}
              style="color:#707375;margin-left:10px"
            >
              <i class="el-icon-edit">编辑</i>
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.delete(node, data)}
              style="color:#707375;margin-left:10px"
            >
              <i class="el-icon-delete">删除</i>
            </el-button>
          </span>
        </span>
      );
    }
  }
};
</script>
<style lang="scss">
.sortDiv {
  .el-icon-caret-right:before {
    content: '\E604';
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

/*
 * @Author: your name
 * @Date: 2021-11-03 22:27:59
 * @LastEditTime: 2021-11-03 22:36:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /eladmin-web/src/api/modules/tree.js
 */
import request from '@/utils/request'

/**
 * @description: 获取树列表
 * @param {*}
 * @return {*}
 */
export function getTree() {
  return request({
    url: '/api/logs/error',
    method: 'get'
  })
}

/**
 * @description: 删除节点
 * @param {*}
 * @return {*}
 */
export function delNode(id) {
  return request({
    url: 'api/logs/del/error',
    method: 'post',
    data:{
        id
    }
  })
}


/**
 * @description: 新增节点
 * @param {*} id 节点id
 * @param {*} name 节点名称
 * @param {*} root 是否新增根节点
 * @return {*}
 */
export function addNode(id,name,root) {
  return request({
    url: 'api/logs/del/info',
    method: 'post',
    data:{
        id,
        name,
        root
    }
  })
}

 /**
  * @description: 编辑节点
  * @param {*} id
  * @param {*} name
  * @return {*}
  */
 export function editNode(id,name) {
    return request({
      url: 'api/logs/del/info',
      method: 'post',
      data:{
          id,
          name
      }
    })
  }