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 人员多支持。

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

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

这里要单独实现非标准接口树结构查询。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),
    },
  });