基于个性化定制的智慧校园管理系统设计与开发

@TOC

springboot296基于个性化定制的智慧校园管理系统设计与开发

第1章绪论

1.1 课题背景

二十一世纪互联网的出现，改变了几千年以来人们的生活，不仅仅是生活物资的丰富，还有精神层次的丰富。在互联网诞生之前，地域位置往往是人们思想上不可跨域的鸿沟，信息的传播速度极慢，信息处理的速度和要求还是通过人们骑马或者是信鸽传递，这些信息传递都是不可控制的，中间很有可能丢失，信息的传递水平决定了人们生活的水平。如今大家都在使用互联网软件产品，从内部管理设置计算机管理，提高内部信息化的管理水准，从外部市场也可以用计算机获取相关数据进行处理，如今各行各业已经严重依赖于计算机了。

本课题研究和开发智慧校园管理系统，让安装在计算机上的该系统变成管理人员的小帮手，提高校园综合信息处理速度，规范校园综合信息处理流程，让管理人员的产出效益更高。

1.2 课题意义

传统处理数据，必须是一张张纸，然后处理完毕又是统计在一张张纸上面，不断的重复处理，最终有个结果给最高层作为参考，这个模式在互联网没有出现之前，是一种常见的事情，信息管理的效率提不上去，人多不一定力量大，因为人多肯定更加消耗资源，并且因为人类需要休息，需要管理，思想会不统一，会偷懒，所以人们研究出专门帮助人们计算的机器，就是计算机的前身，到了互联网时代，人们发现完全可以让程序供应商提供解决方案，自己挑选自己合适的方案来提高自己的产出比。所以在日常工作和生活中会发现各种各样方便人们的工具。

本课题研发的智慧校园管理系统，就是提供校园综合信息处理的解决方案，它可以短时间处理完信息，并且这些信息都有专门的存储设备，而且数据的备份和迁移都可以设定为无人值守，从人力角度和信息处理角度以及信息安全角度，智慧校园管理系统是完胜传统纸质操作的。

1.3 研究内容

本文对智慧校园管理系统的设计与实现分成六个章节来说明。

第1章：研究智慧校园管理系统的背景，以及开发智慧校园管理系统的意义。

第2章：对开发智慧校园管理系统的环境还有技术进行说明。

第3章：分析智慧校园管理系统的可行性，性能，流程以及功能。

第4章：设计智慧校园管理系统的功能结构，设计数据库E-R图以及对数据表的存储结构进行设计。

第5章：实现智慧校园管理系统的功能并进行功能界面展示。

第6章：对系统测试进行阐述，以及对本系统部分功能进行检测。

第2章开发环境与技术

本章节对开发智慧校园管理系统需要搭建的开发环境，还有智慧校园管理系统开发中使用的编程技术等进行阐述。

2.1 Java语言

Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生，不仅仅是创造者感觉C语言在编程上面很麻烦，如果只是专注于业务逻辑的处理，会导致忽略了各种指针以及垃圾回收这些操作，导致出现问题需要解决的时间往往大于正常编程处理业务逻辑的时间，这些是非常浪费时间的。Java语言的创造者就考虑到如何避免这个问题，把指针处理和垃圾处理全部自动化，虽然这会损失一些性能，但是计算机硬件在性能上的发展速度是很快的，这些性能是可以忽略考虑的。并且C语言是针对硬件开发的语言，虽然执行效率高，但是随着硬件的变化或者操作系统的变更，就需要重新编写程序，造成重复劳动，只有解决重复性劳动的语言才算符合生存规律的语言。Java语言的创造者就针对C语言的缺点专门开发了Java语言。让Java语言不管是在什么样的环境里都是可以运行，因为在Java语言运行外面套了一个壳，也就是虚拟机，只要是Java虚拟机能安装的电脑都可以运行Java的程序。

2.2 MYSQL数据库

