如何使用ssm实现实验室预约管理+vue

shangyizaoxing

于 2024-09-27 09:49:23 发布

阅读量302

点赞数 2

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

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

版权

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

227 篇文章 0 订阅

订阅专栏

计算机毕设

227 篇文章 0 订阅

订阅专栏

ssm

126 篇文章 0 订阅

订阅专栏

@TOC

ssm714实验室预约管理+vue

绪论

课题背景

随着计算机技术的发展以及计算机网络的逐渐普及，互联网成为人们查找信息的重要场所，二十一世纪是信息的时代，所以信息的管理显得特别重要。因此，使用计算机来管理实验室预约管理系统的相关信息成为必然。开发合适的实验室预约管理系统，可以方便管理人员对实验室预约管理信息的管理，提高信息管理工作效率及查询效率，有利于更好的为人们服务。

随着互联网技术的快速发展，网络时代的到来，网络信息也将会改变当今社会。各行各业在日常企业经营管理等方面也在慢慢的向规范化和网络化趋势汇合。实验室预约管理的信息化程度体现在将互联网与信息技术应用于经营与管理，以现代化工具代替传统手工作业。无疑，使用网络信息化管理使信息管理更先进、更高效、更科学，信息交流更迅速。

对于之前实验室预约管理信息的管理，大部分都是使用传统的人工方式去管理，这样导致了管理效率低下、出错频率高。而且，时间一长的话，积累下来的数据信息不容易保存，对于查询、更新还有维护会带来不少问题。对于数据交接也存在很大的隐患。如果采用电子化的存储方式就会带来很大的改善，而且给用户的查询带来了很大便利，因此设计一个实验室预约管理系统刻不容缓，能够提高信息的管理水平。

研究现状

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

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

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

研究内容

一个成功的网站应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的策划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。同时，一个大型的计算机网站系统，必须有一个正确的设计指导思想，通过合理选择数据结构、网络结构、操作系统以及开发环境，构成一个完善的网络体系结构，才能充分发挥计算机信息管理的优势。根据现实生活中网民的实际需求，本系统的设计按照下述原则进行。

有效性：实际上这里的有效性包括两个方面的意思：有用性和可用性。有用性是指站点潜在的能满足用户需求的功能，而可用性是指能够通过站点的操作实现特定的目标。可以看出一个站点如果不能恰当运行或设计得非常槽糕就不是一个好站点。可用站点的效益应该非常高，并易于学习，在实现用户目标时令人满意而不出错。
高可靠性：一个实用的网站同时必须是可靠的，本设计通过合理而先进的网络设计以及软、硬件的优化选型，可保证网站的可靠性与容错性。
高安全性：在设计中，将充分利用网络软、硬件提供的各种安全措施，既可以保证用户共享资源，充分考虑系统及数据资源的容灾、备份、恢复的要求。为系统提供强大的数据库备份工具。可以保证关键数据的安全性。操作权限级，设置不同的角色确保每一步的操作权限，可以由管理员进行设置。
先进性：采用目前国际上最先进的开发技术，使用JSP开发技术，MYSQL作为网站后台数据库。采用这些技术降低了以后的系统运营成本，提高了系统的稳定性和易维护性。
采用标准技术：本网站的所有设计遵循国际上现行的标准进行，以提高系统的开放性。

外观和技术平衡：系统采用Web风格的界面设计，界面友好、美观，使用方便，易学易用。网站设计的关键问题是外观和技术的平衡。外现不好的网站令人厌烦，站点可以运行很好，但却不能带动用户积极性，相反，如果外观非常有表现力，但技术有限，用户则会感到非常失望。在外观与技术之间需要确定一个清晰而连续的关系，即外观与站点的意图相关，对不同类型的网站处理方法不同。

系统开发环境
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）实验室基本信息管理：①.实验室管理员依据实验室基本情况对实验设备名称、数量等进行管理；②.可使用实验室管理

2）学期管理（可使用时间设置）：系统管理员应该根据学院的实际情况以及实验室情况设置学期以决定实验室的开放时间和实验课结束时间（第几学期、第几周、星期几、第几节）。

3）教师实验室预约申请管理：管理员对教师的实验室课程申请进行审核

