基于spring boot的疫情信息管理系统

@TOC

springboot255基于spring boot的疫情信息管理系统

绪论

1.1研究背景与意义

信息化管理模式是将行业中的工作流程由人工服务，逐渐转换为使用计算机技术的信息化管理服务。这种管理模式发展迅速，使用起来非常简单容易，用户甚至不用掌握相关的专业知识，根据教程指导即可正常使用相关的系统，因而被越来越多的用户所使用。由于相关行业管理信息化，这就使得管理工作不在受到时间和区域的限制，随时随地即可完成相关的工作任务和结果[1]。就目前而言，管理信息化在现代社会中非常流行，使用比较广泛。早在20世纪70年代末，就出现了早期的电子商务，相关的公司企业使用计算机建立专用的内部网络，通过内部网络完成相应的采购、销售等活动，加快相关的企业之间的交易速度，提高了工作效率[2]。

当下，许多行业采用互联网技术将工作流程信息化、数字化，提高了相关人员的服务质量和效率，节约了相关行业的人力、财力、物力等资源，与此同时，人们获取外界的相关信息主要依赖于主流的信息化技术和工具。人们对生活的需求也在不断的发生着变化，为了应对用户的多样化需求，许多相关的第三产业应运而生，管理信息化也逐渐的流行起来，比如电子商务行业。本人通过查询大量学习资料，了解基本的开发系统的基本背景和关键任务，学习与掌握Java语言、web技术、AJAX技术、HTML语言等开发技术，设计系统功能模块，以及MySQL数据库的相关语法和工具，创建和存储数据表格，反映和关联表格之间相互存在的关系，由此对疫情信息管理系统进行研发和实现。

1.2国内外研究现状

大概在20世纪90年代，我国才开始研发疫情信息管理系统，与一些发达国家相比，系统研发起步比较晚。当时的计算机技术刚开始发展起来，国家经济力量比较薄弱，各地区的经济发展水平不平衡，再加上相关的网络应用技术不太先进，我国也使用了一段较长的时间对网络信息化管理进行探索[3]。近些年，因为国家非常重视和支持第三产业的发展，以及人们的日常生活需求越来越离不开信息管理技术的使用，所以我国的信息管理系统行业发展速度非常快，并且相关的体制法规也正在不断地被完善和改进。新时代背景下，根据人们的相关需求，不断地促进着相关产业的产生与发展，一系列电子产品、应用软件、信息管理系统等新时代的产物逐渐出现在人们的视野中，并且在近几年发展迅速，日渐趋于成熟[4]。

与国内相比，国外疫情信息管理系统领域发展较早。国外的计算机技术发展比较成熟，所以系统相关的设计也比较完善。19世纪60年代左右，国外就开始研发疫情信息管理系统，并且不久之后，迅速将其投入市场进行使用。美国、英国等一些发达国家快速发展计算机技术，促进了疫情信息管理系统管理行业信息化建设[5]。而后随着相关的技术不断地发展，覆盖面非常广泛，应用领域比较多，促进着疫情信息管理系统等相关的信息管理系统不断地发展和完善，并且其所设计的系统功能结构也比较合理、全面。相对而言，国外系统的研发在相关领域上还是占据着较大的优势[6]。因此，我们需要吸收国外系统开发领域中的较好的技术精华，发展我国的信息化管理系统，使得其面向大众，能够更好的、更全面的服务于相关的工作人员。

1.3研究内容

现今，互联网在我们的日常生活占据着日益重要的地位，我们也越来越离不开对移动设备、电脑等上网设备的使用。传统的疫情信息管理系统模式主要依靠管理人员纯手工记录的相关信息，比较繁琐，不方便查找，也非常容易出现错误。如今，如果再通过手工记录疫情信息，将大大不利于疫情信息管理系统行业管理相关的疫情信息管理系统信息，严重影响疫情信息管理系统行业的发展。因此，本人结合传统的疫情信息管理系统业务模式和先进的电子信息管理模式，使用Java语言编程设计功能模块，AJAX实现前台和后台之间的交互，MySQL数据库创建和存储数据表格，对疫情信息管理系统进行设计和开发。本系统的设计有利于相关行业实现最大化的资源管理与共享，促进相关行业的信息交流、分工合作，提高相关工作人员的工作效率，最终实现整个疫情信息管理系统行业服务的信息化管理。

