基于Spring boot的名城小区物业管理系统

@TOC

springboot240基于Spring boot的名城小区物业管理系统

绪论

1.1研究背景与意义

1.1.1研究背景

近年来，第三产业发展非常迅速，诸如计算机服务、旅游、娱乐、体育等服务行业，对整个社会的经济建设起到了极大地促进作用，这一点是毋庸置疑的。现下，国家也出台了一些列的政策来支持和鼓励第三服务产业的发展与完善，用以带动社会经济的发展[1]。所以，整体来说，国家是比较提倡发展第三方服务行业的。纵观计算机领域的整个发展历程，从计算机的诞生到现在，已经有几百年的历史了，计算机应用技术也逐步趋于成熟，并且相关的设计人员也在不断地对其进行改进和完善。再到如今，计算机已经发展成为一个比较热门的行业了。在高校中，计算机、人工智能等专业热度非常高，许多学生在选择专业的时候，大都优先考虑计算机专业。在社会上，计算机类行业也成为了比较受欢迎的行业，从在浏览器中访问的网址，到手机上的各种应用程序，到大型的软件服务设备，基本上都离不开计算机技术支持，以及硬件的支撑。

如今，互联网几乎遍布于世界的各个角落，人工智能、大数据占据的越来越重要的社会地位，比如疫情期间，通过大数据技术进行筛查，确定哪些人员无接触史，哪些人员需要重点观察，由此可以在极短的时间内，以最快的速度对疫情进行防控。在这个大背景环境的推动下，本人通过学习Java语言、MySQL数据库、SSM框架等相关的计算机技术，打好坚实的技术基础，方便后期对系统进行研发。而后再通过对系统进行需求分析、可行性分析、总体功能设计等工作准备，确定系统的总体功能需求，方便接下来详细地系统功能模块进行设计和实现，最后成功的研发了一款基于Spring boot的名城小区物业管理系统。本系统改善了传统的管理模式，将原先的手工记录和管理信息，改进为使用计算机存储和管理信息记录，极大地方便了工作人员对相关数据进行处理，为相关行业节约了不少的员工费用和管理开销，并且能够在较短的时间内响应用户的需求，这种便捷的操作，对于用户来说可以节省了不少时间和精力，也省去了不少的麻烦，极大了方便了用户。

1.1.2研究意义

传统的物业管理模式，主要是以人力为主进行管理和控制，由工作人员负责登记用户信息，再通过对照之前的信息记录，确定是否给用户提供相关的使用需求，以及如何提供能让用户满意的使用需求。这种管理模式已经适应不了时代的变化了，正在不断地走下坡路，并且逐步被信息化管理模式所取代。所谓的信息化管理模式，是现在主流的一种管理模式，其通过与计算机技术相结合的方式，对行业的整个工作模式和服务流程进行改进和完善。其主要通过使用计算机等设备，将工作服务流程电子化，并且进行存储记录，用以提高行业整体的服务水平。结合使用计算机技术，本人研发出一款基于Spring boot的名城小区物业管理系统，采用电子化的方式对数据信息进行存储，便于工作人员对相关信息进行记录和管理，有利于提高相关行业的工作运营效率以及工作人员的管理速度，以此更好的满足用户的相关需求，最终达到提升用户的使用感受的目的，由此可见设计和实现本系统具有重要的意义和价值。

1.2国内外研究现状

1.2.1国外研究现状

美国是最先发展计算机技术的众多国家之一，早在上个世纪，美国就快速的将计算机技术发展起来，并且将其运用在军事、医院、学校、社会服务等场所。日本、德国等国家紧随其后，不断地发展和完善计算机技术，侧重将医疗、社会服务等领域与计算机技术相结合[2]。而后随着社会的发展与进步，计算机技术逐渐趋于成熟。许多发达国家在探索将计算机技术应用于各行各业中时，从另一个角度来看，也在不断地推进相关行业的信息化管理进程，使得物业管理也变得更加网络化、信息化了。有许多专家表示，可以结合使用图像处理软件、人工智能技术等相关工具，深度地分析物业管理信息系统，主要从简化运行操作，加设功能模块，美化系统界面，保障数据安全等方面，更深层次地提升和优化系统，并且尽可能地在理想状态下做到实时的信息共享[3]。

1.2.2国内研究现状

国内的计算机技术的发展虽然晚于国外，尤其是美国、英国、德国等发达国家。但是我国的计算机技术发展势头非常迅猛，近些年，也逐渐走向成熟和完善的阶段。现在，选择网上购物已经成为人们日常生活的一种常态趋势，当然这也离不开对于天猫、支付宝、微信等应用软件的使用[4]。许多企业结合使用了云计算、人工智能等先进的计算机技术，自主研发了行业相关的信息管理系统，使得计算机技术越来越成熟，系统功能越来越完备。结合计算机技术，采用主流的B/S开发结构模式开发一款基于Spring boot的名城小区物业管理系统。由此，本系统能够支持工作人员随时随地的通过使用浏览器进行访问操作，支持随时随地对相关的物业信息进行管理，便于及时为用户提供一定的功能服务。并且所设计的系统基本上能够符合用户的客观使用需求，有利于充分协调相关行业的人力、财力、物力等资源，不断提高物业管理质量和水平。