4)教师学生信息管理。

5)可使用实验室管理。

统计

教师功能：

1）实验室课程申请：①.教师可以申请实验室以安排实验课程（不能申请已被申请的实验室和正在使用的实验室）；②.申请提交后在管理员审核前可以修改申请，则管理员之后审核的是已修改的申请;③.申请取消排课。

2）修改已有的实验室课程信息：教师可以选择修改某一次实验课程信息（上课时间、实验室）或从该次后全部修改。

3)个人信息管理。

学生端功能：

1）查看实验课程表。

2)个人信息管理。

系统流程分析
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\shiyanshipaike\学生.jpg$ 图4.1 学生实体属性图

（2）下图是教师实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\shiyanshipaike\教师.jpg$ 图4.2 教师实体属性图

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

$C:\Users\Administrator\Desktop\img\shiyanshipaike\公告.jpg$ 图4.3 公告实体属性图

（4）下图是实验室信息实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\shiyanshipaike\实验室信息.jpg$ 图4.4 实验室信息实体属性图

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

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

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

$C:\Users\Administrator\Desktop\img\shiyanshipaike\课程信息.jpg$ 图4.6 课程信息实体属性图

（7）下图是实验设备实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\shiyanshipaike\实验设备.jpg$ 图4.7 实验设备实体属性图

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

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

（9）下图是实验室申请实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\shiyanshipaike\实验室申请.jpg$ 图4.9 实验室申请实体属性图

（10）下图是排课取消申请实体和其具备的属性。

$C:\Users\Administrator\Desktop\img\shiyanshipaike\排课取消申请.jpg$ 图4.10 排课取消申请实体属性图

数据库表设计

采用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	jiaoshi_uuid_number	String	工号	是
3	jiaoshi_name	String	教师姓名	是
4	jiaoshi_photo	String	头像	是
5	jiaoshi_phone	String	联系方式	是
6	jiaoshi_email	String	邮箱	是
7	jiaoshi_delete	Integer	假删	是
8	create_time	Date	创建时间	是

表4.3课程信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shiyanshishenqing_id	Integer	实验室	是
3	kecheng_name	String	课程名称	是
4	kecheng_photo	String	课程图片	是
5	shangke_time	Date	上课时间	是
6	xiake_time	Date	结束时间	是
7	kecheng_types	Integer	课程类型	是
8	banji_types	Integer	班级	是
9	xueqi_types	Integer	学期	是
10	xingqi_types	Integer	星期	是
11	jieke_types	Integer	第几节	是
12	jiaoshi_id	Integer	教师	是
13	kecheng_yesno_types	Integer	课程审核	是
14	kecheng_yesno_text	String	审核原因	是
15	kecheng_content	String	课程详情	是
16	create_time	Date	创建时间	是

表4.4公告表

序号	列名	数据类型	说明	允许空
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.5排课取消申请表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	jiaoshi_id	Integer	教师	是
3	kecheng_id	Integer	课程	是
4	paiekequxiao_yesno_types	Integer	排课取消审核	是
5	paiekequxiao_yesno_text	String	审核原因	是
6	kecheng_content	String	课程详情	是
7	create_time	Date	创建时间	是

表4.6实验设备表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shiyanshebei_name	String	设备名称	是
3	shiyanshebei_photo	String	设备图片	是
4	shiyanshebei_types	Integer	设备类型	是
5	shiyanshebei_number	Integer	设备数量	是
6	shiyanshi_id	Integer	实验室	是
7	shiyanshebei_content	String	设备详情	是
8	create_time	Date	创建时间	是

表4.7实验室信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shiyanshi_name	String	实验室名称	是
3	shiyanshi_photo	String	实验室图片	是
4	shiyanshi_types	Integer	实验室类型	是
5	status_types	Integer	实验室状态	是
6	shiyanshi_content	String	实验室详情	是
7	create_time	Date	创建时间	是

表4.8实验室申请表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shiyanshi_id	Integer	实验室	是
3	jiaoshi_id	Integer	教师	是
4	shiyanshishenqing_yesno_types	Integer	审核结果	是
5	shiyanshishenqing_yesno_text	String	审核原因	是
6	create_time	Date	创建时间	是

