HRS--人力资源系统（Springboot+vue）--打基础升级--（四）新增员工信息

你的名字 2023-10-14 23:46 38阅读 0赞

> 今天的更新：在员工信息界面，点新增按钮，弹出一个请填写新增员工信息的窗口，然后保存数据

1. 先来看下窗口设计样式

![ee6ebc15c70b421b95774437155fede0.png][]

嗯，感觉这窗口又细又长，果然排版不是我的强项，这里的新增属于管理员的权限界面操作（目前还没做）

2. 样式设计，在做样式设计的时候可以参考[element官网][element]里面有很多提供的模板跟代码

比如这次设计用到的部分，都是好东西

弹窗的样式

![09db0737b2074c1aa1f2bb54b76a2595.png][]

性别的单选框

![7d0df11b59ea40d0831774a52ff97d68.png][]

弹出提示操作结果提示框

![14e3f4c7223b40848e090748123b8347.png][]

我又发现了个可以优化点，就是入职日期的输入框，时间格式，给它搞个可以点的日历上去。

![0da9dabd9be04e5ea17f3dd66c207ccb.png][]

搞里头。。

a few moments late 完美融合，花样多起来了。。

![d14d36e6c6a44cf5a1e6464128875419.png][]

下面直接开搞走起：

![b5900e163fc34a0aad9bae7c6a7404a3.png][]

![775b077449944be0b7b5693f513bdb98.png][]

添加成功。

试试重复添加，肯定报错的，这里在数据库里定义了工号的唯一索引

![4d9f11066d8c4d4d832c8e4c49d42ab9.png][]

成功的话，添加员工信息这个窗口就会消失，失败的则保留，方便修改。

![14baca791f6e46069992d97e6a2fd76d.png][]

[ee6ebc15c70b421b95774437155fede0.png]: https://img-blog.csdnimg.cn/ee6ebc15c70b421b95774437155fede0.png
[element]: https://element.eleme.cn/#/zh-CN/component/notification
[09db0737b2074c1aa1f2bb54b76a2595.png]: https://img-blog.csdnimg.cn/09db0737b2074c1aa1f2bb54b76a2595.png
[7d0df11b59ea40d0831774a52ff97d68.png]: https://img-blog.csdnimg.cn/7d0df11b59ea40d0831774a52ff97d68.png
[14e3f4c7223b40848e090748123b8347.png]: https://img-blog.csdnimg.cn/14e3f4c7223b40848e090748123b8347.png
[0da9dabd9be04e5ea17f3dd66c207ccb.png]: https://img-blog.csdnimg.cn/0da9dabd9be04e5ea17f3dd66c207ccb.png
[d14d36e6c6a44cf5a1e6464128875419.png]: https://img-blog.csdnimg.cn/d14d36e6c6a44cf5a1e6464128875419.png
[b5900e163fc34a0aad9bae7c6a7404a3.png]: https://img-blog.csdnimg.cn/b5900e163fc34a0aad9bae7c6a7404a3.png
[775b077449944be0b7b5693f513bdb98.png]: https://img-blog.csdnimg.cn/775b077449944be0b7b5693f513bdb98.png
[4d9f11066d8c4d4d832c8e4c49d42ab9.png]: https://img-blog.csdnimg.cn/4d9f11066d8c4d4d832c8e4c49d42ab9.png
[14baca791f6e46069992d97e6a2fd76d.png]: https://img-blog.csdnimg.cn/14baca791f6e46069992d97e6a2fd76d.png