医院信息化与智能化系统(9)

这里只描述对应过程，和可能遇到的问题及解决办法以及对应的参考链接，并不会直接每一步详细配置
如果你想通过文字描述或代码画流程图，可以试试PlantUML，告诉GPT你的文件结构，让他给你对应的代码

预约挂号微服务模块搭建

前端知识点补充，此章节不会详细讲具体前端的每个知识点

1、Bug修改

Bug:当点击修改按钮后，跳转到添加页面，再点击医院设置添加，医院的数据并不会清空。

这里涉及到vue中组件重用问题，vue-router导航切换时，如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建。

解决方案：可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。·

修改 src/views/layout/components/AppMain.vue 文件如下：

通过生成动态 key，每次路由发生变化时<router-view>都会重新渲染。这种方法可以避免因为路由名称相同导致的缓存问题，从而确保页面在切换时正确刷新。

<router-view:key="key"></router-view>
...
computed: {
key() {
returnthis.$route.name !== undefined? this.$route.name + +newDate(): this.$route + +newDate()}}

接着之前在add.vue的created方法中，在判断完是否存在id值(if)后，添加一个else语句，即如果执行的是添加操作，则表单数据清空，将hospitalSet属性赋值为空。

2、数据字典介绍

数据字典就是管理系统常用的分类数据或者一些固定数据，例如：省市区三级联动数据、民族数据、行业数据、学历数据等，由于该系统大量使用这种数据，所以我们要做一个数据管理方便管理系统数据，一般系统基本都会做数据管理。

表设计及分析

创建yygh_cmn数据库，里面创建dict表，以下除了(创建时间、更新时间、是否删除字段外)

字段名	含义
id	自身id，每一个name都对应不同的id
parent_id	上级 ID，通过 id 与 parent_id 构建上下级关系
name	名称，用于数据字典中的名称展示
value	值，用于标识数据字典的具体值
dict_code	编码，全局唯一的自定义编码

全部分类是级别最高的，所以它的id是1，并且没有上级；对应省、医院等级、证件类型...，他们属于其下属级别。

value值对应用户填写的信息。1表示医院等级是三级甲等

dict_code的作用是对应医院等级、学历...这一分类，因为它们的parent_id都为1，不好单独区分，所以可以根据编码来获取指定类型数据(比如医院等级都为一级的医院)。

3、搭建service-cmn模块

和搭建service-hosp类似

在后端创建service-cmn模块，首先仿照service-hosp，创建application.properties配置文件

创建启动类ServiceCmnApplication。添加好@SpringBootApplication和@ComponentScan注释和main方法

再创建mapper、controller、service、config文件夹

其中config中创建CmnConfig配置类，用于指定MyBatis Mapper接口所在的包路径以及组件集中声明管理

在model模块已经创建了对数据字典实体类的封装(Dict)，对应其表结构(id、paren_id...)，所以在mapper接口(DictSetMapper)创建时，继承BaseMapper，指定泛型为它即可

封装类的额外操作

