如何使用ssm实现酒吧存酒系统+vue

@TOC

ssm409酒吧存酒系统+vue

第1章 绪论

1.1 研究背景

互联网时代不仅仅是通过各种各样的电脑进行网络连接的时代，也包含了移动终端连接互联网进行复杂处理的一些事情。传统的互联网时代一般泛指就是PC端，也就是电脑互联网时代，但是最近几十年，是移动互联网时代，是向下一步互联网时代过度的一个重要时代，下一个互联网时代叫物联网，而移动互联网就是一个风口，是当前社会的主流风向。目前移动互联网大行其道，人人都手中拿着智能机，手机手机，手不离机，如果开发一个用在手机上的程序软件，那是多么的符合潮流，符合管理者和客户的理想。本次就是开发酒吧存酒系统可以有效的管理用户与管理员之间存酒取酒和管理等功能。

1.2 研究现状

当微软操作系统占领了多半江山，目前不分年龄和种族，使用频率最高，覆盖面积最广。使用人群使用的大多数都是微软系统。而微软又不遗余力的更新Windows版本，从微软对Windows的市场定位来讲，Windows的未来不仅仅是一个操作系统，而是让所有人都拥抱Windows，建立一个属于Windows的互联网生态圈。目前各大行业，各种类型的软件阵地转移到了Windows平台上，包含一些带商城的免费管理系统，或者一些带广告的免费应用，还有好多游戏之类的应用。尤其是经过疫情涌现的互联网办公，学校的互联网教学等，都不断的刷新人们对于互联网的认知。

1.3 目的和意义

从经济成本考虑，手机的价格比较亲民，对于不是必须在电脑上办公的人员来讲，手机上如果能解决事情就更方便了。

从使用便利角度上讲，用手机上的应用处理业务，不用考虑网线是否存在，不用考虑位置是否变化，依托无处不在的手机信号就可以在任何有信号的地方处理事务，这是多么的方便和使用，不限制时间，不限制地点，高山平原山谷都可以作为使用的地点而不影响使用的效果。

从操作角度上讲，手机的操作先天性的高于电脑的操作，因为电脑适合处理复杂的操作，而手机就是为了简化操作而生的，方便高效操作简单。

此次开发这个酒吧存酒系统，不仅仅满足用户的需要，也能跟上时代的发展风向，从技术的角度还是用户的角度上进行开发都是很有意义的。

1.4 论文研究内容

论文设计的结构也是依照程序开发的流程进展的，也涉及到功能需求分析，功能设计与实现，程序测试等流程。

绪论：讲解课题的背景与意义，展示论文结构。

程序开发技术：讲解程序运用到的工具与技术知识。

系统分析：讲解程序的功能需求与开发可行性问题。

系统设计：讲解程序的功能与数据库的设计。

系统实现：讲解程序功能与界面实现。

系统测试：讲解程序的功能测试。

第2章 程序开发技术

2.1 Vue技术介绍

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.2 B/S结构介绍

在早期，一些使用HTML语言编写的文件，再集合一些其它资源文件就可以组成一个最简单的Web程序，了解了Web程序也需要了解Web站点，它们之间的关系就是一个或者多个Web程序可以放在Internet上的一个Web站点（Web服务器）中进行使用。可以说Web应用程序的开发也带动了B/S这种网络结构模式的兴起。B是Brower（浏览器）的首字母，S是Server（服务器）的首字母，两个首字母进行组合就成了网络结构模式的简称B/S。由于这种结构模式通过安装在客户端的浏览器进行服务器的访问，可以把程序的核心功能安排在服务器中进行处理，给程序的开发，后期使用和维护省去了许多工作。图2.2展示的就是使用这种架构开发的程序的工作原理。

图2.2 B/S架构的工作原理图

2.3 MySQL数据库介绍

