如何使用ssm实现基于Java的小区物业管理系统+vue

201 篇文章 0 订阅
147 篇文章 0 订阅

@TOC

ssm543基于Java的小区物业管理系统+vue

研究背景

自计算机发展以来给人们的生活带来了改变。第一代计算机为1946年美国设计,最开始用于复杂的科学计算,占地面积、开机时间要求都非常高,经过数十几的改变计算机技术才发展到今天[1]。现如今已是电子时代、数据时代,所有的生活都离不开计算机和网络。工作中有各类办公软件、APP,娱乐中有各类游戏软件、视频软件等都为生活带来了便捷,特别是我国的手机支付功能更是领先世界。科技推动了时代的发展。现在人们办公大多已从传统的面对面办公转换到线上办公。线上办公拥有更大的优点,信息种类全、流程清晰、结果反馈快。由于传统办公需要亲力亲为,信息单一,需要多部门面对面共同配合而逐渐被加入线上办公方式[2]。

现在,网络覆盖范围扩大,价格便宜,各大商户都开放的有无线网络。手机也得到了普及,计算机技术也深入到手机中。普通生活、娱乐等都可以在线上解决。线上已成为趋势,大部分的行业都可以在线上开通业务,通过线上为人们解决问题,改变面对面方式,提高工作效率以及减少时间浪费[3]。

1.2课题现状与实现意义

现在网上办公管理平台使用率高的有企业办公软件、收银软件、会计软件以及各类国家性质的办公平台。对于小区物业管理来言,想要突破发展就需要加入线上平台,传统报修需要先到物业填写资料,再由物业安排维修,在等待结果时也需要一定的时间等待,非常浪费时间,工作效率低下[4]。

本系统采用管理员对用户的模式,管理员利用本平台可以管理小区物业信息、投诉信息、缴费信息、论坛信息、公告信息、维修信息、用户信息等。本系统可以帮助管理员工作管理,实现小区物业的无地域、无时间管理。用户可以随时浏览、查询小区物业信息,可以了解公告的详情以及投诉结果。本系统可以帮助用户更快的在线报修和跟踪结果,帮助管理员增加工作途径,减少时间费用。本基于Java的小区物业管理系统实现数据的自动化,减少管理员的工作内容并实现数据的清晰化。

1.3课题内容

本基于Java的小区物业管理系统使用角色可以分为用户、管理员。用户可以根据要求在线报修,管理员在收到用户的报修后可以进行在线审核和安排维修,用户可以在自己的操作平台里看到维修结果,同时用户可以查询公告信息、缴费信息和进行在线缴费、在线投诉、论坛交流等。管理员同时可以管理用户信息和论坛信息、公告信息、投诉信息等。

1.4论文结构安排

本论文的结构安排为三部分,分别为:

(1)第一部分,

摘要,本部分为简单的阐述,使读者可以对本论文有大致的了解;

外文翻译,采用英语对摘要进行翻译;

目录,本部分可以使读者对本论文有详细的了解。

(2)第二部分为正文部分,

绪论,本章从课题开发的来源、现状来进行介绍,总结出本系统开发的意义以及内容等;

系统分析,本章包括语言、技术等的介绍以及系统的需求分析、可行性分析、流程分析等;

系统设计,本章包括系统的功能结构图、数据库设计等;

系统实现,本章采用系统运行截图加文字进行本系统的详细介绍;

系统测试,本章采用测试的方法进行主要核心功能的测试介绍;

(3)第三部分为总结、致谢、参考文献。

第2章 系统分析

2.1系统使用相关技术分析

2.1.1Java语言介绍

Java语言是一种分布式的简单的 开发语言,有很好的 特征,在安全方面、性能方面等。非常适合在Internet环境中使用,也是目前企业级运用中最常用的一个编程语言,具有很大的影响力。主要是通过面向对象的形式进行开发,这样的话,就更能满足人们的需求[5]。在编程开发使用中,主要通过封装的方式,通过类来实现,具有很好的可编辑行和操作性,这就是面向对象语言的最大特性,还可以在同一个类中把共同特性的类封装起来,形成一个抽象类,抽象类形容的不是一个对象,而是一个实体,这样就使用过程中就可以进行实例化,达到更好的效果[6]。类之间还可以进行继承,比如一个类可以把另个类的特征进行继承,这样就可以重复使用,所以说这种继承性的类实际上还是同一个类体,这样就可以达到最大的效果。通过java开发的代码还有很好的扩展性,可以通过不同的类达到的不同的效果,更好的提高使用效率,而且在后期维护方面非常的方便,开发的代码更加实用,更加简洁[7]。

