vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理

这篇具有很好参考价值的文章主要介绍了vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标:打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。

之前使用layui是时候 狠心升级下了。

只为了好看----------于是  小白教程来了。可以根据 git提交一步步来重现我的实现。

【后面会发布到在线 效果预览   还没发布啊 我要将它改造成我自己想要的。要时间。这里占个坑而已。不回改文章了。】

目录

目录

第4节---部门列表的增删查改及对应API开发

​编辑

目录

第4节---部门列表(树形列表)的增删查改及对应API开发

​编辑​

1部门表定义

2部门表API开发及定义

3列表新的接触

表单页

git提交参考


1部门表定义

2部门表API开发及定义

本系列文章后在还说会什么?



第4节---部门列表(树形列表)的增删查改及对应API开发

1部门表定义

因为是层级结构   这里定义子级数据对象Children 

/// <summary>
/// 部门
/// </summary>
public class SysDep : RootEntityBase<int>
{
    public SysDep()
    {
        CreatedTime = DateTime.Now;
    }
    /// <summary>
    /// 机构代码
    /// </summary>
    public string OrgCode { get; set; }
    /// <summary>
    /// 上级代码
    /// </summary>
    public int ParentId { get; set; } = 0;
    /// <summary>
    /// 所属机构
    /// </summary>
    public long OrgId { get; set; }
    /// <summary>
    /// 部门名称
    /// </summary>
    public string DepName { get; set; }

    /// <summary>
    /// 部门代码
    /// </summary>
    public string DepCode { get; set; }

    /// <summary>
    /// 排序
    /// </summary>
    public int OrderNo { get; set; }

    /// <summary>
    /// 添加时间
    /// </summary>
    [SugarColumn(IndexGroupNameList = new string[] { "index_time1" })]
    public DateTime CreatedTime { get; set; }

    /// <summary>
    /// (子级)不映射数据库字段
    /// </summary>
    [SugarColumn(IsIgnore = true)]
    public List<SysDep> Children { get; set; }
    
}

2部门表API开发及定义

系统使用ORM框架 ---SqlSugar  有多好用 ,这里就不说了,建议.net 人员多支持。

后台系统对单表实现了所有的常规接口,不需要开发。只要单独开发树形查询接口即可。

添加/删除/导入/导出/统计/查询/列新

vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理,vue-vben-admin 与.net core,elasticsearch,大数据,搜索引擎

这里要单独实现非标准接口 树结构查询 。SqlSugar有支持,使用即可ToTree。

/// <summary>
/// 部门
/// </summary>
[Route("api/[controller]/[action]")]
[ApiController]
public class SysDepController : BaseSimpleController<SysDep>
{
    public SysDepController(IUnitOfWork unitOfWork, IBaseRepository<SysDep> rep, IWebHostEnvironment env)
    {
     
        base._env = env;
        base._rep = rep;
        base._unitOfWork = unitOfWork;
    }

    /// <summary>
    /// 查询树
    /// </summary>
    /// <param name="input"></param>
    /// <returns></returns>
    [HttpPost]
    public  async Task<ResultMo<List<SysDep>>> SearchTree(QueryPageInput input)
    {
        input.queryKeyValue.Add(new AndWhere {
            FieldName= "ParentId", FieldValue="0"
        } );
        var main = await _rep.QueryPage(input);
        var Ids = main.data.Select(m => m.Id).ToList();
        var re = await _rep.Db.Queryable<SysDep>().Where(m => Ids.Contains(m.Id)|| Ids.Contains(m.ParentId)).
            ToTreeAsync(it => it.Children, it => it.ParentId, 0);
        re.ForEach(m =>
        {
            if (m.Children == null) m.Children = new List<SysDep> { };
        });
        return new ResultMo<List<SysDep>>(re, main.dataCount);

    }
}

3列表新的接触

1查询时间段,数据处理

 console.log(prams);
    postsearch = [];
    for (let pS in prams) {
      if (pS != "page" && pS != "pageSize" && prams[pS]!=undefined) {
        if (pS.startsWith('find_rp_')) {//find_g_  find_s_
          console.log('日期2');
          console.log(pS.replace('find_rp_',''));
          postsearch.push({
            fieldName: 'find_g_'+pS.replace('find_rp_',''),
            fieldValue: prams[pS][0]
          });
          postsearch.push({
            fieldName:  'find_s_'+pS.replace('find_rp_',''),
            fieldValue: prams[pS][1]
          });

        }
        else {
          postsearch.push({
            fieldName: pS,
            fieldValue: prams[pS]
          });
        }
      }
    }

2树形的不用单独配置  他本身有字级后 会自动处理?我也不明白,哈哈。(开关没找到)

表单页

下拉数据的转换。

使用apiselect  只会第一次进行会加载,后面不会更新,那位大神可以告诉二次进入也可以更新的方法?

这里改成 select 每次进入接取绑定。

//下接数据获取
  var postsearch = [{ fieldName: 'ParentId', fieldValue: '0' }];
  postsearch.push({
    fieldName: 'find_q_orgCode',
    fieldValue: useUserStore().getUserInfo.orgCode
  });
  const listdata = await HcrainPost('/api/SysDep/Search', {
    queryKeyValue: postsearch,
  });
  var stype = [{}];
  for (let i in listdata.data) {
    stype.push({
      label: listdata.data[i]['depName'],
      value: listdata.data[i]['id']
    }
    );
  }
  console.log(stype);
  //将数据放到下拉框上
  updateSchema({
    field: 'parentId',
    componentProps: {
      options: unref(stype),
    },
  });

vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理,vue-vben-admin 与.net core,elasticsearch,大数据,搜索引擎

git提交参考

vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理,vue-vben-admin 与.net core,elasticsearch,大数据,搜索引擎

多谢文章来源地址https://www.toymoban.com/news/detail-793940.html

到了这里,关于vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Taurus .Net Core 微服务开源框架:Admin 插件【4-5】 - 配置管理-Mvc【Plugin-Admin 后台】

    继上篇:Taurus .Net Core 微服务开源框架:Admin 插件【4-4】 - 配置管理-Mvc【Plugin-CORS 跨域】 本篇继续介绍下一个内容: 配置界面如下:  配置说明如下: 这是个很危险的开关: 因此,需要知道持久化的目录: 默认在 /App_Data/admin/config.ini 中,以 json 格式存档,大至如下: 可

    2024年02月04日
    浏览(49)
  • Taurus .Net Core 微服务开源框架:Admin 插件【2】 - 系统环境信息管理

    继上篇:Taurus .Net Core 微服务开源框架:Admin 插件【1】 - 微服务节点管理 本篇继续介绍下一个内容:  基本信息如上图,重点的几个参数: 其它就不另外单独翻译了。 默认 NetCore 整体程序集加载的有点多,达100多个。 默认网关的应用程序的程序集是3个,其余全是公共运行

    2024年02月11日
    浏览(42)
  • Taurus .Net Core 微服务开源框架:Admin 插件【1】 - 微服务节点管理

    最近发现 NetCore 的文章有点少,特来补几篇。 上一篇:Taurus.mvc .Net Core 微服务开源框架发布V3.1.7:让分布式应用更高效。 自上篇之后,期间更新了4个小版本,更新如下: 其中,大部分和Admin插件相关。 本篇开始,来详细介绍一下该管理插件后台。 最早开发Admin 管理插件,

    2024年02月11日
    浏览(50)
  • yudao-ui-admin-vben管理后台:基于最新vben 框架的企业级管理后台应用解决方案

    摘要: 本文主要介绍了yudao-ui-admin-vben管理后台,一个基于最新vben 框架的企业级管理后台应用解决方案。文章首先概述了yudao-ui-admin-vben管理后台的技术栈和功能特点,然后深入探讨了其架构设计、核心模块实现以及性能优化等方面的技术细节。最后,文章总结了yudao-ui-admi

    2024年04月27日
    浏览(33)
  • Taurus .Net Core 微服务开源框架:Admin 插件【2】 - 系统环境信息管理 - 【OS、Assembly】

    继上篇:Taurus .Net Core 微服务开源框架:Admin 插件【1】 - 微服务节点管理 本篇继续介绍下一个内容:  基本信息如上图,重点的几个参数: 其它就不另外单独翻译了。 默认 NetCore 整体程序集加载的有点多,达100多个。 默认网关的应用程序的程序集是3个,其余全是公共运行

    2024年02月11日
    浏览(43)
  • vben-admin 页面以及部分代码 常见问题 解析 持续更新····

    介绍 | Vben Admin (vvbin.cn) https://doc.vvbin.cn/guide/introduction.html ----------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------  

    2024年02月04日
    浏览(43)
  • Taurus .Net Core 微服务开源框架:Admin 插件【4-2】 - 配置管理-Mvc【含请求日志打印】

    继上篇:Taurus .Net Core 微服务开源框架:Admin 插件【4-1】 - 配置管理-Kestrel【含https启用】 本篇继续介绍下一个内容: 界面如图: 以下为配置说明: 控制 Taurus 的 Mvc 是否启用,比如网关、或注册中心,或者使用其它Mvc框架,可以选择不启用。 如正常访问Mvc时: 禁用它后:

    2024年02月11日
    浏览(47)
  • Taurus .Net Core 微服务开源框架:Admin 插件【4-1】 - 配置管理-Kestrel【含https启用】

    继上篇:Taurus .Net Core 微服务开源框架:Admin 插件【3】 - 指标统计管理 本篇继续介绍下一个内容: 界面图如下: 双击节点即可进入修改模式,如:   修改说明:   节点说明:默认显示的是 Mvc 的配置界面。 本节先讲 Kestrel 相关的配置项: 界面如下:  配置说明:经过对

    2024年02月11日
    浏览(45)
  • Taurus .Net Core 微服务开源框架:Admin 插件【3】 - 指标统计管理 -【API、Redis、MemCache】

    继上篇:Taurus .Net Core 微服务开源框架:Admin 插件【2】 - 系统环境信息管理 本篇继续介绍下一个内容: 界面图如下: 该页面默认呈现API访问次数的统计,由于要显示的数据列有点多,24小时,因此用了全屏显示。 同时提供快捷切换显示选项:昨天与今天。 如果需要查询其余

    2024年02月11日
    浏览(40)
  • vben-admin中渲染table表格时怎么处理不同的数据结构

    最近在用vben admin开发后台管理系统,vben admin这个后管端框架封装的非常细,颗粒度非常细,如果了解里面的组件或者api用法,那开发起来非常快。如果不了解,那就非常痛苦了,目前关于vben admin这块的开发问题的博客很少,所以有的问题很难查到。我经历了这样的过程,于

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包