@TOC
ssm651毕业生学历证明系统+vue
绪论
1.1 课题背景
二十一世纪互联网的出现，改变了几千年以来人们的生活，不仅仅是生活物资的丰富，还有精神层次的丰富。在互联网诞生之前，地域位置往往是人们思想上不可跨域的鸿沟，信息的传播速度极慢，信息处理的速度和要求还是通过人们骑马或者是信鸽传递，这些信息传递都是不可控制的，中间很有可能丢失，信息的传递水平决定了人们生活的水平。如今大家都在使用互联网软件产品，从内部管理设置计算机管理，提高内部信息化的管理水准，从外部市场也可以用计算机获取相关数据进行处理，如今各行各业已经严重依赖于计算机了。
本课题研究和开发毕业生学历证明系统，让安装在计算机上的该系统变成管理人员的小帮手，提高毕业生学历信息处理速度，规范毕业生学历信息处理流程，让管理人员的产出效益更高。
1.2 课题意义
传统处理数据，必须是一张张纸，然后处理完毕又是统计在一张张纸上面，不断的重复处理，最终有个结果给最高层作为参考，这个模式在互联网没有出现之前，是一种常见的事情，信息管理的效率提不上去，人多不一定力量大，因为人多肯定更加消耗资源，并且因为人类需要休息，需要管理，思想会不统一，会偷懒，所以人们研究出专门帮助人们计算的机器，就是计算机的前身，到了互联网时代，人们发现完全可以让程序供应商提供解决方案，自己挑选自己合适的方案来提高自己的产出比。所以在日常工作和生活中会发现各种各样方便人们的工具。
本课题研发的毕业生学历证明系统，就是提供毕业生学历信息处理的解决方案，它可以短时间处理完信息，并且这些信息都有专门的存储设备，而且数据的备份和迁移都可以设定为无人值守，从人力角度和信息处理角度以及信息安全角度，毕业生学历证明系统是完胜传统纸质操作的。
1.3 研究内容
本文对毕业生学历证明系统的设计与实现分成六个章节来说明。
第1章：研究毕业生学历证明系统的背景，以及开发毕业生学历证明系统的意义。
第2章：对开发毕业生学历证明系统的环境还有技术进行说明。
第3章：分析毕业生学历证明系统的可行性，性能，流程以及功能。
第4章：设计毕业生学历证明系统的功能结构，设计数据库E-R图以及对数据表的存储结构进行设计。
第5章：实现毕业生学历证明系统的功能并进行功能界面展示。
第6章：对系统测试进行阐述，以及对本系统部分功能进行检测。
2 开发环境与技术
本章节对开发毕业生学历证明系统需要搭建的开发环境，还有毕业生学历证明系统开发中使用的编程技术等进行阐述。
2.1 Java语言
Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生，不仅仅是创造者感觉C语言在编程上面很麻烦，如果只是专注于业务逻辑的处理，会导致忽略了各种指针以及垃圾回收这些操作，导致出现问题需要解决的时间往往大于正常编程处理业务逻辑的时间，这些是非常浪费时间的。Java语言的创造者就考虑到如何避免这个问题，把指针处理和垃圾处理全部自动化，虽然这会损失一些性能，但是计算机硬件在性能上的发展速度是很快的，这些性能是可以忽略考虑的。并且C语言是针对硬件开发的语言，虽然执行效率高，但是随着硬件的变化或者操作系统的变更，就需要重新编写程序，造成重复劳动，只有解决重复性劳动的语言才算符合生存规律的语言。Java语言的创造者就针对C语言的缺点专门开发了Java语言。让Java语言不管是在什么样的环境里都是可以运行，因为在Java语言运行外面套了一个壳，也就是虚拟机，只要是Java虚拟机能安装的电脑都可以运行Java的程序。
2.2 MYSQL数据库
MySQL数据库是一种数据存放方面的专业软件，也是传统的行式数据模式，获取一些数据是先一行一行的获取，然后一行一行的显示，与列式数据库不同。行式数据库主要是处理最重要的数据逻辑部分，并且必须是有效数据，这样每一处的数据关联都是不可损坏，对数据安全要求比较严格还是用MySQL数据库比较好。列式数据库的发明仅仅是因为读取效率高，但是也就仅仅如此罢了。MySQL虽然比起Oracle或者SQL Server来讲，安装包只是几十兆甚至几百兆，有点小，但是功能并不会弱到哪里，严格遵循SQL标准语法。MySQL的数据存放形式从大向小的说是数据库最大，然后是表，每个表里面存放数据是有一定的规则的，数据存放是表格形式的，也就是说有横也有竖，横着的为行，一般表示一条数据，表与表之间还可以进行关联，进行分表操作，如果一条数据相关项目属性太多，那么可以把有效的相关联系做成关联，可以设定是否唯一。
2.3 IDEA开发工具
IDEA是捷克共和国的Java程序员开发人员创造的一个开发软件，刚开始主要是对于用Eclipse软件他们用得不顺手，所以直接开发了这款软件。之所以不顺手原因在于没有代码提升功能，原因是Eclipse只是把代码提示作为一种插件形式的存在，如果有些程序开发人员不清楚代码提示插件可能会出问题，并且代码提示只是用来作为插件，所以功能上有所欠缺。IDEA不仅仅代码提示做的很好，在代码重构上面更上如虎添翼，程序开发人员可以选择一段代码然后IDEA就会对代码进行分解重构，有效的把代码弄得更够层次感，复用性更高，用着更简洁和方便，大大的减少了代码工作量，提升了代码开发效率。当然，IDEA对于使用者这么好，肯定也是有目的的，原因在于插件越多越友好，就需要花费大量的金钱来使用，所以说IDEA使用主要是看自己喜好。
2.4 SSM框架
开发一个业务逻辑比较简单的应用，采用这几年最广为流传的SSM框架是很合适的。SSM框架就是Spring MVC框架和Spring框架，以及持久层常用的MyBatis框架。
三个框架有三个不同的作用。普通用户一般都是操作浏览器进行浏览自己喜欢的内容，而显示或者提交，都会被Spring MVC框架进行拦截和处理，进入到更深的一个层次就是控制层，它会智能的匹配提交的路径，对不同的来源匹配不同的处理逻辑，让不同的代码进行执行，如果只是判断用户输入信息格式的问题是不用传入到后台就可以被前端框架处理的，如果需要与数据库内容进行交互，就会从Java的POJO对象通过MyBatis自动转换数据库对应字段的数据类型，具体是该增删改查还是其他操作，都会通过MyBatis进行处理，处理结果是反馈给控制层，然后通过控制层再提交给视图层，反馈到用户希望看到的结果。
3 系统分析
本文作者在确定了研究的课题之后，从各大数字图书馆下载文献来阅读，并了解同类型的网站具备的大致功能，然后具体事务具体分析，得出本系统要研究的具体功能与性能。虽然分析系统这一阶段性工作主要是确定功能，但它却影响着后面系统开发环节的进展，系统分析这个环节是不能少的。
3.1 可行性分析
从三个不同的角度来分析，确保开发成功的前提是有可行性分析，只有进行提前分析，符合程序开发流程才不至于开发过程的中断。
3.1.1 技术可行性
在技术实现层次，分析了好几种技术实现方法，并且都有对应的成功案例，也有很多开源模块可以进行参考，所以从技术可行性分析来讲，实现毕业生学历证明系统是没有问题的。
3.1.2 经济可行性
对于身为学生的开发者而言，在经济资源上面可用者很少，为了开发毕业生学历证明系统，通过开发软件对硬件的要求，发现自己的电脑是完全能用来开发的，并且学校机房的配置也可以达到要求。最重要的是选择的技术都可以在网上找到不花钱的教程以及资料，因为不花钱，所以经济方面是具有可行性的。
3.1.3 操作可行性
毕业生学历证明系统的具体实现，本身参考人类的正常操作逻辑，把常用的操作习惯当做主要的导航实现，可以让使用者更快速的理解并且上手操作，实现符合逻辑的操作流程是操作可行性的具体体现。
以上就是从不同的角度来分析，确保了毕业生学历证明系统的正常开展。
3.2 系统流程
毕业生学历证明系统投入使用后，使用者如果能看到相应的流程操作图会提高程序的理解能力。
3.2.1 操作流程
使用者在操作毕业生学历证明系统中，应该按照本系统提供的操作流程（图3.1即为本系统的操作流程图）进行操作，可以减少操作失误，从而节省进入毕业生学历证明系统的时间。
图3.1 系统操作流程
3.2.2 登录流程
毕业生学历证明系统通过登录功能（图3.2即为其登录的流程）引导使用者进入指定的功能操作区，也避免非本系统的用户享受本系统提供的服务以及查看本系统提供的信息，进而保证用户安全。
图3.2 登录流程
3.2.3 删除信息流程
毕业生学历证明系统在经过长期使用后，会产生很多的数据信息。为了腾出存储空间存放更多的数据，本系统数据库中存储的数据，一些没有参考价值的数据需要进行删除（图3.3即为删除信息的流程），删除数据过程中，为避免误删，使用者要根据系统的提示来决定是否删除数据。
图3.3 删除信息流程
3.2.4 添加信息流程
毕业生学历证明系统提供可视化的功能操作区，非常方便使用者进行数据操作，当使用者往系统中录入数据时（图3.4即为添加信息的流程），本系统也会进行数据合法性的判断，符合要求的数据才能够在数据库指定表中进行登记。
图3.4 添加信息流程
3.3 性能需求
需求分析少不了对项目用到的硬件设备进行分析，这样才符合正常的分析流程。只谈功能需求不谈性能需求，是一件很严重的事情，可能会导致一些不可控的问题出现。
以下从这几个角度来分析系统性能。
(1)系统数据的容量：从数据角度来分析，每个表和每个数据库，达到的数据量到一定的程度，是否需要分表或者是分库，超过了数据的设定限度，可能会导致数据反映迟钝，容错量增加。
(2)数据精度的要求：需要对需求分析里面数据设定环节，考虑相应的数据精度问题，需要发现数据是常用的精度还是非常用的精度，进而设定不同的数值。
(3)时间响应要求：从用户提交操作，到页面反映，中间有个数据处理的问题，需要考虑预测数据量的大小，提前预案分库分表的设计，数据量再大就要考虑增加列式数据库的问题，这些都不是一拍脑门就能决定的，都需要经验和同行业的数据分析研判，才能符合用户的要求，毕竟响应时间太久操作起来也不舒服。
(4)普适性问题：用户使用应该不需要感知服务端的数据量问题或者响应问题，只需要任意一台电脑，不需要更多的操作，打开浏览器就能用，太多的设置以及操作，不符合普适性操作。
(5)页面设计问题：功能符合要求之后，肯定是要丰富页面的。页面设计才是用户长时间面对的问题，首先考虑数据的整洁性，让页面看起来更加的清爽。颜色与数据方面，该不同颜色就不同颜色，降低用户长时间使用出现的视觉疲劳，让用户使用起来心情不至于太差。
(6)系统的稳定性：正常用户操作系统页面，必须是该提交提交，正常输入符合逻辑，不能随随便便的就出各种问题，导致用户操作疲惫，并且输入的数据和回显的数据符合用户的要求。如果正常操作都会出现问题，那设计就是不稳定的，这一点肯定不行。只要是与数据进行交互的系统，都必须稳定。系统稳定从开发部署角度上来分析，可以考虑数据的冗余备份功能，自动值守功能，机房数据同步，机房分开的功能，这些都可以让系统的稳定性得到提升。
系统的性能需求需要对业务很熟练的情况下判断然后分析，再从系统性能需求来逐条实现，可以让设计的系统有使用价值。
3.4 功能需求
毕业生学历证明系统根据使用权限的角度进行功能分析，并运用用例图来展示各个权限需要操作的功能。
图3.5即为管理员用例图，管理员权限操作的功能包括管理用户的签约单位信息，管理用户的学历信息，管理用户的转接地信息，管理基础数据，其中基础信息管理包括部门管理，职位管理，班级管理，成分管理，学习形式管理，学制管理，专业管理，学历性质管理，转接地类型管理等。
图3.5 管理员用例图
管理员包括的功能模块有：个人中心，基础数据管理，签约单位管理，学历管理，用户管理，转接地管理等功能。
（1）个人中心：主要是帮助管理员更改密码，查看个人信息并更改。
（2）基础数据管理：主要包括部门管理，职位管理，班级管理，成分管理，学习形式管理，学制管理，专业管理，学历性质管理，转接地类型管理等功能。管理员主要是增删改查部门信息，职位信息，班级信息，成分信息，学习形式信息，学制信息，专业信息，学历性质信息，转接地类型信息等。
（3）签约单位管理：签约单位信息包括单位名称，单位地址，部门，职位，月薪，合同文件，签约时间，合同开始时间，合同结束时间，用户姓名，用户手机号等信息，管理员主要是增删改查签约单位信息。
（4）学历管理：学历信息包括用户姓名，用户手机号，转接地类型，转接地名称，学历编号，证件照，身份证号，证书编号，认证编号，学历性质，学制，学习形式，毕业院校，专业，班级，入校年月，成分等信息。管理员主要是增删改查学历信息。
（5）用户管理：用户信息主要包括用户手机号，用户性别，用户姓名，电子邮箱，用户头像等信息，管理员主要是增删改查用户信息。
（6）转接地管理：转接地信息包括转接地地址，转接地类型，转接地名称，转接地编号，录入时间等信息，管理员主要是增删改查转接地信息。
（7）管理员登录：实现管理员对毕业生学历证明系统的登录功能。
图3.6即为用户用例图，用户权限操作的功能包括管理签约单位信息，主要是增删改查签约单位信息，查看学历信息，查看转接地信息等。
图3.6 用户用例图
用户包括的功能模块有个人中心，签约单位管理，学历查看，转接地查看等功能。
（1）个人中心：主要是帮助用户更改密码，查看个人信息并更改。
（2）-签约单位管理：用户也能增删改查签约单位信息。
（3）学历查看：用户主要是查询学历，查看学历详细信息。
（4）转接地查看：用户主要是查询转接地，查看转接地详细信息。
（5）注册登录：实现用户注册毕业生学历证明系统以及登录毕业生学历证明系统的功能。
4 系统设计
用户对着浏览器操作，肯定会出现某些不可预料的问题，但是不代表着系统对于用户在浏览器上的操作不进行处理，所以说，要提前考虑可能会出现的问题。
4.1 系统设计思想
系统设计，肯定要把设计的思想进行统一，只有统一的思想才能指导程序的开发，并且可以让众多的程序开发人员更快速的进入状态，提高开发速度。根据当前系统的既定需求，下面将进行本系统设计思想的阐述。
(1)扩展性：开发任何一个系统的时候不可避免要考虑这个问题。软件版本的更迭是一种常识，任何一个软件都不会一次性开发就成永恒，软件是一个不断成长的东西。所以考虑问题的时候需要对当前问题进行数据上的扩大化，然后进行归纳整理，最终形成具有一定扩展性的程序。程序的可扩展性必然会影响开发进度，所以最终需要综合评估程序的可扩展程度，进而有的放矢，循序开发。
(2)实用性：程序设计是一个先高屋建瓴式的设想，然后再具体化，实用性就是具体化的第一个步骤，要充分考虑使用者是不懂程序设计的这一点，使用者只是懂得常规性的上网操作步骤，并不需要对程序进行理解，所以一定要让使用者感觉到便利，感觉到实用性的存在，如果使用者使用程序过程中没发现使用程序的好处，那么程序设计的实用性将大大降低。
(3)安全性：当使用者使用的过程中，会产生大量的相关数据，这些数据必须有安全性的保证，否则当使用者发现数据出现问题的原因是程序设计问题的时候，将会对程序开发者失去信任，甚至可能会产生大量的费用赔偿问题，这是一个不可避免的问题。所以安全性关系开发与使用者双方的经济利益，程序的安全性是一定要保证的。
(4)先进性：程序设计的先进性是开发者进行考虑的，必须要在满足系统功能的前提下，必须要选择好当下最合适的技术。最合适的技术要从开发成本，使用成本以及维护成本里面综合分析，经过综合分析后要让技术实现最优解，保持先进的技术生产力。
(5)维护性：程序开发之初就要考虑以后的维护问题。维护是在程序开发完毕，已经上线可以运作，进入生产试用过程和使用过程中才会发现需要维护的必要。要通过各方面降低维护成本，不是说维护的越少就代表程序开发的越完美，程序既然是人类进行设计制造的，肯定有很多不可避免的问题产生，那么如何维护好程序的正常运作也是一门很重要的学问。
4.2 功能结构设计
图4.1即为设计的管理员功能结构，管理员权限操作的功能包括管理用户的签约单位信息，管理用户的学历信息，管理用户的转接地信息，管理基础数据，其中基础信息管理包括部门管理，职位管理，班级管理，成分管理，学习形式管理，学制管理，专业管理，学历性质管理，转接地类型管理等。
图4.1 管理员功能结构
图4.2即为设计的用户功能结构，用户权限操作的功能包括管理签约单位信息，主要是增删改查签约单位信息，查看学历信息，查看转接地信息等。
图4.2 用户功能结构
4.3 数据库设计
毕业生学历证明系统运行中产生的数据需要按照提前设置的存储规则进行保存，设计出一个符合项目的最优数据存储格式，因为它能减少用户的等待时间，还可以对系统的请求在最短时间内进行响应。所以，对数据库设计时，需要对功能需求进行详细的拆分，以及对业务状态的细分，然后设计具体的存储规则，保证数据库能正常运作，缩短数据处理时间，并在一定程度上降低数据冗余，节省存储空间。
4.3.1 数据库概念设计
实体-联系图还有一个名称即E-R图，是Entity Relationship Diagram各英文单词首字母的缩写，它这种概念模型通常用于对现实世界进行描述。同时它还是一种能够直观表达数据中实体，联系，属性的有效手段。绘制E-R图能够选择的工具也有很多，但是Office Visio 这款软件在E-R图的绘制上一般都是作为首选工具，因为它是基于可视化处理，使用它创建E-R图非常简单。使用基本的E-R图构成元素，比如椭圆，菱形，矩形，还有实线段来表达对应的信息，椭圆代表属性，即实体的特征，矩形代表实体，即数据库中的一个具体数据表，菱形代表实体中相互关系，实线段主要是完成椭圆，矩形，菱形的连接。
（1）图4.4即为签约单位这个实体所拥有的属性值。
图4.4 签约单位实体属性图
（2）图4.5即为学历这个实体所拥有的属性值。
图4.5 学历实体属性图
（3）图4.6即为用户这个实体所拥有的属性值。
图4.6 用户实体属性图
- 图4.7即为管理员这个实体所拥有的属性值。
图4.7 管理员实体属性图
- 图4.8即为上面介绍的实体中存在的联系。
图4.8 实体间关系E-R图
4.3.2 数据库物理设计
本小节主要任务即是根据上述内容进行数据存储结构的设计，实体的属性就用来表示字段名称，不同的字段表示的数据类型以及取值都不相同，以及该表各个字段是否能够保持空等进行说明，设计完成一张数据表的结构之后，在保存时同样要命名，尽量选择英文名称进行命名并保存，还不容易导致系统出错。接下来就对设计的表进行简单说明。
表4.1 签约单位表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| yonghu_id | 用户 | int(11) | 是 |
| qianyuedanwei_uuid_number | 签约编号 | varchar(200) | 是 |
| qianyuedanwei_name | 单位名称 | varchar(200) | 是 |
| qianyuedanwei_address | 单位地址 | varchar(200) | 是 |
| qianyuedanwei_bumen_types | 部门 | int(11) | 是 |
| qianyuedanwei_zhiwei_types | 职位 | int(11) | 是 |
| qianyuedanwei_yuexin | 月薪 | decimal(10,2) | 是 |
| qianyuedanwei_file | 合同文件 | varchar(200) | 是 |
| qianyue_time | 签约时间 | timestamp | 是 |
| qianyue_kaishi_time | 合同开始时间 | timestamp | 是 |
| qianyue_jieshu_time | 合同结束时间 | timestamp | 是 |
| qianyuedanwei_content | 签约备注 | text | 是 |
| insert_time | 录入时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4.2 管理员表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | bigint(20) | 否 |
| username | 用户名 | varchar(100) | 否 |
| password | 密码 | varchar(100) | 否 |
| role | 角色 | varchar(100) | 是 |
| addtime | 新增时间 | timestamp | 否 |
表4.3 学历表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| yonghu_id | 用户 | int(11) | 是 |
| zhuanjiedi_id | 转接地 | int(11) | 是 |
| xueli_uuid_number | 学历编号 | varchar(200) | 是 |
| zhengjian_photo | 证件照 | varchar(200) | 是 |
| xueli_name | 姓名 | varchar(200) | 是 |
| xueli_id_number | 身份证号 | varchar(200) | 是 |
| xueli_zhengshu_number | 证书编号 | varchar(200) | 是 |
| xueli_renzhengbianhao_number | 认证编号 | varchar(200) | 是 |
| xuelixingbie_types | 性别 | int(11) | 是 |
| xueli_chushengnianyue | 出生年月 | varchar(200) | 是 |
| xueli_guoji | 国籍 | varchar(200) | 是 |
| xueli_minzu | 民族 | varchar(200) | 是 |
| xuelixingzhi_types | 学历性质 | int(11) | 是 |
| xueli_xuezhi_types | 学制 | int(11) | 是 |
| xueli_xuexixingshi_types | 学习形式 | int(11) | 是 |
| xueli_biyeyuanxiao | 毕业院校 | varchar(200) | 是 |
| xueli_zhuanye_types | 专业 | int(11) | 是 |
| xueli_banji_types | 班级 | int(11) | 是 |
| xueli_ruxiaonianyue | 入校年月 | varchar(200) | 是 |
| xueli_biyenianyue | 毕业年月 | varchar(200) | 是 |
| xueli_chengfen_types | 成分 | int(11) | 是 |
| xueli_lianxifangshi_phone | 联系方式 | varchar(200) | 是 |
| xueli_yesno_types | 审核状态 | int(11) | 是 |
| xueli_yesno_text | 审核意见 | text | 是 |
| xueli_delete | 逻辑删除 | int(11) | 是 |
| insert_time | 录入时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4.4 用户表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| username | 账户 | varchar(200) | 是 |
| password | 密码 | varchar(200) | 是 |
| yonghu_name | 用户姓名 | varchar(200) | 是 |
| yonghu_phone | 用户手机号 | varchar(200) | 是 |
| yonghu_id_number | 用户身份证号 | varchar(200) | 是 |
| yonghu_photo | 用户头像 | varchar(200) | 是 |
| sex_types | 性别 | int(11) | 是 |
| yonghu_email | 电子邮箱 | varchar(200) | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4.5 转接地表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| zhuanjiedi_uuid_number | 转接地编号 | varchar(200) | 是 |
| zhuanjiedi_name | 转接地名称 | varchar(200) | 是 |
| zhuanjiedi_address | 转接地地址 | varchar(200) | 是 |
| zhuanjiedi_types | 转接地类型 | int(11) | 是 |
| zhuanjiedi_erji_types | 二级类型 | int(11) | 是 |
| zhuanjiedi_content | 转接地详情 | text | 是 |
| shangdian_shouyin_content | 签约备注 | text | 是 |
| insert_time | 录入时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
5 系统实现
编程人员在搭建的开发环境中，会让各种编程技术一起呈现出最终效果。本节就展示关键部分的页面效果。
5.1 管理员功能实现
5.1.1 签约单位管理
图5.1 即为编码实现的签约单位管理界面，管理员在签约单位管理界面中新增签约单位信息，签约单位信息包括单位名称，单位地址，部门，职位，月薪，合同文件，签约时间，合同开始时间，合同结束时间，用户姓名，用户手机号等信息，已经登记的签约单位信息，如果发现登记出错的信息，可以针对性的修改，签约信息失效之后，管理员可以使用删除功能来删除需要删除的签约信息。当本界面存在过多的签约单位信息之后，就需要使用查询功能来实现对签约单位信息的查询，查询前，需要在查询编辑框中登记相应信息，比如使用单位名称查询，那么就需要登记单位名称来查询签约单位信息，使用部门信息查询，那么就需要选择部门来查询签约单位信息等。
图5.1 签约单位管理界面
5.1.2 学历管理
图5.2 即为编码实现的学历管理界面，管理员在学历管理界面中可以登记用户的学历信息，学历信息包括用户姓名，用户手机号，转接地类型，转接地名称，学历编号，证件照，身份证号，证书编号，认证编号，学历性质，学制，学习形式，毕业院校，专业，班级，入校年月，成分等信息，已经登记的学历信息，如果存在登记有误的情况，可以使用修改功能进行更正，学历信息失效之后，可以使用删除功能删除学历信息。同时，管理员也能在众多学历信息中通过查询功能来查询学历信息，查询前，需要选择查询方式，如果选择学历性质查询，那么管理就需要选择学历性质进行学历信息的查询，如果选择用户姓名查询，那么需要在查询框中编辑用户姓名来查询学历信息等。
图5.2 学历管理界面
5.1.3 用户管理
图5.3 即为编码实现的用户管理界面，管理员在用户管理界面为用户的账户重置密码，当用户信息比较多时，可以使用查询功能来查询用户，查询前，需要在查询框中编辑用户姓名来查询用户，同时，在用户管理界面，管理员也能新增用户信息，用户信息主要包括用户手机号，用户性别，用户姓名，电子邮箱，用户头像等信息，登记的用户信息存在登记出错的情况时，可以使用修改功能及时更正，用户信息失效，管理员就可以使用删除功能来删除用户信息。
图5.3 用户管理界面
5.1.4 转接地管理
图5.4 即为编码实现的转接地管理界面，管理员在转接地管理界面中新增转接地信息，转接地信息包括转接地地址，转接地类型，转接地名称，转接地编号，录入时间等信息，登记的转接地信息存在登记出错的情况也不用担心，可以使用修改功能及时更正信息，转接地信息失效之后，管理员可以使用删除功能来删除转接地信息。在转接地管理界面，管理员也能使用查询功能来查询转接地信息，查询前，选择转接地编号，转接地名称，转接地类型，二级类型这四种查询方式中的任意一种即可完成对转接地信息的查询。
图5.4 转接地管理界面
5.1.5 学习形式管理
图5.5 即为编码实现的学习形式管理界面，管理员在学习形式管理界面中新增学习形式信息，学习形式信息包括学习形式编码，学习形式名称信息，管理员可以使用修改功能来实现对登记有误的学习形式信息的更改，使用删除功能来删除需要删除的学习形式信息，同时可以在查询框中编辑学习形式名称来实现对学习形式信息的查询。
图5.5 学习形式管理界面
5.1.6 学历性质管理
图5.6 即为编码实现的学历性质管理界面，管理员在学历性质管理界面中新增学历性质信息，学历性质信息包括学历性质编码，学历性质名称信息，管理员可以使用修改功能来实现对登记有误的学历性质信息的更改，使用删除功能来删除需要删除的学历性质信息，同时可以在查询框中编辑学历性质名称来实现对学历性质信息的查询。
图5.6 学历性质管理界面
5.1.7 转接地类型管理
图5.7 即为编码实现的转接地类型管理界面，管理员在转接地类型管理界面中新增转接地类型信息，转接地类型信息包括转接地类型编码，转接地类型名称信息，管理员可以使用修改功能来实现对登记有误的转接地类型信息的更改，使用删除功能来删除需要删除的转接地类型信息，同时可以在查询框中编辑转接地类型名称来实现对转接地类型信息的查询。
图5.7 转接地类型管理界面
5.2 用户功能实现
5.2.1 签约单位管理
图5.8 即为编码实现的签约单位管理界面，用户在签约单位管理界面中可以新增签约单位信息，可以查询签约单位信息，可以更改登记错误的签约单位信息，同时可以对需要删除的签约单位信息进行删除等。签约单位信息主要包括单位名称，单位地址，部门，职位，月薪，合同文件，签约时间，合同开始时间，合同结束时间，用户姓名，用户手机号等信息。
图5.8 签约单位管理界面
5.2.2 学历查看
图5.9 即为编码实现的学历查看界面，用户在学历查看界面中主要是对自己的学历信息进行查看。学历信息包括用户姓名，用户手机号，转接地类型，转接地名称，学历编号，证件照，身份证号，证书编号，学历性质，学制，学习形式，毕业院校，专业，班级，入校年月，成分等信息。
图5.9 学历查看界面
5.2.3 转接地查看
图5.10 即为编码实现的转接地查看界面，用户在转接地查看界面中可以查看转接地详细信息，可以查询转接地信息。转接地信息包括转接地地址，转接地类型，转接地名称，转接地编号，录入时间等信息。
图5.10 转接地查看界面
5.2.4 个人信息
图5.11 即为编码实现的个人信息界面，用户在个人信息界面中更改头像，更改电子邮箱等信息，更改后的信息需要及时保存。
图5.11 个人信息界面
系统
ZhuanjiediController.java
package com.controller;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.ZhuanjiediEntity;
import com.entity.view.ZhuanjiediView;
import com.service.DictionaryService;
import com.service.TokenService;
import com.service.YonghuService;
import com.service.ZhuanjiediService;
import com.utils.PageUtils;
import com.utils.PoiUtil;
import com.utils.R;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.net.URL;
import java.text.SimpleDateFormat;
import java.util.*;
/**
* 转接地
* 后端接口
* @author
* @email
*/
@RestController
@Controller
@RequestMapping("/zhuanjiedi")
public class ZhuanjiediController {
private static final Logger logger = LoggerFactory.getLogger(ZhuanjiediController.class);
@Autowired
private ZhuanjiediService zhuanjiediService;
@Autowired
private TokenService tokenService;
@Autowired
private DictionaryService dictionaryService;
//级联表service
@Autowired
private YonghuService yonghuService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永不会进入");
else if("用户".equals(role))
params.put("yonghuId",request.getSession().getAttribute("userId"));
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
PageUtils page = zhuanjiediService.queryPage(params);
//字典表数据转换
List<ZhuanjiediView> list =(List<ZhuanjiediView>)page.getList();
for(ZhuanjiediView c:list){
//修改对应字典表字段
dictionaryService.dictionaryConvert(c, request);
}
return R.ok().put("data", page);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
ZhuanjiediEntity zhuanjiedi = zhuanjiediService.selectById(id);
if(zhuanjiedi !=null){
//entity转view
ZhuanjiediView view = new ZhuanjiediView();
BeanUtils.copyProperties( zhuanjiedi , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody ZhuanjiediEntity zhuanjiedi, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,zhuanjiedi:{}",this.getClass().getName(),zhuanjiedi.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永远不会进入");
Wrapper<ZhuanjiediEntity> queryWrapper = new EntityWrapper<ZhuanjiediEntity>()
.eq("zhuanjiedi_uuid_number", zhuanjiedi.getZhuanjiediUuidNumber())
.eq("zhuanjiedi_name", zhuanjiedi.getZhuanjiediName())
.eq("zhuanjiedi_address", zhuanjiedi.getZhuanjiediAddress())
.eq("zhuanjiedi_types", zhuanjiedi.getZhuanjiediTypes())
.eq("zhuanjiedi_erji_types", zhuanjiedi.getZhuanjiediErjiTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
ZhuanjiediEntity zhuanjiediEntity = zhuanjiediService.selectOne(queryWrapper);
if(zhuanjiediEntity==null){
zhuanjiedi.setInsertTime(new Date());
zhuanjiedi.setCreateTime(new Date());
zhuanjiediService.insert(zhuanjiedi);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody ZhuanjiediEntity zhuanjiedi, HttpServletRequest request){
logger.debug("update方法:,,Controller:{},,zhuanjiedi:{}",this.getClass().getName(),zhuanjiedi.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
// if(false)
// return R.error(511,"永远不会进入");
//根据字段查询是否有相同数据
Wrapper<ZhuanjiediEntity> queryWrapper = new EntityWrapper<ZhuanjiediEntity>()
.notIn("id",zhuanjiedi.getId())
.andNew()
.eq("zhuanjiedi_uuid_number", zhuanjiedi.getZhuanjiediUuidNumber())
.eq("zhuanjiedi_name", zhuanjiedi.getZhuanjiediName())
.eq("zhuanjiedi_address", zhuanjiedi.getZhuanjiediAddress())
.eq("zhuanjiedi_types", zhuanjiedi.getZhuanjiediTypes())
.eq("zhuanjiedi_erji_types", zhuanjiedi.getZhuanjiediErjiTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
ZhuanjiediEntity zhuanjiediEntity = zhuanjiediService.selectOne(queryWrapper);
if(zhuanjiediEntity==null){
zhuanjiediService.updateById(zhuanjiedi);//根据id更新
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Integer[] ids){
logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
zhuanjiediService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 批量上传
*/
@RequestMapping("/batchInsert")
public R save(String fileName, HttpServletRequest request){
logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
try {
List<ZhuanjiediEntity> zhuanjiediList = new ArrayList<>();//上传的东西
Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
Date date = new Date();
int lastIndexOf = fileName.lastIndexOf(".");
if(lastIndexOf == -1){
return R.error(511,"该文件没有后缀");
}else{
String suffix = fileName.substring(lastIndexOf);
if(!".xls".equals(suffix)){
return R.error(511,"只支持后缀为xls的excel文件");
}else{
URL resource = this.getClass().getClassLoader().getResource("../../upload/" + fileName);//获取文件路径
File file = new File(resource.getFile());
if(!file.exists()){
return R.error(511,"找不到上传文件，请联系管理员");
}else{
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
dataList.remove(0);//删除第一行，因为第一行是提示
for(List<String> data:dataList){
//循环
ZhuanjiediEntity zhuanjiediEntity = new ZhuanjiediEntity();
// zhuanjiediEntity.setZhuanjiediUuidNumber(data.get(0)); //转接地编号 要改的
// zhuanjiediEntity.setZhuanjiediName(data.get(0)); //转接地名称 要改的
// zhuanjiediEntity.setZhuanjiediAddress(data.get(0)); //转接地地址 要改的
// zhuanjiediEntity.setZhuanjiediTypes(Integer.valueOf(data.get(0))); //转接地类型 要改的
// zhuanjiediEntity.setZhuanjiediErjiTypes(Integer.valueOf(data.get(0))); //二级类型 要改的
// zhuanjiediEntity.setZhuanjiediContent("");//详情和图片
// zhuanjiediEntity.setShangdianShouyinContent("");//详情和图片
// zhuanjiediEntity.setInsertTime(date);//时间
// zhuanjiediEntity.setCreateTime(date);//时间
zhuanjiediList.add(zhuanjiediEntity);
//把要查询是否重复的字段放入map中
//转接地编号
if(seachFields.containsKey("zhuanjiediUuidNumber")){
List<String> zhuanjiediUuidNumber = seachFields.get("zhuanjiediUuidNumber");
zhuanjiediUuidNumber.add(data.get(0));//要改的
}else{
List<String> zhuanjiediUuidNumber = new ArrayList<>();
zhuanjiediUuidNumber.add(data.get(0));//要改的
seachFields.put("zhuanjiediUuidNumber",zhuanjiediUuidNumber);
}
}
//查询是否重复
//转接地编号
List<ZhuanjiediEntity> zhuanjiediEntities_zhuanjiediUuidNumber = zhuanjiediService.selectList(new EntityWrapper<ZhuanjiediEntity>().in("zhuanjiedi_uuid_number", seachFields.get("zhuanjiediUuidNumber")));
if(zhuanjiediEntities_zhuanjiediUuidNumber.size() >0 ){
ArrayList<String> repeatFields = new ArrayList<>();
for(ZhuanjiediEntity s:zhuanjiediEntities_zhuanjiediUuidNumber){
repeatFields.add(s.getZhuanjiediUuidNumber());
}
return R.error(511,"数据库的该表中的 [转接地编号] 字段已经存在 存在数据为:"+repeatFields.toString());
}
zhuanjiediService.insertBatch(zhuanjiediList);
return R.ok();
}
}
}
}catch (Exception e){
e.printStackTrace();
return R.error(511,"批量插入数据异常，请联系管理员");
}
}
}
PoiUtil.java
package com.utils;
import org.apache.commons.io.FileUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;
/**
* 文件导入到处
*/
public class PoiUtil {
/**
* 导入
*
* @param url
* @return
* @throws Exception
*/
public static List<List<String>> poiImport(String url) throws Exception {
List<List<String>> list = new ArrayList<>();
// 创建Excel 读取文件内容
HSSFWorkbook workbook = new HSSFWorkbook(FileUtils.openInputStream(new File(url)));
/**
* 第一种方式读取Sheet页
*/
// HSSFSheet sheet = workbook.getSheet("Sheet0");
/**
* 第二种方式读取Sheet页
*/
HSSFSheet sheet = workbook.getSheetAt(0);//获取工作表
for (int i = 0; i < sheet.getLastRowNum()+1; i++) {
HSSFRow row = sheet.getRow(i);//获取行
List<String> rowlist = new ArrayList<>();//行数据
for (int j = 0; j < row.getLastCellNum(); j++) {
HSSFCell cell = row.getCell(j);
cell.setCellType(Cell.CELL_TYPE_STRING);
String value = cell.getStringCellValue();
rowlist.add(value);//行中数据添加到行中
}
list.add(rowlist);//将行数据添加到list中
}
return list;
}
// 导出
public static void poiExport(List<List<String>> list, String url) throws Exception {
//创建Excel工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
//创建一个工作表shheet
HSSFSheet sheet = workbook.createSheet();
for (int i = 0; i < list.size(); i++) {
HSSFRow row = sheet.createRow(i);
List<String> dataList = list.get(i);
for (int j = 0; j < dataList.size(); j++) {
HSSFCell cell = row.createCell(j);
cell.setCellValue(dataList.get(j));
}
}
FileOutputStream stream = FileUtils.openOutputStream(new File(url));
workbook.write(stream);
stream.close();
}
public static void main(String[] args) {
try {
//导入
List<List<String>> lists = PoiUtil.poiImport("C:/Users/Administrator/Desktop/工作1.xls");
System.out.println();
//导出
PoiUtil.poiExport(lists, "C:/Users/Administrator/Desktop/工作1.xls");
//
// List<List<String>> list = new ArrayList<>();
// ArrayList<String> dataList = new ArrayList<>();
// dataList.add("标题1");
// dataList.add("标题2");
// dataList.add("标题3");
// list.add(dataList);
// // 追加数据
// for (int i = 1; i < 10; i++) {// 这里的int 起始是1 也就是第二行开始
// ArrayList<String> dataList111 = new ArrayList<>();
// dataList111.add("内容" + i);
// dataList111.add("内容1111111121222222222333333333377777777411111111477777777" + i);
// dataList111.add("内容" + i);
// list.add(dataList111);
// }
// PoiUtil.poiExport(list, "C:/Users/Administrator/Desktop/工作1.xls");
} catch (Exception e) {
e.printStackTrace();
}
}
}
UsersController.java
package com.controller;
import java.util.Arrays;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import com.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.UsersEntity;
import com.service.TokenService;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
/**
* 登录相关
*/
@RequestMapping("users")
@RestController
public class UsersController {
@Autowired
private UsersService usersService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
if(user==null || !user.getPassword().equals(password)) {
return R.error("账号或密码不正确");
}
String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
R r = R.ok();
r.put("token", token);
r.put("role",user.getRole());
r.put("userId",user.getId());
return r;
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
usersService.insert(user);
return R.ok();
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
if(user==null) {
return R.error("账号不存在");
}
user.setPassword("123456");
usersService.update(user,null);
return R.ok("密码已重置为：123456");
}
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,UsersEntity user){
EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/list")
public R list( UsersEntity user){
EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
ew.allEq(MPUtil.allEQMapPre( user, "user"));
return R.ok().put("data", usersService.selectListView(ew));
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
UsersEntity user = usersService.selectById(id);
return R.ok().put("data", user);
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Integer id = (Integer)request.getSession().getAttribute("userId");
UsersEntity user = usersService.selectById(id);
return R.ok().put("data", user);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
user.setPassword("123456");
usersService.insert(user);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
usersService.updateById(user);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
usersService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
list.vue
<template>
<div class="main-content">
<!-- 列表页 -->
<div v-if="showFlag">
<el-form :inline="true" :model="searchForm" class="form-content">
<el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
<el-form-item label="性别类型">
<el-input prefix-icon="el-icon-search" v-model="searchForm.indexNameSearch" placeholder="性别类型" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="success" @click="search()">查询</el-button>
</el-form-item>
</el-row>
<el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
<el-form-item>
<el-button
v-if="isAuth('dictionarySex','新增')"
type="success"
icon="el-icon-plus"
@click="addOrUpdateHandler()"
>新增</el-button>
<el-button
v-if="isAuth('dictionarySex','删除')"
:disabled="dataListSelections.length <= 0"
type="danger"
icon="el-icon-delete"
@click="deleteHandler()"
>删除</el-button>
</el-form-item>
</el-row>
</el-form>
<div class="table-content">
<el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
:header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
:border="contents.tableBorder"
:fit="contents.tableFit"
:stripe="contents.tableStripe"
:row-style="rowStyle"
:cell-style="cellStyle"
:style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
v-if="isAuth('dictionarySex','查看')"
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandler">
<el-table-column v-if="contents.tableSelection"
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="codeIndex"
header-align="center"
label="性别类型编码">
<template slot-scope="scope">
{{scope.row.codeIndex}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="indexName"
header-align="center"
label="性别类型名称">
<template slot-scope="scope">
{{scope.row.indexName}}
</template>
</el-table-column>
<!--<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="beizhu"
header-align="center"
label="备注">
<template slot-scope="scope">
{{scope.row.beizhu}}
</template>
</el-table-column>-->
<el-table-column width="300" :align="contents.tableAlign"
header-align="center"
label="操作">
<template slot-scope="scope">
<el-button v-if="isAuth('dictionarySex','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
<el-button v-if="isAuth('dictionarySex','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
<el-button v-if="isAuth('dictionarySex','删除')" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
clsss="pages"
:layout="layouts"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="Number(contents.pageEachNum)"
:total="totalPage"
:small="contents.pageStyle"
class="pagination-content"
:background="contents.pageBtnBG"
:style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
></el-pagination>
</div>
</div>
<!-- 添加/修改页面 将父组件的search方法传递给子组件-->
<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
import styleJs from "../../../utils/style.js";
export default {
data() {
return {
searchForm: {
key: ""
},
form:{},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
showFlag: true,
sfshVisiable: false,
shForm: {},
chartVisiable: false,
addOrUpdateFlag:false,
contents:null,
layouts: '',
};
},
created() {
this.contents = styleJs.listStyle();
this.init();
this.getDataList();
this.contentStyleChange()
},
mounted() {
},
filters: {
htmlfilter: function (val) {
return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
}
},
components: {
AddOrUpdate,
},
methods: {
contentStyleChange() {
this.contentSearchStyleChange()
this.contentBtnAdAllStyleChange()
this.contentSearchBtnStyleChange()
this.contentTableBtnStyleChange()
this.contentPageStyleChange()
},
contentSearchStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
let textAlign = 'left'
if(this.contents.inputFontPosition == 2) textAlign = 'center'
if(this.contents.inputFontPosition == 3) textAlign = 'right'
el.style.textAlign = textAlign
el.style.height = this.contents.inputHeight
el.style.lineHeight = this.contents.inputHeight
el.style.color = this.contents.inputFontColor
el.style.fontSize = this.contents.inputFontSize
el.style.borderWidth = this.contents.inputBorderWidth
el.style.borderStyle = this.contents.inputBorderStyle
el.style.borderColor = this.contents.inputBorderColor
el.style.borderRadius = this.contents.inputBorderRadius
el.style.backgroundColor = this.contents.inputBgColor
})
if(this.contents.inputTitle) {
document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
el.style.color = this.contents.inputTitleColor
el.style.fontSize = this.contents.inputTitleSize
el.style.lineHeight = this.contents.inputHeight
})
}
setTimeout(()=>{
document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
el.style.color = this.contents.inputIconColor
el.style.lineHeight = this.contents.inputHeight
})
document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
el.style.color = this.contents.inputIconColor
el.style.lineHeight = this.contents.inputHeight
})
document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
el.style.lineHeight = this.contents.inputHeight
})
},10)
})
},
// 搜索按钮
contentSearchBtnStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
el.style.height = this.contents.searchBtnHeight
el.style.color = this.contents.searchBtnFontColor
el.style.fontSize = this.contents.searchBtnFontSize
el.style.borderWidth = this.contents.searchBtnBorderWidth
el.style.borderStyle = this.contents.searchBtnBorderStyle
el.style.borderColor = this.contents.searchBtnBorderColor
el.style.borderRadius = this.contents.searchBtnBorderRadius
el.style.backgroundColor = this.contents.searchBtnBgColor
})
})
},
// 新增、批量删除
contentBtnAdAllStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
el.style.height = this.contents.btnAdAllHeight
el.style.color = this.contents.btnAdAllAddFontColor
el.style.fontSize = this.contents.btnAdAllFontSize
el.style.borderWidth = this.contents.btnAdAllBorderWidth
el.style.borderStyle = this.contents.btnAdAllBorderStyle
el.style.borderColor = this.contents.btnAdAllBorderColor
el.style.borderRadius = this.contents.btnAdAllBorderRadius
el.style.backgroundColor = this.contents.btnAdAllAddBgColor
})
document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
el.style.height = this.contents.btnAdAllHeight
el.style.color = this.contents.btnAdAllDelFontColor
el.style.fontSize = this.contents.btnAdAllFontSize
el.style.borderWidth = this.contents.btnAdAllBorderWidth
el.style.borderStyle = this.contents.btnAdAllBorderStyle
el.style.borderColor = this.contents.btnAdAllBorderColor
el.style.borderRadius = this.contents.btnAdAllBorderRadius
el.style.backgroundColor = this.contents.btnAdAllDelBgColor
})
document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
el.style.height = this.contents.btnAdAllHeight
el.style.color = this.contents.btnAdAllWarnFontColor
el.style.fontSize = this.contents.btnAdAllFontSize
el.style.borderWidth = this.contents.btnAdAllBorderWidth
el.style.borderStyle = this.contents.btnAdAllBorderStyle
el.style.borderColor = this.contents.btnAdAllBorderColor
el.style.borderRadius = this.contents.btnAdAllBorderRadius
el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
})
})
},
// 表格
rowStyle({ row, rowIndex}) {
if (rowIndex % 2 == 1) {
if(this.contents.tableStripe) {
return {color:this.contents.tableStripeFontColor}
}
} else {
return ''
}
},
cellStyle({ row, rowIndex}){
if (rowIndex % 2 == 1) {
if(this.contents.tableStripe) {
return {backgroundColor:this.contents.tableStripeBgColor}
}
} else {
return ''
}
},
headerRowStyle({ row, rowIndex}){
return {color: this.contents.tableHeaderFontColor}
},
headerCellStyle({ row, rowIndex}){
return {backgroundColor: this.contents.tableHeaderBgColor}
},
// 表格按钮
contentTableBtnStyleChange(){
},
// 分页
contentPageStyleChange(){
let arr = []
if(this.contents.pageTotal) arr.push('total')
if(this.contents.pageSizes) arr.push('sizes')
if(this.contents.pagePrevNext){
arr.push('prev')
if(this.contents.pagePager) arr.push('pager')
arr.push('next')
}
if(this.contents.pageJumper) arr.push('jumper')
this.layouts = arr.join()
this.contents.pageEachNum = 10
},
init () {
},
search() {
this.pageIndex = 1;
this.getDataList();
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
let params = {
page: this.pageIndex,
limit: this.pageSize,
sort: 'id',
}
if(this.searchForm.indexNameSearch!='' && this.searchForm.indexNameSearch!=undefined){
params['indexName'] = this.searchForm.indexNameSearch
}
//本表的
params['dicCode'] = "sex_types"//编码名字
params['dicName'] = "性别类型",//汉字名字
this.$http({
url: "dictionary/page",
method: "get",
params: params
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.data.list;
this.totalPage = data.data.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandler(val) {
this.dataListSelections = val;
},
// 添加/修改
addOrUpdateHandler(id,type) {
this.showFlag = false;
this.addOrUpdateFlag = true;
this.crossAddOrUpdateFlag = false;
if(type!='info'){
type = 'else';
}
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id,type);
});
},
// 删除
deleteHandler(id) {
var ids = id
? [Number(id)]
: this.dataListSelections.map(item => {
return Number(item.id);
});
this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.$http({
url: "dictionary/delete",
method: "post",
data: ids
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.search();
}
});
} else {
this.$message.error(data.msg);
}
});
});
},
}
};
</script>
<style lang="scss" scoped>
.slt {
margin: 0 !important;
display: flex;
}
.ad {
margin: 0 !important;
display: flex;
}
.pages {
& /deep/ el-pagination__sizes{
& /deep/ el-input__inner {
height: 22px;
line-height: 22px;
}
}
}
.el-button+.el-button {
margin:0;
}
.tables {
& /deep/ .el-button--success {
height: 30px;
color: rgba(88, 179, 81, 1);
font-size: 12px;
border-width: 1px;
border-style: none none solid none;
border-color: rgba(88, 179, 81, 1);
border-radius: 0px;
background-color: #fff;
}
& /deep/ .el-button--primary {
height: 30px;
color: rgba(88, 179, 81, 1);
font-size: 12px;
border-width: 1px;
border-style: none none solid none;
border-color: rgba(88, 179, 81, 1);
border-radius: 0px;
background-color: #fff;
}
& /deep/ .el-button--danger {
height: 30px;
color: rgba(88, 179, 81, 1);
font-size: 12px;
border-width: 1px;
border-style: none none solid none;
border-color: rgba(88, 179, 81, 1);
border-radius: 0px;
background-color: #fff;
}
& /deep/ .el-button {
margin: 4px;
}
}</style>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