1.3研究内容与方法

1.3.1研究内容

本文首先介绍了物业管理信息系统的研究背景与意义，其次介绍了系统的总体功能设计，接着将总体功能设计拆分成了各个功能子模块，然后对每一个小的功能子模块进行了详细设计，最后介绍了系统的功能模块展示结果和测试结果。系统主要分为管理员角色和用户角色，具体的功能设计包括注册登录管理、用户信息管理、房屋信息管理、缴费信息管理等模块。注册登录管理功能是新用户在使用系统前，需要通过注册步骤，登记详细的信息资料，而后再通过输入正确的账号和密码，成功登录系统后，即可通过一系列的操作来满足自己的相关需求。用户信息管理功能是管理相关的用户信息资料，管理人员根据现实情况的需要，选择性的对用户信息记录进行更新处理。房屋信息管理是管理相关的房屋信息记录，保存详情的房屋信息情况，方便及时响应用户的服务请求。缴费信息管理是管理相关的缴费信息记录，方便相关人员及时查看缴费信息，如果遇到异常的缴费信息，可以及时对其进行处理，在较短的时间内解决问题，提高用户的使用体验。

1.3.2研究方法

本系统采用B/S结构，在MyEclipse平台上，通过使用Java语言设计系统相关的功能模块，MySQL数据库管理系统相关的数据信息，并且对其进行必要的管理和控制。系统设计的最关键的环节，则是需要通过SSM框架设计系统功能架构，再通过Tomcat服务器将系统发布到浏览器上，以便相关用户的操作和使用。本系统的设计和实现促进了物业管理的信息化建设，有利于简化相关人员工作流程，提高工作效率，提升工作幸福感。

1.4论文的组织结构

基于Spring boot的名城小区物业管理系统的设计与实现大致可以被分成七个章节，每一个章节的具体内容如下：

第一章为绪论，本章主要介绍了系统的研究现状、背景依据等内容。根据本章所介绍的研究现状、研究背景等内容，了解当前相关的系统软件产品的实际研究情况，再通过介绍相关的研究内容以及研究方法等内容，总体概括系统的整个开发流程和实现步骤，为系统提供可靠的理论依据和技术支持。

第二章为相关技术介绍，本章主要介绍了开发所使用的相关技术。本系统主要使用的开发技术包括Java语言、SSM框架、MySQL数据库等，并且所使用的开发模式为B/S结构。其中，Java语言具有跨平台性，可移植性高，可以支持在不同的浏览器上运行本系统，MySQL数据库占用内存少，执行速度快，对于中小型系统的数据管理是非常好的选择。

第三章为系统分析，本章主要介绍了需求分析、可行性分析等内容。根据需求分析，确认使用者对系统的实际使用需求，再通过对系统进行可行性分析，重点分析系统研发的实际意义和使用价值，系统性能的稳定性和功能操作的便捷性，以及成功投入市场的可能性。

第四章为系统设计，本章主要介绍了系统的总体功能设计、数据库设计等内容。通过介绍系统的总体功能设计，总体规划系统的功能模块，为实现系统提供参考依据和设计思路，做好功能设计的准备工作。再通过介绍数据库设计，设计相关的数据二维表格存放和管理与系统有关的数据信息，便于相关人员管理与系统有关的数据信息，维护和更新数据信息的安全。

第五章为系统实现，系统实现阶段主要介绍了用户信息管理、房屋信息管理、缴费信息管理等功能模块。通过前面介绍的需求分析、总体功能设计、数据库设计等相关内容，实现系统的具体功能设计。对系统的各个功能模块进行设计和实现的过程，就是具体的系统实现过程，在整个系统开发过程中，这一阶段是极为重要，直接关系到用户对系统的使用感受。

第六章为系统测试，本章主要介绍了测试功能、结果分析等相关内容。系统测试阶段通过采用功能测试的方式，测试所设计的系统功能模块能否正常打开并使用，在系统运行过程中是否发生异常，如运行异常、数据异常、结果异常等，并且根据测试结果，给出相应的测试总结，由此得出相关结论，说明系统是否达到预期要求、设计目的。

第七章为总结与展望，对全文内容进行总结，并且对未来提出展望。总体来说，本系统的开发是比较理想的，未来的工作主要是针对于系统的功能和性能等方面，做一定的改进和完善，不断地优化系统的功能设计，美化系统的界面设计，简化系统的操作难度，使其能够满足更多用户的使用需求。

