如何使用ssm实现演出人员与观众疫情信息管理系统+vue

shangyizaoxing

于 2024-09-29 17:48:09 发布

阅读量601

点赞数 4

分类专栏： ssm 管理系统计算机毕设文章标签： ssm 后端 java

本文链接：https://blog.csdn.net/shangyizaoxing/article/details/142640724

版权

管理系统同时被 3 个专栏收录

231 篇文章 0 订阅

订阅专栏

计算机毕设

231 篇文章 0 订阅

订阅专栏

ssm

130 篇文章 0 订阅

订阅专栏

@TOC

ssm739演出人员与观众疫情信息管理系统+vue

绪论

课题背景

身处网络时代，随着网络系统体系发展的不断成熟和完善，人们的生活也随之发生了很大的变化。目前，人们在追求较高物质生活的同时，也在想着如何使自身的精神内涵得到提升，而读书就是人们获得精神享受非常重要的途径[1]。纸质版的校园失物比较沉重，携带不方便，而由于手机、平板不仅能够储存大量的校园失物信息数据，而且重量轻，可随身携带，因此现在的人们更愿意通过手机、平板等来进行在线阅读[2]。由此，开发一款演出人员与观众疫情信息管理系统非常符合人们阅读的需求。

过去人们看书需要到书店或者图书馆，而现在只要有网络，人们就可以通过手机、平板或电脑想什么时候看书就可以什么时候看，想看什么样的书就可以看什么样的书，非常的方便，并且人们把平时的闲碎时间全部利用起来进行阅读，使阅读效率大大提高，生活也变得丰富多彩起来。另外，通过演出人员与观众疫情信息管理系统，想要阅读哪本书，搜索下就能够快速找到，并且还可以对校园失物进行归类、统计和规范管理。该演出人员与观众疫情信息管理系统的界面非常清晰，使用简单，识字的人们都可以使用，并且它的功能齐全，能够满足各种各样的人的要求。

本文不仅从需求分析、设计分析、功能分析对该电子书在线系统进行了全面的分析，而且还从开发背景、开发环境、目标、流程、数据库、系统维护对该演出人员与观众疫情信息管理系统进行了总体的规划和设计。该演出人员与观众疫情信息管理系统利用vue技术和MYSQL数据库进行开发，具有很好的稳定性和可发展性。

研究现状

国外信息技术的发展步伐一直没有停止，源源不断的计算机应用软件被研发出来，并且软件技术也在不断迭代，目前世界各国的软件行业都已新兴了起来[3-5]。

与国外相比，我国信息技术的发展相对晚一些，不过后面，经过我们的不断追赶，我国的信息技术已经有了很大的进步，我国对现有的软件开发技术进行了细致的专研，目前我国已经能够独立的开发系统，并且也已经将这些软件系统应用于人们的生活中和各行各业中，目前，软件行业是我国非常受欢迎的行业[6-9]。

信息数字化使人们的各种信息能够快速传播，使人们的各种信息能够得到充分利用，同时，也大大宣传了信息数字化背后的软件系统[10-12]。软件开发团队的能力越来越强，开发技术功能越来越强大，软件系统大大提高了信息处理的效率，节省了处理者的处理时间。在阅读校园失物方面，人们阅读纸质版的校园失物，现在已经显得有些过时[13-14]。利用目前的软件开发技术开发出一款演出人员与观众疫情信息管理系统能够大大的满足人们的阅读需求，人们通过该演出人员与观众疫情信息管理系统能够快速查找、在线阅读自己喜欢的校园失物，并且也大大提高了人们阅读的效率。

研究内容

本论文主要阐述了该演出人员与观众疫情信息管理系统的开发技术、系统需求分析、系统设计、系统功能实现和系统测试。为了开发该系统，我在下面花费了很多功夫和心思，例如，到图书馆阅读vue技术、MYSQL数据库等方面的编程校园失物，又在网上搜索了很多别人做的相类似的系统，将他们比较好的设计理念应用到自己的设计当中，最后才有了现在的成果。

本论文主要分为7部分，包括：