2.1.2Mysql数据库介绍

Mysql数据库是Oracle公司推出的一个数据库管理软件,有很好的性能设计,可以充分发挥和利用互联网的优势,而且在数据库管理方面非常的方便,支持图形化管理,非常适合新手的使用,可以直接在本地进行数据管理和配置,而且有很强大的数据处理能力,还有很好的安全性。在数据存储的过程中可以支持多处理器的存储结构,可以自动生产和处理sql语句,有很强大的数据读取和复制存储功能,最最重要的是一个开放式的数据软件,可以为开放人员提供一个很好的数据库管理平台[8]。

2.1.3Tomcat服务器介绍

Tomcat服务器是一个小型的轻量级服务器,非常适合一些小型的系统和本地的服务器使用,特别适合一些新手开发者使用。Tomcat服务器主要是当成java程序的服务器使用,Tomcat服务器相当于就是Apache的一个扩展应用,区别就是他可以独立运行,当客户端上配置好Tomcat服务器以后,就可以直接通过服务器对HTML页面完成数据访问和响应[9]。非常受程序员的喜欢,因为占用的运行空间非常的小时,不影响服务器性能,而且扩展性很好,支持很多开发过程中常用的功能,可以根据开发者的需求进行不断的改进和完善,所以说Tomcat服务器是目前使用非常广泛的一个服务器[10]。

2.1.4 Jsp技术介绍

Jsp技术是由Sun Microsystems公司主导开发的一种用来创建动态页面的技术。Jsp技术通过服务器来响应要求,再根据要求生成Html、Xml来进行转换成Web页面。Jsp技术也属于一种脚本语言,常用来搭配Java语言使用,可以和静态的页面一起使用,把静态的页面改成动态的页面[11]。Jsp技术在使用时可以转换成Servlet代码,然后再编译成二进制的机器码,当然也可以直接编译成二进制的机器码。Jsp技术的特点为简单好用,可以快速的把静态页面变成动态的页面,它使用Javabean来把常用的代码来复制,可以减少编程人员的重复工作,同时Jsp技术还拥有很多标签,可以支持更多的外在标签和内在的标签,还可以自定义标签,使编程人员在使用时更加的灵活,加快项目开发的速度。Jsp技术的功能非常简单,只负责页面数据,负责页面的传输,所以更加的单纯,不容易出错[12]。

2.2系统可行性分析

系统是否可行决定了系统开发的成功性。想要系统的设计工作不会白费就需要经过详细的系统可行性分析。根据充分调查和参考相关论文发现,系统的可行性分析一般包括系统的技术可行性分析、系统的经济可行性分析、系统的操作可行性分析三种[13]。

2.2.1系统经济可行性分析

本系统是web型的管理平台,采用的Java语言开发的,开发周期比较短,而且技术成熟,所以在开发过程中没有过高的投入要求,有很好的经济可行性。

2.2.2系统技术可行性分析

本系统采用的技术有Jsp网页技术、Mysql数据库、B/s模式、Java语言等。

(1)通过Jsp进行前台的页面开发,具有很好的稳定性,而且可以直接在线升级维护,可以更方便的实现数据管理,通过Jsp的最大特征就是系统提前已经自动完成了很大不重要的简单工作,可以自动生成很多常规代码,这样减少很大的工作量。而且jsp技术非常成熟,可以参考的案例也非常多。

(2)数据库采用Mysql数据库,也是非常适合学生用的一款小型数据库,使用起来非常的简单,而且数据处理效率高。

(3)采用B/s模式的网站已经是目前的开发主流,也是未来的发展方向。

(4)采用Java语言进行后台代码的开发,是面向对象的开发语言,可以直接查看和调用已用的案例,可以直接调用Xml服务,而且兼容性非常的强,不管是哪个平台,都可以直接调用,而且是通用的,可以提高开发者的工作效率,而且有很好的灵活性,使用起来非常的方便[14-15]。

所以通过以上几点的分析,开发人员只要能熟练的操作以上的技术就行,具有开发技术可行性。

2.2.3系统操作可行性分析

 因为本系统是采用B/s的架构模式进行开发的,所以只有安装的有浏览器和数据库服务器就可以进行系统的访问的使用。而且非常的简单易操作,普通用户只需要有最简单的互联网操作经验就行。