开发的程序面向用户的只是程序的功能界面，让用户操作程序界面的各个功能，那么很多人就会问，用户使用程序功能生成的数据信息放在哪里的？这个就需要涉及到数据库的知识了，一般来说，程序开发通常就会对常用数据存储工具的特点进行分析比对，比如MySQL数据库的特点与优势，Access数据库的特点与优势，SQL server数据库的特点与优势等，最终看哪个数据库与需要开发的程序比较匹配，也符合程序功能运行需要的数据存储要求，比如，需要开发商业级别的程序，存储的数据对数据库要求较高，可以选用Oracle，如果只是比较简单的程序，对数据存储没有过多要求，可以选用微软旗下的Access，当开发程序要求数据库占用空间小，并能满足程序数据存储要求时，就可以考虑Oracle公司从瑞典MySQL AB公司在很早之前就收购过一个关系型数据库，它是现在的MySQL数据库。在数据库工具里面它是最受认可的其中一个应用软件。需要说明的信息就是，本程序的开发就运用到了此数据库。它将程序数据通过使用不同的数据表格进行保存，在增加了程序数据的存储速度的时候，也提高了数据库的灵活性。 图2.3展示的就是MySQL的架构图。

图2.3 MySQL数据库架构图

2.4 SSM框架介绍

SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis两个开源框架整合而成（SpringMVC是Spring中的部分内容）。 常作为数据源较简单的web项目的框架。 Spring就像是整个项目中装配bean的大工厂，在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象。 也可以称之为项目中的粘合剂。

第3章 系统分析

在进行系统分析之前，需要从网络上或者是图书馆的开发类书籍中收集大量的资料，因为这个环节也是帮助即将开发的程序软件制定一套最优的方案，一旦确定了程序软件需要具备的功能，就意味着接下来的工作和任务都是围绕着这个方案执行的，所以系统分析需要对程序功能反复进行思考和研究。

3.1可行性分析

开发一款系统软件之前，用户都会思考这个软件程序值不值得去开发，把开发软件过程中可能涉及到的问题罗列出来，并一个个分析解决，以此来确定开发这款程序软件是否有必要，这样的分析方法也能帮助用户降低损失，不至于开发者开发进度进行到一半之后，突然遇到问题就放弃对软件的开发，到那时，资金损失，人力投入等方面就损耗太大了。

3.1.1技术可行性分析

此次开发程序使用到的开发工具有：MySQL等工具，使用的开发语言是Java，选择的开发工具和开发语言都是在大学课堂接触并学习过，后期因为自己也比较感兴趣，所以也通过网络渠道，或借助图书馆的开发类书籍进行过软件开发知识的系统学习，让自己有了一定的知识积累，加上自己在校期间也独立开发过一些软件作品，也积累了一定的开发经验，所以这次毕设作品的制作在技术上无须担忧过多。

3.1.2经济可行性分析

目前的信息时代，对信息的管理趋于高效化，便捷化，这也是计算机大力普及所带来的便利，此程序软件在设备选用上，依靠的是比较大众的电脑设备，对电脑的配置没有过多要求，一般学校的计算机机房的电脑都可以满足程序开发需求，另外，开发出此款程序，让信息处理变得高效率，其所带来的高效益是远超程序开发的低成本的，因此程序开发的资金投入是可以忽略不计的。

3.1.3操作可行性分析

程序软件的操作界面是符合大众审美的需求，功能模块的布局也是类似于社会上同种类型的软件，因此使用者操作该软件可以无需培训就上手。加上现在计算机入驻各家各户，大部分人的计算机操作水平都比较高，这样的局面也表明开发出来的程序在操作性问题上也是不用担心的。

综合上面的可行性论证，基本可以确定程序开发完全可行。

3.2系统运行环境

程序经过编码可以实现对程序设计的功能。但是编码实现时需要一定的配置环境，包括了电脑上的硬件环境，也包括在电脑操作系统上安装的软件环境。

硬件环境：一台可以正常使用并能够上网的笔记本或者是电脑，电脑内存最低要求4个G，电脑的中央处理器可以配置i5CPU。

软件环境：运用的微软操作系统是比较稳定的win7旗舰版系统，采用比较熟练的360安全浏览器，并在此系统上通过浏览器下载安装好MySQL软件等。

3.3系统流程分析