表4.9学生表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_uuid_number	String	学号	是
3	yonghu_name	String	学生姓名	是
4	yonghu_photo	String	头像	是
5	banji_types	Integer	班级	是
6	yonghu_phone	String	联系方式	是
7	yonghu_id_number	String	学生身份证号	是
8	yonghu_email	String	邮箱	是
9	yonghu_delete	Integer	假删	是
10	create_time	Date	创建时间	是

表4.10用户表表

序号	列名	数据类型	说明	允许空
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 公告信息管理页面

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;
    }

}

PaiekequxiaoServiceImpl.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.PaiekequxiaoDao;
import com.entity.PaiekequxiaoEntity;
import com.service.PaiekequxiaoService;
import com.entity.view.PaiekequxiaoView;

/**
 * 排课取消申请 服务实现类
 */
@Service("paiekequxiaoService")
@Transactional
public class PaiekequxiaoServiceImpl extends ServiceImpl<PaiekequxiaoDao, PaiekequxiaoEntity> implements PaiekequxiaoService {

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


}

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

    @Autowired
    private PaiekequxiaoService paiekequxiaoService;


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

    //级联表service
    @Autowired
    private JiaoshiService jiaoshiService;
    @Autowired
    private KechengService kechengService;

    @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("jiaoshiId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = paiekequxiaoService.queryPage(params);

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

                //级联表
                JiaoshiEntity jiaoshi = jiaoshiService.selectById(paiekequxiao.getJiaoshiId());
                if(jiaoshi != null){
                    BeanUtils.copyProperties( jiaoshi , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setJiaoshiId(jiaoshi.getId());
                }
                //级联表
                KechengEntity kecheng = kechengService.selectById(paiekequxiao.getKechengId());
                if(kecheng != null){
                    BeanUtils.copyProperties( kecheng , view ,new String[]{ "id", "createTime", "insertTime", "updateTime", "jiaoshiId"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setKechengId(kecheng.getId());
                    view.setKechengJiaoshiId(kecheng.getJiaoshiId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("教师".equals(role))
            paiekequxiao.setJiaoshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        Wrapper<PaiekequxiaoEntity> queryWrapper = new EntityWrapper<PaiekequxiaoEntity>()
            .eq("jiaoshi_id", paiekequxiao.getJiaoshiId())
            .eq("kecheng_id", paiekequxiao.getKechengId())
            .eq("paiekequxiao_yesno_types", paiekequxiao.getPaiekequxiaoYesnoTypes())
            .eq("paiekequxiao_yesno_text", paiekequxiao.getPaiekequxiaoYesnoText())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        PaiekequxiaoEntity paiekequxiaoEntity = paiekequxiaoService.selectOne(queryWrapper);
        if(paiekequxiaoEntity==null){
            paiekequxiao.setPaiekequxiaoYesnoTypes(1);
            paiekequxiao.setCreateTime(new Date());
            paiekequxiaoService.insert(paiekequxiao);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("教师".equals(role))
//            paiekequxiao.setJiaoshiId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<PaiekequxiaoEntity> queryWrapper = new EntityWrapper<PaiekequxiaoEntity>()
            .notIn("id",paiekequxiao.getId())
            .andNew()
            .eq("jiaoshi_id", paiekequxiao.getJiaoshiId())
            .eq("kecheng_id", paiekequxiao.getKechengId())
            .eq("paiekequxiao_yesno_types", paiekequxiao.getPaiekequxiaoYesnoTypes())
            .eq("paiekequxiao_yesno_text", paiekequxiao.getPaiekequxiaoYesnoText())
            ;

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


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<PaiekequxiaoEntity> paiekequxiaoList = 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){
                            //循环
                            PaiekequxiaoEntity paiekequxiaoEntity = new PaiekequxiaoEntity();
//                            paiekequxiaoEntity.setJiaoshiId(Integer.valueOf(data.get(0)));   //教师 要改的
//                            paiekequxiaoEntity.setKechengId(Integer.valueOf(data.get(0)));   //课程 要改的
//                            paiekequxiaoEntity.setPaiekequxiaoYesnoTypes(Integer.valueOf(data.get(0)));   //排课取消审核 要改的
//                            paiekequxiaoEntity.setPaiekequxiaoYesnoText(data.get(0));                    //审核原因 要改的
//                            paiekequxiaoEntity.setKechengContent("");//照片
//                            paiekequxiaoEntity.setCreateTime(date);//时间
                            paiekequxiaoList.add(paiekequxiaoEntity);


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

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






}

add-or-update.vue

<template>
    <div class="addEdit-block">
        <el-form
                class="detail-form-content"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
                :style="{backgroundColor:addEditForm.addEditBoxColor}"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="星期编码" prop="codeIndex">
                        <el-input v-model="ruleForm.codeIndex"
                                  placeholder="星期编码" clearable  :readonly="ro.codeIndex"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="星期编码" prop="codeIndex">
                            <el-input v-model="ruleForm.codeIndex"
                                      placeholder="星期编码" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="星期" prop="indexName">
                        <el-input v-model="ruleForm.indexName"
                                  placeholder="星期" clearable  :readonly="ro.indexName"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="星期" prop="indexName">
                            <el-input v-model="ruleForm.indexName"
                                      placeholder="星期" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item class="btn">
                <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
                <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
                <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
    import styleJs from "../../../utils/style.js";
    // 数字，邮件，手机，url，身份证校验
    import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
    export default {
        data() {
            let self = this
            return {
                addEditForm:null,
                id: '',
                type: '',
                ro:{
                    codeIndex : true,
                    indexName : false,
                    superId : false,
                    beizhu : false,
                },
                ruleForm: {
                    codeIndex: '',
                    indexName: '',
                    superId : '',
                    beizhu : '',
                },
                rules: {
                }
            };
        },
        props: ["parent"],
        computed: {
        },
        created() {
            this.addEditForm = styleJs.addStyle();
            this.addEditStyleChange()
            this.addEditUploadStyleChange()
        },
        methods: {
            // 初始化
            init(id,type) {
                if (id) {
                    this.id = id;
                    this.type = type;
                }
                if(this.type=='info'||this.type=='else'){
                    this.info(id);
                }else{
                    //查询最大值 start
                    this.$http({
                        url: `dictionary/maxCodeIndex`,
                        method: "post",
                        data: {"dicCode":"xingqi_types"}
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.ruleForm.codeIndex = data.maxCodeIndex;
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                    //查询最大值 end
                }
            },
            // 多级联动参数
            info(id) {
                this.$http({
                    url: `dictionary/info/${id}`,
                    method: "get"
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                    this.ruleForm = data.data;
                    //解决前台上传图片后台不显示的问题
                    let reg=new RegExp('../../../upload','g')//g代表全部
                } else {
                    this.$message.error(data.msg);
                }
            });
            },
            // 提交
            onSubmit() {
                if((!this.ruleForm.indexName)){
                    this.$message.error('星期不能为空');
                    return
                }
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        let ruleForm = this.ruleForm;
                        ruleForm["dicCode"]="xingqi_types";
                        ruleForm["dicName"]="星期";
                        this.$http({
                            url: `dictionary/${!this.ruleForm.id ? "save" : "update"}`,
                            method: "post",
                            data: ruleForm
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "操作成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.parent.showFlag = true;
                                        this.parent.addOrUpdateFlag = false;
                                        this.parent.dictionaryCrossAddOrUpdateFlag = false;
                                        this.parent.search();
                                        this.parent.contentStyleChange();

                                    }
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 返回
            back() {
                this.parent.showFlag = true;
                this.parent.addOrUpdateFlag = false;
                this.parent.dictionaryCrossAddOrUpdateFlag = false;
                this.parent.contentStyleChange();
            },
            addEditStyleChange() {
                this.$nextTick(()=>{
                    // input
                    document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputFontColor
                el.style.fontSize = this.addEditForm.inputFontSize
                el.style.borderWidth = this.addEditForm.inputBorderWidth
                el.style.borderStyle = this.addEditForm.inputBorderStyle
                el.style.borderColor = this.addEditForm.inputBorderColor
                el.style.borderRadius = this.addEditForm.inputBorderRadius
                el.style.backgroundColor = this.addEditForm.inputBgColor
            })
                document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputLableColor
                el.style.fontSize = this.addEditForm.inputLableFontSize
            })
                // select
                document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectFontColor
                el.style.fontSize = this.addEditForm.selectFontSize
                el.style.borderWidth = this.addEditForm.selectBorderWidth
                el.style.borderStyle = this.addEditForm.selectBorderStyle
                el.style.borderColor = this.addEditForm.selectBorderColor
                el.style.borderRadius = this.addEditForm.selectBorderRadius
                el.style.backgroundColor = this.addEditForm.selectBgColor
            })
                document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectLableColor
                el.style.fontSize = this.addEditForm.selectLableFontSize
            })
                document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
                    el.style.color = this.addEditForm.selectIconFontColor
                el.style.fontSize = this.addEditForm.selectIconFontSize
            })
                // date
                document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateFontColor
                el.style.fontSize = this.addEditForm.dateFontSize
                el.style.borderWidth = this.addEditForm.dateBorderWidth
                el.style.borderStyle = this.addEditForm.dateBorderStyle
                el.style.borderColor = this.addEditForm.dateBorderColor
                el.style.borderRadius = this.addEditForm.dateBorderRadius
                el.style.backgroundColor = this.addEditForm.dateBgColor
            })
                document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateLableColor
                el.style.fontSize = this.addEditForm.dateLableFontSize
            })
                document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
                    el.style.color = this.addEditForm.dateIconFontColor
                el.style.fontSize = this.addEditForm.dateIconFontSize
                el.style.lineHeight = this.addEditForm.dateHeight
            })
                // upload
                let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
                document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
                document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.uploadHeight
                el.style.color = this.addEditForm.uploadLableColor
                el.style.fontSize = this.addEditForm.uploadLableFontSize
            })
                document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
                    el.style.color = this.addEditForm.uploadIconFontColor
                el.style.fontSize = this.addEditForm.uploadIconFontSize
                el.style.lineHeight = iconLineHeight
                el.style.display = 'block'
            })
                // 多文本输入框
                document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
                    el.style.height = this.addEditForm.textareaHeight
                el.style.color = this.addEditForm.textareaFontColor
                el.style.fontSize = this.addEditForm.textareaFontSize
                el.style.borderWidth = this.addEditForm.textareaBorderWidth
                el.style.borderStyle = this.addEditForm.textareaBorderStyle
                el.style.borderColor = this.addEditForm.textareaBorderColor
                el.style.borderRadius = this.addEditForm.textareaBorderRadius
                el.style.backgroundColor = this.addEditForm.textareaBgColor
            })
                document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
                    // el.style.lineHeight = this.addEditForm.textareaHeight
                    el.style.color = this.addEditForm.textareaLableColor
                el.style.fontSize = this.addEditForm.textareaLableFontSize
            })
                // 保存
                document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
                    el.style.width = this.addEditForm.btnSaveWidth
                el.style.height = this.addEditForm.btnSaveHeight
                el.style.color = this.addEditForm.btnSaveFontColor
                el.style.fontSize = this.addEditForm.btnSaveFontSize
                el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
                el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
                el.style.borderColor = this.addEditForm.btnSaveBorderColor
                el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
                el.style.backgroundColor = this.addEditForm.btnSaveBgColor
            })
                // 返回
                document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
                    el.style.width = this.addEditForm.btnCancelWidth
                el.style.height = this.addEditForm.btnCancelHeight
                el.style.color = this.addEditForm.btnCancelFontColor
                el.style.fontSize = this.addEditForm.btnCancelFontSize
                el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
                el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
                el.style.borderColor = this.addEditForm.btnCancelBorderColor
                el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
                el.style.backgroundColor = this.addEditForm.btnCancelBgColor
            })
            })
            },
            addEditUploadStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
            })
            },
        }
    };
</script>
<style lang="scss">
.editor{
        height: 500px;

    & /deep/ .ql-container {
          height: 310px;
      }
    }
    .amap-wrapper {
        width: 100%;
        height: 500px;
    }
    .search-box {
        position: absolute;
    }
    .addEdit-block {
        margin: -10px;
    }
    .detail-form-content {
        padding: 12px;
    }
    .btn .el-button {
        padding: 0;
    }</style>