说明:这里仅仅开发列表显示 与 查询功能,剩下的添加、修改等可能会遇到报错,后面有机会,会单独写一篇文章教学处理
1.了解开发需求
作为示例的二级开发,这里的人员管理,管理的是 部门信息,员工信息
部门管理:
- 部门管理
- 员工管理
2. 后台页面设计
后台菜单栏设计:
一级菜单:人员管理
二级菜单:部门管理、员工管理
后台页面设计:
1. 部门管理中:
以树状的方式呈现,通过点击当前部门会显示自己的子部门信息(如果存在则显示)
部门信息以树状的方式显示
2. 员工管理:
以列表的形式显示所有的员工信息
3. 数据库设计
(注意:这里的createTime应该写成create_time、以及updateTime也应该写成update_time,才比较规范些,这部分的代码使用 ai 进行生成,刚开始没注意检查,不过,接下我还是会按照生成的代码进行讲解!)
sql 建表语句:
CREATE TABLE tb_employee (id INT AUTO_INCREMENT PRIMARY KEY,dept_id INT NOT NULL,employee_name VARCHAR(100) NOT NULL,employee_avatar VARCHAR(255), -- 存储头像图片的URL或文件路径employee_gender INT NOT NULL DEFAULT 0, -- 0: 未知, 1: 男性, 2: 女性employee_age INT,employee_phone VARCHAR(20),employee_info TEXT,createTime DATETIME DEFAULT CURRENT_TIMESTAMP,updateTime DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;CREATE TABLE tb_dept (id INT AUTO_INCREMENT PRIMARY KEY,dept_name VARCHAR(100) NOT NULL,dept_parent_id INT, -- 如果是顶级部门,则为NULLdept_info TEXT,createTime DATETIME DEFAULT CURRENT_TIMESTAMP,updateTime DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
4. 员工管理 - 开发-查询列表
(1)字典修改
因为所创建的数据库表的tb_employee的字段employee_gender的特殊性
而若依中原来有用户性别表sys_user_sex
我们只需要根据我们的员工表的employee_gender
修改对应的字典键值即可:
(2)首先导入tb_dept和tb_employee表进代码生成器中
生成代码后将其使用后显示的界面(我之前有写过如何使用生成的代码):
(3)员工管理开发
因为员工管理相对比较好开发,所以我先从简单的开始进行开发,首先观察直接生成的表格
我们希望修改的效果:
- 年龄查询:可以选择范围,而不是具体的某个值
- 部门号显示:修改为具体的部门名
- 去掉通过手机号查询方式
我们想去掉手机号的查询方式,只需删除手机号查询的部分代码,以及相关表单的属性即可
实现效果:
将年龄部分的代码,修改为范围查询的代码即可
记得修改查询列表中的参数
可以删除多余的查询条件,这样看起来更加简洁些
前端页面展示:(但是还是无法进行搜索,这是因为还没有修改搜索对应的java代码)
后端代码修改
首先在Employee实体中添加两个额外的查询字段名,以及对应的getter和setter方法
(注意:如果是使用Mybatis-plus记得使用 @TableField(exist = false)注解 标明这两个字段不存在数据库表)
然后在mapper.xml文件中找到对应表格列表的方法名id,修改判断条件为我们页面的查询
这样是成功进行搜索了,但是重置对年龄的范围查询没有反应
找到重置查询按钮的方法,添加这两个字段的重置即可
现在开始将部门号修改为显示为部门名
前端修改:
将显示的deptId字段修改为deptName字段
后端修改:
(建议大家最好重新创建一个新的EmployeeVo),为了方便演示我直接修改Employee的实体类
我在实体类中添加了deptName这个属性,并加上了getter和setter方法,这样方便我待会使用
通过观察代码,修改查询语句与显示的数据属性(这里需要会一点编程能力哦!)
这里你猜为什么还是保留deptId字段没有删除呢?因为我们后面可以还会使用到该deptId添加时,进行部门字典的判断,以及想通过该deptId查看该部门信息等改造,所以最好还是保留id相关的字段信息比较好哦!方便以后的扩展
实现效果:
5. 部门管理 - 开发
通过代码生成器创建导入后显示的界面:
(1)了解需要改造的地方
查询部分:我们需要将上级部门号的查询删除,新增通过创建时间进行查询
列表部分:我们希望添加创建时间和更新时间的列表,同时将上级部门号改造为上级部门名
(2)添加创建时间搜索框
将上级部门号改为上级部门名的方式和上面讲解的员工管理的部门号改造为部门名显示都差不多,所以这部分就当做给大家的练习题咯,接下来我将讲解,如何通过创建时间进行搜索:
前端部分:
需要创建params传递daterangeCreateTime的参数
添加搜索框,我这里选择的是年月日的搜索框
在查询时,将当前的daterangeCreateTime赋值给params
重置效果实现
后端代码:
注意观察实体类,在基础实体类,已经有params字段,所以不需要额外去添加
最后只需要在DeptMapper.xml中修改下面的内容:
为了显示上级部门名:
查询语句的修改
以及对创建时间的范围的搜索
以上就是RuoYi-Vue的简单运用啦!