一、绪论：阐述了该系统的背景技术、研究现状和开发意义；

二、相关技术：介绍了开发该系统所用到的各种技术；

三、系统需求分析：阐述了开发该系统的可行性分析和功能需求分析；

四、系统设计：阐述了该系统的功能模块设计和数据库设计；

五、系统实现：展示了该系统的主要功能模块界面；

六、系统测试：对开发出的该系统进行测试；

七、系统总结：总结开发该系统的整个工作过程。

系统开发环境
1. vue技术

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动

Vue.js目前最火的的一个前端框架，三大主流前端框架之一。 Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

JAVA技术

Java编程语言具有跨平台、分布式、可移植等多种特性，很多平台Java都能运行，世界各地都能够运行Java编写的程序。1995年，开发出了JAVA编程语言。JAVA编程语言具有多种特性，例如：简单、安全、可移植、鲁棒性（Robust）、编写能效高、线程多等。在互联网飞速发展的时代，Java编程语言应用也越来越普遍[19]。它的特点具有：

一、面向对象：JAVA适用于分布式环境，JAVA能够完全面向对象，包括对象的设计及联系；

二、分布式：JAVA工作的同时，带动其他计算节点工作，只要有网络，就可以访问其他对象；

三、健壮性：JAVA能够自动处理垃圾和异常，并且机制类型强；

四、安全性：当指针和内存被删除时，非法的内存就可以避免。

MYSQL数据库

数据库在每个网站的开发中都是必不可少的，过去数据库只具有数据的保存和管理功能，但随着后来的不断更新和迭代，目前的数据库不仅能够进行数据的处理，而且还能够储存不计其数的数据[20]。

该演出人员与观众疫情信息管理系统所使用的就是MYSQL数据库，当初是微软公司开发出的MYSQL数据库。MYSQL数据库总共建立了十几个相对应的表，它们之间独立联系，数据库和程序是密不可分的[21]。

MYSQL数据库的特点包括：能够应用于多种操作系统中；查询SQL时优化了算法，搜索速度提高的不少；还可以进行数据库的管理、控制、优化等操作；一个数据库可以记录不计其数的数据。

B/S结构

当前比较流行的网络化结构模式是B/S（浏览器/服务器）结构，它能够在服务器上面集中系统的所有核心功能，使系统开发人员的工作变得简单，并且开发出的系统也更容易使用和后期维护。用于比较熟悉的浏览器有360浏览器、谷歌浏览器、QQ浏览器等，用于比较熟悉的数据库有sqlserver、mysql数据库等，上边这些数据库和浏览器都可以安装在客户端上。B/S结构没有什么限制，并且还不需要专门的安装软件，只要笔记本、电脑有网络就能够访问系统。采用B/S结构开发的程序，比较好维护，只需要在客户端就可处理，不需要非得在服务器上处理，并且跟用户的交互性比较好，刷新浏览器就可进行数据信息的实时更新[22]。B/S架构如图2-1所示：

图2-1 B/S模式架构图

SSM框架技术

该演出人员与观众疫情信息管理系统是基于Spring、SpringMVC、Mybatis框架开发出来的。

2004年，Spring 框架才第一次亮相，后面也进行了很多次的更新。Spring框架包括SpringCore、Spring AOP、Spring ORM、Spring DAO、Spring Web Flow、Spring Context和Spring Web MVC等七个模块，企业应用程序就是通过这七个模块气筒不同的平台来进行开发的，Spring Web MVC中的各个元素之间形成了松散耦合[23-25]。

系统分析
1. 可行性分析

开发者在进行开发系统之前，都需要进行可行性分析，保证该系统能够被成功开发出来。

技术可行性

开发该演出人员与观众疫情信息管理系统所采用的技术是vue和MYSQL数据库。计算机专业的学生在学校期间已经比较系统的学习了很多编程方面的知识，同时也接触了很多编程软件，所以在技术开发方面还是比较有信心的。

操作可行性

该演出人员与观众疫情信息管理系统的界面简洁清楚，操作简单，用户一看就会操作。操作界面上每一步都有提示，用户只要按照提示进行操作就可以了。该演出人员与观众疫情信息管理系统具有操作可行性。

