尚融宝12-数据字典展示

目录

一、说明

二、后端接口

1、实体类添加属性

2、Controller层接收前端请求

3、Service层实现数据查询

三、前端调用

1、api

2、组件脚本

3、组件模板

4、流程优化

---

一、说明

数据字典我们采用树型列表展示，这里我们使用element-ui表格中的树形数据与懒加载，如下

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。 

提供的样例代码如下： 

 两个表格对应两种加载方案，我们使用延迟加载

 

二、后端接口

1、实体类添加属性

Dict中添加hasChildren属性

    @ApiModelProperty(value = "是否包含子节点")
    @TableField(exist = false) // 表达逻辑概念的属性，和物理表没有关系，不存在于物理表中
    private Boolean hasChildren;  // 前端展示数据需要指定是否有子数据时使用

2、Controller层接收前端请求

@ApiOperation("根据上级id获取子节点数据列表")
@GetMapping("/listByParentId/{parentId}")
public R listByParentId(
    @ApiParam(value = "上级节点id", required = true)
    @PathVariable Long parentId) {
    List dictList = dictService.listByParentId(parentId);
    return R.ok().data("list", dictList);
}

3、Service层实现数据查询

接口：DictService

List listByParentId(Long parentId);

实现：DictServiceImpl

@Override
public List listByParentId(Long parentId) {
    List dictList = baseMapper.selectList(new QueryWrapper().eq("parent_id", parentId));
    dictList.forEach(dict -> {
        //如果有子节点，则是非叶子节点
        boolean hasChildren = this.hasChildren(dict.getId());
        dict.setHasChildren(hasChildren);
    });
    return dictList;
}

/**
     * 判断该节点是否有子节点
     */
private boolean hasChildren(Long id) {
    QueryWrapper queryWrapper = new QueryWrapper().eq("parent_id", id);
    Integer count = baseMapper.selectCount(queryWrapper);
    if(count.intValue() > 0) {
        return true;
    }
    return false;
}

三、前端调用

创建 src/api/core/dict.js

1、api

import request from '@/utils/request'
export default {
  listByParentId(parentId) {
    return request({
      url: `/admin/core/dict/listByParentId/${parentId}`,
      method: 'get'
    })
  }
}

2、组件脚本

在data中定义要展示的列表对象list，并且创建生命周期函数created，在产生的时候就查询数据库展示列表

export default {
  data() {
    return {
      dialogVisible: false, //文件上传对话框是否显示
      BASE_API: process.env.VUE_APP_BASE_API, //获取后端接口地址
      list: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据字典列表
    fetchData() {
      dictApi.listByParentId(1).then((response) => {
        this.list = response.data.list
      })
    },
  },
}

3、组件模板

展示列表的ui组件

4、流程优化

excel文件上传成功后需要重新查询一次数据库，自动刷新页面

//上传成功回调
fileUploadSuccess(response) {
    if (response.code === 0) {
        this.$message.success('数据导入成功')
        this.dialogVisible = false
        this.fetchData()
    } else {
        this.$message.error(response.message)
    }
},