52

2相关技术介绍

2.1 B/S结构

就软件开发的现状而言，目前主要使用的系统开发结构模式大致可以分为C/S模式和B/S模式[5]。其中，C/S模式全称为客户端/服务器模式，B/S模式全称为浏览器/服务器模式。用户在使用基于C/S模式开发的系统时，必须下载相应的客户端，即应用程序，才能操作和使用软件系统的相关功能模块。从使用者的角度来看，由于下载和安装客户端的步骤比较繁琐，期间还需要确保下载网速的稳定性，以及安装步骤的正确性，进而增加了用户放弃使用该系统的可能性，由此可见C/S模式具有很大的局限性。

由于C/S模式适用于小范围的局域网，并且具有一定的通信效率，所以在以前系统规模很小的时代，主要使用C/S模式对系统开发。随着时代地发展以及社会地进步，C/S模式也越来越满足不了开发者的设计需要，以及使用者的使用需求[6]。当下，C/S模式已经满足不了实际的系统程序设计要求，由此，B/S模式以C/S模式为基础而被提出，并且在近些年逐渐发展成为主流的开发结构模式。在B/S模式下开发的系统，不再需要用户下载和安装相应的应用程序，直接通过使用浏览器，输入正确的网站地址，以访问网站的形式实现系统的相关功能操作，这一特点对C/S模式下的开发设计做出了极大地改进，当然，使用本系统的前提是确保账号和密码是合法的。

2.2 Java语言

Java语言是由美国sun公司提出的一种面向对象的程序设计语言，它拥有着优秀的技术体系结构。目前在市场上，很大一部分的应用系统主要使用Java语言进行开发[7]。Java语言具有简单易懂，操作方便，健壮性强等优点，开发人员能够的在短时间内理解和掌握Java语言，并将其运用到具体的系统开发过程中学。针对于系统内存管理问题，Java语言为解决这类问题，内部提供了垃圾回收机制。为了极大地简化了开发编程的难易程度，Java语言还将C语言中的指针，改进成了引用，所以受到了很多开发人员的喜爱。Java语言还具有跨平台性的特点，意味着它的可移植性非常高，这一特点有利于开发人员更新和维护相关代码，由它所开发的系统可以支持在不同的浏览器中打开。因为使用Java开发的系统兼容性较强，代码通用性较高，为了后期方便对系统进行完善和维护，所以本人最终选择使用Java语言开发本系统。

2.3 SSM框架

SSM框架主要由Spring、SpringMVC、MyBatis这三个框架所集成的，是现在比较流行的一种Java开发框架，能够适用于大中型的应用程序的设计和搭建。Spring是前几十年前兴起的一种轻量级的、开源的Java开发框架，使用它可以解决相关的系统对象创建和对象依赖问题，并且也可以将高耦合的系统分解为低耦合的多个功能模块，方便对系统模块进行明确的分工，对功能代码进行理解和修改，这就极大地减轻了设计人员的开发压力[8]。SpringMVC框架是基于Spring框架而被提出的，它以MVC三层架构为核心，对Spring的相关技术进行了整合，主要针对于Web端进行技术架构，通过对相关的请求处理进行细化处理，用来响应用户的使用请求。MyBatis框架是一种开源的Java持久层框架，它改进了手动设置参数和获取结果记录的方式，通过支持对数据库进行存储过程、高级映射等处理，使得数据库的操作更加定制化、透明化，因此降低了数据库访问的复杂性，提高了开发的工作效率。

2.4 MySQL数据库

MySQL数据库是目前使用较多的关系型数据库。因为其具有开源免费、占用内存少、安装简单、操作便捷、使用灵活等优点，所以经常被运用于中小型的系统开发中[9]。MySQL数据库可以支持多线程，在同一个时间内，能够同时响应多个用户的使用需求。MySQL数据库还自带了优化器，方便设计人员在 使用过程中，快速的查询相关的数据信息[10]。除此之外，SQL server数据库在当下也是使用比较频繁的，它在数据安全、系统稳定等方面还是比有所保障，但是由于其收费使用、占用内存大、操作复杂、维护成本高， 一般适用于中型及以上的系统开发中。MySQL数据库也有着许多的应用程序接口，以供相关的编程语言使用，编写的代码具有极高的通用性和维护性，并且MySQL数据库能够迅速的处理上千条数据记录，在系统故发生障时，能通过日志文件快速恢复。MySQL数据库与SQL server数据库相比较，综合考虑成本开销、占存大小、代码通用、数据维护、操作难易程度等方面，MySQL数据库占有很大的优势，在数据库设计人员的眼中，MySQL数据库的实际运用价值极高。

3系统分析

3.1系统的需求分析