MySQL数据库是一种数据存放方面的专业软件，也是传统的行式数据模式，获取一些数据是先一行一行的获取，然后一行一行的显示，与列式数据库不同。行式数据库主要是处理最重要的数据逻辑部分，并且必须是有效数据，这样每一处的数据关联都是不可损坏，对数据安全要求比较严格还是用MySQL数据库比较好。列式数据库的发明仅仅是因为读取效率高，但是也就仅仅如此罢了。MySQL虽然比起Oracle或者SQL Server来讲，安装包只是几十兆甚至几百兆，有点小，但是功能并不会弱到哪里，严格遵循SQL标准语法。MySQL的数据存放形式从大向小的说是数据库最大，然后是表，每个表里面存放数据是有一定的规则的，数据存放是表格形式的，也就是说有横也有竖，横着的为行，一般表示一条数据，表与表之间还可以进行关联，进行分表操作，如果一条数据相关项目属性太多，那么可以把有效的相关联系做成关联，可以设定是否唯一。

2.3 IDEA开发工具

IDEA是捷克共和国的Java程序员开发人员创造的一个开发软件，刚开始主要是对于用Eclipse软件他们用得不顺手，所以直接开发了这款软件。之所以不顺手原因在于没有代码提升功能，原因是Eclipse只是把代码提示作为一种插件形式的存在，如果有些程序开发人员不清楚代码提示插件可能会出问题，并且代码提示只是用来作为插件，所以功能上有所欠缺。IDEA不仅仅代码提示做的很好，在代码重构上面更上如虎添翼，程序开发人员可以选择一段代码然后IDEA就会对代码进行分解重构，有效的把代码弄得更够层次感，复用性更高，用着更简洁和方便，大大的减少了代码工作量，提升了代码开发效率。当然，IDEA对于使用者这么好，肯定也是有目的的，原因在于插件越多越友好，就需要花费大量的金钱来使用，所以说IDEA使用主要是看自己喜好。

2.4 Spring Boot框架

Spring Boot是一种不需要代码生成的一种框架，并且可以不需要配置任何的XML文件就可以，因为Spring Boot里面自带了很多接口，只需要配置不同的接口就会自动的应用并且识别需要的依赖，在配置方面非常的方便，使用起来感觉像没有用到框架的感觉。Spring Boot有很多默认的配置文件，并且可以对默认的配置文件进行修改，可以设置为自动加载，可以对异常处理分为全局异常处理和默认异常处理。Spring Boot使用过程中就像是使用什么直接注册什么，所谓的注册也就是在对应的类和方法上面进行一个特殊的声明即可。

第3章系统分析

本文作者在确定了研究的课题之后，从各大数字图书馆下载文献来阅读，并了解同类型的网站具备的大致功能，然后具体事务具体分析，得出本系统要研究的具体功能与性能。虽然分析系统这一阶段性工作主要是确定功能，但它却影响着后面系统开发环节的进展，系统分析这个环节是不能少的。

3.1 可行性分析

从三个不同的角度来分析，确保开发成功的前提是有可行性分析，只有进行提前分析，符合程序开发流程才不至于开发过程的中断。

3.1.1 技术可行性

在技术实现层次，分析了好几种技术实现方法，并且都有对应的成功案例，也有很多开源模块可以进行参考，所以从技术可行性分析来讲，实现智慧校园管理系统是没有问题的。

3.1.2 经济可行性

对于身为学生的开发者而言，在经济资源上面可用者很少，为了开发智慧校园管理系统，通过开发软件对硬件的要求，发现自己的电脑是完全能用来开发的，并且学校机房的配置也可以达到要求。最重要的是选择的技术都可以在网上找到不花钱的教程以及资料，因为不花钱，所以经济方面是具有可行性的。

3.1.3 操作可行性

智慧校园管理系统的具体实现，本身参考人类的正常操作逻辑，把常用的操作习惯当做主要的导航实现，可以让使用者更快速的理解并且上手操作，实现符合逻辑的操作流程是操作可行性的具体体现。

以上就是从不同的角度来分析，确保了智慧校园管理系统的正常开展。

3.2 系统流程

智慧校园管理系统投入使用后，使用者如果能看到相应的流程操作图会提高程序的理解能力。

3.2.1 操作流程

使用者在操作智慧校园管理系统中，应该按照本系统提供的操作流程（图3.1即为本系统的操作流程图）进行操作，可以减少操作失误，从而节省进入智慧校园管理系统的时间。

图3.1 系统操作流程

3.2.2 登录流程

智慧校园管理系统通过登录功能（图3.2即为其登录的流程）引导使用者进入指定的功能操作区，也避免非本系统的用户享受本系统提供的服务以及查看本系统提供的信息，进而保证用户安全。

图3.2 登录流程