1.4论文结构

本文围绕着疫情信息管理系统的整个开发过程，展开了详细的描述和说明，设计和实现本系统的主要工作有：首先分析研究背景、研究状态，其次介绍设计系统时使用到的相关技术，然后通过系统分析确定系统的功能需求，接着通过编码工作详细设计和实现系统，最后再通过系统测试，找出系统存在的问题和解决问题的方法，不断地修改和完善系统。论文内容的组织结构设计如下。

第一章绪论，通过介绍本系统的研究背景、研究现状等内容，帮助用户了解和认识本系统的发展过程。

第二章相关技术介绍，主要介绍了Java语言、B/S模式、MySQL数据库等相关的开发技术，为后期系统的功能实现提供技术上的支持。

第三章系统分析，分析用户的使用需求，以及系统实现的可行性，最后通过用例建模分析与系统相关的参与者及其用例之间的关系。

第四章系统设计，主要根据系统总体功能设计，确定将要设计的系统功能模块，设计相关的数据表格。

第五章系统实现，通过相关的功能模块运行图，展现出系统的主要功能模块操作流程。

第六章系统测试，主要使用功能测试的方式，测试系统的相关功能运行和使用的具体情况。

第七章总结与展望，通过本文的各章节描述总结得出，基本上完成了系统的设计，展望未来将学习和使用更加先进的技术，提高系统的实用性，使得系统更好的服务于使用人员。

1.5本章小结

本章主要介绍了课题的研究背景与意义，研究现状，研究内容等内容，最后介绍了本论文的组织结构设计。信息化管理模式顺应了信息化时代的变化，本人以现在主流的管理模式为前提，根据使用者的相关需求，设计出一款符合大众需求的疫情信息管理系统。

2理论基础

2.1 B/S模式

B/S模式（Browser/Server）是一种比较常用的网络结构模式[7]。B/S模式是由模型、视图、控制器（Model-View-Controller，MVC）结构组成[8]。模型主要是指业务模型，视图主要是指用户界面，控制器主要是控制保证视图和模型的同步执行。B/S模式的三层结构是相互独立的，换句话说，当某一个模块发生修改和更新，其不会对其他模块产生影响。根据B/S的这一特点，可以将对业务逻辑的处理以及约束条件集中到中间层中，便于前端增加对模型和方法的调用和复用。并且可以直接通过中间层对数据库进行相关的操作处理，大大减少了数据库的连接数，节省了计算机的对相关的资源配置空间。

使用B/S模式可以节省系统资源配置，提高研发工作效率，减少开发时间，因而大大提高了我们开发软件的可能性。B/S模式有针对性的改变了传统的客户端/服务器模式（Client/Server，C/S模式），也可以说这是对C/S模式进行了扩展。在这种结构模式中，用户不用再向使用C/S模式一样，下载客户端，其可以直接通过使用浏览器的方式，打开网站地址，即可访问和使用相关的系统功能服务。

2.2 IDEA开发环境

软件开发使用的编程语言有许多种，而每种编程语言需要通过与其相对应的开发平台进行编译和运行。IDEA平台都是目前比较常用的开发环境。IDEA平台是开源的，具有功能强大、可扩展性强等特点，可以应用于C/S模式软件的开发，但是它所占据的内存容量比较大，运行较慢，并且其并未提供Tomcat服务器，运行过程中需要将代码发布到Tomcat服务器中，测试使用的时间较长，故而不太适用于B/S模式软件的开发。

IDEA平台是建立在IDEA平台的基础之上，增加了许多的应用插件，比如Tomcat插件、mail组件等。IDEA平台增加了Tomcat插件，代码编写完成或者更新完成时，程序员无需将代码发布到Tomcat服务器中，可以直接通过调试实现程序的运行。IDEA平台增加了Mail组件，该组件可以为本程序提供标准的邮件方法，便于开发人员完成与邮件功能相关的编译工作。IDEA平台占据的内存空间较小，同时其也具有较高的可扩展性，编程人员可以根据需要添加和使用相关的插件。可以支持主流的开源产品和相关的开发框架，被广泛运用到相关的移动系统、web应用系统等开发中。相比于IDEA平台，本系统比较适合使用IDEA平台进行编程和开发。

