在Vue&Element前端项目中，对于字典列表的显示处理

在上篇随笔《基于Admin.NET框架的前端的一些改进和代码生成处理（1）》中大致介绍了一些关于对Admin.NET框架的前端的改造工作，主要目的就是希望能够增加前端代码的简洁性和可读性，以及利用代码生成工具来快速生成相关的代码，从而减少开发过程中的繁琐问题。本篇随笔继续探讨一下，对其中一些模块功能进行一些修改调整，涉及前后端的一起修改调整。

Admin.NET框架的后端基于基于Furion/.NET 6实现，底层集成SqlSugar；前端则是采用Vue-Next-Admin的前端框架，整体是一套非常不错的框架。

1、增加批量添加字典项目

 Admin.NET框架的字典管理项目界面如下所示。

它通过列出字典大类，然后在右边入口进行字典项目的管理，以前我倾向于使用左右视图分拆的方式，从而实现字典大类和字典项目的快捷管理。

如在随笔《在Vue&Element前端项目中，对于字典列表的显示处理 》中介绍到的字典综合展示方式如下所示。

我们这里暂且不修改这个页面，继续查看其字典项目管理的界面如下所示。

其列表里面只有一个新增的操作，如果对于初始化字典，则是一份苦差事，反复的打开录入是比较费时间的。我们可以使用惯用的方式，来批量录入字典项目，来提高字典项目初始化处理的效率。

我们在原有界面上增加一个批量录入，和批量删除的操作，如下界面所示。

批量新增字典项目的界面，如下所示。

如果字典值和编码内容不一致，可以使用如下效果进行批量新增

 

批量添加字典项目的页面，我们是作为一个组件页面的方式添加，然后在页面中应用组件即可，如下代码所示。

对应的批量添加页面里面，提交的时候，调用对应的API接口就可以了，如下代码所示。

// 保存数据处理
async function submitData() {
  var formEl = editRef.value;
  if (!formEl) return;

  await formEl.validate(async (valid) => {
    if (valid) {
      //验证成功，执行下面方法
      var result = await dictdata.BatchAdd(editForm); //编辑保存

      if (result) {
        $u.message.success('批量添加字典成功!'); // 提示信息
        emit('submit'); // 提示刷新数据
        closeDialog(); // 重置窗口状态
      } else {
        $u.message.error('批量添加失败');
      }
    }
  });
}