3.2.3 删除信息流程

智慧校园管理系统在经过长期使用后，会产生很多的数据信息。为了腾出存储空间存放更多的数据，本系统数据库中存储的数据，一些没有参考价值的数据需要进行删除（图3.3即为删除信息的流程），删除数据过程中，为避免误删，使用者要根据系统的提示来决定是否删除数据。

图3.3 删除信息流程

3.2.4 添加信息流程

智慧校园管理系统提供可视化的功能操作区，非常方便使用者进行数据操作，当使用者往系统中录入数据时（图3.4即为添加信息的流程），本系统也会进行数据合法性的判断，符合要求的数据才能够在数据库指定表中进行登记。

图3.4 添加信息流程

3.3 性能需求

需求分析少不了对项目用到的硬件设备进行分析，这样才符合正常的分析流程。只谈功能需求不谈性能需求，是一件很严重的事情，可能会导致一些不可控的问题出现。

以下从这几个角度来分析系统性能。

(1)系统数据的容量：从数据角度来分析，每个表和每个数据库，达到的数据量到一定的程度，是否需要分表或者是分库，超过了数据的设定限度，可能会导致数据反映迟钝，容错量增加。

(2)数据精度的要求：需要对需求分析里面数据设定环节，考虑相应的数据精度问题，需要发现数据是常用的精度还是非常用的精度，进而设定不同的数值。

(3)时间响应要求：从用户提交操作，到页面反映，中间有个数据处理的问题，需要考虑预测数据量的大小，提前预案分库分表的设计，数据量再大就要考虑增加列式数据库的问题，这些都不是一拍脑门就能决定的，都需要经验和同行业的数据分析研判，才能符合用户的要求，毕竟响应时间太久操作起来也不舒服。

(4)普适性问题：用户使用应该不需要感知服务端的数据量问题或者响应问题，只需要任意一台电脑，不需要更多的操作，打开浏览器就能用，太多的设置以及操作，不符合普适性操作。

(5)页面设计问题：功能符合要求之后，肯定是要丰富页面的。页面设计才是用户长时间面对的问题，首先考虑数据的整洁性，让页面看起来更加的清爽。颜色与数据方面，该不同颜色就不同颜色，降低用户长时间使用出现的视觉疲劳，让用户使用起来心情不至于太差。

(6)系统的稳定性：正常用户操作系统页面，必须是该提交提交，正常输入符合逻辑，不能随随便便的就出各种问题，导致用户操作疲惫，并且输入的数据和回显的数据符合用户的要求。如果正常操作都会出现问题，那设计就是不稳定的，这一点肯定不行。只要是与数据进行交互的系统，都必须稳定。系统稳定从开发部署角度上来分析，可以考虑数据的冗余备份功能，自动值守功能，机房数据同步，机房分开的功能，这些都可以让系统的稳定性得到提升。

系统的性能需求需要对业务很熟练的情况下判断然后分析，再从系统性能需求来逐条实现，可以让设计的系统有使用价值。

3.4 功能需求

智慧校园管理系统根据使用权限的角度进行功能分析，并运用用例图来展示各个权限需要操作的功能。

图3.5即为管理员用例图，管理员权限操作的功能包括管理记事本，管理备忘录，管理软件，管理课程，管理音乐，管理宿舍，管理成绩，管理老师等。

图3.5 管理员用例图

图3.6即为老师用例图，老师权限操作的功能包括管理成绩，管理宿舍，管理宿舍归寝，管理宿舍报修，管理音乐，管理软件等。

图3.6 老师用例图

图3.7即为用户用例图，用户权限操作的功能包括下载软件安装包，观看课程视频以及软件安装视频，播放音乐，查看成绩，管理备忘录以及记事本信息，提交宿舍报修信息，查看宿舍人员信息等。

图3.7 用户用例图

第4章系统设计

用户对着浏览器操作，肯定会出现某些不可预料的问题，但是不代表着系统对于用户在浏览器上的操作不进行处理，所以说，要提前考虑可能会出现的问题。

4.1 功能结构设计

图4.1即为设计的管理员功能结构，管理员权限操作的功能包括管理记事本，管理备忘录，管理软件，管理课程，管理音乐，管理宿舍，管理成绩，管理老师等。

图4.1 管理员功能结构