经济可行性

我现在还是一名学生，还没有一份稳定的经济收入，所以我会将开发程序的成本控制在自己所能接受的范围内。我所使用的开发软件、数据库还有设计界面用的photoshop软件都是在网上免费下载的，另外程序编写阶段所用到的源代码也是在网上免费得到的，现在在网上能下载很多有用的、免费的东西，所以开发该系统基本不花钱，具有经济可行性。

法律可行性

我是通过图书馆、百度文库、百度网页等获得的开发该演出人员与观众疫情信息管理系统所需要用到的资料和软件，都是采用的合法渠道，另外源代码和论文内容都是我自己一字一字写出来的，没有抄袭别人的，具有法律可行性。

通过上述的技术可行性、操作可行性、经济可行性以及法律可行性分析，可以看出，该演出人员与观众疫情信息管理系统完全可以进行顺利开发。

系统性能分析
存储性：该演出人员与观众疫情信息管理系统的数据库功能比较强大，能够录入很多纷繁复杂的信息，且能够保证数据的实时性；

二、易学性：该演出人员与观众疫情信息管理系统使用起来非常简单，用户一看就会，不需要进行专门的培训，非常好上手，使用个一两次就能够熟练操作；

三、数据要求：录入的数据准确可靠，能够及时进行更新，可以独立保存，删除一些不需要的数据；

四、稳定性：该演出人员与观众疫情信息管理系统能够稳定的运行，界面清晰明了；

五、可靠性：该演出人员与观众疫情信息管理系统安装有拦截器，可以对病毒等进行拦截，并且还对信息进行了保护措施，用户可以放心使用。

系统功能分析
1. 角色需求

该演出人员与观众疫情信息管理系统主要为管理员和用户两类用户角色提供需求，管理员在后台可以对系统进行全面管理，用户在前台可以进行查看系统信息，注册登录，查询校园失物，评论，下载校园失物等操作。

用户静态结构如图3-1所示。

图3-1 用户静态结构图

系统流程分析
1. 注册流程

用户注册之后才可以登录系统，用户注册流程如图3-2所示：

图3-2 注册流程图

登录流程

用户需要登录系统之后，才可以进行校园失物评论、校园失物下载等操作。而管理员也只有登录系统之后，可以对系统各个方面的内容进行管理，不受任何限制。用户登录流程如图3-3所示。

图3-3 登录流程图

系统设计
1. 系统概要设计

本文通过B/S结构(Browser/Server,浏览器/服务器结构)开发的该演出人员与观众疫情信息管理系统，B/S结构的优点很多，例如：开发容易、强的共享性、便于维护等，只要有网络，用户可以随时随地进行使用。

系统工作原理如图4-1所示。

图4-1 系统工作原理图

系统结构设计

系统结构设计就像一个树状结构一样，一个树干有很多分支，大任务相当于树干，小任务相当于树枝，只有需求分析信息弄清楚之后，才能保证每个小任务都能实现目标，对初步设计好的系统再进行不断优化，最终得到一个具体现实的系统结构。

管理员功能模块和用户功能模块是该演出人员与观众疫情信息管理系统的两大部分，系统结构如图4-2所示。

演出人员与观众疫情信息管理系统

用户信息管理

公告信息管理

考勤通知管理

考勤详情管理

员工信息管理

用户信息修改

用户信息新增

员工信息添加

员工信息删除

员工信息修改

考勤详情添加

考勤详情修改

考勤详情删除

公告信息添加

公告信息删改

公告信息删除

考勤通知添加

考勤通知修改

考勤通知删除

公告类型管理

公告类型修改

公告类型删除

公告类型添加

图4-2 系统结构图

4.3 数据库设计

开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合，存储在一起的这些数据也是按照一定的组织方式进行的。目前，数据库能够服务于多种应用程序，则是源于它存储方式最佳，具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段时间的发展，从最初的不为人知，到现在的人尽皆知，其相关技术也越发成熟，同时也拥有着坚实的理论基础。

4.3.1 数据库概念设计