分析程序的流程，涉及到程序的整体操作流程，通过分析与设计，绘制的程序操作流程图见下图。此程序为了确保安全，会让使用者通过登录模块验证信息，符合要求的使用者才有权限操作程序。

图3-1 程序操作流程图

程序处理数据会涉及到数据的录入环节，绘制的添加流程见下图。程序录入数据过程中，始终与数据库保持同步。

图3-2 信息添加流程图

程序里面的数据也会出现错误，因此就有相应的修改数据的功能，绘制的程序修改流程见下图。此过程也是跟后台数据库进行数据同步显示。

图3-3信息修改流程图

程序数据存放于数据仓库，有时也会涉及到数据删除，此过程对应的流程图见下图。数据信息被删除之后，数据库里面也就没有了该数据信息了。

图3-4 信息删除流程图

第4章 系统设计

4.1 系统设计的原则

在系统设计过程中，也需要遵循相应的设计原则，这些设计原则可以帮助设计者在短时间内设计出符合设计规范的设计方案。设计原则主要有可靠性，安全性，可定制化，可扩展性，可维护性，可升级性以及客户体验等原则。下面就对这些原则进行简要阐述。

可靠性：一个软件是否可靠决定了其是否被用户使用，设计不可靠的软件，用户很容易就遗弃；

安全性：程序软件承担了信息的保存与管理等事务，安全性不足的软件会导致使用者承担巨大的损失；所以系统安全也是需要考虑进入的；

可定制化：市场环境从来都不是一直固定不变，面对客户群体的改变，以及使用环境的改变，市场需求的改变等因素，程序软件也要易于调整以适应各种变化；

可扩展性：程序软件在运行使用期间，也需要及时引进当下的新技术来进行系统优化，主要就是在系统功能层面，系统性能层面上进行相应的扩展，只有这样才能让系统在实际生活中继续占有市场；

可维护性：程序软件的维护需要一定量的资金，不管是排除现有程序错误，还是变更软件的现有需求，都需要在软件技术上投入一定资金，所以易于维护的软件程序就可以降低技术层面的资金消耗；

可升级性：程序软件的投入使用，会面临用户数量增多的情况，用户对软件的使用率也会提升，所以系统面临这种情况，仍然需要通过升级保持性能的合理，这样才能够适应市场；

客户体验：设计出来的程序软件在界面上不能够太复杂，要遵循界面设计的原理设计出简单，方便操作的功能操作界面，让用户易于接受软件，并乐于使用软件提供的功能。

4.2 功能结构设计

绘制的功能结构见下图。

图4-2 功能结构图

4.3 数据库设计

与功能结构设计一样，数据库设计也是程序开发不可避免的设计环节，数据库设计最主要的目的就是帮助运行程序存储相应的数据信息。数据库设计包含的内容有数据表结构的设计，也包含了数据库E-R图的设计。

4.3.1 数据库E-R图

在绘制E-R图之前，先要找出数据库的实体，明确各个实体具有的属性，比如用户信息这个实体，它具备的属性包括了用户的姓名属性，用户的密码属性，用户的创建时间属性等，所以明确了用户这个实体，以及用户实体具备的属性之后，就需要根据这些信息绘制用户实体对应的实体属性图了。绘制软件选用当下认可度高，使用范围广，操作便利的微软旗下的Visio工具。

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

用户实体属性图

（2）下图是收藏表实体和其具备的属性。

收藏表实体属性图

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

通知公告实体属性图

（4）下图是酒水类型实体和其具备的属性。

酒水类型实体属性图

（5）下图是酒水信息评论表实体和其具备的属性。

酒水信息评论表实体属性图

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

取酒信息实体属性图

（7）下图是留言板实体和其具备的属性。

留言板实体属性图

（8）下图是酒水购买实体和其具备的属性。

酒水购买实体属性图

（9）下图是酒吧信息实体和其具备的属性。

酒吧信息实体属性图

（10）下图是存酒信息实体和其具备的属性。

存酒信息实体属性图

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

用户表实体属性图

（12）下图是酒水信息实体和其具备的属性。