图4.2即为设计的老师功能结构，老师权限操作的功能包括管理成绩，管理宿舍，管理宿舍归寝，管理宿舍报修，管理音乐，管理软件等。

图4.2 老师功能结构

图4.3即为设计的用户功能结构，用户权限操作的功能包括下载软件安装包，观看课程视频以及软件安装视频，播放音乐，查看成绩，管理备忘录以及记事本信息，提交宿舍报修信息，查看宿舍人员信息等。

图4.3 用户功能结构

4.2 数据库设计

智慧校园管理系统运行中产生的数据需要按照提前设置的存储规则进行保存，设计出一个符合项目的最优数据存储格式，因为它能减少用户的等待时间，还可以对系统的请求在最短时间内进行响应。所以，对数据库设计时，需要对功能需求进行详细的拆分，以及对业务状态的细分，然后设计具体的存储规则，保证数据库能正常运作，缩短数据处理时间，并在一定程度上降低数据冗余，节省存储空间。

4.2.1 数据库概念设计

实体-联系图还有一个名称即E-R图，是Entity Relationship Diagram各英文单词首字母的缩写，它这种概念模型通常用于对现实世界进行描述。同时它还是一种能够直观表达数据中实体，联系，属性的有效手段。绘制E-R图能够选择的工具也有很多，但是Office Visio 这款软件在E-R图的绘制上一般都是作为首选工具，因为它是基于可视化处理，使用它创建E-R图非常简单。使用基本的E-R图构成元素，比如椭圆，菱形，矩形，还有实线段来表达对应的信息，椭圆代表属性，即实体的特征，矩形代表实体，即数据库中的一个具体数据表，菱形代表实体中相互关系，实线段主要是完成椭圆，矩形，菱形的连接。

（1）图4.4即为宿舍报修这个实体所拥有的属性值。

图4.4 宿舍报修实体属性图

（2）图4.5即为备忘录这个实体所拥有的属性值。

图4.5 备忘录实体属性图

（3）图4.6即为成绩这个实体所拥有的属性值。

图4.6 成绩实体属性图

图4.7即为软件这个实体所拥有的属性值。

图4.7 软件实体属性图

图4.8即为课程这个实体所拥有的属性值。

图4.8 课程实体属性图

图4.9即为音乐这个实体所拥有的属性值。

图4.9 音乐实体属性图

图4.10即为用户这个实体所拥有的属性值。

图4.10 用户实体属性图

图4.11即为上面介绍的实体中存在的联系。

图4.11实体间关系E-R图

4.2.2 数据库物理设计

本小节主要任务即是根据上述内容进行数据存储结构的设计，实体的属性就用来表示字段名称，不同的字段表示的数据类型以及取值都不相同，以及该表各个字段是否能够保持空等进行说明，设计完成一张数据表的结构之后，在保存时同样要命名，尽量选择英文名称进行命名并保存，还不容易导致系统出错。接下来就对设计的表进行简单说明。

表4.1 宿舍报修表

字段	注释	类型	空
id (主键)	主键	int(11)	否
sushe_id	宿舍	int(11)	是
yonghu_id	用户	int(11)	是
insert_time	报修时间	timestamp	是
baoxiu_name	报修名称	varchar(200)	是
baoxiu_photo	报修图片	varchar(200)	是
baoxiu_content	报修内容	text	是
baoxiu_types	报修状态	int(11)	是
create_time	创建时间	timestamp	是

表4.2 备忘录表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
beiwanglu_name	备忘录名称	varchar(200)	是
beiwanglu_types	备忘录类型	int(11)	否
beiwanglu_content	备忘录详情	text	是
insert_time	记录时间	timestamp	是
create_time	创建时间	timestamp	是

表4.3 成绩表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
kecheng_id	课程	int(11)	是
chengji_name	成绩名称	varchar(200)	是
chengji_chengji	成绩	decimal(10,2)	是
beizhu	备注	varchar(200)	是
insert_time	录入时间	timestamp	是
create_time	创建时间	timestamp	是

表4.4 记事本表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
jishiben_name	记事本名称	varchar(200)	是
jishiben_types	记事本类型	int(11)	否
jishiben_content	记事本详情	text	是
insert_time	记录时间	timestamp	是
create_time	创建时间	timestamp	是

表4.5 计算机专业相关的软件表