这部分内容需要借助数据库关系图来完成，也需要使用专门绘制数据库关系图的工具，比如Visio工具就可以设计E-R图（数据库关系图）。设计数据库，也需要按照设计的流程进行，首先还是要根据需求完成实体的确定，分析实体具有的特征，还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法，绘制本系统的E-R图。不管是使用亿图软件，还是Visio工具，对于E-R模型的表示符号都一样，通常矩形代表实体，实体间存在的关系用菱形符号表示，实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形，菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。

（1）下图是用户实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\用户.jpg$ 图4.1 用户实体属性图

（2）下图是公告信息实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\公告信息.jpg$ 图4.2 公告信息实体属性图

（3）下图是字典表实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\字典表.jpg$ 图4.3 字典表实体属性图

（4）下图是员工实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\员工.jpg$ 图4.4 员工实体属性图

（5）下图是留言版实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\留言版.jpg$ 图4.5 留言版实体属性图

（6）下图是演出信息实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\演出信息.jpg$ 图4.6 演出信息实体属性图

（7）下图是购票订单实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\购票订单.jpg$ 图4.7 购票订单实体属性图

（8）下图是考勤通知实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\考勤通知.jpg$ 图4.8 考勤通知实体属性图

（9）下图是考勤详情实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\考勤详情.jpg$ 图4.9 考勤详情实体属性图

（10）下图是员工疫苗接种情况实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\员工疫苗接种情况.jpg$ 图4.10 员工疫苗接种情况实体属性图

（11）下图是用户表实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\yanchurenyuanyugguanzhong\用户表.jpg$ 图4.11 用户表实体属性图

数据库表设计

采用MYSQL数据库对该演出人员与观众疫情信息管理系统的数据进行存储，数据库中所包括的各个数据库表的详细信息如下所示：

表4.1字典表表

序号	列名	数据类型	说明	允许空
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.2考勤通知表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	kaoqintongzhi_name	String	通知标题	是
3	kaoqintongzhi_types	Integer	考勤类型	是
4	kaoqintongzhi_time	Date	考勤结束时间	是
5	kaoqintongzhi_content	String	通知详情	是
6	insert_time	Date	添加时间	是
7	create_time	Date	创建时间	是

表4.3考勤详情表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	kaoqintongzhi_id	Integer	考勤通知	是
3	yuangong_id	Integer	员工	是
4	kaoqinxiangqing_tiwen	BigDecimal	体温	是
5	insert_time	Date	考勤时间	是
6	create_time	Date	创建时间	是

表4.4留言版表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	liuyan_name	String	留言标题	是
4	liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.5公告信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	news_name	String	公告标题	是
3	news_types	Integer	公告类型	是
4	news_photo	String	公告图片	是
5	insert_time	Date	添加时间	是
6	news_content	String	公告详情	是
7	create_time	Date	创建时间	是

表4.6演出信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yanchuxinxi_name	String	演出标题	是
3	yanchuxinxi_types	Integer	表演类型	是
4	yanchuxinxi_photo	String	封面	是
5	yanchuxinxi_yanyuan	String	主要演员	是
6	yanchuxinxi_kucun_number	Integer	位置数量	是
7	yanchuxinxi_new_money	BigDecimal	价格	是
8	yanchuxinxi_time	Date	演出时间	是
9	yanchuxinxi_content	String	演出详情	是
10	insert_time	Date	添加时间	是
11	create_time	Date	创建时间	是

表4.7购票订单表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yanchuxinxi_order_uuid_number	String	订单号	是
3	yanchuxinxi_id	Integer	演出信息	是
4	yonghu_id	Integer	用户	是
5	buy_number	Integer	购买数量	是
6	yanchuxinxi_order_true_price	BigDecimal	实付价格	是
7	yanchuxinxi_order_types	Integer	订单状态	是
8	insert_time	Date	订单创建时间	是
9	create_time	Date	创建时间	是

表4.8用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_name	String	用户姓名	是
3	yonghu_photo	String	头像	是
4	yonghu_phone	String	手机号	是
5	yonghu_email	String	电子邮箱	是
6	new_money	BigDecimal	余额	是
7	yonghu_delete	Integer	假删	是
8	create_time	Date	创建时间	是