2.3系统需求分析

现在网上管理系统的技术发展已经非常成熟,各大公司的使用率也非常可观,特别是在一些重要的行业里使用率更高。基于Java的小区物业管理系统可以方便用户更快的解决自己的问题,并且售后服务非常完善。现在实体企业里也会采用线上、线下相结合的方式进行工作,各部门的资料可以共享调用,工作内容可以在线发布,非常适合现代生活。基于Java的小区物业管理系统是时代的趋势,其需求性不言而喻。

2.3.1传统管理系统优缺点分析

在最早出现的管理系统中主要使用人为工作人员,这类管理系统主要是采用C/s模式,这种模式可以保证数据的安全和存储性,数据库采用的也都是复杂、高性能的数据库,这类管理系统需要使用人员经过定期的培训才可以使用。随着网络的快速发展,这类管理系统的缺点也逐渐暴露出来,由于采用C/s模式就必须要求固定的客户端,这就需要足够严格的客户端条件,一旦客户端出现问题,系统里的数据都会出现问题,稳定性差,而且C/s模式的系统最大的问题是不能多次修改,如果系统经过了多次的补充、修改就会造成运行出错,为系统的使用造成不便。传统的管理系统通常采用的是脚本语言,脚本语言不够成熟,更容易出错,造成使用人员的损失[16]。

2.3.2本基于Java的小区物业管理系统分析

通过对传统管理系统的分析发现主要问题在于系统的模式架构上和数据库上。想要数据更为稳定就需要更稳定的数据库,好的数据库可以保证系统拥有更大的容错率和移植性,也可以在多种数据库中进行相互结合以此来保证系统里数据的安全。同时还需要注意系统的延续性,时代不断的发展,就会要求系统的服务更加的完善。想要使系统的生命周期更长就需要更为成熟的开发语言、技术、环境等。

本基于Java的小区物业管理系统采用的模式架构为B/s,B/s框架可以脱离固定的客户端,把系统部署到浏览器上供用户使用,还可以把功能进行模块划分使数据库和操作界面分开,这样可以实现当任何一方出现问题时,另一方不受影响。数据库采用Mysql,Mysql数据库可以单独运行,当用户在进行操作后可自动保存操作后的数据,改变需要去数据库里修改数据的问题。开发语言采用Java,Java语言为动态语言,使用时间长久,已发展的非常成熟。本系统的其它技术包括Myeclpse运行软件,Jsp网页技术,Html技术等都是经过时间考验的。

2.4系统功能分析

本人参考大量的办公管理软件以及充分调查用户和管理员需求,设计出的本基于Java的小区物业管理系统使用角色为用户、管理员。框架界面分为用户操作界面、管理员操作界面。用户的功能设计为:

  1. 个人信息管理功能,可以针对自己的信息资料进行修改管理;
  2. 论坛管理功能,本界面里展示了不同的帖子信息,可以发布帖子和评论其它用户的帖子;
  3. 缴费信息管理功能,本界面里展示了所有的费用信息,用户可以在线缴费;
  4. 公告功能,可以浏览公告信息;
  5. 在线投诉功能,有问题没有处理可以在线投诉;
  6. 维修信息管理功能,可以在线报修和查询维修情况。

管理员的功能设计为:

  1. 公告管理功能,可以发布、编辑、删除小区里的公告信息;
  2. 维修信息管理功能,本功能可以收到用户的维修,可以根据实际情况进行安排维修;
  3. 基础数据管理功能,此功能可以对公告类型、论坛类型进行设置;
  4. 个人中心管理功能,对管理员的账号密码等进行管理;
  5. 论坛管理功能,对用户的帖子进行审核;
  6. 缴费信息管理功能,发布住户的费用信息和统计收费信息;
  7. 用户管理功能,审核用户的注册资料;
  8. 投诉信息管理功能,处理用户的投诉信息。

2.5系统性能分析

在系统分析中还有重要的一点就是系统的性能分析,除却系统的功能分析其它问题都可以划分到系统的性能分析。主要包括系统数据问题、系统运行问题、系统安全问题。

  1. 系统数据问题表现在数据库的设计中,因为基于Java的小区物业管理系统的核心在于小区物业的各项资料,在管理操作中会引起多种数据的变化。想要数据在变化时不会出错就需要在数据库设计时注意不同数据字段、类型等的主外键联系;
  2. 系统的运行问题表现在多平台、多人在运行系统时的稳定性。系统的运行速度也需要注意,运行的卡顿、读码速度等都需要经过多次测试;
  3. 系统的安全性问题表现在不同角色的使用权限,用户做为普通人员的角色不能越权,管理员做为权限最多的角色要可以管理其它几种角色。