字段	注释	类型	空
id (主键)	主键	int(11)	否
laoshi_id	老师	int(11)	是
jisuanjizhuanyeruanjian_uuid_number	软件编号	varchar(200)	是
jisuanjizhuanyeruanjian_name	软件名称	varchar(200)	是
jisuanjizhuanyeruanjian_photo	软件照片	varchar(200)	是
jisuanjizhuanyeruanjian_video	安装教程	varchar(200)	是
jisuanjizhuanyeruanjian_file	安装包	varchar(200)	是
jisuanjizhuanyeruanjian_types	软件类型	int(11)	是
jisuanjizhuanyeruanjian_content	软件介绍	text	是
shangxia_types	是否上架	int(11)	是
jisuanjizhuanyeruanjian_delete	逻辑删除	int(11)	是
create_time	创建时间	timestamp	是

表4.6 计算机专业相关的软件收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jisuanjizhuanyeruanjian_id	计算机专业相关的软件	int(11)	是
yonghu_id	用户	int(11)	是
jisuanjizhuanyeruanjian_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.7 计算机专业相关的软件留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jisuanjizhuanyeruanjian_id	计算机专业相关的软件	int(11)	是
yonghu_id	用户	int(11)	是
jisuanjizhuanyeruanjian_liuyan_text	留言内容	text	是
insert_time	留言时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4.8 课程表

字段	注释	类型	空
id (主键)	主键	int(11)	否
laoshi_id	老师	int(11)	是
kecheng_uuid_number	课程编号	varchar(200)	是
kecheng_name	课程名称	varchar(200)	是
kecheng_photo	课程照片	varchar(200)	是
kecheng_video	课程视频	varchar(200)	是
kecheng_file	课件	varchar(200)	是
kecheng_types	课程类型	int(11)	是
kecheng_clicknum	课程热度	int(11)	是
kecheng_content	课程介绍	text	是
shangxia_types	是否上架	int(11)	是
kecheng_delete	逻辑删除	int(11)	是
create_time	创建时间	timestamp	是

表4.9 课程收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
kecheng_id	课程	int(11)	是
yonghu_id	用户	int(11)	是
kecheng_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.10 课程留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
kecheng_id	课程	int(11)	是
yonghu_id	用户	int(11)	是
kecheng_liuyan_text	留言内容	text	是
insert_time	留言时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4.11 老师表

字段	注释	类型	空
id (主键)	主键	int(11)	否
username	账户	varchar(200)	是
password	密码	varchar(200)	是
laoshi_name	老师姓名	varchar(200)	是
laoshi_phone	老师手机号	varchar(200)	是
laoshi_photo	老师头像	varchar(200)	是
sex_types	性别	int(11)	是
laoshi_email	电子邮箱	varchar(200)	是
create_time	创建时间	timestamp	是

表4.12 宿舍表

字段	注释	类型	空
id (主键)	主键	int(11)	否
sushe_name	宿舍名称	varchar(200)	是
sushe_address	宿舍地址	varchar(200)	是
sushe_content	宿舍详情	text	是
insert_time	录入时间	timestamp	是
create_time	创建时间	timestamp	是

表4.13宿舍归寝表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
guiqin_types	归寝状态	int(11)	是
guiqin_time	归寝日期	date	是
sushe_guiqin_content	归寝详情	text	是
insert_time	录入时间	timestamp	是
create_time	创建时间	timestamp	是

表4.14 宿舍人员表

字段	注释	类型	空
id (主键)	主键	int(11)	否
sushe_id	宿舍	int(11)	是
yonghu_id	用户	int(11)	是
insert_time	录入时间	timestamp	是
create_time	创建时间	timestamp	是

表4.15 管理员表

字段	注释	类型	空
id (主键)	主键	bigint(20)	否
username	用户名	varchar(100)	否
password	密码	varchar(100)	否
role	角色	varchar(100)	是
addtime	新增时间	timestamp	否

表4.16 音乐表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yinyue_uuid_number	音乐编号	varchar(200)	是
yinyue_name	音乐名称	varchar(200)	是
yinyue_photo	音乐照片	varchar(200)	是
yinyue_music	音乐	varchar(200)	是
yinyue_types	音乐类型	int(11)	是
yinyue_clicknum	热度	int(11)	是
zan_number	赞	int(11)	是
cai_number	踩	int(11)	是
yinyue_content	音乐详情	text	是
shangxia_types	是否上架	int(11)	是
yinyue_delete	逻辑删除	int(11)	是
create_time (主键)	创建时间	timestamp	否