需求分析阶段是设计系统功能模块的总方向，可以这样来说，系统的整个的开发流程以及设计进度，基本上都是以需求分析为基本依据的[11]。需求分析阶段可以确定系统的基本功能设计，以及在最后的系统验收阶段，再通过对需求分析报告进行对比，验证系统的功能设计是否合理，能否满足用户的基本需要，最终判断总结系统是否成功现实。本文主要通过问卷调查的方式，来分析物业管理信息系统所需要的相关功能[12]。根据调查结果显示，系统用户主要有两种类型，一种是以使用为主要目的的用户角色类型，另一种是以管理为主要目的的管理员角色类型。本系统主要功能需求包括用户信息管理、房屋信息管理、缴费信息管理等模块。其中，密码信息、用户信息、房屋信息等都是非常重要的数据记录，在系统设计的过程中，需要进行一定的加密处理，确保数据安全性，切实的保护好用户的重要信息。

3.2系统的可行性分析

3.2.1经济可行性

对系统进行经济可行性分析，也可以被称为对系统进行经济可行性研究，它是从社会的经济发展出发，通过研究整个的系统可行性，对成本收益情况进行全面地、具体地分析，并且根据所分析的可行性报告，为相关的投资者提供最科学的决策理论和最优的投资方案。本系统的开发促进了物业的信息化管理，管理人员可以直接通过在浏览器上发布物业管理信息系统的网站地址，即可用户根据一定的需要，有选择的对系统相关功能进行操作。这种方式打破了时间和空间的限制，可以使得相关行业在较短的时间内最大化地管理物业的相关信息。并且本系统所使用的开发技术和相关工具，大部分是开源的、免费的，所以可以节约很大一笔开发成本。综合上述内容分析可知，本系统的实现在经济层面上是具备可行性的。

3.2.2技术可行性

本系统是基于Java语言而进行开发的，因为Java语言容易学习、使用简单、可移植性高、稳定性强等特点，所以许多的开发技术人员均喜欢使用Java语言进行系统设计，市场上很多应用程序是由Java语言进行开发实现的。并且Java语言还具有跨平台的优点，这意味着所设计的系统是与平台无关的，也就说明由Java语言开发的系统可以支持在不同的浏览器上运行和使用。本系统使用的是MySQL数据库，相同条件下，对比其他数据库，MySQL数据库语法简单，数据库设计人员可以尽可能快的对其学习和掌握，所以一直是中小型系统最优的数据库选择。MySQL数据库还具有占用系统内存少、功能齐全、响应速度快、使用不收费等特点，能够在极短时间内处理上千条信息记录，所以能够保证系统可以高效地运行和工作。综合上述内容分析可知，系统的实现在技术层面上是具备可行性的。

3.2.3操作可行性

如今，人们的日常生活已经离不开互联网的使用，在一定程度上，行业的信息化建设促进着社会的发展。人们通过使用手机上的应用程序，比如，通过使用电子商务系统，可以实现网上购物、在线支付等功能；通过使用国家官方网站，可以查看最新消息，申报个人业务；通过使用医院管理系统，可以进行网上预约挂号，在线查看体检报告等操作。在这些应用的背景下，本系统使用的是B/S开发结构模式，网站界面以人性化的设计为主，具有美观友好、交互性好等优点，用户不需要掌握一定的编程技术，直接通过对系统进行简单的功能操作，即可满足自己的使用需求。本系统还设计了一些提示信息，便于用户更好的理解系统相关功能，较快的以正确的操作方式来使用系统。综合上述内容分析可知，系统的实现在操作层面上是具备可行性的。

4系统设计

4.1系统的总体功能设计

系统的总体功能设计，是需求分析的下一个阶段，是系统实现的上一个阶段，它是系统详细功能设计的一个大方向，也就是说系统的各类子功能模块的设计，都是以总体功能设计为目标而进行的。通过对系统进行需求分析可知，可以大致了解系统具体所需要的相关功能。本系统主要的功能需求包括用户信息管理、房屋信息管理、缴费信息管理等模块。本系统的总体功能设计图如图4-1所示。

名城小区物业管理系统

用户信息管理

通知信息管理

缴费信息管理

报修信息管理

房屋信息管理

用户信息修改

用户信息新增

房屋信息添加

房屋信息删除

房屋信息修改

报修信息添加

报修信息修改

报修信息删除

通知信息添加

通知信息删改

通知信息删除

缴费信息添加

缴费信息修改

缴费信息删除

论坛信息管理

论坛信息修改

论坛信息删除

论坛信息添加

图4-1系统总体功能设计图

4.2数据库设计

4.2.1概念设计