2.6用例图

根据功能分析得出,本系统的主要使用角色为管理员和用户。用户可以查看公告、在线投诉、报修等。管理员可以管理维修信息、用户的资料、发布公告、处理投诉、管理缴费信息等。系统用例图如下图2-1所示:

  

图2-1基于Java的小区物业管理系统用例图

2.7系统业务流程

业务流程可以按照用户使用本系统的步骤进行设计。本系统中用户的流程为查看公告、提交维修、查询维修、在线缴费、投诉等。管理员的流程为管理公告信息、安排维修、管理用户信息、缴费信息等。基于Java的小区物业管理系统的业务流程如下图2-2所示:

图2-2基于Java的小区物业管理系统业务流程图

(1)用户登录是使用本系统的必经之路,在登录时需要输入信息、判断信息。用户登录的流程图如下图2-3所示:

图2-3用户登录的流程图

(2)用户报修时需要判断填写的信息是否正确,当填写的信息都为正确时才可以把报修信息传送到管理员手中。用户在线报修流程图如下图2-4所示:

图2-4用户在线报修流程图

第3章 系统设计

3.1系统体系结构

系统的体系结构非常重要,往往决定了系统的质量和生命周期。针对不同的系统可以采用不同的系统体系结构。本系统为基于Java的小区物业管理系统,属于开放式的平台,所以在体系结构中采用B/s。B/s结构抛弃了固定客户端要求,采用服务器、客户端的模式。用户操作界面和管理员操作界面分开展示。B/s结构基于互联网,需要网络的支持,由用户在浏览器上发布命令,服务器负责向数据库传送命令,最后再由服务器把反馈的结果传回浏览器给用户进行呈现。

3.2系统功能结构

系统的功能结构是系统实现的框架,本系统的主要结构为管理员和用户。管理员的功能为维修管理、用户管理、缴费管理、公告信息管理等。用户的功能为论坛管理、查询公告、管理个人资料等。本基于Java的小区物业管理系统功能结构图如下图3-1所示:

图3-1基于Java的小区物业管理系统功能结构图

3.3数据库设计

数据库设计在系统设计中占有重大比例,数据库的设计包括ER图设计和数据库表设计。

3.3.1ER图设计

根据本系统的特点,本系统设计的主要实体包括管理员信息、用户信息、维修信息、投诉信息等。

  1. 管理员ER图包括的属性有管理员的编号、用户名和密码。管理员ER图如下图3-2所示:

图3-2管理员实体的ER图

  1. 维修信息包含的属性为序号、编号、维修内容、报修时间等。维修信息ER图如下图3-3所示:

图3-3维修信息实体ER图

(3)用户信息的属性包括用户的个人资料,有姓名、性别、电话等。用户信息实体ER图如下图3-4所示:

图3-4用户实体ER图

(4)投诉信息实体的属性有编号、投诉时间、投诉人、投诉内容。投诉信息实体ER图如下图3-5所示:

图3-5投诉信息实体ER图

(7)本基于Java的小区物业管理系统的整体实体关系图如下图3-6所示:

图3-6系统关系ER图

3.3.2数据库表设计

根据数据ER图的设计,本系统的数据库表有管理员信息表、用户信息表、公告信息表、论坛信息表等。本系统的数据库表如下图3-1至3-10所示:

表3-1 config

|| | :- | 表3-2 dictionary

|| | :- |

表3-3 forum

表3-4 gonggao

表3-5 jiaofei

表3-6 token

|| | :- | 表3-7 tousu

|| | :- | 表3-8 users

|| | :- |

表3-9 weixiu

表3-10 yonghu

第4章 系统实现

4.1系统调试运行

在电脑上安装Myeclpse软件和Mysql软件后,先打开Mysql软件,运行数据库。数据库运行成功后可以看到本系统所创建的所有数据库表。然后打开Myeclipse软件,在打开本系统的源码后可以进行运行,运行成功后可以出现系统登录的界面。系统调试运行界面如下图4-1所示:

图4-1系统运行调试界面

4.2登录功能的界面实现