2.3 MySQL数据库

MySQL是一种小型的关系型数据库管理系统，因为其运行速度快，占用内存空间小，并且源代码也是开源的，运行和维护成本低，系统性能稳定，受到了许多开发人员的喜爱[9]。考虑到MySQL数据库开发成本低，功能齐全等因素，大多中小型网站选择使用MySQL数据库管理数据信息。

SQL Server也是近几年使用较多的关系型数据库，其与MySQL数据库存在的不同之处主要有，在环境方面，SQL Server数据库比较适合于.NET环境，而MySQL数据库适用于几乎所有的语言；在成本方面，SQL Server数据库是商业化的，其运行多个数据库可许证，虽然有一个免费版，但是只能让你对关系型数据库管理系统有一定的认识与了解，熟悉相关的使用流程。如果要想使用SQL Server数据库的话，就需要支付相关费用，而MySQL数据库是开源的，其对于用户来说，使用是完全免费；在实际应用方面，SQL Server数据库和MySQL数据库均支持Java语言、PHP语言、C++语言等多种编程语言，但是MySQL数据库除了支持上述SQL Server数据库能支持的编程语言外，还支持Scheme、Eiffel等其他编程语言，故而MySQL数据库受欢迎程度比SQL Server数据库更高。

2.4 Java语言

Java语言是一种面向对象的编程语言，其主要具有继承、封装、多态等特征，从而提高编程工作效率，实现软件的设计和开发[10]。继承机制可以继承相关的类和方法，新的类可以在继承已经定义的类的相关特性基础上，扩展自己新的数据和功能，进而提高自身的能力。封装机制可以提高程序的安全性，其隐藏对象的相关属性和行为，对外只提供一个接口，用户直接通过访问相应的接口来实现自己需要的功能操作。多态机制可以描述对象的多样性，简单的来说就是引用相同的对象做不同的事务。Java语言具有安全高效的优点，并且其通过依靠Java虚拟机，可以实现跨平台操作[11]。Java语言比较容易学习和掌握，就目前软件开发所使用的开发类语言而言，Java语言比较受程序员喜爱，应用比较广泛。

2.5本章小结

本章主要介绍了实现疫情信息管理系统的相关理论基础以及开发工具。本系统采用B/S模式，使用Java语言、AJAX技术、MySQL数据库等工具，设计系统功能、页面布局、后台数据等。开发本系统所使用的相关技术操作简单、容易掌握，Java语言具有跨平台性，可以支持在不同的浏览器使用本系统，MySQL数据库是开源的，减少了本系统的开发成本。

3需求分析

3.1功能需求分析

需求分析过程是系统能否成功投入市场，也能否被用户所接受和使用的非常关键的一个步骤。功能需求分析是通过设计系统功能来实现相关的业务事项，详细分析用户的实际需要，确定需要设计的相关业务事项，其是系统实现的关键，本系统存在的主要功能需求包括用户注册管理、用户信息管理、密码信息管理等。

3.2技术需求分析

本系统需要使用Java语言编码设计相关的功能模块，MySQL数据库创建和存储数据表格，AJAX实现前台和后台之间的交互，并且需要在IDEA开发环境中，编写相关的Java代码等系统程序文件，使用MySQL数据库存储数据信息，然后通过使用连接代码完成与MySQL数据库的搭建工作，再通过使用开发环境中的Tomcat插件，完成与Tomcat服务器的发布工作，最后通过与Tomcat服务器的交互行为可以实现代码调试工作。满足以上相关的技术需求，本系统才可以在浏览器上进行访问和使用。

3.3数据需求分析

在设计系统功能模块时，需要收集与系统有关的数据信息，并且对采集的数据信息进行组织和存储，分析系统功能设计，筛选有价值的数据，而后形成数据字典。其中，从庞大的数据信息中筛选出有价值的数据是比较耗时，也是非常重要的一步，主要依据信息的来源、信息的有效性、信息的扩充性、信息的真实性等内容筛选数据。数据需求分析阶段，为系统的开发工作做好进一步准备，便于更好的设计和完成系统。