本系统使用轻量级的MySQL数据库，对系统相关的数据信息进行管理和维护[13]。数据库设计阶段主要可以被分为两个阶段，分别为概念设计和逻辑设计阶段。在整个的数据库设计的过程中，两个阶段起到作用是不同的，概念设计阶段是实现基础，逻辑设计阶段最终目标[14]。概念设计阶段主要通过使用实体-联系图（E-R图）的方式，将现实世界中用户的相关需求抽象化为虚拟世界中的概念模型。本人通过设计E-R图，详细的对系统中的实体以及实体之间的联系进行了表达。各实体信息的E-R图如图4-2、图4-3、图4-4、图4-5、图4-6、图4-7、图4-8、图4-9、图4-10、图4-11、图4-12、图4-13所示，系统总体E-R图如图4-14所示。

图4-2管理员信息E-R图

图4-3员工信息E-R图

图4-4房屋信息E-R图

图4-5房屋收藏信息E-R图

图4-6房屋留言信息E-R图

图4-7住户信息E-R图

图4-8小区环境信息E-R图

图4-9通知信息E-R图

图4-10论坛信息E-R图

图4-11缴费信息E-R图

图4-12报修信息E-R图

图4-13字典信息E-R图

图4-14系统总体E-R图

4.2.2逻辑设计

逻辑设计阶段主要的工作是将概念设计中的E-R图，转换成方便系统进行存储和管理的二维表格形式[15]。这一阶段也可以被称为数据库的详细设计，其直接关系到系统功能模块的正常运行、数据信息的正常更新等。在设计过程中，需要充分考虑数据库的规范性和合理性，使得能够满足系统的功能和性能需求。本系统相关的数据表格设计内容如下所示。

表4-1管理员信息表

表4-2员工信息表

表4-3房屋信息表

表4-4房屋收藏信息表

表4-5房屋留言信息表

表4-6住户信息表

表4-7小区环境表

表4-8通知表

表4-9论坛表

表4-10缴费表

表4-11报修表

表4-12字典表

5系统实现

5.1管理员角色功能设计

5.1.1个人中心

通过设计个人中心功能模块，管理用户可以选择查看个人资料信息，选择更新个人相关的资料信息记录；也可以选择修改账号密码，通过不定期的对个人账户密码进行更新，保障个人信息安全，修改密码界面设计如图5-1所示，个人信息界面设计如图5-2所示。

图5-1修改密码界面

图5-2个人信息界面

5.1.2住户管理

通过设计住户管理功能模块，管理用户可以选择查看详细的住户信息资料，比如查看住户姓名、住户身份证号等信息；可以选择修改相关住户信息记录；也可以选择删除已经失效的住户信息记录，住户管理界面设计如图5-3所示。

图5-3住户管理界面

5.1.3员工管理

通过设计员工管理功能模块，管理用户可以管理相关的员工用户信息资料，可以选择查看员工用户详细资料，比如查看员工用户账号、姓名、照片、手机号等信息；可以选择修改员工用户相关的信息记录；可以选择删除已经注销的员工用户信息记录；也可以选择添加新的员工用户信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的员工用户信息记录，员工管理界面设计如图5-4所示。

图5-4员工管理界面

5.1.4报修管理

通过设计报修管理功能模块，管理用户可以管理相关的报修信息记录，可以选择查看报修详情信息，比如查看住户名称、住户手机号、住户照片、员工姓名、员工手机号、报修名称、报修图片等信息；可以选择修改报修相关的信息记录；可以选择删除已经失效的报修信息记录；根据报修的实际情况，可以选择更新报修的申请时间；也可以选择添加新的报修信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的报修信息记录，报修管理界面设计如图5-5所示。

图5-5报修管理界面

5.1.5论坛管理

通过设计论坛管理功能模块，管理用户可以管理相关的论坛信息记录，可以选择查看论坛详情信息，比如查看住户姓名、住户手机号、帖子标题、帖子类型、帖子状态、发帖时间、修改时间等信息；可以选择修改论坛相关的信息记录；可以选择删除已经失效的论坛信息记录；根据论坛的实际情况，可以选择更新帖子的发帖时间；也可以选择添加新的论坛信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的论坛信息记录，论坛管理界面设计如图5-6所示。

图5-6论坛管理界面

5.1.6房屋管理

通过设计房屋管理功能模块，管理用户可以管理相关的房屋信息记录，可以选择查看房屋详情信息，比如查看住户姓名、住户手机号、住户照片、房屋名称、房屋地址、房屋照片、房屋类型等信息；可以选择修改房屋相关的信息记录；可以选择删除已经失效的房屋信息记录；根据房屋的实际情况，可以选择更新房屋地址；也可以选择添加新的房屋信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的房屋信息记录，房屋管理界面设计如图5-7所示。

图5-7房屋管理界面

5.1.7房屋留言管理

