尚医通 (十七) --------- 数据字典开发

柔情只为你懂 2024-04-01 18:59 94阅读 0赞

#### 目录 ####

*  一、搭建 service-cmn
 *  二、数据字典列表
 *   *  1. 数据字典列表接口
     *  2. 数据字典列表前端

--------------------

## 一、搭建 service-cmn ##

**A、新建模块**

![在这里插入图片描述][310dd4cfb1344f01a4a3c6e5a0582881.png]  
![在这里插入图片描述][87eb9356ff7e4117b4ee5216ab9065ba.png]

**B、修改配置**

修改 pom.xml

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>com.fancy.yygh</groupId>
            <artifactId>service</artifactId>
            <version>1.0</version>
        </parent>
    
        <version>1.0</version>
        <artifactId>service-cmn</artifactId>
        <packaging>jar</packaging>
        <name>service-cmn</name>
        <description>service-cmn</description>
    
        <dependencies>
        </dependencies>
    
        <build>
            <finalName>service-cmn</finalName>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

添加配置文件 application.properties

# 服务端口
    server.port=8202
    # 服务名
    spring.application.name=service-cmn
    
    # 环境设置：dev、test、prod
    spring.profiles.active=dev
    
    # mysql数据库连接
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    spring.datasource.url=jdbc:mysql://192.168.38.130:3306/yygh_cmn?characterEncoding=utf-8&useSSL=false
    spring.datasource.username=root
    spring.datasource.password=root
    
    #返回json的全局时间格式
    spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
    spring.jackson.time-zone=GMT+8

**C、启动类**

package com.fancy.yygh.cmn;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class ServiceCmnApplication {
        
        public static void main(String[] args) {
        
            SpringApplication.run(ServiceCmnApplication.class, args);
        }
    }

## 二、数据字典列表 ##

根据 element 组件要求，返回列表数据必须包含 hasChildren 字典，如图：[https://element.eleme.cn/\#/zh-CN/component/table][https_element.eleme.cn_zh-CN_component_table]

![在这里插入图片描述][2b63c4a74f2c4aafa8272c3dcd2343c0.png]

### 1. 数据字典列表接口 ###

**A、model 模块添加数据字典实体**

在 model 模块查看实体：`com.fancy.yygh.model.cmn.Dict`

@Data
    @ApiModel(description = "数据字典")
    @TableName("dict")
    public class Dict extends BaseEntity {
        
    
        private static final long serialVersionUID = 1L;
    
        @ApiModelProperty(value = "上级id")
        @TableField("parent_id")
        private Long parentId;
    
        @ApiModelProperty(value = "名称")
        @TableField("name")
        private String name;
    
        @ApiModelProperty(value = "值")
        @TableField("value")
        private String value;
    
        @ApiModelProperty(value = "编码")
        @TableField("dict_code")
        private String dictCode;
    
        @ApiModelProperty(value = "是否包含子节点")
        @TableField(exist = false)
        private boolean hasChildren;
    }

说明：hasChildren 为树形组件所需字典，标识为数据库表不存在该字段

**B、添加数据字典 mapper**

添加 com.fancy.yygh.cmn.mapper.DictMapper

public interface DictMapper extends BaseMapper<Dict> {
        
    }

**C、添加数据字典 service**

① 添加 com.fancy.yygh.cmn.service.DictService

public interface DictService extends IService<Dict> {
        
        //根据数据id查询子数据列表
        List<Dict> findChlidData(Long id);
    }

② 添加 com.fancy.yygh.cmn.service.impl.DictServiceImpl 接口实现

@Service
    public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
        
        //根据数据id查询子数据列表
        @Override
        public List<Dict> findChlidData(Long id) {
        
            QueryWrapper<Dict> wrapper = new QueryWrapper<>();
            wrapper.eq("parent_id",id);
            List<Dict> dictList = baseMapper.selectList(wrapper);
            //向list集合每个dict对象中设置hasChildren
            for (Dict dict:dictList) {
        
                Long dictId = dict.getId();
                boolean isChild = this.isChildren(dictId);
                dict.setHasChildren(isChild);
            }
            return dictList;
        }
        //判断id下面是否有子节点
        private boolean isChildren(Long id) {
        
            QueryWrapper<Dict> wrapper = new QueryWrapper<>();
            wrapper.eq("parent_id",id);
            Integer count = baseMapper.selectCount(wrapper);
            // 0>0    1>0
            return count>0;
        }
    }

**D、添加数据字典 controller**

添加 com.fancy.yygh.cmn.controller.DictController

@Api(description = "数据字典接口")
    @RestController
    @RequestMapping("/admin/cmn/dict")
    public class DictController {
        
    
        @Autowired
        private DictService dictService;
    
        //根据数据id查询子数据列表
        @ApiOperation(value = "根据数据id查询子数据列表")
        @GetMapping("findChildData/{id}")
        public Result findChildData(@PathVariable Long id) {
        
            List<Dict> list = dictService.findChlidData(id);
            return Result.ok(list);
        }
    }

### 2. 数据字典列表前端 ###

**A、添加路由**

在 src/router/index.js 文件添加路由

{
        
    	path: '/cmn',
    	component: Layout,
    	redirect: '/cmn/list',
    	name: '数据管理',
    	alwaysShow: true,
    	meta: {
         title: '数据管理', icon: 'example' },
    	children: [
    		{
        
    			path: 'list',
    			name: '数据字典',
    			component: () => import('@/views/dict/list'),
    			meta: {
         title: '数据字典', icon: 'table' }
    		}
    	]
    },

说明：列表与查看都添加了

**B、定义 api**

创建文件 src/api/cmn/dict.js

import request from '@/utils/request'
    export default {
        
        dictList(id) {
        //数据字典列表
            return request ({
        
                url: `/admin/cmn/dict/findChildData/${
          id}`,
                method: 'get'
            })
        }
    }

**C、方法调用**

**D、表格渲染**

<template>
        <div class="app-container">
            <el-table
            :data="list"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="getChildrens"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column label="名称" width="230" align="left">
                <template slot-scope="scope">
                <span>{
       { scope.row.name }}</span>
                </template>
                </el-table-column>
    
                <el-table-column label="编码" width="220">
                <template slot-scope="{row}">
                        {
       { row.dictCode }}
                </template>
                </el-table-column>
                <el-table-column label="值" width="230" align="left">
                <template slot-scope="scope">
                <span>{
       { scope.row.value }}</span>
                </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                <span>{
       { scope.row.createTime }}</span>
                </template>
                </el-table-column>
            </el-table>
        </div>
    </template>

[310dd4cfb1344f01a4a3c6e5a0582881.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/87f67fa0b33842e0877eb5389a26853d.png
[87eb9356ff7e4117b4ee5216ab9065ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4c8a12b080e642bc8df10732a148c678.png
[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[2b63c4a74f2c4aafa8272c3dcd2343c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2768a08c54744456993027bd0adac0ae.png