表4.9员工表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yuangong_name	String	员工姓名	是
3	yuangong_photo	String	头像	是
4	yuangong_phone	String	手机号	是
5	yuangong_email	String	电子邮箱	是
6	yuangong_delete	Integer	假删	是
7	create_time	Date	创建时间	是

表4.10员工疫苗接种情况表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yuangongyimiaojiezhong_name	String	接种疫苗	是
3	yuangongyimiaojiezhong_types	Integer	疫苗类型	是
4	yuangongyimiaojiezhong_time	Date	接种时间	是
5	yonghu_id	Integer	员工	是
6	yuangongyimiaojiezhong_text	String	备注	是
7	insert_time	Date	记录时间	是
8	create_time	Date	创建时间	是

表4.11用户表表

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

系统的实现
1. 功能模块的实现

5.1用户信息管理

如图5.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，

还进行了对用户名称的模糊查询的条件

图5.1 用户信息管理页面

5.2 员工信息管理

如图5.2显示的就是员工信息管理页面，此页面提供给管理员的功能有：查看已发布的员工信息数据，修改员工信息，员工信息作废，即可删除，还进行了对员工信息名称的模糊查询员工信息信息的类型查询等等一些条件。

图5.2 员工信息管理页面

5.3考勤通知管理

如图5.3显示的就是考勤通知管理页面，此页面提供给管理员的功能有：根据考勤通知进行条件查询，还可以对考勤通知进行新增、修改、查询操作等等。

图5.3 考勤通知管理页面

5.1公告信息管理

如图5.4显示的就是公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。