通过设计房屋留言管理功能模块，管理用户可以管理相关的房屋留言信息记录，可以选择查看房屋留言详情信息，比如查看房屋名称、房屋地址、房屋照片、房屋类型、住户姓名、住户手机号、住户照片、留言内容、回复内容等信息；可以选择修改房屋留言相关的信息记录；可以选择删除已经失效的房屋留言信息记录；根据房屋留言的实际情况，可以选择更新留言内容、留言时间；也可以选择添加新的房屋留言信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的房屋留言信息记录，房屋留言管理界面设计如图5-8所示。

图5-8房屋留言管理界面

5.1.8房屋收藏管理

通过设计房屋收藏管理功能模块，管理用户可以管理相关的房屋收藏信息记录，可以选择查看房屋收藏详情信息，比如查看房屋名称、房屋地址、房屋照片、房屋类型、住户姓名、住户手机号、住户照片、收藏时间等信息；可以选择修改房屋收藏相关的信息记录；可以选择删除已经失效的房屋收藏信息记录；根据房屋收藏的实际情况，可以选择更新收藏时间；也可以选择添加新的房屋收藏信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的房屋收藏信息记录，房屋收藏管理界面设计如图5-9所示。

图5-9房屋收藏管理界面

5.1.9小区环境管理

通过设计小区环境管理功能模块，管理用户可以管理相关的小区环境信息记录，可以选择查看小区环境详情信息，比如查看环境名称、环境图片、环境类型等信息；可以选择修改小区环境相关的信息记录；可以选择删除已经失效的小区环境信息记录；根据小区环境的实际情况，可以选择修改环境图片；也可以选择添加新的小区环境信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的小区环境信息记录，小区环境管理界面设计如图5-10所示。

图5-10小区环境管理界面

5.1.10缴费管理

通过设计缴费管理功能模块，管理用户可以管理相关的缴费信息记录，可以选择查看缴费详情信息，比如查看房屋名称、房屋地址、房屋照片、房屋类型、缴费名称、缴费月份、缴费金额等信息；可以选择修改缴费相关的信息记录；可以选择删除已经失效的缴费信息记录；根据缴费的实际情况，可以选择更新缴费金额、缴费发布时间；也可以选择添加新的缴费信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的缴费信息记录，缴费管理界面设计如图5-11所示。

图5-11缴费管理界面

5.1.11通知管理

通过设计通知管理功能模块，管理用户可以管理相关的通知信息记录，可以选择查看通知详情信息，比如查看通知名称、通知图片、通知类型等信息；可以选择修改通知相关的信息记录；可以选择删除已经失效的通知信息记录；根据通知的实际情况，可以选择修改通知图片；也可以选择添加新的通知信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的通知信息记录，通知管理界面设计如图5-12所示。

图5-12通知管理界面

5.1.12轮播图管理

通过设计的轮播图管理功能模块，管理用户可以对相关的轮播图信息进行管理，比如可以查看轮播图名称、值等信息；可以选择修改轮播图相关的信息记录；可以选择删除已经失效的轮播图信息记录；根据通知的实际情况，可以选择修改轮播图图片；也可以选择添加新的轮播图信息记录，轮播图管理界面设计如图5-13所示。

图5-13轮播图管理界面

5.1.13基础数据管理

通过设计基础数据管理功能模块，管理用户可以管理相关的报修类型、房屋类型、环境类型、缴费类型、通知类型信息记录，可以选择查看报修类型、房屋类型、环境类型、缴费类型、通知类型的编码、名称等信息；可以选择删除已经失效的报修类型、房屋类型、环境类型、缴费类型、通知类型信息记录；根据实际情况，可以选择修改报修类型、房屋类型、环境类型、缴费类型、通知类型相关的信息；也可以选择添加新的报修类型、房屋类型、环境类型、缴费类型、通知类型信息记录，需要注意的是，需要输入正确的字符格式，才能成功添加新的报修类型、房屋类型、环境类型、缴费类型、通知类型信息记录，报修类型管理界面设计如图5-14所示，房屋类型管理界面设计如图5-15所示，环境类型管理界面设计如图5-16所示，缴费类型管理界面设计如图5-17所示，通知类型管理界面设计如图5-18所示。

图5-14报修类型管理界面

图5-15房屋类型管理界面

图5-16环境类型管理界面

图5-17缴费类型管理界面

图5-18通知类型管理界面

5.2用户角色功能设计

5.2.1个人中心

通过设计的个人中心功能模块，用户可以查看个人相关的信息资料，比如姓名、照片、手机号、身份证号、性别等；也可以通过输入姓名、手机号、性别等信息，选择更新个人信息资料，需要注意的是，需要输入正确的字符格式，才能成功更新个人资料信息记录；也可以选择修改个人密码信息，保障个人账户安全，修改密码界面设计如图5-19所示，个人信息界面设计如图5-20所示。

图5-19修改密码界面

图5-20个人信息界面

5.2.2报修管理

