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



    一、搭建 service-cmn

    A、新建模块

    在这里插入图片描述
    在这里插入图片描述

    B、修改配置

    修改 pom.xml

    
    <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.0modelVersion>
        <parent>
            <groupId>com.fancy.yyghgroupId>
            <artifactId>serviceartifactId>
            <version>1.0version>
        parent>
    
        <version>1.0version>
        <artifactId>service-cmnartifactId>
        <packaging>jarpackaging>
        <name>service-cmnname>
        <description>service-cmndescription>
    
        <dependencies>
        dependencies>
    
        <build>
            <finalName>service-cmnfinalName>
            <plugins>
                <plugin>
                    <groupId>org.springframework.bootgroupId>
                    <artifactId>spring-boot-maven-pluginartifactId>
                plugin>
            plugins>
        build>
    
    project>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    添加配置文件 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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    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);
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    二、数据字典列表

    根据 element 组件要求,返回列表数据必须包含 hasChildren 字典,如图:https://element.eleme.cn/#/zh-CN/component/table

    在这里插入图片描述

    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;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

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

    B、添加数据字典 mapper

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

    public interface DictMapper extends BaseMapper<Dict> {
    }
    
    • 1
    • 2

    C、添加数据字典 service

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

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

    ② 添加 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;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    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);
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    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' }
    		}
    	]
    },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

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

    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'
            })
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    C、方法调用

    <script>
    import dict from '@/api/dict'
    export default {
        data() {
            return {
                list:[] //数据字典列表数组
            }
        },
        created() {
            this.getDictList(1)
        },
        methods: {
            //数据字典列表
            getDictList(id) {
                dict.dictList(id)
                    .then(response => {
                        this.list = response.data
                    })
            },
            getChildrens(tree, treeNode, resolve) {
                dict.dictList(tree.id).then(response => {
                    resolve(response.data)
                })
            }
        }
    }
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
  • 相关阅读:
    深入探讨基于大语言模型的数据标注
    C#中+=的用法
    Flutter 状态管理框架 Provider 和 Get 分析
    武汉新时标文化传媒有限公司模仿创作在短视频内容生产中的价值
    echarts+node+ajax实现时间天气服务器
    将OpenCV配置到本地开发环境
    云原生—运行时环境
    云原生时代顶流消息中间件Apache Pulsar部署实操之Pulsar IO与Pulsar SQL
    分享:使用宝塔搭建属于自己的邮局系统
    机器视觉工程师,公司设置奖金,真的为了奖励你吗?其实和你没关系
  • 原文地址:https://blog.csdn.net/m0_51111980/article/details/127872126