@TOC
ssm674基于JAVA的酒店客房管理系统+vue
绪论
1.1 研究背景
当前社会各行业领域竞争压力非常大，随着当前时代的信息化，科学化发展，让社会各行业领域都争相使用新的信息技术，对行业内的各种相关数据进行科学化，规范化管理。这样的大环境让那些止步不前，不接受信息改革带来的信息技术的企业随时面临被淘汰，被取代的风险。所以当今，各个行业领域，不管是传统的教育行业，餐饮行业，还是旅游行业，医疗行业等领域都将使用新的信息技术进行信息革命，改变传统的纸质化，需要人手工处理工作事务的办公环境。软件信息技术能够覆盖社会各行业领域是时代的发展要求，各种数据以及文件真正实现电子化是信息社会发展的不可逆转的必然趋势。本酒店客房管理系统也是紧跟科学技术的发展，运用当今一流的软件技术实现软件系统的开发，让医生管理信息完全通过管理系统实现科学化，规范化，程序化管理。从而帮助信息管理者节省事务处理的时间，降低数据处理的错误率，对于基础数据的管理水平可以起到促进作用，也从一定程度上对随意的业务管理工作进行了避免，同时，酒店客房管理系统的数据库里面存储的各种动态信息，也为上层管理人员作出重大决策提供了大量的事实依据。总之，酒店客房管理系统是一款可以真正提升管理者的办公效率的软件系统。
1.2 目的和意义
信息数据的处理完全依赖人工进行操作，会耗费大量的人工成本，特别是面对大量的数据信息时，传统人工操作不仅不能对数据的出错率进行保证，还容易出现各种信息资源的低利用率与低安全性问题。更有甚者，耽误大量的宝贵时间，尤其是对信息的更新，归纳与统计更是耗财耗力的过程。所以电子化信息管理的出现就能缓解以及改变传统人工方式面临的处境，一方面可以确保信息数据在短时间被高效处理，还能节省人力成本，另一方面可以确保信息数据的安全性，可靠性，并可以实现信息数据的快速检索与修改操作，这些优点是之前的旧操作模式无法比拟的。因此酒店客房管理系统为数据信息的管理模式的升级与改革提供了重要的窗口。
1.3 论文结构安排
为了帮助用户更好的了解和理解程序的开发流程与相关内容，本文将通过六个章节进行内容阐述。
第一章：描述了程序的开发背景，程序运用于现实生活的目的与意义，以及程序文档的结构安排信息；
第二章：描述了程序的开发环境，包括程序开发涉及到的技术，程序开发使用的数据存储工具等信息；
第三章：描述了程序着手进行开发时，会面临的可行性问题，并对程序功能以及性能要求进行描述；
第四章：描述了程序大功能模块下的功能细分信息，以及存储程序数据的数据库表文件结构的设计信息等；
第五章：描述了程序的功能实现界面的内容，也对程序操作人员操作的部分功能进行了描述；
第六章：描述了程序功能的测试内容，并介绍了系统测试的概念与方法。
2 相关技术
2.1 SSM框架介绍
本课题程序开发使用到的框架技术，英文名称缩写是SSM，在JavaWeb开发中使用的流行框架有SSH、SSM、SpringMVC等，作为一个课题程序采用SSH框架也可以，SSM框架也可以，SpringMVC也可以。SSH框架是属于重量级别的框架，配置繁琐，不够灵活，修改程序需要修改好多个文件，并且运行起来也占用内存较高，CPU使用率相对也高，SpringMVC是Spring开发的一套MVC架构，更灵活更好用，SSM框架取中间值，既没有SSH臃肿，也没有SpringMVC简化，属于中间级别的，在配置过程和使用过程中更能编写和理解。MyBatis框架取代Hibernate框架是因为它更灵活，不需要完全在框架里操作，它在数据操作上可以写出更灵活的代码，它的性能也比Hibernate框架更稳定。总的来说，使用SSM框架是通过综合考虑而使用的，网上有很多的使用教程和心得体会，而且SSM又是这么的流行，用SSM框架开发是顺其自然的。
2.2 B/S结构介绍
在早期，一些使用HTML语言编写的文件，再集合一些其它资源文件就可以组成一个最简单的Web程序，了解了Web程序也需要了解Web站点，它们之间的关系就是一个或者多个Web程序可以放在Internet上的一个Web站点（Web服务器）中进行使用。可以说Web应用程序的开发也带动了B/S这种网络结构模式的兴起。B是Brower（浏览器）的首字母，S是Server（服务器）的首字母，两个首字母进行组合就成了网络结构模式的简称B/S。由于这种结构模式通过安装在客户端的浏览器进行服务器的访问，可以把程序的核心功能安排在服务器中进行处理，给程序的开发，后期使用和维护省去了许多工作。图2.1展示的就是使用这种架构开发的程序的工作原理。
图2.1 B/S架构的工作原理图
2.3 Mysql数据库介绍
开发的程序面向用户的只是程序的功能界面，让用户操作程序界面的各个功能，那么很多人就会问，用户使用程序功能生成的数据信息放在哪里的？这个就需要涉及到数据库的知识了，一般来说，程序开发通常就会对常用数据存储工具的特点进行分析比对，比如Mysql数据库的特点与优势，Access数据库的特点与优势，Sqlserver数据库的特点与优势等，最终看哪个数据库与需要开发的程序比较匹配，也符合程序功能运行需要的数据存储要求，比如，需要开发商业级别的程序，存储的数据对数据库要求较高，可以选用Oracle，如果只是比较简单的程序，对数据存储没有过多要求，可以选用微软旗下的Access，当开发程序要求数据库占用空间小，并能满足程序数据存储要求时，就可以考虑Oracle公司从瑞典MySQL AB公司在很早之前就收购过一个关系型数据库，它是现在的Mysql数据库。在数据库工具里面它是最受认可的其中一个应用软件。需要说明的信息就是，本程序的开发就运用到了此数据库。它将程序数据通过使用不同的数据表格进行保存，在增加了程序数据的存储速度的时候，也提高了数据库的灵活性。 图2.2展示的就是MySQL的架构图。
图2.2 MySQL数据库架构图
3 系统分析
当用户确定开发一款程序时，是需要遵循下面的顺序进行工作，概括为：系统分析-->系统设计-->系统开发-->系统测试，无论这个过程是否有变更或者迭代，都是按照这样的顺序开展工作的。系统分析就是分析系统需要做什么的问题，主要目的就是确定系统的功能，这也为接下来的工作做了一个好的开端。
3.1 系统可行性分析
开发一款程序软件不仅需要时间，也需要人力，物力资源。而进行可行性分析这个环节就是解决用户这方面的疑问，看看程序在当前的条件下是否可以进行开发。
3.1.1 技术可行性分析
此程序选用的开发语言是Java，这种编程语言有着丰富的数据类型，在指令控制语句上也比较完善，更重要的就是对类与对象的大力支持，这些优点为程序开发者提供了技术保障，尤其是现在代码都逐渐模块化，有关系统功能开发的源码在网络上都公开展示了，所以让具备一定计算机开发基础的开发人员独立开发系统在技术上也逐渐容易。
3.1.2 经济可行性分析
开发此程序最关键的设备就是一台电脑，无论是学校计算机室配备的电脑，还是自己入学以来购置的笔记本，都是可以符合开发要求的设备，另外在网络上，学校本已完全覆盖了校园网，所以在设备以及网络上无须考虑经济问题。
3.1.3 运行可行性分析
随着电脑软件以及配套硬件的完善升级，当下的计算机环境是一片大好，尤其是计算机已经广泛普及到家家户户，所以计算机设备现在是随处可见，由于本次开发的程序占有的资源耗费较小，在一般的电脑或笔记本上都能轻松运转起来。
通过上面的可行性描述，可以从经济，技术，运行方面解决程序开发是否可行的问题。因此可以认为该程序软件是可以进行开发的。
3.2 系统性能分析
系统性能分析也是比较重要的内容，进行系统性能分析就是为了确保系统的功能要能够在生活中运行使用时，达到规定的指标，因此一个完整的系统软件，是需要进行系统的性能分析这个步骤的。本次进行性能分析主要从易用性指标，可扩展性指标，系统健壮性指标，系统安全性指标这几个方面进行分析。
3.2.1 易用性指标
本次程序软件的开发的目的就是让使用者可以通过使用该软件提高信息数据的管理效率，同时该程序软件也需要针对不同的操作用户设置对应的功能，因此，此程序的操作流程应该尽量与用户日常操作软件的行为习惯相贴合，另外，程序软件的设计与开发也应考虑非计算机专业用户的计算机操作水平，要让大部分使用者都可以轻松操作程序提供的各个功能。
3.2.2 可扩展性指标
当前需要开发的程序软件是根据当下的用户需求进行设计开发的，但是随着时间的推移，社会大环境的改变，开发出的程序也是需要与时俱进的，需要根据用户不断变换的需求进行相应的功能内容的扩展，需要注意的就是，当对成型的程序进行功能模块新增时，仍然需要保证程序原有架构以及功能不能受到影响，新增的功能模块在系统中也能够运行正常，该指标达标也就可以保证此程序是可以在满足信息管理要求下，从容应对市场环境的变化。
3.2.3 健壮性指标
程序软件的开发就是为了投入使用时，可以一直稳定的处理各种数据信息，程序软件一旦不稳定，也会给使用者带来干扰。因此从性能分析的角度，就要要求程序软件在应对使用者的误操作，或者是使用者因为各种原因，填写有误的数据等情况时，程序要一直保持稳定，并能够正常让使用者进行使用。当程序的某个功能模块出现异常时，程序的其它功能模块也要能够确保正常使用。程序的健壮性指标达标可以让使用者产生良好的用户体验。
3.2.4 安全性指标
程序软件的安全问题是首要问题，毕竟程序对应数据库里面存放的数据信息是庞大的，里面也包括了许多重要的个人信息，这就对程序要具备一个完善的安全机制提出了要求。因此程序必须要设置登录功能用以进行用户身份的检查，以及身份和权限的匹配，通过对不同用户身份进行功能约束，绝不容忍用户越权操作程序。另外，也需要时刻防范计算机病毒，还有黑客，通过采取针对性的办法进行安全应对，确保程序时刻处于安全的环境，让使用者放心使用。
3.3 系统流程分析
3.3.1 操作流程分析
程序上交给用户进行使用时，需要提供程序的操作流程图（如图3.1所示），这样便于用户容易理解程序的具体工作步骤，现如今程序的操作流程都有一个大致的标准，即先通过登录页面提交登录数据，通过程序验证正确之后，用户才能在程序功能操作区页面操作对应的功能。
图3.1 程序操作流程图
3.3.2 登录流程分析
在这个部分，需要对程序的登录功能模块的运行流程（如图3.2所示），进行单独说明。程序设置登录模块也是为了安全起见，让用户使用放心，登录模块主要就是让用户提交登录信息，程序进行数据验证，验证通过的用户才能够成功登录程序。
图3.2 程序登录流程图
3.3.3 信息添加流程分析
程序的添加功能就是提供给操作者录入信息的功能，不管是涉及到用户信息添加，还是其它功能模块涉及到的信息添加，程序的信息添加流程（如图3.3所示）都是一致的。程序都是先对操作者录入的数据进行判定，这个判定规则是一段提前编写完成的程序代码，当程序判定数据符合要求时，才会把操作者录入的数据登记在数据表里面，比如添加的用户信息，就会把新添加的用户信息写入用户信息的数据表文件里面。
图3.3 信息添加流程图
3.3.4 信息删除流程分析
当从程序里面删除某种无效数据时，遵循程序的信息删除流程（如图3.4所示），先要选中操作者需要删除的数据，程序为了预防操作者误删信息，也会进行提示，当操作者真正确定要删选中的信息时，该信息就会从数据库中被永久删除。
图3.4 信息删除流程图
4 系统设计
酒店客房管理系统的设计方案比如功能框架的设计，比如数据库的设计的好坏也就决定了该系统在开发层面是否高效，以及在系统维护层面是否容易维护和升级，因为在系统实现阶段是需要考虑用户的所有需求，要是在设计阶段没有经过全方位考虑，那么系统实现的部分也就无从下手，所以系统设计部分也是至关重要的一个环节，只有根据用户需求进行细致全面的考虑，才有希望开发出功能健全稳定的程序软件。
4.1 系统概要设计
本次拟开发的系统为了节约开发成本，也为了后期在维护和升级上的便利性，打算通过浏览器来实现系统功能界面的展示，让程序软件的主要事务集中在后台的服务器端处理，前端部分只用处理少量的事务逻辑。下面使用一张图（如图4.1所示）来说明程序的工作原理。
图4.1 程序工作的原理图
4.2 系统功能结构设计
在分析并得出使用者对程序的功能要求时，就可以进行程序设计了。如图4.2展示的就是管理员功能结构图。
网上药品售卖系统
系用户信息管理
反新闻类型管理
收房间类型管理
申房间预定管理
用房间信息管理
帐用户信息修改
密用户信息新增
用房间信息添加
用房间信息删除
用房间信息修改
申房间预定添加
申房间预定修改
申房间预定删除
反新闻类型添加
反新闻类型删改
反新闻类型删除
用房间类型添加
用房间类型修改
用房间类型删除
反新闻信息管理
反新闻信息修改
反新闻信息删除
反新闻信息添加
图4.2 系统功能结构图
4.3 数据库设计
开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合，存储在一起的这些数据也是按照一定的组织方式进行的。目前，数据库能够服务于多种应用程序，则是源于它存储方式最佳，具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段时间的发展，从最初的不为人知，到现在的人尽皆知，其相关技术也越发成熟，同时也拥有着坚实的理论基础。
4.3.1 数据库概念设计
这部分内容需要借助数据库关系图来完成，也需要使用专门绘制数据库关系图的工具，比如Visio工具就可以设计E-R图（数据库关系图）。设计数据库，也需要按照设计的流程进行，首先还是要根据需求完成实体的确定，分析实体具有的特征，还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法，绘制本系统的E-R图。不管是使用亿图软件，还是Visio工具，对于E-R模型的表示符号都一样，通常矩形代表实体，实体间存在的关系用菱形符号表示，实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形，菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。
（1）下图是论坛实体和其具备的属性。
图4.1 论坛实体属性图
（2）下图是用户实体和其具备的属性。
图4.2 用户实体属性图
（3）下图是房间预定实体和其具备的属性。
图4.3 房间预定实体属性图
（4）下图是字典表实体和其具备的属性。
图4.4 字典表实体属性图
（5）下图是房间信息实体和其具备的属性。
图4.5 房间信息实体属性图
（6）下图是房间留言实体和其具备的属性。
图4.6 房间留言实体属性图
（7）下图是用户表实体和其具备的属性。
图4.7 用户表实体属性图
（8）下图是新闻信息实体和其具备的属性。
图4.8 新闻信息实体属性图
4.3.2 数据库表结构设计
数据库系统一旦选定之后，需要根据程序要求在数据库中建立数据库文件，并在已经完成创建的数据库文件里面，为程序运行中产生的数据建立对应的数据表格，数据表结构设计就是对创建的数据表格进行字段设计，字段长度设计，字段类型设计等，当数据表格合理设计完成之后，才能正常存储相关程序运行产生的数据信息。
表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 | fangjian_name | String | 房间号 | 是 |
| 3 | fangjian_types | Integer | 房间类型 | 是 |
| 4 | fangjian_address | String | 所在区域 | 是 |
| 5 | fangjian_peizhi | String | 房间配置 | 是 |
| 6 | fangjian_photo | String | 房间图片 | 是 |
| 7 | fangjian_new_money | BigDecimal | 价格/天 | 是 |
| 8 | status_types | Integer | 房间状态 | 是 |
| 9 | fangjian_content | String | 商品详情 | 是 |
| 10 | create_time | Date | 创建时间 | 是 |
表4.3房间留言表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | fangjian_id | Integer | 房间 | 是 |
| 3 | yonghu_id | Integer | 用户 | 是 |
| 4 | fangjian_liuyan_text | String | 留言内容 | 是 |
| 5 | reply_text | String | 回复内容 | 是 |
| 6 | insert_time | Date | 留言时间 | 是 |
| 7 | update_time | Date | 回复时间 | 是 |
| 8 | create_time | Date | 创建时间 | 是 |
表4.4房间预定表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_id | Integer | 用户 | 是 |
| 3 | fangjian_id | Integer | 房间 | 是 |
| 4 | fangjianyuding_time | Date | 预定时间 | 是 |
| 5 | update_time | Date | 退房时间 | 是 |
| 6 | fangjianyuding_types | Integer | 预定状态 | 是 |
| 7 | create_time | Date | 创建时间 | 是 |
表4.5论坛表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | forum_name | String | 帖子标题 | 是 |
| 3 | yonghu_id | Integer | 用户 | 是 |
| 4 | users_id | Integer | 管理员 | 是 |
| 5 | forum_content | String | 发布内容 | 是 |
| 6 | super_ids | Integer | 父id | 是 |
| 7 | forum_state_types | Integer | 帖子状态 | 是 |
| 8 | insert_time | Date | 发帖时间 | 是 |
| 9 | update_time | Date | 修改时间 | 是 |
| 10 | create_time | Date | 创建时间 | 是 |
表4.6新闻信息表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 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 | news_delete | Integer | 假删 | 是 |
| 8 | create_time | Date | 创建时间 | 是 |
表4.7用户表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | yonghu_name | String | 用户姓名 | 是 |
| 3 | yonghu_photo | String | 头像 | 是 |
| 4 | yonghu_phone | String | 用户手机号 | 是 |
| 5 | yonghu_id_number | String | 用户身份证号 | 是 |
| 6 | yonghu_email | String | 邮箱 | 是 |
| 7 | new_money | BigDecimal | 余额 | 是 |
| 8 | yonghu_delete | Integer | 假删 | 是 |
| 9 | create_time | Date | 创建时间 | 是 |
表4.8用户表表
| 序号 | 列名 | 数据类型 | 说明 | 允许空 |
|---|---|---|---|---|
| 1 | Id | Int | id | 否 |
| 2 | username | String | 用户名 | 是 |
| 3 | password | String | 密码 | 是 |
| 4 | role | String | 角色 | 是 |
| 5 | addtime | Date | 新增时间 | 是 |
5 系统实现
系统实现部分就是将系统分析，系统设计部分的内容通过编码进行功能实现，以一个实际应用系统的形式展示系统分析与系统设计的结果。前面提到的系统分析，系统设计最主要还是进行功能，系统操作逻辑的设计，也包括了存储数据的数据库方面的设计等内容，系统实现就是一个最终的实施阶段，将前面的设计成果进行物理转化，最终出具可以运用于实际的软件系统。
5.1用户信息管理
如图5.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，
还进行了对用户名称的模糊查询的条件
图5.1 用户信息管理页面
5.2 房间信息管理
如图5.2显示的就是房间信息管理页面，此页面提供给管理员的功能有：查看已发布的房间信息数据，修改房间信息，房间信息作废，即可删除。
图5.2 房间信息管理页面
5.3房间类型管理
如图5.3显示的就是房间类型管理页面，此页面提供给管理员的功能有：根据房间类型进行条件查询，还可以对房间类型进行新增、修改、查询操作等等。
图5.3 房间类型管理页面
5.1新闻信息管理
如图5.4显示的就是新闻信息管理页面，此页面提供给管理员的功能有：根据新闻信息进行新增、修改、查询操作等等。
图5.4 新闻信息管理页面
系统
ForumServiceImpl.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.ForumDao;
import com.entity.ForumEntity;
import com.service.ForumService;
import com.entity.view.ForumView;
/**
* 论坛 服务实现类
*/
@Service("forumService")
@Transactional
public class ForumServiceImpl extends ServiceImpl<ForumDao, ForumEntity> implements ForumService {
@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<ForumView> page =new Query<ForumView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}
YonghuServiceImpl.java
package com.service.impl;
import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.YonghuDao;
import com.entity.YonghuEntity;
import com.service.YonghuService;
import com.entity.view.YonghuView;
/**
* 用户 服务实现类
*/
@Service("yonghuService")
@Transactional
public class YonghuServiceImpl extends ServiceImpl<YonghuDao, YonghuEntity> implements YonghuService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<YonghuView> page =new Query<YonghuView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}
FangjianyudingController.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("/fangjianyuding")
public class FangjianyudingController {
private static final Logger logger = LoggerFactory.getLogger(FangjianyudingController.class);
@Autowired
private FangjianyudingService fangjianyudingService;
@Autowired
private TokenService tokenService;
@Autowired
private DictionaryService dictionaryService;
//级联表service
@Autowired
private FangjianService fangjianService;
@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(StringUtil.isEmpty(role))
return R.error(511,"权限为空");
else if("用户".equals(role))
params.put("yonghuId",request.getSession().getAttribute("userId"));
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
PageUtils page = fangjianyudingService.queryPage(params);
//字典表数据转换
List<FangjianyudingView> list =(List<FangjianyudingView>)page.getList();
for(FangjianyudingView 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);
FangjianyudingEntity fangjianyuding = fangjianyudingService.selectById(id);
if(fangjianyuding !=null){
//entity转view
FangjianyudingView view = new FangjianyudingView();
BeanUtils.copyProperties( fangjianyuding , view );//把实体数据重构到view中
//级联表
FangjianEntity fangjian = fangjianService.selectById(fangjianyuding.getFangjianId());
if(fangjian != null){
BeanUtils.copyProperties( fangjian , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
view.setFangjianId(fangjian.getId());
}
//级联表
YonghuEntity yonghu = yonghuService.selectById(fangjianyuding.getYonghuId());
if(yonghu != null){
BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到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 FangjianyudingEntity fangjianyuding, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,fangjianyuding:{}",this.getClass().getName(),fangjianyuding.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
if(StringUtil.isEmpty(role))
return R.error(511,"权限为空");
else if("用户".equals(role))
fangjianyuding.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
FangjianEntity fangjianEntity = fangjianService.selectById(fangjianyuding.getFangjianId());
YonghuEntity yonghuEntity = yonghuService.selectById(fangjianyuding.getYonghuId());
if(yonghuEntity.getNewMoney() < fangjianEntity.getFangjianNewMoney()){
return R.error("余额不足不能预定");
}
yonghuEntity.setNewMoney(yonghuEntity.getNewMoney() - fangjianEntity.getFangjianNewMoney());
fangjianEntity.setStatusTypes(2);
boolean b1 = fangjianService.updateById(fangjianEntity);
if(!b1){
return R.error();
}
boolean b = yonghuService.updateById(yonghuEntity);
if(!b){
return R.error();
}
fangjianyuding.setCreateTime(new Date());
fangjianyudingService.insert(fangjianyuding);
return R.ok();
}
/**
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody FangjianyudingEntity fangjianyuding, HttpServletRequest request){
logger.debug("update方法:,,Controller:{},,fangjianyuding:{}",this.getClass().getName(),fangjianyuding.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
// if(StringUtil.isEmpty(role))
// return R.error(511,"权限为空");
// else if("用户".equals(role))
// fangjianyuding.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
//根据字段查询是否有相同数据
Wrapper<FangjianyudingEntity> queryWrapper = new EntityWrapper<FangjianyudingEntity>()
.notIn("id",fangjianyuding.getId())
.andNew()
.eq("yonghu_id", fangjianyuding.getYonghuId())
.eq("fangjian_id", fangjianyuding.getFangjianId())
.eq("fangjianyuding_types", fangjianyuding.getFangjianyudingTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
FangjianyudingEntity fangjianyudingEntity = fangjianyudingService.selectOne(queryWrapper);
fangjianyuding.setUpdateTime(new Date());
if(fangjianyudingEntity==null){
// String role = String.valueOf(request.getSession().getAttribute("role"));
// if("".equals(role)){
// fangjianyuding.set
// }
fangjianyudingService.updateById(fangjianyuding);//根据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());
fangjianyudingService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 退房
*/
@RequestMapping("/tuifang")
public R tuifang(Integer id){
FangjianyudingEntity fangjianyudingEntity = fangjianyudingService.selectById(id);
FangjianEntity fangjianEntity = fangjianService.selectById(fangjianyudingEntity.getFangjianId());
YonghuEntity yonghuEntity = yonghuService.selectById(fangjianyudingEntity.getYonghuId());
boolean b1 = fangjianyudingService.updateById(fangjianyudingEntity);
if(!b1){
return R.error();
}
FangjianyudingEntity fangjianyudingEntity1 = fangjianyudingService.selectById(id);
Double riqi = Integer.parseInt(String.valueOf((fangjianyudingEntity1.getUpdateTime().getTime() - fangjianyudingEntity1.getFangjianyudingTime().getTime())/(24*60*60*1000)))*fangjianEntity.getFangjianNewMoney() ;
if(yonghuEntity.getNewMoney() < riqi){
return R.error("需缴费：￥"+riqi+"，余额为："+yonghuEntity.getNewMoney()+"，差："+(riqi - yonghuEntity.getNewMoney())+"余额不足请充值");
}
yonghuEntity.setNewMoney(yonghuEntity.getNewMoney() - riqi);
boolean b = yonghuService.updateById(yonghuEntity);
if(!b){
return R.error();
}
fangjianEntity.setStatusTypes(1);
fangjianyudingEntity1.setFangjianyudingTypes(3);
boolean b2 = fangjianService.updateById(fangjianEntity);
if(!b2){
return R.error();
}
boolean b3 = fangjianyudingService.updateById(fangjianyudingEntity1);
if(!b3){
return R.error();
}
return R.ok("退房成功，住房天"+(fangjianyudingEntity1.getUpdateTime().getTime() - fangjianyudingEntity1.getFangjianyudingTime().getTime())/(24*60*60*1000)+"，扣除费用为："+riqi);
}
/**
* 批量上传
*/
@RequestMapping("/batchInsert")
public R save( String fileName){
logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
try {
List<FangjianyudingEntity> fangjianyudingList = 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){
//循环
FangjianyudingEntity fangjianyudingEntity = new FangjianyudingEntity();
// fangjianyudingEntity.setYonghuId(Integer.valueOf(data.get(0))); //用户 要改的
// fangjianyudingEntity.setFangjianId(Integer.valueOf(data.get(0))); //房间 要改的
// fangjianyudingEntity.setFangjianyudingTime(new Date(data.get(0))); //预定时间 要改的
// fangjianyudingEntity.setUpdateTime(new Date(data.get(0))); //退房时间 要改的
// fangjianyudingEntity.setFangjianyudingTypes(Integer.valueOf(data.get(0))); //预定状态 要改的
// fangjianyudingEntity.setCreateTime(date);//时间
fangjianyudingList.add(fangjianyudingEntity);
//把要查询是否重复的字段放入map中
}
//查询是否重复
fangjianyudingService.insertBatch(fangjianyudingList);
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 = fangjianyudingService.queryPage(params);
//字典表数据转换
List<FangjianyudingView> list =(List<FangjianyudingView>)page.getList();
for(FangjianyudingView 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);
FangjianyudingEntity fangjianyuding = fangjianyudingService.selectById(id);
if(fangjianyuding !=null){
//entity转view
FangjianyudingView view = new FangjianyudingView();
BeanUtils.copyProperties( fangjianyuding , view );//把实体数据重构到view中
//级联表
FangjianEntity fangjian = fangjianService.selectById(fangjianyuding.getFangjianId());
if(fangjian != null){
BeanUtils.copyProperties( fangjian , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
view.setFangjianId(fangjian.getId());
}
//级联表
YonghuEntity yonghu = yonghuService.selectById(fangjianyuding.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 FangjianyudingEntity fangjianyuding, HttpServletRequest request){
logger.debug("add方法:,,Controller:{},,fangjianyuding:{}",this.getClass().getName(),fangjianyuding.toString());
Wrapper<FangjianyudingEntity> queryWrapper = new EntityWrapper<FangjianyudingEntity>()
.eq("yonghu_id", fangjianyuding.getYonghuId())
.eq("fangjian_id", fangjianyuding.getFangjianId())
.eq("fangjianyuding_types", fangjianyuding.getFangjianyudingTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
FangjianyudingEntity fangjianyudingEntity = fangjianyudingService.selectOne(queryWrapper);
if(fangjianyudingEntity==null){
fangjianyuding.setCreateTime(new Date());
// String role = String.valueOf(request.getSession().getAttribute("role"));
// if("".equals(role)){
// fangjianyuding.set
// }
fangjianyudingService.insert(fangjianyuding);
return R.ok();
}else {
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-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="备注" prop="beizhu">
<el-input v-model="ruleForm.beizhu"
placeholder="备注" clearable :readonly="ro.beizhu"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="备注" prop="beizhu">
<el-input v-model="ruleForm.beizhu"
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: {
/*beizhu: [
{ required: true, message: '备注不能为空', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/,
message: '备注只能为正整数',
trigger: 'blur'
}
],*/
}
};
},
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":"sex_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"]="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);
}
});
}
});
},
// 返回
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>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