通过设计报修管理功能模块，用户可以管理相关的报修信息记录，可以选择查看报修详情，比如查看住户姓名、住户手机号、员工姓名、员工手机、员工照片、报修名称、报修图片、报修类型、申请报修时间等信息；也可以通过输入报修姓名、住户姓名、住户手机号、住户身份证号、员工姓名、员工手机号、员工身份证号信息，选择查询相关的报修信息记录，报修管理界面设计如图5-21所示。

图5-21报修管理界面

5.2.3房屋留言管理

通过设计房屋留言管理功能模块，用户可以管理相关的房屋留言信息记录，可以选择查看房屋留言详情信息，比如查看房屋名称、房屋地址、房屋照片、房屋类型、住户姓名、住户手机号、住户照片、留言内容、回复内容等信息；也可以通过输入房屋名称、房屋地址、房屋类型、住户姓名、住户手机号、住户身份证号信息，选择查询相关的房屋留言信息记录，房屋留言管理界面设计如图5-22所示。

图5-22房屋留言管理界面

5.2.4房屋收藏管理

通过设计房屋收藏管理功能模块，用户可以管理相关的房屋收藏信息记录，可以选择查看房屋收藏详情信息，比如查看房屋名称、房屋地址、房屋照片、房屋类型、住户姓名、住户手机号、住户照片、收藏时间等信息；也可以通过输入房屋名称、房屋地址、房屋类型、住户姓名、住户手机号、住户身份证号信息，选择查询相关的房屋收藏信息记录，房屋收藏管理界面设计如图5-23所示。

图5-23房屋收藏管理界面

5.2.5小区环境管理

通过设计小区环境管理功能模块，用户可以管理相关的小区环境信息记录，可以选择查看小区环境详情信息，比如查看环境名称、环境图片、环境类型等信息；也可以通过输入环境名称信息，选择查询相关的小区环境信息记录，小区环境管理界面设计如图5-24所示。

图5-24小区环境管理界面

5.2.6缴费管理

通过设计缴费管理功能模块，用户可以管理相关的缴费信息记录，可以选择查看缴费详情信息，比如查看房屋名称、房屋地址、房屋照片、房屋类型、缴费名称、缴费月份、缴费金额等信息；也可以通过输入缴费名称、缴费月份、房屋名称、房屋地址、房屋类型信息，选择查询相关的缴费信息记录，缴费管理界面设计如图5-25所示。

图5-25缴费管理界面

5.2.7通知管理

通过设计通知管理功能模块，用户可以管理相关的通知信息记录，可以选择查看通知详情信息，比如查看通知名称、通知图片、通知类型、通知发布时间等信息；也可以通过输入通知名称信息，选择查询相关的通知信息记录，通知管理界面设计如图5-26所示。

图5-26通知管理界面

5.2.8轮播图管理

通过设计的轮播图管理功能模块，用户可以对相关的轮播图信息进行管理，比如用户可以查看轮播图名称、值等信息，轮播图管理界面设计如图5-27所示。

图5-27轮播图管理界面

系

FangwuLiuyanServiceImpl.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.FangwuLiuyanDao;
import com.entity.FangwuLiuyanEntity;
import com.service.FangwuLiuyanService;
import com.entity.view.FangwuLiuyanView;

/**
 * 房屋留言 服务实现类
 */
@Service("fangwuLiuyanService")
@Transactional
public class FangwuLiuyanServiceImpl extends ServiceImpl<FangwuLiuyanDao, FangwuLiuyanEntity> implements FangwuLiuyanService {

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


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

    @Autowired
    private FangwuService fangwuService;


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

    //级联表service
    @Autowired
    private YonghuService yonghuService;

    @Autowired
    private YuangongService yuangongService;