系统运行调试后,需要登录。登录界面设计的目的是保证当前的使用角色等级。管理员同样需要登录后才可以进行操作。在用户登录界面里加入了注册功能,在登录时只需要填写用户账号和密码、选择权限就可以实现。用户登录的运行界面如下图4-2所示:

图4-2用户登录的运行界面

在登录的界面中包含的元素有系统题目、输入框、登录按钮、选择框。本系统的使用权限为管理员和用户。权限选择框的运行界面如下图4-3所示:

图4-3权限选择框运行界面

4.3管理员功能的设计实现

4.3.1用户信息管理功能的实现界面

注册用户的信息可由管理员删除,本功能设计的目的是审核注册用户的资料,当发现不当的使用用户可以删除其账号。当删除用户信息后相对应的用户信息表里的信息也会随着删除掉。查询注册用户信息功能的运行界面如下图4-4所示:

图4-4查询注册用户信息功能的运行界面

4.3.2 个人中心管理功能的实现界面

个人中心管理的内容包括密码信息管理、个人信息管理。本系统中可以拥有多个管理员。个人信息管理功能的运行界面如下图4-5所示:

图4-5个人信息管理功能的运行界面

4.3.3公告管理功能的实现界面

用户浏览的公告都是由管理员在此功能里进行维护添加的,同样当管理员添加、编辑公告信息后,数据库表中的公告信息表也会发生改变。公告信息管理功能的运行界面如下图4-6所示:

图4-6公告信息管理功能的运行界面

4.3.4 基础数据管理功能的实现界面

基础数据包括公告类型和缴费类型,都可以在本界面里看到。管理员可以添加公告类型和缴费类型。添加公告类型功能的运行界面如下图4-7所示:

图4.7添加公告类型运行界面

4.3.5论坛管理功能的实现界面

管理员可以审核用户的帖子。管理员查询论坛信息的实现界面如下图4-8所示:

图4-8查询用户帖子信息的实现界面

4.3.6缴费信息管理功能的界面实现

管理员可以发布收费信息并查看用户的缴费详情。实现界面如下图4-9所示:

图4-9查询缴费信息的实现界面

4.3.7投诉管理功能的界面实现

管理员可以处理用户的投诉信息,可以回复用户的投诉。查询用户投诉功能的实现界面如下图4-10所示:

图4-10查询在线投诉功能的界面实现

4.3.8维修管理功能的实现界面

管理员可以查询用户的维修信息并安排维修和给出维修结果。实现界面如下图4-11所示:

图4-11维修管理功能的实现界面

4.4用户角色功能的界面实现

4.4.1论坛管理功能的界面实现

用户可以浏览论坛和回复他人帖子以及发布自己的帖子。论坛管理功能的运行界面如下图4-12所示:

图4-12回复帖子功能的运行界面

4.4.2公告浏览功能的实现界面

用户在前台可以浏览公告信息。公告查询功能的运行界面如下图4-13所示:

图4-13小区公告查询功能的运行界面

4.4.3投诉功能的界面实现

用户可以在线填写投诉,也可以查询投诉的回复。在线投诉功能的实现界面如下图4-14所示:

图4-14在线投诉功能的实现界面

4.4.4缴费功能的界面实现

用户可以查询详细的费用详情,缴费功能的实现界面如下图4-15所示:

图4-15缴费功能的实现界面

第5章 系统测试

系统测试的

CommonUtil.java
package com.utils;

import java.util.Random;

public class CommonUtil {
	/**
     * 获取随机字符串
     *
     * @param num
     * @return
     */
    public static String getRandomString(Integer num) {
        String base = "abcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < num; i++) {
            int number = random.nextInt(base.length());
            sb.append(base.charAt(number));
        }
        return sb.toString();
    }

}

JiaofeiController.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("/jiaofei")
public class JiaofeiController {
    private static final Logger logger = LoggerFactory.getLogger(JiaofeiController.class);

    @Autowired
    private JiaofeiService jiaofeiService;


    @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 = jiaofeiService.queryPage(params);

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