图5.4 公告信息管理页面

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

    @Autowired
    private YuangongService yuangongService;


    @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"));
        else if("员工".equals(role))
            params.put("yuangongId",request.getSession().getAttribute("userId"));
        params.put("yuangongDeleteStart",1);params.put("yuangongDeleteEnd",1);
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = yuangongService.queryPage(params);

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

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

    }

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

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

        Wrapper<YuangongEntity> queryWrapper = new EntityWrapper<YuangongEntity>()
            .eq("username", yuangong.getUsername())
            .or()
            .eq("yuangong_phone", yuangong.getYuangongPhone())
            .andNew()
            .eq("yuangong_delete", 1)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YuangongEntity yuangongEntity = yuangongService.selectOne(queryWrapper);
        if(yuangongEntity==null){
            yuangong.setYuangongDelete(1);
            yuangong.setCreateTime(new Date());
            yuangong.setPassword("123456");
            yuangongService.insert(yuangong);
            return R.ok();
        }else {
            return R.error(511,"账户或者手机号已经被使用");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<YuangongEntity> queryWrapper = new EntityWrapper<YuangongEntity>()
            .notIn("id",yuangong.getId())
            .andNew()
            .eq("username", yuangong.getUsername())
            .or()
            .eq("yuangong_phone", yuangong.getYuangongPhone())
            .andNew()
            .eq("yuangong_delete", 1)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YuangongEntity yuangongEntity = yuangongService.selectOne(queryWrapper);
        if("".equals(yuangong.getYuangongPhoto()) || "null".equals(yuangong.getYuangongPhoto())){
                yuangong.setYuangongPhoto(null);
        }
        if(yuangongEntity==null){
            yuangongService.updateById(yuangong);//根据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());
        ArrayList<YuangongEntity> list = new ArrayList<>();
        for(Integer id:ids){
            YuangongEntity yuangongEntity = new YuangongEntity();
            yuangongEntity.setId(id);
            yuangongEntity.setYuangongDelete(2);
            list.add(yuangongEntity);
        }
        if(list != null && list.size() >0){
            yuangongService.updateBatchById(list);
        }
        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<YuangongEntity> yuangongList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("../../upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            YuangongEntity yuangongEntity = new YuangongEntity();
//                            yuangongEntity.setUsername(data.get(0));                    //账户 要改的
//                            //yuangongEntity.setPassword("123456");//密码
//                            yuangongEntity.setYuangongName(data.get(0));                    //员工姓名 要改的
//                            yuangongEntity.setYuangongPhoto("");//详情和图片
//                            yuangongEntity.setYuangongPhone(data.get(0));                    //手机号 要改的
//                            yuangongEntity.setYuangongEmail(data.get(0));                    //电子邮箱 要改的
//                            yuangongEntity.setSexTypes(Integer.valueOf(data.get(0)));   //性别 要改的
//                            yuangongEntity.setYuangongDelete(1);//逻辑删除字段
//                            yuangongEntity.setCreateTime(date);//时间
                            yuangongList.add(yuangongEntity);


                            //把要查询是否重复的字段放入map中
                                //账户
                                if(seachFields.containsKey("username")){
                                    List<String> username = seachFields.get("username");
                                    username.add(data.get(0));//要改的
                                }else{
                                    List<String> username = new ArrayList<>();
                                    username.add(data.get(0));//要改的
                                    seachFields.put("username",username);
                                }
                                //手机号
                                if(seachFields.containsKey("yuangongPhone")){
                                    List<String> yuangongPhone = seachFields.get("yuangongPhone");
                                    yuangongPhone.add(data.get(0));//要改的
                                }else{
                                    List<String> yuangongPhone = new ArrayList<>();
                                    yuangongPhone.add(data.get(0));//要改的
                                    seachFields.put("yuangongPhone",yuangongPhone);
                                }
                        }

                        //查询是否重复
                         //账户
                        List<YuangongEntity> yuangongEntities_username = yuangongService.selectList(new EntityWrapper<YuangongEntity>().in("username", seachFields.get("username")).eq("yuangong_delete", 1));
                        if(yuangongEntities_username.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YuangongEntity s:yuangongEntities_username){
                                repeatFields.add(s.getUsername());
                            }
                            return R.error(511,"数据库的该表中的 [账户] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                         //手机号
                        List<YuangongEntity> yuangongEntities_yuangongPhone = yuangongService.selectList(new EntityWrapper<YuangongEntity>().in("yuangong_phone", seachFields.get("yuangongPhone")).eq("yuangong_delete", 1));
                        if(yuangongEntities_yuangongPhone.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YuangongEntity s:yuangongEntities_yuangongPhone){
                                repeatFields.add(s.getYuangongPhone());
                            }
                            return R.error(511,"数据库的该表中的 [手机号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        yuangongService.insertBatch(yuangongList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }


    /**
    * 登录
    */
    @IgnoreAuth
    @RequestMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        YuangongEntity yuangong = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("username", username));
        if(yuangong==null || !yuangong.getPassword().equals(password))
            return R.error("账号或密码不正确");
        else if(yuangong.getYuangongDelete() != 1)
            return R.error("账户已被删除");
        //  // 获取监听器中的字典表
        // ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();
        // Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");
        // Map<Integer, String> role_types = dictionaryMap.get("role_types");
        // role_types.get(.getRoleTypes());
        String token = tokenService.generateToken(yuangong.getId(),username, "yuangong", "员工");
        R r = R.ok();
        r.put("token", token);
        r.put("role","员工");
        r.put("username",yuangong.getYuangongName());
        r.put("tableName","yuangong");
        r.put("userId",yuangong.getId());
        return r;
    }

    /**
    * 注册
    */
    @IgnoreAuth
    @PostMapping(value = "/register")
    public R register(@RequestBody YuangongEntity yuangong){
//    	ValidatorUtils.validateEntity(user);
        Wrapper<YuangongEntity> queryWrapper = new EntityWrapper<YuangongEntity>()
            .eq("username", yuangong.getUsername())
            .or()
            .eq("yuangong_phone", yuangong.getYuangongPhone())
            .andNew()
            .eq("yuangong_delete", 1)
            ;
        YuangongEntity yuangongEntity = yuangongService.selectOne(queryWrapper);
        if(yuangongEntity != null)
            return R.error("账户或者手机号已经被使用");
        yuangong.setYuangongDelete(1);
        yuangong.setCreateTime(new Date());
        yuangongService.insert(yuangong);
        return R.ok();
    }

    /**
     * 重置密码
     */
    @GetMapping(value = "/resetPassword")
    public R resetPassword(Integer  id){
        YuangongEntity yuangong = new YuangongEntity();
        yuangong.setPassword("123456");
        yuangong.setId(id);
        yuangongService.updateById(yuangong);
        return R.ok();
    }


    /**
     * 忘记密码
     */
    @IgnoreAuth
    @RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request) {
        YuangongEntity yuangong = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("username", username));
        if(yuangong!=null){
            yuangong.setPassword("123456");
            boolean b = yuangongService.updateById(yuangong);
            if(!b){
               return R.error();
            }
        }else{
           return R.error("账号不存在");
        }
        return R.ok();
    }


    /**
    * 获取用户的session用户信息
    */
    @RequestMapping("/session")
    public R getCurrYuangong(HttpServletRequest request){
        Integer id = (Integer)request.getSession().getAttribute("userId");
        YuangongEntity yuangong = yuangongService.selectById(id);
        if(yuangong !=null){
            //entity转view
            YuangongView view = new YuangongView();
            BeanUtils.copyProperties( yuangong , view );//把实体数据重构到view中

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


    /**
    * 退出
    */
    @GetMapping(value = "logout")
    public R logout(HttpServletRequest request) {
        request.getSession().invalidate();
        return R.ok("退出成功");
    }




    /**
    * 前端列表
    */
    @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 = yuangongService.queryPage(params);

        //字典表数据转换
        List<YuangongView> list =(List<YuangongView>)page.getList();
        for(YuangongView 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);
        YuangongEntity yuangong = yuangongService.selectById(id);
            if(yuangong !=null){


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

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


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody YuangongEntity yuangong, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,yuangong:{}",this.getClass().getName(),yuangong.toString());
        Wrapper<YuangongEntity> queryWrapper = new EntityWrapper<YuangongEntity>()
            .eq("username", yuangong.getUsername())
            .or()
            .eq("yuangong_phone", yuangong.getYuangongPhone())
            .andNew()
            .eq("yuangong_delete", 1)
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YuangongEntity yuangongEntity = yuangongService.selectOne(queryWrapper);
        if(yuangongEntity==null){
            yuangong.setYuangongDelete(1);
            yuangong.setCreateTime(new Date());
        yuangong.setPassword("123456");
        yuangongService.insert(yuangong);
            return R.ok();
        }else {
            return R.error(511,"账户或者手机号已经被使用");
        }
    }


}

FileUtil.java

package com.utils;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

/**
* @author yangliyuan
* @version 创建时间：2020年2月7日 下午8:01:14
* 类说明 : 
*/

public class FileUtil {
	public static byte[] FileToByte(File file) throws IOException {
		// 将数据转为流
		@SuppressWarnings("resource")
		InputStream content = new FileInputStream(file);
		ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
		byte[] buff = new byte[100];
		int rc = 0;
		while ((rc = content.read(buff, 0, 100)) > 0) {
			swapStream.write(buff, 0, rc);
		}
		// 获得二进制数组
		return swapStream.toByteArray();
	}
}

YonghuServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.YonghuDao;
import com.entity.YonghuEntity;
import com.service.YonghuService;
import com.entity.view.YonghuView;

/**
 * 用户 服务实现类
 */
@Service("yonghuService")
@Transactional
public class YonghuServiceImpl extends ServiceImpl<YonghuDao, YonghuEntity> implements YonghuService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        if(params != null && (params.get("limit") == null || params.get("page") == null)){
            params.put("page","1");
            params.put("limit","10");
        }
        Page<YonghuView> page =new Query<YonghuView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

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('dictionaryYanchuxinxi','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        <el-button
                                v-if="isAuth('dictionaryYanchuxinxi','删除')"
                                :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('dictionaryYanchuxinxi','查看')"
                          :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('dictionaryYanchuxinxi','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('dictionaryYanchuxinxi','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('dictionaryYanchuxinxi','删除')" 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'] = "yanchuxinxi_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>