酒水信息实体属性图

4.3.2 数据库表结构

在进行这部分设计之前，需要明白和掌握数据类型以及各个数据类型的长度范围等知识，因为在一张具体的数据表中，为了方便理解，这里就举个简单的例子。比如用户信息表，这个表格的字段就是用户这个实体具备的属性，这时就需要对字段进行数据类型，以及字段长度的设置，也要设置一个主键来作为用户信息表的唯一标识。这些都是数据库表结构设计需要完成的内容。根据酒吧存酒系统的功能设计以及数据库设计要求，展示该系统的数据表结构。

表4.1配置文件表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	name	String	配置参数名称	是
3	value	String	配置参数值	是

表4.2存酒信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	jiushuimingcheng	String	酒水名称	是
4	jiushuileixing	String	酒水类型	是
5	jingzhongliang	String	净重量	是
6	cunjiushuliang	String	存酒数量	是
7	taiweihao	Integer	台位号	是
8	cunjiuriqi	Date	存酒日期	是
9	beizhu	String	备注	是
10	zhanghao	String	账号	是
11	xingming	String	姓名	是
12	sfsh	String	是否审核	是
13	shhf	String	审核回复	是

表4.3酒水信息评论表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	refid	Integer	关联表id	是
4	userid	Integer	用户id	是
5	nickname	String	用户名	是
6	content	String	评论内容	是
7	reply	String	回复内容	是

表4.4酒吧信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	jiubamingcheng	String	酒吧名称	是
4	jiubadizhi	String	酒吧地址	是
5	guimo	String	规模	是
6	chuangliriqi	Date	创立日期	是
7	fuzeren	String	负责人	是
8	lianxidianhua	String	联系电话	是
9	xiangqingjieshao	String	详情介绍	是
10	beijingtupian	String	背景图片	是

表4.5酒水购买表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	jiushuimingcheng	String	酒水名称	是
4	jiushuileixing	String	酒水类型	是
5	jingzhongliang	String	净重量	是
6	jiushuishuliang	Integer	酒水数量	是
7	jiage	Integer	价格	是
8	zongjia	String	总价	是
9	goumaishijian	Date	购买时间	是
10	beizhu	String	备注	是
11	zhanghao	String	账号	是
12	xingming	String	姓名	是
13	sfsh	String	是否审核	是
14	shhf	String	审核回复	是
15	ispay	String	是否支付	是

表4.6酒水类型表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	leixing	String	类型	是

表4.7酒水信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	jiushuimingcheng	String	酒水名称	是
4	jiushuileixing	String	酒水类型	是
5	jingzhongliang	String	净重量	是
6	jiushuishuliang	Integer	酒水数量	是
7	jiage	Integer	价格	是
8	gonghuodizhi	String	供货地址	是
9	chuchanriqi	Date	出产日期	是
10	xiangqingjieshao	String	详情介绍	是
11	tupian	String	图片	是
12	clicktime	Date	最近点击时间	是
13	clicknum	Integer	点击次数	是

表4.8留言板表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	userid	Integer	留言人id	是
4	username	String	用户名	是
5	content	String	留言内容	是
6	reply	String	回复内容	是

表4.9通知公告表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	title	String	标题	是
4	introduction	String	简介	是
5	picture	String	图片	是
6	content	String	内容	是

表4.10取酒信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	jiushuimingcheng	String	酒水名称	是
4	jiushuileixing	String	酒水类型	是
5	jingzhongliang	String	净重量	是
6	qujiushuliang	String	取酒数量	是
7	taiweihao	Integer	台位号	是
8	qujiuriqi	Date	取酒日期	是
9	beizhu	String	备注	是
10	zhanghao	String	账号	是
11	xingming	String	姓名	是
12	sfsh	String	是否审核	是
13	shhf	String	审核回复	是

表4.11收藏表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	userid	Integer	用户id	是
4	refid	Integer	收藏id	是
5	tablename	String	表名	是
6	name	String	收藏名称	是
7	picture	String	收藏图片	是
8	type	String	类型(1:收藏,2:赞,3:踩)	是