3.4安全需求分析

安全需求分析是在系统使用过程中对性能的具体要求，对功能需求的一个补充内容，也是对功能需求的一个补充内容，主要包括响应需求、安全性需求、稳定性需求、可扩展性需求等内容。安全需求是在系统功能需求以外的其他必要的需求内容，其不论在系统设计过程，还是在系统投入市场过程，都起到了极其重要的作用。

3.5可行性分析

3.5.1经济可行性

经济可行性是决定是否研发系统的关键性因素。我们主要通过比较实际的收益和成本的方法，来确定一个系统是否具有经济可行性。在使用系统的过程中，当获得的收益大于开发的成本时，说明此系统的研发在经济上是可行的。由于本系统的开发使用的技术基本上是开源的，获得技术上的支持是没有多少问题的，在软件实现方面所花费的成本是很低的，甚至不需要花费成本。研发系统的成本主要是来自调研、硬件和技术人员等方面。如果系统中需要存储的数据量不是很大，仅需要配置一台普通的服务器，即可满足相关需求。如果需要存储的数据量很大，则需要配置一台具有独立功能的服务器，比如管理数据库需要单独的数据库服务器，负责接入网站需要web服务器等等，但是一台服务器的价格是比较贵的。考虑到数据量和成本，我们使用小型集群服务器，这样既可以充分利用相关的资源，又可以让系统正常访问服务器。

3.5.2技术可行性

Java语言具有跨平台性，本系统主要通过Java语言进行编码实现的，所以本系统可以支持在多个操作系统或者多个浏览器上运行和使用[14]。MySQL数据库是可以被免费使用的，并且MySQL数据库的日常运行和维护工作比较简单，这样有利于降低本系统的开发成本[15]。在学校期间，本人已经学习和掌握了Java语言、MySQL数据库、AJAX技术等相关的技术相关知识以及用法，因此在技术可行性方面，本系统是可以实现被设计与实现的。

3.5.3操作可行性

本系统所采用网络结构是B/S模式，对于开发人员来说，可以直接复用相关的代码，或者稍微对原代码进行修改，使得其满足于本系统的相关需求，如此便可大大节约了开发时间，在最优最短的时间内完成对系统的设计。对于用户来说，在传统的模式下，需要下载客户端才可使用系统。现在，在新型的模式下，使用本系统，就不需要下载，直接选择浏览器打开网址，即可访问和使用本系统。并且，用户可以根据自身的工作需要，选择相关的菜单按钮操作本系统。在系统的一些功能模块中，本人还添加了相关的使用提示信息，方便用户更好更快的了解和使用本系统。因此，本系统的设计和实现是具备操作可行性的。

3.6本章小结

需求分析在软件开发周期中是耗时最长的一个环节，系统的整个设计和实现过程主要依赖于需求分析报告。调查收集出不同用户对本系统的相关使用需求，由此设计相关的功能模块，从而期望实现用户满意度较高的实用型系统。本章主要从功能需求、技术需求、数据需求、安全需求、可行性分析等方面，对系统进行需求分析，确保设计出一款实用价值比较高的管理系统。

4系统设计

4.1系统功能设计

本系统主要通过使用Java语言编码设计系统功能，MySQL数据库管理数据，AJAX技术设计简洁的、友好的网址页面，然后在IDEA开发平台中，编写相关的Java代码文件，接着通过连接语言完成与数据库的搭建工作，再通过平台提供的Tomcat插件完成信息的交互，最后在浏览器中打开系统网址便可使用本系统。本系统的使用角色可以被分为用户和管理员，用户具有注册、查看信息、留言信息等功能，管理员具有修改用户信息，发布新闻等功能，系统总体功能设计图如图4-1所示。

疫情信息管理系统

系统设置管理

公告管理

社区管控管理

疫苗预约管理

疫情信息管理

个人信息设置

密码信息设置管理

疫情信息添加

疫情信息删除

疫情信息修改

社区管控添加

社区管控删除

疫苗预约添加

疫苗预约修改

疫苗预约删除

公告添加

公告修改

公告删除

图4-1系统总体功能设计图

4.2数据库设计

4.2.1概念设计