                //级联表
                YonghuEntity yonghu = yonghuService.selectById(jiaofei.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 JiaofeiEntity jiaofei, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,jiaofei:{}",this.getClass().getName(),jiaofei.toString());

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

        Wrapper<JiaofeiEntity> queryWrapper = new EntityWrapper<JiaofeiEntity>()
            .eq("yonghu_id", jiaofei.getYonghuId())
            .eq("jiaofei_name", jiaofei.getJiaofeiName())
            .eq("jiaofei_types", jiaofei.getJiaofeiTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        JiaofeiEntity jiaofeiEntity = jiaofeiService.selectOne(queryWrapper);
        if(jiaofeiEntity==null){
            jiaofei.setInsertTime(new Date());
            jiaofei.setCreateTime(new Date());
            jiaofeiService.insert(jiaofei);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            jiaofei.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<JiaofeiEntity> queryWrapper = new EntityWrapper<JiaofeiEntity>()
            .notIn("id",jiaofei.getId())
            .andNew()
            .eq("yonghu_id", jiaofei.getYonghuId())
            .eq("jiaofei_name", jiaofei.getJiaofeiName())
            .eq("jiaofei_types", jiaofei.getJiaofeiTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        JiaofeiEntity jiaofeiEntity = jiaofeiService.selectOne(queryWrapper);
        if(jiaofeiEntity==null){
            jiaofeiService.updateById(jiaofei);//根据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());
        jiaofeiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<JiaofeiEntity> jiaofeiList = 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){
                            //循环
                            JiaofeiEntity jiaofeiEntity = new JiaofeiEntity();
//                            jiaofeiEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            jiaofeiEntity.setJiaofeiName(data.get(0));                    //缴费标题 要改的
//                            jiaofeiEntity.setJiaofeiTypes(Integer.valueOf(data.get(0)));   //缴费类型 要改的
//                            jiaofeiEntity.setJiaofeiPrice(data.get(0));                    //缴费金额 要改的
//                            jiaofeiEntity.setJiaofeiContent("");//照片
//                            jiaofeiEntity.setInsertTime(date);//时间
//                            jiaofeiEntity.setCreateTime(date);//时间
                            jiaofeiList.add(jiaofeiEntity);


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

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





    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = jiaofeiService.queryPage(params);

        //字典表数据转换
        List<JiaofeiView> list =(List<JiaofeiView>)page.getList();
        for(JiaofeiView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        JiaofeiEntity jiaofei = jiaofeiService.selectById(id);
            if(jiaofei !=null){


                //entity转view
                JiaofeiView view = new JiaofeiView();
                BeanUtils.copyProperties( jiaofei , view );//把实体数据重构到view中

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


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody JiaofeiEntity jiaofei, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,jiaofei:{}",this.getClass().getName(),jiaofei.toString());
        Wrapper<JiaofeiEntity> queryWrapper = new EntityWrapper<JiaofeiEntity>()
            .eq("yonghu_id", jiaofei.getYonghuId())
            .eq("jiaofei_name", jiaofei.getJiaofeiName())
            .eq("jiaofei_types", jiaofei.getJiaofeiTypes())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        JiaofeiEntity jiaofeiEntity = jiaofeiService.selectOne(queryWrapper);
        if(jiaofeiEntity==null){
            jiaofei.setInsertTime(new Date());
            jiaofei.setCreateTime(new Date());
        jiaofeiService.insert(jiaofei);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }


}

DictionaryController.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("/dictionary")
public class DictionaryController {
    private static final Logger logger = LoggerFactory.getLogger(DictionaryController.class);

    @Autowired
    private DictionaryService dictionaryService;


    @Autowired
    private TokenService tokenService;

    //级联表service

    @Autowired
    private YonghuService yonghuService;


    /**
    * 后端列表
    */
    @RequestMapping("/page")
    @IgnoreAuth
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = dictionaryService.queryPage(params);

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

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

    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");

        Wrapper<DictionaryEntity> queryWrapper = new EntityWrapper<DictionaryEntity>()
            .eq("dic_code", dictionary.getDicCode())
            .eq("index_name", dictionary.getIndexName())
            ;
        if(dictionary.getDicCode().contains("_erji_types")){
            queryWrapper.eq("super_id",dictionary.getSuperId());
        }

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        DictionaryEntity dictionaryEntity = dictionaryService.selectOne(queryWrapper);
        if(dictionaryEntity==null){
            dictionary.setCreateTime(new Date());
            dictionaryService.insert(dictionary);
            //字典表新增数据,把数据再重新查出,放入监听器中
            List<DictionaryEntity> dictionaryEntities = dictionaryService.selectList(new EntityWrapper<DictionaryEntity>());
            ServletContext servletContext = request.getServletContext();
            Map<String, Map<Integer,String>> map = new HashMap<>();
            for(DictionaryEntity d :dictionaryEntities){
                Map<Integer, String> m = map.get(d.getDicCode());
                if(m ==null || m.isEmpty()){
                    m = new HashMap<>();
                }
                m.put(d.getCodeIndex(),d.getIndexName());
                map.put(d.getDicCode(),m);
            }
            servletContext.setAttribute("dictionaryMap",map);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<DictionaryEntity> queryWrapper = new EntityWrapper<DictionaryEntity>()
            .notIn("id",dictionary.getId())
            .eq("dic_code", dictionary.getDicCode())
            .eq("index_name", dictionary.getIndexName())
            ;

        if(dictionary.getDicCode().contains("_erji_types")){
            queryWrapper.eq("super_id",dictionary.getSuperId());
        }
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        DictionaryEntity dictionaryEntity = dictionaryService.selectOne(queryWrapper);
        if(dictionaryEntity==null){
            dictionaryService.updateById(dictionary);//根据id更新
            //如果字典表修改数据的话,把数据再重新查出,放入监听器中
            List<DictionaryEntity> dictionaryEntities = dictionaryService.selectList(new EntityWrapper<DictionaryEntity>());
            ServletContext servletContext = request.getServletContext();
            Map<String, Map<Integer,String>> map = new HashMap<>();
            for(DictionaryEntity d :dictionaryEntities){
                Map<Integer, String> m = map.get(d.getDicCode());
                if(m ==null || m.isEmpty()){
                    m = new HashMap<>();
                }
                m.put(d.getCodeIndex(),d.getIndexName());
                map.put(d.getDicCode(),m);
            }
            servletContext.setAttribute("dictionaryMap",map);
            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());
        dictionaryService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }

    /**
     * 最大值
     */
    @RequestMapping("/maxCodeIndex")
    public R maxCodeIndex(@RequestBody DictionaryEntity dictionary){
        logger.debug("maxCodeIndex:,,Controller:{},,dictionary:{}",this.getClass().getName(),dictionary.toString());
        List<String> descs = new ArrayList<>();
        descs.add("code_index");
        Wrapper<DictionaryEntity> queryWrapper = new EntityWrapper<DictionaryEntity>()
                .eq("dic_code", dictionary.getDicCode())
                .orderDesc(descs);
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        List<DictionaryEntity> dictionaryEntityList = dictionaryService.selectList(queryWrapper);
        if(dictionaryEntityList != null ){
            return R.ok().put("maxCodeIndex",dictionaryEntityList.get(0).getCodeIndex()+1);
        }else{
            return R.ok().put("maxCodeIndex",1);
        }
    }

    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<DictionaryEntity> dictionaryList = 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){
                            //循环
                            DictionaryEntity dictionaryEntity = new DictionaryEntity();
//                            dictionaryEntity.setDicCode(data.get(0));                    //字段 要改的
//                            dictionaryEntity.setDicName(data.get(0));                    //字段名 要改的
//                            dictionaryEntity.setCodeIndex(Integer.valueOf(data.get(0)));   //编码 要改的
//                            dictionaryEntity.setIndexName(data.get(0));                    //编码名字 要改的
//                            dictionaryEntity.setSuperId(Integer.valueOf(data.get(0)));   //父字段id 要改的
//                            dictionaryEntity.setBeizhu(data.get(0));                    //备注 要改的
//                            dictionaryEntity.setCreateTime(date);//时间
                            dictionaryList.add(dictionaryEntity);


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

                        //查询是否重复
                        dictionaryService.insertBatch(dictionaryList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            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('dictionaryGonggao','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        <el-button
                                v-if="isAuth('dictionaryGonggao','删除')"
                                :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('dictionaryGonggao','查看')"
                          :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 width="300" :align="contents.tableAlign"
                                     header-align="center"
                                     label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="isAuth('dictionaryGonggao','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('dictionaryGonggao','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('dictionaryGonggao','删除')" 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'] = "gonggao_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(0, 0, 0, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: none none solid none;
		border-color: #DCDFE6;
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
	}

	& /deep/ .el-button--primary {
		height: 30px;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: none none solid none;
		border-color: #DCDFE6;
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
	}

	& /deep/ .el-button--danger {
		height: 30px;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: none none solid none;
		border-color: #DCDFE6;
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
	}

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



声明

本博客适用于广泛的学术和教育用途,包括但不限于个人学习、开发设计,产品设计。仅供学习参考,旨在为读者提供深入理解和学术研究的材料。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值