表4.12token表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	userid	Integer	用户id	是
3	username	String	用户名	是
4	tablename	String	表名	是
5	role	String	角色	是
6	token	String	密码	是
7	addtime	Date	新增时间	是
8	expiratedtime	Date	过期时间	是

表4.13用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

表4.14用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	zhanghao	String	账号	是
4	mima	String	密码	是
5	xingming	String	姓名	是
6	xingbie	String	性别	是
7	shouji	String	手机	是
8	shenfenzheng	String	身份证	是
9	touxiang	String	头像	是

第5章 系统实现

系统实现这个章节的内容主要还是展示系统的功能界面设计效果，在实现系统基本功能，比如修改，比如添加，比如删除等管理功能的同时，也显示出系统各个功能的界面实现效果，该部分内容一方面与前面提到的系统分析，系统设计的内容相呼应，另一方面也是一个实际成果的展示。

5.1 用户功能模块

5.1.1 酒水信息

用户可以在酒水信息里面进行查看酒水信息并且可以进行购买操作。

图5-1 酒水信息页面

5.1.2 存酒信息管理

用户可以对存酒信息进行添加，修改，查询，删除以及批量删除操作。

图5-2 存酒信息管理页面

5.1.3 取酒信息管理

用户可以对取酒信息进行添加，修改，查询，删除以及批量删除操作。

图5-3 取酒信息管理页面

5.1.4 酒水购买管理

用户购买酒水后可以在酒水购买里面查看记录。

图5-4 酒水购买管理页面

5.2 管理员功能模块

5.2.1 用户信息管理

管理员可以对用户信息进行添加，修改，查询，删除以及批量删除操作。

图5-5 用户信息页面

5.2.2 酒吧信息管理

管理员可以对酒吧信息进行添加，修改，查询，删除以及批量删除操作。

图5-6 酒吧信息管理页面

5.2.3 酒水信息管理

管理员可以对酒水信息进行添加，修改，查询，删除以及批量删除操作。

图5-7 酒水信息管理页面

5.2.4 通知公告管理

管理员可以对通知公告信息进行添加，修改，查询，删除以及批量删除操作。

图5-8 通知公告管理页面

FileUtil.java

package com.utils;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

/**
* 类说明 : 
*/

public class FileUtil {
	public static byte[] FileToByte(File file) throws IOException {
		// 将数据转为流
		@SuppressWarnings("resource")
		InputStream content = new FileInputStream(file);
		ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
		byte[] buff = new byte[100];
		int rc = 0;
		while ((rc = content.read(buff, 0, 100)) > 0) {
			swapStream.write(buff, 0, rc);
		}
		// 获得二进制数组
		return swapStream.toByteArray();
	}
}

JiubaxinxiController.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.format.annotation.DateTimeFormat;
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.JiubaxinxiEntity;
import com.entity.view.JiubaxinxiView;

import com.service.JiubaxinxiService;
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-05-28 10:30:01
 */