在数据库设计过程中，概念设计阶段是逻辑设计阶段得以实现的基础，也是根据用户参与情况确定对数据的处理要求，从而使得数据库设计成功的关键。概念设计的主要任务是将现实世界的所收集到的使用需求转化为抽象的信息世界结构的过程，能够真实的反映现实生活中实体与实体之间的联系，数据库的相关语法和代码比较容易理解和修改，方便相关人员将相关的数据信息存储到数据库中，并对其进行修改和使用[18]。

通过将现实世界中的实体、属性、联系等内容进行概念设计，建立比较抽象的概念数据模型，即E-R图。通过E-R图可将现实世界抽象到的概念设计转变成数据库的实体设计，并且能够明显的看见各个实体之间，数据的流动情况，具体较强的表达能力，更加方便于开发人员寻找与发现用户具体的需求[19]。因此，E-R的建立，在整个数据库的设计过程中，起着至关重要的作用。本系统主要的实体有管理员、用户、留言等。在E-R图中，矩形表示实体集，椭圆形表示属性，菱形表示联系。其中，联系的类型包括1:1（一对一）、1:n（一对多）、n:m（多对多）关系。

4.2.2逻辑设计

本系统使用MySQL数据库管理与系统相关的数据信息。逻辑设计阶段是将上一个阶段中的概念数据模型，转换为方便数据库进行存储的关系模型，即基本表的形式，方便开发人员后期对数据模型进行优化和管理[20]。逻辑设计阶段是整个数据库设计设计的关键，与系统有关的信息将会在这一阶段中被存储在数据库中，当用户使用本系统进行相关的功能操作时，与之有关的数据信息所在的基本表会发生相应的更新变化。数据库的逻辑设计阶段主要任务是将与系统相关的数据信息，设计成为方便数据库存储和管理的基本表格的形式，具体内容如下。

表4.1打卡表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	daka_time	Date	打卡时间	是
4	insert_time	Date	打卡日期	是
5	didian_address	String	打卡地点	是
6	daka_content	String	打卡备注	是
7	create_time	Date	创建时间	是

表4.2字典表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段id	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表4.3地区表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	diqu_uuid_number	String	地区编号	是
3	diqu_name	String	地区名称	是
4	diqu_address	String	地区位置	是
5	fengxian_types	Integer	地区风险等级	是
6	diqu_content	String	地区详情	是
7	create_time	Date	创建时间	是

表4.4公告表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	gonggao_name	String	公告名称	是
3	gonggao_types	Integer	公告类型	是
4	gonggao_content	String	公告内容	是
5	insert_time	Date	公告发布时间	是
6	create_time	Date	创建时间	是

表4.5核酸预约表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	hesuanyuyue_uuid_number	String	预约编号	是
4	yuyue_time	Date	预约检测时间	是
5	jiancedian_types	Integer	检测点	是
6	yuyue_content	String	预约备注	是
7	hesuanyuyue_types	Integer	核酸预约状态	是
8	shiji_time	Date	实际检测时间	是
9	jiancejieguo_types	Integer	检测结果	是
10	hesuanyuyue_file	String	检测文件	是
11	beizhu_content	String	备注	是
12	insert_time	Date	申请时间	是
13	create_time	Date	创建时间	是

表4.6社区管控表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shequ_types	Integer	社区	是
3	kaishi_time	Date	管控开始时间	是
4	jieshu_time	Date	管控结束时间	是
5	yuanyou_content	String	管控原因	是
6	fengxian_types	Integer	管控等级	是
7	beizhu_content	String	管控备注	是
8	insert_time	Date	添加时间	是
9	create_time	Date	创建时间	是

表4.7疫苗预约表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	yimiaoyuyue_uuid_number	String	预约编号	是
4	zhen_types	Integer	第几针	是
5	yuyue_content	String	预约备注	是
6	yimiaoyuyue_types	Integer	疫苗预约状态	是
7	yuyue_time	Date	预约打针时间	是
8	shiji_time	Date	实际打针时间	是
9	yimiao_bianhao	String	疫苗编号	是
10	yimiaoshengchan_time	Date	疫苗生产日期	是
11	yimiaogongsi_types	Integer	疫苗公司	是
12	beizhu_content	String	备注	是
13	insert_time	Date	申请时间	是
14	create_time	Date	创建时间	是