表4.17 音乐收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yinyue_id	音乐	int(11)	是
yonghu_id	用户	int(11)	是
yinyue_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.18 音乐留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yinyue_id	音乐	int(11)	是
yonghu_id	用户	int(11)	是
yinyue_liuyan_text	留言内容	text	是
insert_time	留言时间	timestamp	是
reply_text	回复内容	text	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4.19 用户表

字段	注释	类型	空
id (主键)	主键	int(11)	否
username	账户	varchar(200)	是
password	密码	varchar(200)	是
yonghu_name	用户姓名	varchar(200)	是
yonghu_phone	用户手机号	varchar(200)	是
yonghu_id_number	用户身份证号	varchar(200)	是
yonghu_photo	用户头像	varchar(200)	是
sex_types	性别	int(11)	是
banji_types	班级	int(11)	是
yonghu_email	电子邮箱	varchar(200)	是
create_time	创建时间	timestamp	是

打开新的 phpMyAdmin 窗口

第5章系统实现

编程人员在搭建的开发环境中，会让各种编程技术一起呈现出最终效果。本节就展示关键部分的页面效果。

5.1 管理员功能实现

5.1.1 音乐管理

图5.1 即为编码实现的音乐管理界面，管理员下架音乐，上架音乐，修改音乐信息，包括修改音乐热度，音乐名称，音乐类型等信息，删除音乐，查询音乐等。

图5.1 音乐管理界面

5.1.2 软件管理

图5.2 即为编码实现的软件管理界面，管理员上传计算机专业相关的软件安装包，可以修改软件描述信息，包括软件名称，软件照片，安装教程，软件类型等信息，可以下架软件，删除软件信息等。

图5.2 软件管理界面

5.1.3 备忘录管理

图5.3 即为编码实现的备忘录管理界面，管理员增删改查备忘录信息，备忘录信息包括备忘录名称，备忘录类型，记录时间等信息。

图5.3 备忘录管理界面

5.2 老师功能实现

5.2.1 宿舍管理

图5.4 即为编码实现的宿舍管理界面，老师在宿舍管理界面录入宿舍信息，宿舍信息包括宿舍地址，宿舍名称，录入时间等信息，老师可以查询宿舍，修改宿舍信息等。

图5.4 宿舍管理界面

5.2.2 宿舍归寝管理

图5.5 即为编码实现的宿舍归寝管理界面，老师在宿舍归寝管理界面中登记宿舍归寝信息，宿舍归寝信息包括归寝状态，归寝日期，用户姓名等信息，老师可以修改宿舍归寝信息，查询宿舍归寝信息等。

图5.5 宿舍归寝管理界面

5.2.3 课程管理

图5.6 即为编码实现的课程管理界面，老师需要上传课程学习视频，上传课件，登记课程信息等，同时老师可以上架课程，下架课程，修改课程描述信息，删除课程等。

图5.6 课程管理界面

5.2.4 成绩管理

图5.7 即为编码实现的成绩管理界面，老师登记用户的课程成绩信息，可以修改成绩分数，查询用户成绩等。

图5.7 成绩管理界面

5.3 用户功能实现

5.3.1 软件信息

图5.8 即为编码实现的软件信息界面，用户下载软件安装包，查看软件安装视频，在软件信息界面的下方留言区域发布留言。

图5.8 软件信息界面

5.3.2 课程信息

图5.9 即为编码实现的课程信息界面，用户通过课程视频学习课程知识，可以下载课程课件，可以在课程信息界面下方的留言区域发布课程留言，可以可以收藏本界面的课程。

图5.9 课程信息界面

5.3.3 音乐信息

图5.10 即为编码实现的音乐信息界面，用户收听音乐，可以在音乐信息界面的下方留言区域发布音乐留言信息，可以收藏音乐，已经收藏的音乐可以取消收藏。

图5.10 音乐信息界面

5.3.4 宿舍报修管理

图5.11 即为编码实现的宿舍报修管理界面，用户在后台的宿舍报修管理界面提交宿舍报修信息，可以查询宿舍报修信息等。

图5.11 宿舍报修管理界面

