@TOC
springboot0751社区维修平台
第一章 绪 论
1.1背景及意义
系统管理也都将通过计算机进行整体智能化操作，对于社区维修平台所牵扯的管理及数据保存都是非常多的，例如住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理等，这给管理者的工作带来了巨大的挑战，面对大量的信息，传统的管理系统，都是通过笔记的方式进行详细信息的统计，后来出现电脑，通过电脑输入软件将纸质的信息统计到电脑上，这种方式比较传统，而且想要统计数据信息比较麻烦，还受时间和空间的影响，所以为此开发了该系统；为用户提供了一个社区维修平台平台，方便管理员查看及维护，并且可以让住户在线进行报修和查看公告、订单信息、维修员信息等操作，维修员可以在线查看订单信息、进行在线接单，在线交流等，管理员可以足不出户就可以获取到系统的数据信息等，而且还能节省用户很多时间，所以开发社区维修平台平台给管理者带来了很大的方便，同时也方便管理员对用户信息进行处理。
1.2国内外研究概况
随着社会的发展和科学技术的进步，互联网技术越来越受欢迎。网络传播的生活方式逐渐受到广大人民群众的喜爱。越来越多的互联网爱好者开始在互联网上满足他们的基本需求，同时逐渐进入到人们的数据信息管理。互联网具有许多优点，例如便利性，速度，高效率和低成本，您可以不受任何位置因素影响的情况下获得您想要的数据信息及所要管理的数据维护增加等信息操作。因此，对于社区维修平台系统的实现，可以解决现实中维修信息管理的漏洞，提升社区维修平台效率，满足管理员和工作繁忙的需求，不仅方便查看维修信息详细和订单信息的及数据统计，而且还能提高分配维修人员信息效率。
本文首先分析了社区维修平台存储的基本问题作为研究对象。在开发系统之前，我们对现有市场进行了详细的调查和分析。最后，我们利用计算机技术开发了一套完整合适的管理信息系统。该系统的实现主要优势是：该系统主要采用计算机技术开发，它方便快捷；系统可以通过管理员界面查看住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理和管理人员所操作的所有信息管理。
1.3 研究的内容
目前许多人仍将传统的纸质工具作为信息管理的主要工具，而网络技术的应用只是起到辅助作用。在对网络工具的认知程度上，较为传统的office软件等仍是人们使用的主要工具，而相对全面且专业的信息管理软件仍没有得到大多数人的了解或认可。本选题则旨在通过标签分类管理等方式，实现社区维修平台系统的各种功能，从而达到对社区维修平台系统的管理。
详细内容介绍，将在以下六章中详细阐述：
第一章、绪论，介绍了研究课题选择的背景及意义、研究现状，简要介绍了本文的章节内容。
第二章、引入技术知识，通过引入关键技术进行开发，向系统中涉及直观表达的技术知识。
第三章、重点分析了系统的分析，从系统强大的供需市场出发，对系统开发的可行性，系统流程以及系统性能和功能进行了探讨。
第四章、介绍了系统的详细设计方案，包括系统结构设计和数据库设计。
第五章、系统设计的实现，通过对系统功能设计的详细说明，论证了系统的结构。
第六章、系统的整体测试，评判系统是否可以上线运行。
第二章 关键技术的研究
2.1 JSP技术介绍
JSP技术本身是一种脚本语言，但它的功能是十分强大的，因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时，它可以使显示逻辑和内容分开，这就极大的方便了用户的需求。JavaBeans 可以对JSP技术的程序进行扩展，从而形成新的应用程序，而且JavaBeans的代码可以重复使用，所以就便于对程序进行维护。JavaBean 组件有内部的接口，可以帮助不同的人对系统进行访问。1999年，Sun微系统公司正式推出了JSP技术，这是一种动态技术，是基于整个JAVA体系和JavaServlet提出的，是具有普遍适用性的WEB技术，也是本系统设计的核心技术之一。JSP技术能够极大的提高WEB网页的运行速度。这些内容会与脚本结合，并且由JavaBean和Servlet组件封装。所有的脚本均在服务器端运行，JSP引擎会针对客户端所 提交的申请进行解释，然后生成脚本程序和JSP标识，然后通过HTML/XML页面将结果反馈给浏览器。因此，开发人员亲自设计最终页面的格式和HTML/XML标识时，完全可以使用JSP技术。
所以结合皮皮段子系统的需求及功能模块的实现，使用JSP技术是最合适的，而且JSP的拓展性比较好，对于系统在后期使用过程中可以不断对系统功能进行拓展，是系统更完成，更方便的满足用户管理。
2.2 JAVA简介
Java主要采用CORBA技术和安全模型，可以在互联网应用的数据保护。它还提供了对EJB（Enterprise JavaBeans）的全面支持，java servlet API，JSP（java server pages），和XML技术。JAVA语言是一种面向对象的语言，它通过提供最基本的方法来完成指定的任务，开发者只需要知道一些概念就能够编写出一些应用程序。Java程序相对较小，其代码能够在小机器上运行。Java是一种计算机编程语言，具有封装、继承和多态性三个主要特性，广泛应用于企业Web应用程序开发和移动应用程序开发。
Java语言和一般编译器以及直译的区别在于，Java首先将源代码转换为字节码，然后将其转换为JVM的可执行文件，JVM可以在各种不同的JVM上运行。因此，实现了它的跨平台特性。虽然这使得Java在早期非常缓慢，但是随着Java的开发，它已经得到了改进。
2.3 Eclipse开发环境
MyEclipse支持广泛、兼容性高并且功能强大，是一个Eclipse 插件集合，普遍适应于JAVA和J2EE的系统开发，支持 JDBC，Hibernate，AJAX，Struts，Java Servlet，Spring，EJB3等市面上存在的几乎所有数据库链接工具和主流Eclipse产品 开发工具。
MyEclipse在业内是所熟知的开发工具，该平台在开发的过程中运用的就是该工具。MyEclipse又被称之为企业级的工作平台，它是以Eclipse IDE为基础的。MyEclipse可以帮助我们进行数据库的研发和J2EE的使用，除此之外，还可以提高系统的运营能力，这突出表现在服务器的整合过程中。MyEclipse的功能相当完备，能够为J2EE的集成提供必要的环境支持，从而完成编码、测试、调试及发布等功能。它可以支持JSP，HTML，SQL，Javascript，Struts， CSS等。
2.4 Spring Boot框架
Spring Boot是Pivotal团队的一个新框架，旨在简化新Spring应用程序的初始设置和开发。该框架使用特定的配置方法，无需开发人员定义样板配置。通过这种方式，Spring Boot旨在成为蓬勃发展的快速应用程序开发领域的领导者。 Spring Boot特点： 1、创建一个单独的Spring应用程序； 2、嵌入式Tomcat，无需部署WAR文件； 3、简化Maven配置； 4、自动配置Spring； 5、提供生产就绪功能，如指标，健康检查和外部配置； 6、绝对没有代码生成和XML的配置要求； 安装步骤： 最基本的是，Spring Boot是一个可以被任何项目的构建系统使用的库集合。 为简单起见，该框架还提供了一个命令行界面，可用于运行和测试Boot应用程序。 可以从Spring存储库手动下载和安装框架的已发布版本，包括集成的CLI（命令行界面）。 更简单的方法是使用Groovy enVironment Manager（GVM），它负责处理Boot版本的安装和管理。 可以从GVM命令行GVM install springboot安装Boot及其CLI。 在OS X上安装Boot时可以使用Homebrew包管理器。要完成安装，首先使用brew tap pivotal / tap切换到pivotal存储库，然后执行brew install springboot命令。
2.5 MySQL数据库
Mysql是一个多用户、多线程的服务器，采用SQL的数据库，数据库管理系统是基于SQL的客户以及服务器模式的关系，它的优点有强大的功能、操作简单、管理方便、可靠安全、运行较快、多线程、跨平台性、完全网络化、稳定性等，非常适合Web站点或者其他应用软件，在数据库后端的开发。此外，利用许多语言，会员可以编写和访问Mysql数据库的程序。Mysql数据库也是开放源代码的，开发者越来越喜欢使用Mysql关系数据库，应用范围也被推而广之。这是由于速度快和易用性， Web站点或应用软件的数据库后端的开发也都在使用它。
mysql 数据库它有很多的优点，例如它在操作上能够让人通俗易懂、功能强大、信息储存量高等优点。所以被人们广泛应用，对于mysql数据库来说它一般主要是对数据进行编码和查询，而且在很多的设计当中都应用到了该数据库，在此过程当中我们可以对常规的数据进行查询和组合，所以我们在进行使用mysql数据库的时候只要对编写一小段的数据就能实现相应的功能。数据库，就是数据存储的储藏室，只不过数据是存储在计算机上的，而不是现实中的储藏室，数据的存放是按固定格式，而不是无序的，则定义就是 ：长期有固定格式，可以共享的存储在计算机存储器上。数据库管理主要包括数据表的建立，数据存储、修改和增加数据，为了使数据库系统能够正常运行，相关人员进行的管理工作。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。
第 41 页 
第三章 系统分析
3.1 需求分析
社区维修平台主要是为了提高工作人员的工作效率和更方便快捷的满足用户，更好存储所有数据信息及快速方便的检索功能，对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性，遵循开发的系统优化的原则，经过全面的调查和研究。
系统所要实现的功能分析，对于现在网络方便的管理，系统要实现用户可以直接在平台上进行查看自己所有数据信息，根据自己的需求可以进行矿山设备维修信息，这样既能节省用户的时间，不用在像传统的方式，需要查询、了解信息都需要去寻找相关负责人了解相关数据信息，耽误时间，由于很多用户的时间的原因，没有办法随时随地进行相应管理，真的很难去满足用户的各种需求。所以社区维修平台的开发不仅仅是能满足用户的需求，还能提高管理员的工作效率，减少原有不必要的工作量。
3.2 系统可行性分析
3.2.1技术可行性：技术背景
系统的开发环境和配置都是可以自行安装的，系统使用JSP开发工具，使用比较成熟的Mysql数据库进行对系统用户和管理员之间相关的数据交互，根据技术语言对数据库，结合需求进行修改维护，可以使得系统运行更具有稳定性和安全性，从而完成实现系统的开发。
（1）硬件可行性分析
社区维修平台及信息分析的设计对于所使用的计算机没有什么硬性的要求，计算机只要可以正常的使用进行代码的编写及共享就可行，主要是对于服务器有些要求，对于平台搭建完成要上传的服务器是有一定的要求的，服务器必须选择安全性比较高的，然后就是在打开系统必须顺畅，不能停顿太长时间；性价比高；安全性高。
（2）软件可行性分析
开发整个系统使用的是云计算，流量的可扩展性和基于流量的智能调整云计算的优点就是流量的可扩展性和基于流量的智能调整，保障系统的安全及数据信息的及时备份。
因此，我们从两个方面进行了可行性研究，可以看出系统的开发没有问题。
3.2.2经济可行性
社区维修平台的开发之前所做的市场调研及其他管理相关的系统，是没有任何费用的，都是通过开发者自己的努力，所有的工作的都是自己亲力亲为，在碰到自己比较难以解决的问题，大多是通过同学和指导老师的帮助进行相关信息的解决，所以对于系统的开发在经济上是完全可行的，没有任何费用支出的。
使用比较成熟的技术，系统是基于JAVA的开发，采用Mysql数据库。所以系统在开发人力、财力要求不高，具有经济可行性。
3.2.3操作可行性：
可操作性主要是对系统设计完成后，用户的使用体验度，通过界面导航菜单可以简单明了地进行查看所需的信息内容。对于系统的操作，不需要专业人员都可以直接进行功能模块的操作管理，所以在系统的可操作性是完全可以的。本系统的操作使用的也是界面窗口进行登录，所以操作人员只要会简单的电脑操作就完全可以的。
3.3 项目设计目标与原则
1、关于社区维修平台的基本要求
（1）功能要求：住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理等功能模块。
（2）性能：在不同操作系统上均能无差错实现在不同类型的用户登入相应界面后能不出差错、方便地进行预期操作。
（3）安全与保密要求：用户都必须通过身份验证才能进入系统，并且用户的权限也需要根据用户的类型进行限定。
（4）环境要求：支持多种平台，可在Windows系列、Vista系统等多种操作系统下使用。
2、开发目标
社区维修平台的主要开发目标如下：
（1）实现管理系统信息关系的系统化、规范化和自动化；
（2）减少维护人员的工作量以及实现用户对信息的控制和管理。
（3）方便查询信息及管理信息等；
（4）通过网络操作，改善处理问题的效率，提高人员利用率；
（5）考虑到用户多样性特点，要求界面简单，操作简便。
3、设计原则
本系统采用JAVA技术，Mysql数据库开发，充分保证了系统稳定性、完整性。
社区维修平台的设计与实现的设计思想如下：
1、操作简便、界面良好：简单明了的页面布局，方便查询相关信息
2、即时可见：对系统信息的处理将立马在对应地点可以查询到，实现了"即时发布、即时见效"的功能。
3、功能的完善性：可以对用户所能用到的各个方面的功能模块的添加、修改、维护操作。
3.4系统流程分析
3.4.1操作流程
管理员想进入系统，首先进入系统登录界面，通过正确的用户名、密码，用户名和密码输入完成后，系统会检查登录信息，信息正确，然后输入相应的功能界面，提示信息错误，登录失败。系统操作流程如图3-1所示。
图3-1操作流程图
3.4.2添加信息流程
添加信息，编号系统使用自动编号模式，没有用户填写，管理员添加信息输入信息，系统将自动确认的信息和数据，验证的成功是有效的信息添加到数据库，信息无效，重新输入信息。添加信息流程如图3-2所示。
图3-2添加信息流程图
3.4.3删除信息流程
管理员选择要删除的信息并单击Delete按钮，系统提示是否删除信息。如果用户想要删除信息，系统将删除信息。系统数据库删除信息。删除信息流程图如图3-3所示。
图3-3删除信息流程图
第四章 系统设计
4.1 系统体系结构
社区维修平台开发系统的结构图4-1所示：
网
络
管理员
维修员
服务器和程序
住户
图4-1 系统结构
模块包括主界面，住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理等进行相应的操作。
登录系统结构图，如图4-2所示：
Y
社区维修平台-开发登录
用户登录
密码正确
管理员用户界面
住户界面
维修员用户界面
图4-2 登录结构图
系统结构图，如图4-3所示。
图4-3 系统结构图管
4.2 数据库设计原则
数据库是计算机信息系统的基础。目前，电脑系统的关键与核心部分就是数据库。数据库开发的优劣对整个系统的质量和速度有着直接影响。
4.3.1 数据库设计原则
数据库的概念结构设计采用实体---联系（E-R）模型设计方法。E-R模型法的组成元素有：实体、属性、联系，E-R模型用E-R图表示，是提示用户工作环境中所涉及的事物，属性则是对实体特性的描述。在系统设计当中数据库起着决定性的因素。下面设计出这几个关键实体的实体---关系图。
4.3.2 数据库实体
数据模型中的实体（Entity），也称为实例，对应现实世界中可区别于其他对象的"事件"或"事物"。例如，公司中的每个员工，家里中的每个家具。
本系统的E-R图如下图所示：
1、用户信息实体图如图4-4所示：
图4-4用户信息实体图
公告信息实体E-R图，如图4.5所示。
图4.5公告信息E-R图
接单信息管理E-R图，如图4.6所示。
图4.6接单信息E-R图
订单信息管理E-R图，如图4.7所示。
图4.7订单信息E-R图
第五章 系统实现
5.1管理员功能模块
管理员通过后台登录页面，可以进行填写用户名和密码，等信息，输入无误后进行登录操作，如图5-1所示
图5-1管理员登录页面
管理员登录成功后进入到系统操作界面，可以对个人中心、住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理等功能模块进行相对应操作。
管理员通过个人中心可以获取修改密码和个人信息两个子模块，通过个人信息列表可以进行查看管理员的个人信息并进行查看修改操作，如图5-2所示。
图5-2个人信息页面
住户管理：管理员通过列表查看用户名、密码、住户姓名、性别、头像、手机号等信息，管理员可以进行修改或查看删除操作，也可以通过点击输入用户名可以进行搜索公告，如图5-3所示。
图5-3住户管理页面
社区公告管理：管理员通过列表可以获取公告标题、图片、公告内容、发布时间等信息，进行插件社区公告详情信息、修改或删除操作，管理员通过输入公告标题进行查询或添加公告操作，如图5-4所示。
图5-4社区公关管理页面
维修工管理：管理员通过点击维修工页面可以进行查看账户、密码、姓名、性别、等级、头像、身份证、电话、简介等信息，进行查看详情或修改或删除操作，并通过账号进行查询操作，如图5-5所示。
图5-5维修工页面
接单信息管理:住户通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息，进行查看详情、修改或删除操作，通过输入订单编号进行查询操作，如图5-6所示。
图5-6接单信息管理
订单信息管理:管理员通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、维修费用、账号、姓名、是否支付等信息，进行查看详情、修改或删除操作，并通过输入订单编号、物品名称、住户姓名进行查询操作，如图5-7所示。
图5-7订单信息管理页面
在线沟通管理:通过在线沟通列表可以进行查看标题、用户名、住户姓名、聊天内容、聊天回复、账号、姓名等信息，进行查看详情或修改、删除操作，通过输入标题、住户姓名进行查询操作，如图5-8所示。
图5-8在线沟通管理界面图
举报信息管理：通过列表可以获取标题、账号、姓名、举报内容、举报日期、用户名、住户姓名、审核回复、审核状态、审核等信息，进行查看详情或修改删除操作，并且通过输入标题、姓名进行搜索操作，如图5-9所示。
图5-9举报信息管理页面
5.2住户前台功能模块
维修员通过后台登录页面，可以进行填写用户名和密码，等信息，输入无误后进行登录操作，如图5-10所示
图5-10维修员登录页面
个人中心：维修员通过个人中心页面可以进行输入账号、密码、姓名、性别、密码、等级、上传图片、身份证、电话等信息，进行更新信息或退出操作。如图5-11所示。
图5-12个人中心页面
留言反馈：通过页面可以进行在线留言，输入留言内容进行立即提交操作。如图5-13所示。
图5-13留言反馈界面图
维修工：通过点击维修工可以进行查看维修工的账号、性别、头像、等级、身份证、电话、简介等信息，进行查看或举报操作，如图5-14所示。通过点击举报进入举报页面可以进行输入标题、账号、姓名、举报内容、举报日期、用户名、住户姓名等信息，进行举报提交操作，如图5-15所示。
图5-14维修工详情界面图
图5-15维修工举报界面图
新闻资讯：通过点击新闻资讯可以进行查看新闻内容、发布时间、新闻标题等信息，进行查看，如图5-16所示。
图5-16新闻资讯页面
维修订单：通过点击维修订单可以进行查看维修订单的物品名称、维修类型、发布日期、用户名、住户姓名、手机号、地址等信息，进行查看、接单，在线交流，如图5-17所示。维修员通过点击接单进入接单页面可以进行查看物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息，进行提交或重置操作，如图5-18所示。维修员通过点击交流可以进行页面进行在线查看标题、用户名、住户姓名、进行输入聊天内容、日期等信息，进行在线交流操作，如图5-19所示。
图5-17维修订单界面图
图5-18接单界面图
图5-19交流界面图
5.3住户后台功能模块
用户通过用户登录页面可以填写用户名和密码，等信息进行登录操作，用户登录成功后，进入用户后台系统页面可以查看个人中心、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理模块等功能模块，进行相对应操作。如图5-20所示。
图5-20用户系统界面图
用户通过点击个人中心可以进行查看修改密码、个人信息两个子模块，个人信息：通过页面可以进行输入用户名、住户姓名、性别、头像、手机号等信息，进行修改操作。如图5-21所示。
图5-21个人信息页面
维修订单管理：用户通过列表可以进行查看名称、物品名称、维修类型、图片、发布日期、用户名、住户姓名、手机、地址等信息，进行查看、添加或删除操作。如图5-22所示。住户通过点击添加进入页面可以进行填写名称、维修类型、物品名称、图片、发布日期、用户名、住户姓名、地址、手机、维修内容等信息，进行提交维修订单操作，如图5-23所示。
图5-22维修订单界面图
图5-23添加维修订单界面图
接单信息管理:住户通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息，进行查看详情或通过输入订单编号进行查询操作，如图5-24所示。
图5-24接单信息管理界面图
订单信息管理:住户通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、维修费用、账号、姓名、是否支付等信息，进行查看详情或通过输入订单编号、物品名称、住户姓名进行查询操作，如图5-25所示。
图5-26订单信息管理界面图
在线沟通管理:通过在线沟通列表可以进行查看标题、用户名、住户姓名、聊天内容、聊天回复、账号、姓名等信息，进行查看详情或修改、删除操作，通过输入标题、住户姓名进行查询操作，如图5-27所示。
图5-27在线沟通界面图
举报信息管理:通过举报信息列表可以进行查看标题、账号、姓名、举报内容、举报日期、住户姓名、审核回复、审核状态等信息，进行查看详情或修改、删除操作，通过输入标题、姓名进行查询操作，如图5-28所示。
图5-28在线沟通界面图
5.4维修员前台功能模块
维修员通过后台登录页面，可以进行填写用户名和密码，等信息，输入无误后进行登录操作，如图5-29所示
图5-30维修员登录页面
维修工通过登录进入到网站页面可以进行查看首页的社区公告、维修工、维修订单、新闻资讯、留言反馈、个人中心、后台管理等信息，进行查看社区维修的相对应操作。如图5-31所示。
图5-31维修员系统页面
个人中心：维修员通过个人中心页面可以进行输入账号、密码、姓名、性别、密码、等级、上传图片、身份证、电话等信息，进行更新信息或退出操作。如图5-32所示。
图5-32个人中心页面
新闻资讯：通过点击新闻资讯可以进行查看新闻内容、发布时间、新闻标题等信息，进行查看，如图5-33所示。
图5-34新闻资讯页面
维修订单：通过点击维修订单可以进行查看维修订单的物品名称、维修类型、发布日期、用户名、住户姓名、手机号、地址等信息，进行查看、接单，在线交流，如图5-35所示。维修员通过点击接单进入接单页面可以进行查看物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息，进行提交或重置操作，如图5-36所示。维修员通过点击交流可以进行页面进行在线查看标题、用户名、住户姓名、进行输入聊天内容、日期等信息，进行在线交流操作，如图5-37所示。
图5-35维修订单界面图
图5-36接单界面图
图5-37交流界面图
5.5维修员后台功能模块
维修工通过登录页面可以填写用户名和密码，等信息进行登录操作，维修工登录成功后，进入用户后台系统页面可以查看个人中心、接单信息管理、订单信息管理、在线沟通管理模块等功能模块，进行相对应操作。接单信息：通过列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息，进行查看详情或维修订单、删除操作，如图5-38所示。通过点击维修订单可以进行输入订单编号、物品名称、维修类型、用户名、住户姓名、维修费用、账号、姓名等信息，进行提交操作，如图5-39所示。
图5-38接单信息管理界面图
图5-39维修订单界面图
订单信息管理:通过订单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、维修费用、账号、姓名、是否支付等信息，进行查看详情或删除操作，通过输入订单编号、物品名称、住户姓名进行查询操作，如图5-140所示。
图5-40订单信息管理界面图
在线沟通管理:通过在线沟通列表可以进行查看订标题、用户名、住户姓名、聊天内容、聊天回复、账号、姓名等信息，进行查看详情或删除操作，通过输入标题、住户姓名进行查询操作，如图5-41所示。
图5-41在线沟通界面图
ZaixiangoutongController.java
package com.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;
import com.entity.ZaixiangoutongEntity;
import com.entity.view.ZaixiangoutongView;
import com.service.ZaixiangoutongService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;
/**
* 在线沟通
* 后端接口
* @author
* @email
* @date 2021-02-25 16:01:10
*/
@RestController
@RequestMapping("/zaixiangoutong")
public class ZaixiangoutongController {
@Autowired
private ZaixiangoutongService zaixiangoutongService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,ZaixiangoutongEntity zaixiangoutong, HttpServletRequest request){
String tableName = request.getSession().getAttribute("tableName").toString();
if(tableName.equals("zhuhu")) {
zaixiangoutong.setYonghuming((String)request.getSession().getAttribute("username"));
}
if(tableName.equals("weixiugong")) {
zaixiangoutong.setZhanghao((String)request.getSession().getAttribute("username"));
}
EntityWrapper<ZaixiangoutongEntity> ew = new EntityWrapper<ZaixiangoutongEntity>();
PageUtils page = zaixiangoutongService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, zaixiangoutong), params), params));
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,ZaixiangoutongEntity zaixiangoutong, HttpServletRequest request){
EntityWrapper<ZaixiangoutongEntity> ew = new EntityWrapper<ZaixiangoutongEntity>();
PageUtils page = zaixiangoutongService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, zaixiangoutong), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( ZaixiangoutongEntity zaixiangoutong){
EntityWrapper<ZaixiangoutongEntity> ew = new EntityWrapper<ZaixiangoutongEntity>();
ew.allEq(MPUtil.allEQMapPre( zaixiangoutong, "zaixiangoutong"));
return R.ok().put("data", zaixiangoutongService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(ZaixiangoutongEntity zaixiangoutong){
EntityWrapper< ZaixiangoutongEntity> ew = new EntityWrapper< ZaixiangoutongEntity>();
ew.allEq(MPUtil.allEQMapPre( zaixiangoutong, "zaixiangoutong"));
ZaixiangoutongView zaixiangoutongView = zaixiangoutongService.selectView(ew);
return R.ok("查询在线沟通成功").put("data", zaixiangoutongView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
ZaixiangoutongEntity zaixiangoutong = zaixiangoutongService.selectById(id);
return R.ok().put("data", zaixiangoutong);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
ZaixiangoutongEntity zaixiangoutong = zaixiangoutongService.selectById(id);
return R.ok().put("data", zaixiangoutong);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody ZaixiangoutongEntity zaixiangoutong, HttpServletRequest request){
zaixiangoutong.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(zaixiangoutong);
zaixiangoutongService.insert(zaixiangoutong);
return R.ok();
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody ZaixiangoutongEntity zaixiangoutong, HttpServletRequest request){
zaixiangoutong.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(zaixiangoutong);
zaixiangoutongService.insert(zaixiangoutong);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody ZaixiangoutongEntity zaixiangoutong, HttpServletRequest request){
//ValidatorUtils.validateEntity(zaixiangoutong);
zaixiangoutongService.updateById(zaixiangoutong);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
zaixiangoutongService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 提醒接口
*/
@RequestMapping("/remind/{columnName}/{type}")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
@PathVariable("type") String type,@RequestParam Map<String, Object> map) {
map.put("column", columnName);
map.put("type", type);
if(type.equals("2")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null) {
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
}
if(map.get("remindend")!=null) {
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
}
}
Wrapper<ZaixiangoutongEntity> wrapper = new EntityWrapper<ZaixiangoutongEntity>();
if(map.get("remindstart")!=null) {
wrapper.ge(columnName, map.get("remindstart"));
}
if(map.get("remindend")!=null) {
wrapper.le(columnName, map.get("remindend"));
}
String tableName = request.getSession().getAttribute("tableName").toString();
if(tableName.equals("zhuhu")) {
wrapper.eq("yonghuming", (String)request.getSession().getAttribute("username"));
}
if(tableName.equals("weixiugong")) {
wrapper.eq("zhanghao", (String)request.getSession().getAttribute("username"));
}
int count = zaixiangoutongService.selectCount(wrapper);
return R.ok().put("count", count);
}
}
ConfigController.java
package com.controller;
import java.util.Arrays;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;
/**
* 登录相关
*/
@RequestMapping("config")
@RestController
public class ConfigController{
@Autowired
private ConfigService configService;
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
PageUtils page = configService.queryPage(params);
return R.ok().put("data", page);
}
/**
* 列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
PageUtils page = configService.queryPage(params);
return R.ok().put("data", page);
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
ConfigEntity config = configService.selectById(id);
return R.ok().put("data", config);
}
/**
* 详情
*/
@IgnoreAuth
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") String id){
ConfigEntity config = configService.selectById(id);
return R.ok().put("data", config);
}
/**
* 根据name获取信息
*/
@RequestMapping("/info")
public R infoByName(@RequestParam String name){
ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
return R.ok().put("data", config);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);
configService.insert(config);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);
configService.updateById(config);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
configService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
MD5Util.java
package com.utils;
import cn.hutool.crypto.digest.DigestUtil;
public class MD5Util {
/**
* @param text明文
* @param key密钥
* @return 密文
*/
// 带秘钥加密
public static String md5(String text) {
// 加密后的字符串
String md5str = DigestUtil.md5Hex(text);
return md5str;
}
}
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="title">
<el-input v-model="ruleForm.title"
placeholder="标题" clearable :readonly="ro.title"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="标题" prop="title">
<el-input v-model="ruleForm.title"
placeholder="标题" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="24">
<el-form-item class="upload" v-if="type!='info' && !ro.picture" label="图片" prop="picture">
<file-upload
tip="点击上传图片"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.picture?ruleForm.picture:''"
@change="pictureUploadChange"
></file-upload>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.picture" label="图片" prop="picture">
<img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture.split(',')" :src="item" width="100" height="100">
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item class="textarea" v-if="type!='info'" label="简介" prop="introduction">
<el-input
style="min-width: 200px; max-width: 600px;"
type="textarea"
:rows="8"
placeholder="简介"
v-model="ruleForm.introduction" >
</el-input>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.introduction" label="简介" prop="introduction">
<span>{{ruleForm.introduction}}</span>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item v-if="type!='info'" label="内容" prop="content">
<editor
style="min-width: 200px; max-width: 600px;"
v-model="ruleForm.content"
class="editor"
action="file/upload">
</editor>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.content" label="内容" prop="content">
<span v-html="ruleForm.content"></span>
</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>
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
let self = this
var validateIdCard = (rule, value, callback) => {
if(!value){
callback();
} else if (!checkIdCard(value)) {
callback(new Error("请输入正确的身份证号码"));
} else {
callback();
}
};
var validateUrl = (rule, value, callback) => {
if(!value){
callback();
} else if (!isURL(value)) {
callback(new Error("请输入正确的URL地址"));
} else {
callback();
}
};
var validateMobile = (rule, value, callback) => {
if(!value){
callback();
} else if (!isMobile(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
};
var validatePhone = (rule, value, callback) => {
if(!value){
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的电话号码"));
} else {
callback();
}
};
var validateEmail = (rule, value, callback) => {
if(!value){
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱地址"));
} else {
callback();
}
};
var validateNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isNumber(value)) {
callback(new Error("请输入数字"));
} else {
callback();
}
};
var validateIntNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isIntNumer(value)) {
callback(new Error("请输入整数"));
} else {
callback();
}
};
return {
addEditForm: {"btnSaveFontColor":"#fff","selectFontSize":"14px","btnCancelBorderColor":"#DCDFE6","inputBorderRadius":"4px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"4px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"20px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"#fff","dateIconFontSize":"14px","btnSaveBgColor":"rgba(0, 150, 136, 1)","uploadIconFontColor":"#8c939d","textareaBorderColor":"#DCDFE6","btnCancelBgColor":"#ecf5ff","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"4px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"#DCDFE6","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"20px","inputBgColor":"#fff","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"4px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"#DCDFE6","inputBorderColor":"#DCDFE6","uploadBorderColor":"#DCDFE6","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"4px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
id: '',
type: '',
ro:{
title : false,
introduction : false,
picture : false,
content : false,
},
ruleForm: {
title: '',
introduction: '',
picture: '',
content: '',
},
rules: {
title: [
{ required: true, message: '标题不能为空', trigger: 'blur' },
],
introduction: [
],
picture: [
{ required: true, message: '图片不能为空', trigger: 'blur' },
],
content: [
{ required: true, message: '内容不能为空', trigger: 'blur' },
],
}
};
},
props: ["parent"],
computed: {
},
created() {
this.addEditStyleChange()
this.addEditUploadStyleChange()
},
methods: {
// 下载
download(file){
window.open(`${file}`)
},
// 初始化
init(id,type) {
if (id) {
this.id = id;
this.type = type;
}
if(this.type=='info'||this.type=='else'){
this.info(id);
}else if(this.type=='cross'){
var obj = this.$storage.getObj('crossObj');
for (var o in obj){
if(o=='title'){
this.ruleForm.title = obj[o];
this.ro.title = true;
continue;
}
if(o=='introduction'){
this.ruleForm.introduction = obj[o];
this.ro.introduction = true;
continue;
}
if(o=='picture'){
this.ruleForm.picture = obj[o];
this.ro.picture = true;
continue;
}
if(o=='content'){
this.ruleForm.content = obj[o];
this.ro.content = true;
continue;
}
}
}
},
// 多级联动参数
info(id) {
this.$http({
url: `news/info/${id}`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.ruleForm = data.data;
} else {
this.$message.error(data.msg);
}
});
},
// 提交
onSubmit() {
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
this.$refs["ruleForm"].validate(valid => {
if (valid) {
this.$http({
url: `news/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.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.newsCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
});
},
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 返回
back() {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.newsCrossAddOrUpdateFlag = false;
this.parent.contentStyleChange();
},
pictureUploadChange(fileUrls) {
this.ruleForm.picture = fileUrls;
this.addEditUploadStyleChange()
},
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>