表4.8疫情信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yiqingxinxi_name	String	疫情信息名称	是
3	yiqingxinxi_types	Integer	疫情信息类型	是
4	yiqingxinxi_content	String	疫情信息内容	是
5	insert_time	Date	疫情信息发布时间	是
6	create_time	Date	创建时间	是

表4.9用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_uuid_number	String	用户编号	是
3	yonghu_name	String	用户姓名	是
4	yonghu_phone	String	用户手机号	是
5	yonghu_id_number	String	用户身份证号	是
6	yonghu_photo	String	用户头像	是
7	yonghu_email	String	电子邮箱	是
8	create_time	Date	创建时间	是

表4.10用户行程表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	diqu_id	Integer	地区	是
4	qu_time	Date	去的时间	是
5	hui_time	Date	回的时间	是
6	yuanyou_content	String	去的缘由	是
7	insert_time	Date	添加时间	是
8	create_time	Date	创建时间	是

表4.11社区管理员表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shequguanliyuan_uuid_number	String	社区管理员编号	是
3	shequguanliyuan_name	String	社区管理员姓名	是
4	shequguanliyuan_phone	String	社区管理员手机号	是
5	shequguanliyuan_id_number	String	社区管理员身份证号	是
6	shequguanliyuan_photo	String	社区管理员头像	是
7	zhiwei_types	Integer	职位	是
8	shequ_types	Integer	所属社区	是
9	shequguanliyuan_email	String	电子邮箱	是
10	create_time	Date	创建时间	是

表4.12管理员表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

4.3本章小结

本章主要介绍了系统功能设计、数据库设计等内容。通过设计系统的总体功能框架，确定系统的功能设计主要包括疫情信息等模块。数据库设计主要分为概念设计阶段和逻辑设计阶段，其中，概念设计是将现实世界中的数据转变为信息世界中的概念模型，逻辑设计是将概念设计中的概念模型转变成可以被数据库存储的数据表格。系统功能设计好坏是系统得以被编码实现的重要依据。数据库设计是否符合规范，是系统能够成功运行的基本保障，也是用户和系统实现交互处理的重要前提。

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公告类型管理界面

系

ShequguankongController.java


package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 社区管控
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/shequguankong")
public class ShequguankongController {
    private static final Logger logger = LoggerFactory.getLogger(ShequguankongController.class);

    @Autowired
    private ShequguankongService shequguankongService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service

    @Autowired
    private YonghuService yonghuService;
    @Autowired
    private ShequguanliyuanService shequguanliyuanService;


    /**
    * 后端列表
    */
    @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"));
        else if("社区管理员".equals(role))
            params.put("shequguanliyuanId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = shequguankongService.queryPage(params);

        //字典表数据转换
        List<ShequguankongView> list =(List<ShequguankongView>)page.getList();
        for(ShequguankongView 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);
        ShequguankongEntity shequguankong = shequguankongService.selectById(id);
        if(shequguankong !=null){
            //entity转view
            ShequguankongView view = new ShequguankongView();
            BeanUtils.copyProperties( shequguankong , view );//把实体数据重构到view中

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody ShequguankongEntity shequguankong, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,shequguankong:{}",this.getClass().getName(),shequguankong.toString());

            shequguankong.setInsertTime(new Date());
            shequguankong.setCreateTime(new Date());
            shequguankongService.insert(shequguankong);
            return R.ok();

    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody ShequguankongEntity shequguankong, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,shequguankong:{}",this.getClass().getName(),shequguankong.toString());

            shequguankongService.updateById(shequguankong);//根据id更新
            return R.ok();

    }



    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        shequguankongService.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<ShequguankongEntity> shequguankongList = 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("static/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){
                            //循环
                            ShequguankongEntity shequguankongEntity = new ShequguankongEntity();
//                            shequguankongEntity.setShequTypes(Integer.valueOf(data.get(0)));   //社区 要改的
//                            shequguankongEntity.setKaishiTime(sdf.parse(data.get(0)));          //管控开始时间 要改的
//                            shequguankongEntity.setJieshuTime(sdf.parse(data.get(0)));          //管控结束时间 要改的
//                            shequguankongEntity.setYuanyouContent("");//详情和图片
//                            shequguankongEntity.setFengxianTypes(Integer.valueOf(data.get(0)));   //管控等级 要改的
//                            shequguankongEntity.setBeizhuContent("");//详情和图片
//                            shequguankongEntity.setInsertTime(date);//时间
//                            shequguankongEntity.setCreateTime(date);//时间
                            shequguankongList.add(shequguankongEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        shequguankongService.insertBatch(shequguankongList);
                        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();
        }
    }
}

DakaController.java


package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 打卡
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/daka")
public class DakaController {
    private static final Logger logger = LoggerFactory.getLogger(DakaController.class);

