分享

成功el-tree从接口取数据

 北方天空A 2020-08-29

前台:
<template>
  <div class="app-container">
    <div class="custom-tree-container">
      <div class="block">
        <p>使用 scoped slot</p>
        <el-tree
          :data="data"
          ref="rootTree"
          show-checkbox
          node-key="NodeId"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
              <el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
let NodeId = "";
import { treeDataGetnode, getRandomCode } from "@/api/tree";
import { getList } from "@/api/MenuTable";
export default {
  data() {
    var data = [];
    return {
      form: {},
      data: JSON.parse(JSON.stringify(data)),
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      let param = {};
      getList().then((response) => {
        this.data = response.Data;
        var gg = JSON.stringify(this.data).myReplace("childList", "children");
        this.data = JSON.parse(gg);
      });
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
后台:
实体类:
public class DbMenuTable
    {
        public string ID { get; set; }
        public string NodeId { get; set; }
        public string label { get; set; }
        public string ParentId { get; set; }
        public List<DbMenuTable> childList;
}
using Kexinruida.IntegrationPlatform.ServiceModels;
using Microsoft.AspNetCore.Mvc;
using Models;
using Models.DbEntities;
using Repositories.MenuTableF;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace IntegrationPlatform.Systems.SR_LZ.Controllers
{
    [Route("api/MenuTable")]
    [ApiController]
    public class MenuTableController : ControllerBase
    {
        private readonly IMenuTableStore _IMenuTableStore;

        public MenuTableController(IMenuTableStore IMenuTableStores)
        {
            _IMenuTableStore = IMenuTableStores;
        }
        [HttpPost("Add")]
        public async Task<IpResponse> Add([FromBody] DbMenuTable model)
        {
            if (!ModelState.IsValid)
            {
                return IpResponse.Create(false, "100", ModelState.GetModelErrors());
            }
            var (result, message) = await _IMenuTableStore.Add(model);
            string code = CommonClass.GetReturnCode(message, "添加");
            return IpResponse.Create(result, code, message);
        }

        [HttpPut("Edit")]
        public async Task<IpResponse> Edit([FromBody] DbMenuTable model)
        {
            if (!ModelState.IsValid)
            {
                return IpResponse.Create(false, "101", ModelState.GetModelErrors());
            }
            var (result, message) = await _IMenuTableStore.Edit(model.ID, model);
            string code = CommonClass.GetReturnCode(message, "修改");
            return IpResponse.Create(result, code, message);
        }

        [HttpDelete("Delete")]
        public async Task<IpResponse> Delete(string id)
        {
            var (result, message) = await _IMenuTableStore.Delete(id);
            string code = CommonClass.GetReturnCode(message, "删除");
            return IpResponse.Create(result, code, message);
        }
        
        [HttpGet("GetMenuTable")]
        public async Task<IpResponse> GetMenuTable()
        {
            List<DbMenuTable> MenuTableList = new List<DbMenuTable>();
            var MenuTable = await  _IMenuTableStore.GetMenuTable();
            List<DbMenuTable> listAll = MenuTable.Where(i => i.NodeId != null).ToList();
            var list = listAll.Where(i => i.ParentId == "root");
            foreach(var item in list)
            {
                item.childList = GetChilds(listAll,item.NodeId);
            }
            return IpResponse.Create(true, "0", "查询成功", list);
        }
        public List<DbMenuTable> GetChilds(List<DbMenuTable> DbMenuTableList,string ParentId)
        {
            if(ParentId == "YMei5G6xYxW4tBVFIvvSXNGeb2KRWnXc")
            {
                string ss = "";
            }
            List<DbMenuTable> list = DbMenuTableList.Where(i=>i.ParentId== ParentId).ToList();
            foreach (var item in list)
            {
                var item2= GetChilds(DbMenuTableList, item.NodeId);
                if (item2.Count > 0)
                {
                    item.childList = item2;
                }
            }
            return list;
        }

        [HttpGet("Detail")]
        public async Task<IpResponse> Detail(string id)
        {
            var MenuTable = await _IMenuTableStore.Detail(id);
            return IpResponse.Create(true, "0", "查询成功", MenuTable);
        }
    }
}

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约