@RestController
@RequestMapping("/jiubaxinxi")
public class JiubaxinxiController {
    @Autowired
    private JiubaxinxiService jiubaxinxiService;
    


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,JiubaxinxiEntity jiubaxinxi, 
		HttpServletRequest request){

        EntityWrapper<JiubaxinxiEntity> ew = new EntityWrapper<JiubaxinxiEntity>();
		PageUtils page = jiubaxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiubaxinxi), params), params));
        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,JiubaxinxiEntity jiubaxinxi, 
		HttpServletRequest request){
        EntityWrapper<JiubaxinxiEntity> ew = new EntityWrapper<JiubaxinxiEntity>();
		PageUtils page = jiubaxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiubaxinxi), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( JiubaxinxiEntity jiubaxinxi){
       	EntityWrapper<JiubaxinxiEntity> ew = new EntityWrapper<JiubaxinxiEntity>();
      	ew.allEq(MPUtil.allEQMapPre( jiubaxinxi, "jiubaxinxi")); 
        return R.ok().put("data", jiubaxinxiService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(JiubaxinxiEntity jiubaxinxi){
        EntityWrapper< JiubaxinxiEntity> ew = new EntityWrapper< JiubaxinxiEntity>();
 		ew.allEq(MPUtil.allEQMapPre( jiubaxinxi, "jiubaxinxi")); 
		JiubaxinxiView jiubaxinxiView =  jiubaxinxiService.selectView(ew);
		return R.ok("查询酒吧信息成功").put("data", jiubaxinxiView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        JiubaxinxiEntity jiubaxinxi = jiubaxinxiService.selectById(id);
        return R.ok().put("data", jiubaxinxi);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        JiubaxinxiEntity jiubaxinxi = jiubaxinxiService.selectById(id);
        return R.ok().put("data", jiubaxinxi);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody JiubaxinxiEntity jiubaxinxi, HttpServletRequest request){
    	jiubaxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(jiubaxinxi);

        jiubaxinxiService.insert(jiubaxinxi);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody JiubaxinxiEntity jiubaxinxi, HttpServletRequest request){
    	jiubaxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(jiubaxinxi);

        jiubaxinxiService.insert(jiubaxinxi);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody JiubaxinxiEntity jiubaxinxi, HttpServletRequest request){
        //ValidatorUtils.validateEntity(jiubaxinxi);
        jiubaxinxiService.updateById(jiubaxinxi);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        jiubaxinxiService.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<JiubaxinxiEntity> wrapper = new EntityWrapper<JiubaxinxiEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = jiubaxinxiService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	


}

JiushuixinxiController.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.format.annotation.DateTimeFormat;
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.JiushuixinxiEntity;
import com.entity.view.JiushuixinxiView;

import com.service.JiushuixinxiService;
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-05-28 10:30:01
 */
@RestController
@RequestMapping("/jiushuixinxi")
public class JiushuixinxiController {
    @Autowired
    private JiushuixinxiService jiushuixinxiService;
    


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,JiushuixinxiEntity jiushuixinxi, 
		HttpServletRequest request){

        EntityWrapper<JiushuixinxiEntity> ew = new EntityWrapper<JiushuixinxiEntity>();
		PageUtils page = jiushuixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiushuixinxi), params), params));
        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,JiushuixinxiEntity jiushuixinxi, 
		HttpServletRequest request){
        EntityWrapper<JiushuixinxiEntity> ew = new EntityWrapper<JiushuixinxiEntity>();
		PageUtils page = jiushuixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiushuixinxi), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( JiushuixinxiEntity jiushuixinxi){
       	EntityWrapper<JiushuixinxiEntity> ew = new EntityWrapper<JiushuixinxiEntity>();
      	ew.allEq(MPUtil.allEQMapPre( jiushuixinxi, "jiushuixinxi")); 
        return R.ok().put("data", jiushuixinxiService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(JiushuixinxiEntity jiushuixinxi){
        EntityWrapper< JiushuixinxiEntity> ew = new EntityWrapper< JiushuixinxiEntity>();
 		ew.allEq(MPUtil.allEQMapPre( jiushuixinxi, "jiushuixinxi")); 
		JiushuixinxiView jiushuixinxiView =  jiushuixinxiService.selectView(ew);
		return R.ok("查询酒水信息成功").put("data", jiushuixinxiView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        JiushuixinxiEntity jiushuixinxi = jiushuixinxiService.selectById(id);
		jiushuixinxi.setClicknum(jiushuixinxi.getClicknum()+1);
		jiushuixinxi.setClicktime(new Date());
		jiushuixinxiService.updateById(jiushuixinxi);
        return R.ok().put("data", jiushuixinxi);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        JiushuixinxiEntity jiushuixinxi = jiushuixinxiService.selectById(id);
		jiushuixinxi.setClicknum(jiushuixinxi.getClicknum()+1);
		jiushuixinxi.setClicktime(new Date());
		jiushuixinxiService.updateById(jiushuixinxi);
        return R.ok().put("data", jiushuixinxi);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody JiushuixinxiEntity jiushuixinxi, HttpServletRequest request){
    	jiushuixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(jiushuixinxi);

        jiushuixinxiService.insert(jiushuixinxi);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody JiushuixinxiEntity jiushuixinxi, HttpServletRequest request){
    	jiushuixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(jiushuixinxi);

        jiushuixinxiService.insert(jiushuixinxi);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody JiushuixinxiEntity jiushuixinxi, HttpServletRequest request){
        //ValidatorUtils.validateEntity(jiushuixinxi);
        jiushuixinxiService.updateById(jiushuixinxi);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        jiushuixinxiService.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<JiushuixinxiEntity> wrapper = new EntityWrapper<JiushuixinxiEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = jiushuixinxiService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	
	/**
     * 前端智能排序
     */
	@IgnoreAuth
    @RequestMapping("/autoSort")
    public R autoSort(@RequestParam Map<String, Object> params,JiushuixinxiEntity jiushuixinxi, HttpServletRequest request,String pre){
        EntityWrapper<JiushuixinxiEntity> ew = new EntityWrapper<JiushuixinxiEntity>();
        Map<String, Object> newMap = new HashMap<String, Object>();
        Map<String, Object> param = new HashMap<String, Object>();
		Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
		while (it.hasNext()) {
			Map.Entry<String, Object> entry = it.next();
			String key = entry.getKey();
			String newKey = entry.getKey();
			if (pre.endsWith(".")) {
				newMap.put(pre + newKey, entry.getValue());
			} else if (StringUtils.isEmpty(pre)) {
				newMap.put(newKey, entry.getValue());
			} else {
				newMap.put(pre + "." + newKey, entry.getValue());
			}
		}
		params.put("sort", "clicknum");
        
        params.put("order", "desc");
		PageUtils page = jiushuixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiushuixinxi), params), params));
        return R.ok().put("data", page);
    }


}

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="username">
          <el-input v-model="ruleForm.username" 
              placeholder="用户名" clearable  :readonly="ro.username"></el-input>
        </el-form-item>
        <div v-else>
          <el-form-item class="input" label="用户名" prop="username">
              <el-input v-model="ruleForm.username" 
                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="password">
          <el-input v-model="ruleForm.password" 
              placeholder="密码" clearable  :readonly="ro.password"></el-input>
        </el-form-item>
        <div v-else>
          <el-form-item class="input" label="密码" prop="password">
              <el-input v-model="ruleForm.password" 
                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>