    /**
    * 后端列表
    */
    @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(StringUtil.isEmpty(role))
            return R.error(511,"权限为空");
        else if("住户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        else if("员工".equals(role))
            params.put("yuangongId",request.getSession().getAttribute("userId"));
        params.put("fangwuDeleteStart",1);params.put("fangwuDeleteEnd",1);
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = fangwuService.queryPage(params);

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

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

    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isEmpty(role))
            return R.error(511,"权限为空");
        else if("住户".equals(role))
            fangwu.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        Wrapper<FangwuEntity> queryWrapper = new EntityWrapper<FangwuEntity>()
            .eq("yonghu_id", fangwu.getYonghuId())
            .eq("fangwu_name", fangwu.getFangwuName())
            .eq("fangwu_address", fangwu.getFangwuAddress())
            .eq("fangwu_types", fangwu.getFangwuTypes())
            .eq("fangwu_delete", fangwu.getFangwuDelete())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        FangwuEntity fangwuEntity = fangwuService.selectOne(queryWrapper);
        if(fangwuEntity==null){
            fangwu.setFangwuDelete(1);
            fangwu.setCreateTime(new Date());
            fangwuService.insert(fangwu);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isEmpty(role))
            return R.error(511,"权限为空");
        else if("住户".equals(role))
            fangwu.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<FangwuEntity> queryWrapper = new EntityWrapper<FangwuEntity>()
            .notIn("id",fangwu.getId())
            .andNew()
            .eq("yonghu_id", fangwu.getYonghuId())
            .eq("fangwu_name", fangwu.getFangwuName())
            .eq("fangwu_address", fangwu.getFangwuAddress())
            .eq("fangwu_types", fangwu.getFangwuTypes())
            .eq("fangwu_delete", fangwu.getFangwuDelete())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        FangwuEntity fangwuEntity = fangwuService.selectOne(queryWrapper);
        if("".equals(fangwu.getFangwuPhoto()) || "null".equals(fangwu.getFangwuPhoto())){
                fangwu.setFangwuPhoto(null);
        }
        if(fangwuEntity==null){
            //  String role = String.valueOf(request.getSession().getAttribute("role"));
            //  if("".equals(role)){
            //      fangwu.set
            //  }
            fangwuService.updateById(fangwu);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        ArrayList<FangwuEntity> list = new ArrayList<>();
        for(Integer id:ids){
            FangwuEntity fangwuEntity = new FangwuEntity();
            fangwuEntity.setId(id);
            fangwuEntity.setFangwuDelete(2);
            list.add(fangwuEntity);
        }
        if(list != null && list.size() >0){
            fangwuService.updateBatchById(list);
        }
        return R.ok();
    }

    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<FangwuEntity> fangwuList = 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){
                            //循环
                            FangwuEntity fangwuEntity = new FangwuEntity();
//                            fangwuEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            fangwuEntity.setFangwuName(data.get(0));                    //房屋名称 要改的
//                            fangwuEntity.setFangwuAddress(data.get(0));                    //房屋地址 要改的
//                            fangwuEntity.setFangwuPhoto("");//照片
//                            fangwuEntity.setFangwuTypes(Integer.valueOf(data.get(0)));   //房屋类型 要改的
//                            fangwuEntity.setFangwuDelete(1);//逻辑删除字段
//                            fangwuEntity.setFangwuContent("");//照片
//                            fangwuEntity.setCreateTime(date);//时间
                            fangwuList.add(fangwuEntity);


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

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




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

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

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


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

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


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody FangwuEntity fangwu, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,fangwu:{}",this.getClass().getName(),fangwu.toString());
        Wrapper<FangwuEntity> queryWrapper = new EntityWrapper<FangwuEntity>()
            .eq("yonghu_id", fangwu.getYonghuId())
            .eq("fangwu_name", fangwu.getFangwuName())
            .eq("fangwu_address", fangwu.getFangwuAddress())
            .eq("fangwu_types", fangwu.getFangwuTypes())
            .eq("fangwu_delete", fangwu.getFangwuDelete())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        FangwuEntity fangwuEntity = fangwuService.selectOne(queryWrapper);
        if(fangwuEntity==null){
            fangwu.setFangwuDelete(1);
            fangwu.setCreateTime(new Date());
        //  String role = String.valueOf(request.getSession().getAttribute("role"));
        //  if("".equals(role)){
        //      fangwu.set
        //  }
        fangwuService.insert(fangwu);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }



}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360

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
            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:null,
                id: '',
                type: '',
                ro:{
                    codeIndex : false,
                    indexName : false,
                },
                ruleForm: {
                    codeIndex: '',
                    indexName: '',
                },
                rules: {
                    codeIndex: [
                    ],
                    indexName: [
                    ],
                }
            };
        },
        props: ["parent"],
        computed: {
        },
        created() {
            this.addEditForm = styleJs.addStyle();
            this.ruleForm.shenqingriqi = this.getCurDate()
            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 if(this.type=='cross'){
                    var obj = this.$storage.getObj('crossObj');
                    for (var o in obj){
                        if(o=='codeIndex'){
                            this.ruleForm.codeIndex = obj[o];
                            this.ro.codeIndex = true;
                            continue;
                        }
                        if(o=='indexName'){
                            this.ruleForm.indexName = obj[o];
                            this.ro.indexName = true;
                            continue;
                        }
                    }
                }
            },
            // 多级联动参数
            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.codeIndex)&& !this.$validate.isNumber(this.ruleForm.codeIndex)){
                    this.$message.error('性别类型编码必须为数字');
                    return
                }
                if((!this.ruleForm.indexName)){
                    this.$message.error('性别类型名称不能为空');
                    return
                }
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        let ruleForm = this.ruleForm;
                        ruleForm["dicCode"]="sex_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);
                        }
                    });
                    }
                });
            },
            // 获取uuid
            getUUID () {
                return new Date().getTime();
            },
            // 返回
            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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400