• 如果希望在前端使用element-ui创建的表格中呈现多级效果，类似于下拉选项，则必须提供hasChildren 字段来指定哪些行是包含子节点
• 所以在实体类的创建中，需要多添加一个boolean类型属性hasChildren，来表示是否有子节点
• 但是在数据库中并无该字段，所以需要在该属性上添加注解@TableField(exist = false)
• 其是 MyBatis-Plus 框架中的一个注解，用于在实体类的字段上标记该字段不与数据库表中的任何字段对应`

紧接着在service文件夹创建DictService接口和对应的DictServiceImpl

在controller文件夹创建DictController，实例化DictService类，设置@RestController、CrossOrigin等注解

4、数据字典接口-列表功能

在DictController创建对应接口函数

1. 根据数据id查询子数据列表

思路是设置请求方式为get，在url中获取id值，再根据id查找对应paren_id ==id的List<Dict>集合

其中，根据id查询对应集合的功能，需要在DictService中声明该方法，并在DictServiceImpl中实现该方法，逻辑是创建QueryWrapper对象构建条件，判断利用wrapper.eq()方法实现paren_id ==id效果，并根据wrapper返回集合List。

这里还需要一个功能是判断id下是否有子节点，这关系到hasChildren字段的值设置。

接着在findChildData中调用该方法，利用集合遍历，并根据集合中的id再次查询它们作为别人的子节点，是否自己也有子节点。

 //根据数据id查询子数据列表@Overridepublic List<Dict> findChildData(Long id) {QueryWrapper<Dict> wrapper = new QueryWrapper<>();wrapper.eq("parent_id",id);List<Dict> dictList = baseMapper.selectList(wrapper);//向list集合每个dist对象中设置hasChildrenfor (Dict dict :dictList){Long dictId = dict.getId();boolean isChildren = this.isChildren(dictId);dict.setHasChildren(isChildren);}return dictList;}//判断id下面是否有子节点private boolean isChildren(Long id){QueryWrapper<Dict> wrapper = new QueryWrapper<>();wrapper.eq("parent_id",id);Integer count = baseMapper.selectCount(wrapper);return count>0;}

在测试时需要注意两个问题：

• 运行时运行的是8202的配置运行类，而不是之前8201的了，否则开启的是8201的端口，打不开对应的swagger页面
• 在两个模块同时声明同一个mybatis-plus插件时，即Spring Boot 应用中定义了两个同名的 @Bean,由于 Spring Boot 默认不允许 Bean 名称冲突，因此应用启动失败。
• 解决方法:可以选择在一个配置类中重命名 以避免命名冲突。

@Bean(name = "customPaginationInterceptor")
public PaginationInterceptor paginationInterceptor() {return new PaginationInterceptor();
}

前端配置

第一步是在路由router/index.js添加配置，主要包括定义路径、名称、跳转路径等。

其中跳转路径定义为views/dict/list.vue，在api/dict定义接口调用方法

在list.vue中，依旧跟之前一致，在return中初始化变量list:[]作为数据字典列表数组，在method中创建getDictList方法，内部调用dict.js中的dictList方法，在created中，页面渲染前调用getDictList方法，并传id值为1

在前端展示代码中，结合element-ui标签，解释下方内容

:data="list": 绑定了一个名为 list 的数据源，表格会根据这个数据源动态渲染行数据。

:load="getChildrens": 指定当需要加载子节点时调用的函数，这个函数会在懒加载模式下被触发，通常用于获取子节点的数据。

:tree-props="{children: 'children', hasChildren: 'hasChildren'}": 用于定义树形结构的数据属性，children 表示子节点的字段名，hasChildren 表示是否有子节点的字段名。

 <el-table:data="list"style="width: 100%"row-key="id"borderlazy: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>

这里getChildrens函数

• tree：当前树节点的数据对象。tree.id 表示当前节点的唯一标识
• treeNode：Element UI 树形表格组件传递的节点信息对象。这里并未使用，但可以包含节点的层级、状态等信息。
• resolve：一个回调函数，用于通知 el-table 加载完成的数据。将异步请求的数据通过 resolve 返回给表格进行渲染。

getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data)})}

在测试时，需要把dev.env.js中的BASE_API修改为8202，并且修改后需要重新启动npm run dev

还碰到一个问题是，在前端路由定义时，是分为了数据管理和数据字典两个部分的，但是在显示过程中并没有下拉菜单，所以在router/index.js添加alwaysShow:true

在医院等级等下面，并没有下滑按钮显示更下一层级的数据，这里考虑更换element-ui依赖版本，在package.json中，将原有的"element-ui": "2.4.6"改为2.12.0，并在vue-admin-template-master文件夹中找到element-ui文件夹删除(好像不删也可以直接下载覆盖)

如果报错：需要来自administrator的权限才能对此文件夹进行更改参照此处

并且注意把项目关了再删除，随后npm install即可。