    @Autowired
    private DakaService dakaService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service
    @Autowired
    private YonghuService yonghuService;

    @Autowired
    private ShequguanliyuanService shequguanliyuanService;


    /**
    * 后端列表
    */
    @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"));
        else if("社区管理员".equals(role))
            params.put("shequguanliyuanId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = dakaService.queryPage(params);

        //字典表数据转换
        List<DakaView> list =(List<DakaView>)page.getList();
        for(DakaView 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);
        DakaEntity daka = dakaService.selectById(id);
        if(daka !=null){
            //entity转view
            DakaView view = new DakaView();
            BeanUtils.copyProperties( daka , view );//把实体数据重构到view中

                //级联表
                YonghuEntity yonghu = yonghuService.selectById(daka.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody DakaEntity daka, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,daka:{}",this.getClass().getName(),daka.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("用户".equals(role))
            daka.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        Wrapper<DakaEntity> queryWrapper = new EntityWrapper<DakaEntity>()
            .eq("yonghu_id", daka.getYonghuId())
            .eq("insert_time", new SimpleDateFormat("yyyy-MM-dd").format(new Date()))
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        DakaEntity dakaEntity = dakaService.selectOne(queryWrapper);
        if(dakaEntity==null){
            daka.setDakaTime(new Date());
            daka.setInsertTime(new Date());
            daka.setCreateTime(new Date());
            dakaService.insert(daka);
            return R.ok();
        }else {
            return R.error(511,"今日已经打过卡");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody DakaEntity daka, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,daka:{}",this.getClass().getName(),daka.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            daka.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<DakaEntity> queryWrapper = new EntityWrapper<DakaEntity>()
            .notIn("id",daka.getId())
            .andNew()
            .eq("yonghu_id", daka.getYonghuId())
            .eq("insert_time", new SimpleDateFormat("yyyy-MM-dd").format(daka.getInsertTime()))
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        DakaEntity dakaEntity = dakaService.selectOne(queryWrapper);
        if(dakaEntity==null){
            dakaService.updateById(daka);//根据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());
        dakaService.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<DakaEntity> dakaList = 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("static/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){
                            //循环
                            DakaEntity dakaEntity = new DakaEntity();
//                            dakaEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            dakaEntity.setDakaTime(sdf.parse(data.get(0)));          //打卡时间 要改的
//                            dakaEntity.setInsertTime(date);//时间
//                            dakaEntity.setDidianAddress(data.get(0));                    //打卡地点 要改的
//                            dakaEntity.setDakaContent("");//详情和图片
//                            dakaEntity.setCreateTime(date);//时间
                            dakaList.add(dakaEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        dakaService.insertBatch(dakaList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }






}

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('dictionaryJiancedian','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        <el-button
                                v-if="isAuth('dictionaryJiancedian','删除')"
                                :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('dictionaryJiancedian','查看')"
                          :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('dictionaryJiancedian','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('dictionaryJiancedian','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('dictionaryJiancedian','删除')" 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'] = "jiancedian_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: 40px;
		color: #333;
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 4px;
		background-color: rgba(117, 113, 249, 1);
	}
	
	& /deep/ .el-button--primary {
		height: 40px;
		color: #333;
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 4px;
		background-color: rgba(102, 204, 255, 1);
	}
	
	& /deep/ .el-button--danger {
		height: 40px;
		color: #333;
		font-size: 14px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 4px;
		background-color: rgba(204, 255, 102, 1);
	}

    & /deep/ .el-button {
      margin: 4px;
    }
  }
</style>