5.3.5 成绩查看

图5.12 即为编码实现的成绩查看界面，用户在后台的成绩查看界面查看课程考试分数，查询课程成绩。

图5.12 成绩查看界面

SusheGuiqinServiceImpl.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.SusheGuiqinDao;
import com.entity.SusheGuiqinEntity;
import com.service.SusheGuiqinService;
import com.entity.view.SusheGuiqinView;

/**
 * 宿舍归寝 服务实现类
 */
@Service("susheGuiqinService")
@Transactional
public class SusheGuiqinServiceImpl extends ServiceImpl<SusheGuiqinDao, SusheGuiqinEntity> implements SusheGuiqinService {

    @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<SusheGuiqinView> page =new Query<SusheGuiqinView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

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

    @Autowired
    private LaoshiService laoshiService;


    @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("laoshiId",request.getSession().getAttribute("userId"));
        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 = laoshiService.queryPage(params);

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

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

    }

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

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

        Wrapper<LaoshiEntity> queryWrapper = new EntityWrapper<LaoshiEntity>()
            .eq("username", laoshi.getUsername())
            .or()
            .eq("laoshi_phone", laoshi.getLaoshiPhone())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        LaoshiEntity laoshiEntity = laoshiService.selectOne(queryWrapper);
        if(laoshiEntity==null){
            laoshi.setCreateTime(new Date());
            laoshi.setPassword("123456");
            laoshiService.insert(laoshi);
            return R.ok();
        }else {
            return R.error(511,"账户或者老师手机号已经被使用");
        }
    }

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

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

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        LaoshiEntity laoshiEntity = laoshiService.selectOne(queryWrapper);
        if("".equals(laoshi.getLaoshiPhoto()) || "null".equals(laoshi.getLaoshiPhoto())){
                laoshi.setLaoshiPhoto(null);
        }
        if(laoshiEntity==null){
            laoshiService.updateById(laoshi);//根据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());
        laoshiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName, HttpServletRequest request){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        try {
            List<LaoshiEntity> laoshiList = 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){
                            //循环
                            LaoshiEntity laoshiEntity = new LaoshiEntity();
//                            laoshiEntity.setUsername(data.get(0));                    //账户 要改的
//                            //laoshiEntity.setPassword("123456");//密码
//                            laoshiEntity.setLaoshiName(data.get(0));                    //老师姓名 要改的
//                            laoshiEntity.setLaoshiPhone(data.get(0));                    //老师手机号 要改的
//                            laoshiEntity.setLaoshiPhoto("");//详情和图片
//                            laoshiEntity.setSexTypes(Integer.valueOf(data.get(0)));   //性别 要改的
//                            laoshiEntity.setLaoshiEmail(data.get(0));                    //电子邮箱 要改的
//                            laoshiEntity.setCreateTime(date);//时间
                            laoshiList.add(laoshiEntity);


                            //把要查询是否重复的字段放入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("laoshiPhone")){
                                    List<String> laoshiPhone = seachFields.get("laoshiPhone");
                                    laoshiPhone.add(data.get(0));//要改的
                                }else{
                                    List<String> laoshiPhone = new ArrayList<>();
                                    laoshiPhone.add(data.get(0));//要改的
                                    seachFields.put("laoshiPhone",laoshiPhone);
                                }
                        }

                        //查询是否重复
                         //账户
                        List<LaoshiEntity> laoshiEntities_username = laoshiService.selectList(new EntityWrapper<LaoshiEntity>().in("username", seachFields.get("username")));
                        if(laoshiEntities_username.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(LaoshiEntity s:laoshiEntities_username){
                                repeatFields.add(s.getUsername());
                            }
                            return R.error(511,"数据库的该表中的 [账户] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                         //老师手机号
                        List<LaoshiEntity> laoshiEntities_laoshiPhone = laoshiService.selectList(new EntityWrapper<LaoshiEntity>().in("laoshi_phone", seachFields.get("laoshiPhone")));
                        if(laoshiEntities_laoshiPhone.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(LaoshiEntity s:laoshiEntities_laoshiPhone){
                                repeatFields.add(s.getLaoshiPhone());
                            }
                            return R.error(511,"数据库的该表中的 [老师手机号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        laoshiService.insertBatch(laoshiList);
                        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) {
        LaoshiEntity laoshi = laoshiService.selectOne(new EntityWrapper<LaoshiEntity>().eq("username", username));
        if(laoshi==null || !laoshi.getPassword().equals(password))
            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(laoshi.getId(),username, "laoshi", "老师");
        R r = R.ok();
        r.put("token", token);
        r.put("role","老师");
        r.put("username",laoshi.getLaoshiName());
        r.put("tableName","laoshi");
        r.put("userId",laoshi.getId());
        return r;
    }

    /**
    * 注册
    */
    @IgnoreAuth
    @PostMapping(value = "/register")
    public R register(@RequestBody LaoshiEntity laoshi){
//    	ValidatorUtils.validateEntity(user);
        Wrapper<LaoshiEntity> queryWrapper = new EntityWrapper<LaoshiEntity>()
            .eq("username", laoshi.getUsername())
            .or()
            .eq("laoshi_phone", laoshi.getLaoshiPhone())
            ;
        LaoshiEntity laoshiEntity = laoshiService.selectOne(queryWrapper);
        if(laoshiEntity != null)
            return R.error("账户或者老师手机号已经被使用");
        laoshi.setCreateTime(new Date());
        laoshiService.insert(laoshi);
        return R.ok();
    }

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


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


    /**
    * 获取用户的session用户信息
    */
    @RequestMapping("/session")
    public R getCurrLaoshi(HttpServletRequest request){
        Integer id = (Integer)request.getSession().getAttribute("userId");
        LaoshiEntity laoshi = laoshiService.selectById(id);
        if(laoshi !=null){
            //entity转view
            LaoshiView view = new LaoshiView();
            BeanUtils.copyProperties( laoshi , 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 = laoshiService.queryPage(params);

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


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

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


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


}

BaiduUtil.java

package com.utils;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONObject;


/**
* @author yangliyuan
* @version 创建时间：2020年2月7日 下午9:37:05
* 类说明 : 
*/

public class BaiduUtil {
	
    /**
     * 根据经纬度获得省市区信息
     * @param lon 纬度
     * @param lat 经度
     * @param coordtype 经纬度坐标系
     * @return
     */
    public static Map<String, String> getCityByLonLat(String key, String lng, String lat) {
        String location = lat + "," + lng;
        try {
            //拼装url
            String url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak="+key+"&output=json&coordtype=wgs84ll&location="+location;
            String result = HttpClientUtils.doGet(url);
            JSONObject o = new JSONObject(result);
            Map<String, String> area = new HashMap<>();
			area.put("province", o.getJSONObject("result").getJSONObject("addressComponent").getString("province"));
			area.put("city", o.getJSONObject("result").getJSONObject("addressComponent").getString("city"));
			area.put("district", o.getJSONObject("result").getJSONObject("addressComponent").getString("district"));
			area.put("street", o.getJSONObject("result").getJSONObject("addressComponent").getString("street"));
            return area;
        }catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
	     * 获取API访问token
	     * 该token有一定的有效期，需要自行管理，当失效时需重新获取.
	     * @param ak - 百度云官网获取的 API Key
	     * @param sk - 百度云官网获取的 Securet Key
	     * @return assess_token
	     */
    public static String getAuth(String ak, String sk) {
        // 获取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type为固定参数
                + "grant_type=client_credentials"
                // 2. 官网获取的 API Key
                + "&client_id=" + ak
                // 3. 官网获取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 打开和URL之间的连接
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段
            for (String key : map.keySet()) {
                System.err.println(key + "--->" + map.get(key));
            }
            // 定义 BufferedReader输入流来读取URL的响应
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回结果示例
             */
            System.err.println("result:" + result);
            org.json.JSONObject jsonObject = new org.json.JSONObject(result);
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
            System.err.printf("获取token失败！");
            e.printStackTrace(System.err);
        }
        return null;
    }

}

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('dictionaryBaoxiu','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        <el-button
                                v-if="isAuth('dictionaryBaoxiu','删除')"
                                :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('dictionaryBaoxiu','查看')"
                          :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('dictionaryBaoxiu','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('dictionaryBaoxiu','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('dictionaryBaoxiu','删除')" 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'] = "baoxiu_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: rgba(88, 84, 84, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: #DCDFE6;
		border-radius: 20px;
		background-color: rgba(153, 204, 51, 1);
	}

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

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

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