// 数字，邮件，手机，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":"rgba(37, 35, 35, 0.68)","selectFontSize":"14px","btnCancelBorderColor":"rgba(238, 237, 229, 0.33)","inputBorderRadius":"20px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"20px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"20px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"rgba(52, 51, 50, 0.88)","addEditBoxColor":"rgba(232, 212, 212, 0.24)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"#DCDFE6","btnCancelBgColor":"rgba(231, 242, 112, 0.92)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"20px","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":"20px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"#DCDFE6","inputBorderColor":"#DCDFE6","uploadBorderColor":"#DCDFE6","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"rgba(159, 111, 85, 0.88)","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"20px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
      id: '',
      type: '',
      ro:{
	username : false,
	password : false,
	role : false,
      },
      ruleForm: {
        username: '',
        password: '',
      },
      rules: {
          username: [
                { required: true, message: '用户名不能为空', trigger: 'blur' },
          ],
          password: [
                { required: true, message: '密码不能为空', trigger: 'blur' },
          ],
          role: [
          ],
      }
    };
  },
  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=='username'){
            this.ruleForm.username = obj[o];
	    this.ro.username = true;
            continue;
          }
          if(o=='password'){
            this.ruleForm.password = obj[o];
	    this.ro.password = true;
            continue;
          }
          if(o=='role'){
            this.ruleForm.role = obj[o];
	    this.ro.role = true;
            continue;
          }
        }
      }
    },
    // 多级联动参数
    info(id) {
      this.$http({
        url: `users/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() {
      // ${column.compare}
      // ${column.compare}
      // ${column.compare}



      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: `users/${!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.usersCrossAddOrUpdateFlag = 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.usersCrossAddOrUpdateFlag = 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>

声明

本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。