基于SpringBoot的雪具销售系统_x9zss

夜月行者

于 2024-08-21 20:59:17 发布

阅读量721

点赞数 13

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

本文链接：https://blog.csdn.net/u013200380/article/details/141402829

版权

springboot 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

管理系统

40 篇文章 0 订阅

订阅专栏

计算机毕设

40 篇文章 0 订阅

订阅专栏

@TOC

springboot601基于SpringBoot的雪具销售系统_x9zss--论文

第一章绪论

1.1研究背景

近年来互联网技术飞速发展，给人们的生活带来了极大便利，也改变人们的生活生产方式，互联网拥有存储量大、可靠性高、使用方便等不可替代的优点，也正在逐步取代传统的信息管理模式[1]。由代码编程实现的各种管理工具和系统替代传统的人工操作，不但提升了可靠性还降低了人力成本，节省了时间，提升了工作效率。全球视域下信息技术逐步渗透到各个领域，多样化的数据信息为雪具销售管理带来了深刻变革，打破了传统的方式与载体，雪具销售管理的事务性工作面临新形势和新挑战[2][2]。

计算机技术快速发展的同时也促进信息化发展。新型管理模式也正逐步推进，推动其信息化发展可以为其改革、进步提供保障。信息技术的改革已成为必然方向，管理人员应该抓住时代的机遇，与时俱进[3]。通过这种方式可以提升雪具销售管理工作的效率，促进新举措的实施，加速改革进程，改善管理服务能力。

雪具销售系统作为信息化建设的重要一环，雪具销售系统的开发与实现，能够使雪具商品的管理工作开展得更加有序。

1.2系统研究现状

我国信息技术虽然起步较晚，但发展速度迅猛，如今已经跻身世界信息大国的行列。现在我们的生活离不开信息技术，人们可以利用计算机、互联网进行网上购物、视频学习、互动交流，信息技术已经渗透到我们的生活中，随着计算机技术、网络技术的迅速发展，研究并实现雪具销售系统是现代理论和科学技术相结合的产物[4]。国内信息化发展趋势越来越快，我国信息化建设也随之迅速发展，通过信息系统对大量复杂数据进行管理代替传统人工管理，很大程度的提升管理效率。目前雪具销售系统基本实现了应用网络进行管理，使用各种技术、实现各种不同附加功能的雪具销售系统数量众多。但随着近年来互联网技术的不断完善和更新，一些不适应当代信息化发展的技术正在被淘汰，而采用老旧技术实现的系统将出现维护困难的境况。因此符合现在社会发展的系统开发十分必要，雪具销售系统的设计和开发仍然有很大的进步空间。

国外部分发达国家的信息技术起步较早，以技术为基础引领的各行各业的变革产生时间也较早。信息化的理念由世界知名的美国麻省理工学院提出，接下来的三四十年随着网络技术的飞速发展，终于在全美形成了一系列非常完善成熟的信息化平台，自此美国国内大部分都实现了管理信息化[5]。虽然存在教育制度存在不同，但由于美国信息化管理的起步时间早，积累经验多，有关雪具销售系统的研究技术经验仍然值得世界学习。

1.3 研究意义

各行各业对互联网的运用正经历着质变，从技术支撑者的技术建构与技术运用转向产业需要为起点，通过重新构建雪具销售系统，实现制度上的发展变革[7][7]。本文将设计一个根据整理、归纳后进行精简的雪具销售系统。使用采取稳定、可靠且易于维护的开发技术进行系统的实现。系统可以直观、高效、便捷地实现对各个雪具销售系统进行管理，使工作人员有针对地安排和管理雪具雪具商品，建立统一的雪具销售系统。

2 大学本科毕业设计（论文）

第二章开发工具和开发技术

2.1开发工具

本系统开发使用到的工具包括Tomcat，MySQL和Vision，下边对它们进行简单的介绍。

（1）Tomcat；Java Web应用程序开发中常用的应用服务器，我们可以将自己开发好的项目部署到Tomcat中进行运行测试，重点是Tomcat体积很小，不需要复杂的安装和配置，下载之后可以直接使用，非常方便。

（2）MySQL数据库；一种项目开发中常用的关系型数据库，因为体积小、开源、免费、简单易学、安装简单等特点[8]，深受开发人员的喜爱，是大多数互联网公司的首选。将系统中的数据统一存储到这个数据库中，然后借助程序将这些数据读取出来，显示在页面上。

（3）Vision；Office办公组件之一，安装之后，可以用来绘制相应的图形，帮助我们更好的理解系统的情况，建立对系统清晰的认识，是开发中最常使用的建模工具。

2.2 开发技术

本系统在后台使用Java语言实现跨平台的处理，以B/S的结构方式以及springboot框架进行开发，数据库使用MySQL。

2.2.1 Java语言

Java 语言是一门受众很广的语言，来自Sun Microsystems公司，Java可运行在很多平台，相较于C++语言，不仅吸收了C++很多优点，还摈弃了里面许多晦涩难懂的概念，Java的优点很多，可面向对象开发，平台多样性以及可移植性很高，目前市面上很多大型网站项目都使用Java编写，由此可知Java的受欢迎程度很高。

2.2.2 Spring Boot框架

Spring Boot是由Pivota公司的团队在Spring框架的基础上所开发出的一个轻量级应用框架，其设计目的是为了简化使用传统Spring框架开发时初始搭建、配置、开发、测试和部署等复杂的流程，满足快速、敏捷开发的需要[[49]。传统Spring框架开启某些特性或引入第三方依赖时，需要配置大量的XML文件，比较繁琐且非常容易出错。而SpringBoot的理念则是“约定大于配置”，它集成了大量第三方依赖的配置，再配合内部自动装配的机制，仅需在Maven工程的POM文件中添加相关依赖即可实现开箱即用的效果，这使得开发人员更加专注于实现业务逻辑，而不是繁琐的配置。此外，Spring Boot内置了S ervlet容器如Tomcat和Jetty，项目可以直接通过} ar命令在本地启动，无需打包成wa:文件再部署到服务器上，大大减少了测试和部署的成本。目前，Spring Boot己经成为了后端服务器应用开发的主流技术[[50]，其特点和优势总结如下:

(1)简化配置，遵循“约定大于配置”的理念，减少了样板代码、注释和XML配置文件的编写。

(2)内置Servlet容器，可在本地独立运行项目，方便测试和部署。

(3)自动装配，可以非常方便地与Spring生态系统中其他框架或第三方依赖集成。

(4)便于快速构建项目，尤其适合构建基于微服务架构的系统。

2.2.3 MySQL数据库技术

数据库在软件项目中扮演着操作管理数据的角色同时还能够保证数据的独立性、一致性和安全性，并为系统访问数据提供有效方式不仅如此数据库还能大大减少程序员开发程序时间。在日常能够接触实用的一般有两类数据库，一类是以(Oracle，DB2，SQL Server，MySQL )为代表的关系型数据库和以(NoSql、MongeDB)为代表的非关系型数据库，两类数据库各有各的优缺点。其中非关系型数据库又分为网络数据库和层级数据库。-网络数据库是指在计算机网络系统中应用数据库技术然后借助网络技术将存储于数据库中的大量信息及时发布出去；在成熟的数据库技术的帮助下，计算机网络实现了对网络中的各种数据的有效管理，用户与网络中的数据库数据交互也借此得以进行。IMS也是最早研制成功的数据库系统。关系数据结构、关系操作集合、关系完整性约束构成了关系模型。作为数据库另外一种区分方式的存储介质被大家分为磁盘和内存这两种。例如：关系型数据库就存储在磁盘中，非关系型数据库则存储在内存中。典型的关系型数据库有：Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL、SQLite。小型关系型数据库：Microsoft Access，SQLite；中型关系型数据库：SQL Server，Mysql；大型关系型数据库：Oracle，DB2。

大家常用的其他关系形数据库系统大多是MySQL AB公司开发的，其中MySQL也是由这家开发的，所应用的分布式数据库管理系统是客户机/服务器体系结构得益于此结构，而且用这个系统建造的数据库具有很强的适用性，用C和C++编写的系统让他拥有很强的适用性所以他可以在大部分操作系统上使用并能和php结合。不同的API函数针对不同的语言(C,C++,JAVA等)来处理不同数据；为了更好地支持多CPU多线程通过使用核心线程来实现；提供的存储机制分为事务和非事务存储机制；MySQL采用双重许可，不管是从MySQL AB公司获得正式的商业许可又或是许可条款下以免费软件或开放源码软件的方式使用MySQL软件都是被允许的。

MySQL作为数据库拥有很多优点，其中由于是开放源码，所以使用成本特别低，而它体积小的特点决定了速度快的特性。因此，My Sql具有开放性，多线程支持多种API，可跨数据库连接，国际化，数据库体积巨大等特点。简单的来说，MySql是一个开放的、快速的、多线程的、多用户的数据库服务器。

选用MySQL作为数据库的其中一个原因就是支持多线程，支持多线程的特点为利用系统资源提供了便捷并因此大大提高了系统运行速度和效率，而且连接数据库的方式多样包括但不局限于TCP/IP、ODBC和JDBC等途径；但是没有东西是完美无缺的，即便MySQL也如此，虽说它有着众多优点但其功能不够强大，规模也相对较小，无法应对大型数据哭的处理。但是对于本系统来说，选用MySQL作为数据库，其功能性能已绰绰有余，如果要进行二次开发的数据库表结构空间的扩展也是完全可行的。综上所述，MySQL是作为本系统数据库的最优选择。

2.2.4 B/S架构

B/S结构就是指系统客户端与服务器分离，客户端通过浏览器访问服务端进行操作[10]。

B/S结构目前广泛应用于绝大部分系统搭建中，这种结构摒弃C/S结构客户端服务端不分离的缺点，具有更多的优势：

（1）跨平台性：B/S的标准由标准化组织确立，适用于绝大多数的系统搭建，通用于应用之间[12]。

（2）低维护成本：客户端和服务器端分离，减轻了两端的压力，尤其是客户端，对客户端设备，硬件、软件要求都比较低，并且系统需要升级或维护时，只需要在服务器端升级或维护就可以，使相应的费用减少[13]。

第三章需求分析

在软件的命周期中，需求分析是其中关键的一环。需求分析过程中不仅要对系统应该实现的功能提出准确和完善的请求，还要考虑需求的可行性。需求分析对设计和实现一个系统具有决定性的重大意义[11]。只有充分完整的需求分析才能为后续的系统开发过程和实现成果奠定基础。

3.1 需求描述

根据日常实际需要，一方面需要在系统中实现基础信息的管理，同时还需要结合实际情况的需要，提供雪具销售功能，方便雪具销售管理工作的展开，综合考虑，本套系统应该满足如下要求：

首先，在系统中需要实现对基础信息，包括登录注册、个人信息修改等信息的管理，这些是系统的基础信息，和系统中其他内容密切相关。

然后，系统中需要实现对用户信息的管理，允许管理员对用户和销售员信息进行必要的设置，同时要避免管理员对个人信息进行操作，保障用户和销售员的信息安全。

3.2 系统角色需求分析

综合雪具销售管理经历和对网上信息归纳整理的结果，在实际应用中，将用户分为三种：管理员、用户和销售员三个角色。其中用户和销售员可以操作的内容是有限的，管理员可以进行的操作最多。了解系统用户的分类以及可以进行的操作，对于接下来实现相关的功能具有重要的意义。

3.3 系统功能需求分析

(1)系统的通用功能包括用户登录和密码修改，是三个角色共同需要使用的功能，用例分析如图3-1所示。

图3-1 系统通用功能用例分析图

(2)管理员可以对个人中心、销售员管理、用户管理、雪具分类管理、雪具商品管理、进货记录管理、退货记录管理、系统管理、订单管理等进行基本的信息管理。其用例分析如图3-2所示。

图3-2 管理员用例图

(3)用户可以实现对注册登录、雪具商品、公告信息、客服中心、购物车、个人中心等信息进行操作，用例分析如图3-3所示。

图3-3用户用例图

(3) 销售员可以对个人中心、雪具分类管理、雪具商品管理、进货记录管理、退货订单管理、订单管理等进行基本的信息管理。其用例分析如图3-3所示。

图3-3销售员用例图

3.4 非功能性需求分析

在系统的需求分析中除了保证系统功能需求分析准确完整，还应考虑与其相辅相成的各种其他因素，这样才能确保系统后续设计能够更加完善、清晰，确保系统实现后的有较高的使用价值。

3.4.1 先进性

为保证系统的先进性开发过程中应尽量使用先进的软件开发技术、设计方法、体系架构，符合当下的应用需求和保证性能可靠。

3.4.2 安全性

本系统中涉及三种用户角色，根据用户角色类型合理划分其页面访问权限。系统允许管理员对用户和销售员进行必要的设置，同时要避免管理员对个人重要信息进行操作，保障用户和销售员的信息安全。

3.4.3 易用性

系统使用方便、界面友好是提高用户使用体验的重要因素。系统实现其主体功能同时，界面设计要简洁大方、使用方便、美观清晰。系统的每一项反馈都要逻辑严密，弹窗信息也是简洁明了[12]。

3.4.4 可扩展性

可扩展性要求软件的设计要留有可升级接口和升级空间，便于今后根据新的模式需求进行功能的拓展。

3.4.5 可修改性

可修改性要求使用科学的方法设计软件，形成良好的结构和完备的文档[13]。它的前提要保证系统设计逻辑清晰，软件结构简单明了，代码编写过程中有良好的注释习惯，便于后续对系统性能进行调整。

3.5 系统流程分析

3.5.1 登录流程

每个用户都有专属的密码和账号，在输入合法的账号和密码之后即可进入系统。登录流程如图3-4所示：

登录流程图

图3-4登录流程图

3.5.2 添加信息流程

管理层人员有添加信息功能。添加信息流程如图3-5所示：

图3-5 添加信息流程图

3.5.3 删除流程

用户可以选择把自己发布的信息删掉，选择要删除的信息确认之后，删除信息的操作就完成了。删除信息流程图如图3-6所示。

图3-6 删除信息流程图

3.6 本章小结

本章首先对整个系统进行了详细的需求描述，然后按照这些要求对系统的角色和功能进行了详细的分析，并对这些要求进行了详细的说明。同时为保证需求分析的全面性，还对系统的一些非功能性需求进行描述和对系统流程进行分析，为以后的系统的开发提供了一个比较完善的参考依据。

第四章系统设计

4.1 系统总体设计

雪具销售系统的建设可以为雪具销售管理提供帮助，通过对一些基础信息管理实现针对性的安排，可以按照用户的角色权限使不同用户角色看到不一样的信息界面。现根据需求阶段的分析，我们可以大致确定系统需要包含的功能如下图所示：

系统总体结构图如下，见图4-1。

图4-1 系统总体结构图

4.2 数据库设计

数据库能直观反映表现系统的需求，数据库的设计能否切实符合系统的需求关系到整个系统最终的呈现结果。通过之前的分析梳理，明确了系统中需要包含的功能和要求。系统中除了涉及对数据库的增加、删除、查寻、修改的基础操作较多，还要理清实体间的对应关系，据此完成表结构的设计与实现。

4.2.1 数据库逻辑设计

为了更直观阐明数据库的设计，使用 Vision 绘制的雪具销售系统数据模型E-R实体属性图。根据系统需求设计了以下几个主要实体。

雪具商品实体属性图，如图4-2所示。

图4-2雪具商品实体属性图

购物车实体属性图，如图4-3所示。

图4-3购物车实体属性图

退货记录实体属性图，如图4-4所示。

图4-4退货记录实体属性图

进货记录实体属性图，如图4-5所示。

图4-5进货记录实体属性图

用户实体属性图，如图4-6所示。

图4-6用户实体属性图

4.2.2 数据库表设计

在关系数据E-R图中，分析并创建数据表，数据表用来记录信息，数据表关系由多个数据表组成，下面介绍的是数据表各个字段信息如下表所示。

表4-1：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4-2：购物车表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tablename	varchar	200	商品表名		xuejushangpin
userid	bigint		用户id
goodid	bigint		商品id
goodname	varchar	200	商品名称
picture	longtext	4294967295	图片
buynumber	int		购买数量
price	float		单价
discountprice	float		会员价
goodtype	varchar	200	商品类型

表4-3：退货记录

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinmingcheng	varchar	200	商品名称
shangpintupian	longtext	4294967295	商品图片
jinhuojiage	int		进货价格
alllimittimes	int		商品数量
dingdanjine	int		订单金额
tuihuoriqi	date		退货日期
xinxibeizhu	varchar	200	信息备注
xiaoshougonghao	varchar	200	销售工号
shhf	longtext	4294967295	回复内容

表4-4：地址

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
address	varchar	200	地址
name	varchar	200	收货人
phone	varchar	200	电话
isdefault	varchar	200	是否默认地址[是/否]

表4-5：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表4-6：关于我们

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
subtitle	varchar	200	副标题
content	longtext	4294967295	内容
picture1	longtext	4294967295	图片1
picture2	longtext	4294967295	图片2
picture3	longtext	4294967295	图片3

表4-7：收藏表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
refid	bigint		商品id
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)		1
inteltype	varchar	200	推荐类型
remark	varchar	200	备注

表4-8：订单

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
orderid	varchar	200	订单编号
tablename	varchar	200	商品表名		xuejushangpin
userid	bigint		用户id
goodid	bigint		商品id
goodname	varchar	200	商品名称
picture	longtext	4294967295	商品图片
buynumber	int		购买数量
price	float		价格		0
discountprice	float		折扣价格		0
total	float		总价格		0
discounttotal	float		折扣总价格		0
type	int		支付类型		1
status	varchar	200	状态
address	varchar	200	地址
tel	varchar	200	电话
consignee	varchar	200	收货人
remark	varchar	200	备注
logistics	longtext	4294967295	物流
goodtype	varchar	200	商品类型

表4-9：公告信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
introduction	longtext	4294967295	简介
picture	longtext	4294967295	图片
content	longtext	4294967295	内容

表4-10：雪具商品评论表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		关联表id
userid	bigint		用户id
avatarurl	longtext	4294967295	头像
nickname	varchar	200	用户名
content	longtext	4294967295	评论内容
reply	longtext	4294967295	回复内容

表4-11：配置文件

字段名称	类型	长度	字段说明	主键
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值

表4-12：客服中心

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
adminid	bigint		管理员id
ask	longtext	4294967295	提问
reply	longtext	4294967295	回复
isreply	int		是否回复

表4-13：雪具分类

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xuejufenlei	varchar	200	雪具分类

表4-14：进货记录

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinmingcheng	varchar	200	商品名称
shangpintupian	longtext	4294967295	商品图片
jinhuojiage	int		进货价格
alllimittimes	int		商品数量
dingdanjine	int		订单金额
jinhuoriqi	date		进货日期
xinxibeizhu	varchar	200	信息备注
xiaoshougonghao	varchar	200	销售工号
shhf	longtext	4294967295	回复内容

表4-15：用户

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yonghuming	varchar	200	用户名
mima	varchar	200	密码
xingming	varchar	200	姓名
xingbie	varchar	200	性别
shouji	varchar	200	手机
touxiang	longtext	4294967295	头像
money	float		余额		0

表4-16：销售员

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xiaoshougonghao	varchar	200	销售工号
mima	varchar	200	密码
xiaoshouxingming	varchar	200	销售姓名
zhaopian	longtext	4294967295	照片
xingbie	varchar	200	性别
dianhua	varchar	200	电话
money	float		余额		0

表4-17：雪具商品

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinmingcheng	varchar	200	商品名称
xuejufenlei	varchar	200	雪具分类
shangpintupian	longtext	4294967295	商品图片
shangpinguige	varchar	200	商品规格
shangpinpinpai	varchar	200	商品品牌
youhuihuodong	varchar	200	优惠活动
onelimittimes	int		单次限购
alllimittimes	int		商品数量
shangpinxiangqing	longtext	4294967295	商品详情
clicktime	datetime		最近点击时间
price	float		价格

4.3 本章小结

这一章着重介绍了整个系统的设计流程。确定了系统的功能结构，并在此基础上完成了数据库的设计。

第五章详细设计与实现

5.1系统功能实现

当人们打开系统的网址后，首先看到的就是首页界面。在这里，人们能够看到系统的导航条，通过导航条导航进入各功能展示页面进行操作。系统首页界面如图5-1所示：

图5-1 系统首页界面

系统注册：在系统注册页面的输入栏中输入用户注册信息进行注册操作，系统注册页面如图5-2所示：

图5-2系统注册页面

雪具商品：在雪具商品页面的输入栏中输入商品名称、商品品牌、价格和选择优惠活动进行查询，可以查看到雪具商品详细信息，并根据需要进行添加到购物车、立即购买操作；雪具商品页面如图5-3所示：

图5-3雪具商品详细页面

购物车：在购物车页面可以查看到商品名称、价格、数量、总价等详细信息，并进行点击购买或删除操作；购物车页面如图5-4所示：

图5-4购物车详细页面

个人中心：在个人中心页面通过填写个人详细信息进行信息更新操作，还可以对我的收藏进行详细操作；个人中心页面如图5-5所示：

图5-5个人中心界面

5.2后台模块实现

后台用户登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，进入操作系统进行操作；如图5-6所示。

图5-6 后台登录界面

5.2.1管理员模块实现

管理员进入主页面，主要功能包括对个人中心、销售员管理、用户管理、雪具分类管理、雪具商品管理、进货记录管理、退货记录管理、系统管理、订单管理等进行操作。管理员主页面如图5-7所示：

图5-7 管理员主界面

管理员点击销售员管理。在销售员页面输入销售工号和选择性别进行查询、新增或删除销售员列表，并根据需要对销售员详情信息进行详情、修改或删除操作；如图5-8所示：

图5-8销售员管理界面

管理员点击用户管理。在用户页面输入用户名、姓名进行查询、新增或删除用户列表，并根据需要对用户详情信息进行详情、修改或删除操作；如图5-9所示：

图5-9用户管理界面

管理员点击雪具商品管理。在雪具商品页面输入商品名称、商品品牌、价格和选择优惠活动进行查询、商品分类统计、商品库存统计、新增或删除雪具商品列表，并根据需要对雪具商品详情信息进行详情、查看评论、修改或删除操作；如图5-10所示：

图5-10雪具商品管理界面

管理员点击进货记录管理。在进货记录页面输入商品名称进行查询或删除进货记录列表，并根据需要对进货记录详情信息进行详情、修改或删除操作；如图5-11所示：

图5-11进货记录管理界面

管理员点击退货记录管理。在退货记录页面输入商品名称进行查询或删除退货记录列表，并根据需要对退货记录详情信息进行详情、修改或删除操作；如图5-12所示：

图5-12退货记录管理界面

管理员点击系统管理。在公告信息页面输入标题进行查询、新增或删除公告信息列表，并根据需要对公告详情信息进行详情、修改或删除操作，还可对客服中心、系统简介、轮播图管理进行相应操作；如图5-13所示：

图5-13系统管理界面

5.2.2销售员模块实现

销售员进入系统可以对个人中心、雪具分类管理、雪具商品管理、进货记录管理、退货订单管理、订单管理等功能进行操作。销售员主页面如图5-14所示：

图5-14销售员主界面

销售员点击雪具商品管理。在雪具商品页面输入商品名称、商品品牌、价格和选择优惠活动进行查询、商品分类统计、商品库存统计、新增或删除雪具商品列表，并根据需要对雪具商品详情信息进行详情、进货、退货、查看评论、修改或删除操作；如图5-15所示：

图5-15雪具商品管理界面

销售员点击进货记录管理。在进货记录页面输入商品名称进行查询进货记录列表，并根据需要对进货记录详情信息进行详情操作；如图5-16所示：

图5-16进货记录管理界面

销售员点击退货订单管理。在退货订单页面输入商品名称进行查询退货订单列表，并根据需要对退货订单详情信息进行详情操作；如图5-17所示：

图5-17退货订单管理界面

销售员点击订单管理。在已支付订单页面输入订单编号、商品名称进行查询已支付订单列表，并根据需要对已支付订单详情信息进行详情、物流或发货操作，还可对已取消订单、已退款订单、未支付订单、已发货订单、已完成订单进行相应操作；如图5-18所示：

图5-18订单管理界面

5.3 本章小结

本章主要基于前面系统设计的内容，详细介绍了管理员、用户和销售员三个角色对雪具销售系统的主要功能界面进行详细介绍和展示。

FileController.java

package com.controller;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.UUID;

import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.util.ResourceUtils;
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 org.springframework.web.multipart.MultipartFile;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.entity.EIException;
import com.service.ConfigService;
import com.utils.R;

/**
 * 上传文件映射表
 */
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{
	@Autowired
    private ConfigService configService;
	/**
	 * 上传文件
	 */
	@RequestMapping("/upload")
    @IgnoreAuth
	public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("上传文件不能为空");
		}
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
		File path = new File(ResourceUtils.getURL("classpath:static").getPath());
		if(!path.exists()) {
		    path = new File("");
		}
		File upload = new File(path.getAbsolutePath(),"/upload/");
		if(!upload.exists()) {
		    upload.mkdirs();
		}
		String fileName = new Date().getTime()+"."+fileExt;
		File dest = new File(upload.getAbsolutePath()+"/"+fileName);
		file.transferTo(dest);
		/**
  		 * 如果使用idea或者eclipse重启项目，发现之前上传的图片或者文件丢失，将下面一行代码注释打开
   		 * 请将以下的"D:\\springbootq33sd\\src\\main\\resources\\static\\upload"替换成你本地项目的upload路径，
 		 * 并且项目路径不能存在中文、空格等特殊字符
 		 */
//		FileUtils.copyFile(dest, new File("D:\\springbootq33sd\\src\\main\\resources\\static\\upload"+"/"+fileName)); /**修改了路径以后请将该行最前面的//注释去掉**/
		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
				configEntity.setName("faceFile");
				configEntity.setValue(fileName);
			} else {
				configEntity.setValue(fileName);
			}
			configService.insertOrUpdate(configEntity);
		}
		return R.ok().put("file", fileName);
	}
	
	/**
	 * 下载文件
	 */
	@IgnoreAuth
	@RequestMapping("/download")
	public ResponseEntity<byte[]> download(@RequestParam String fileName) {
		try {
			File path = new File(ResourceUtils.getURL("classpath:static").getPath());
			if(!path.exists()) {
			    path = new File("");
			}
			File upload = new File(path.getAbsolutePath(),"/upload/");
			if(!upload.exists()) {
			    upload.mkdirs();
			}
			File file = new File(upload.getAbsolutePath()+"/"+fileName);
			if(file.exists()){
				/*if(!fileService.canRead(file, SessionManager.getSessionUser())){
					getResponse().sendError(403);
				}*/
				HttpHeaders headers = new HttpHeaders();
			    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);    
			    headers.setContentDispositionFormData("attachment", fileName);    
			    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		return new ResponseEntity<byte[]>(HttpStatus.INTERNAL_SERVER_ERROR);
	}
	
}

JinhuojiluServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.JinhuojiluDao;
import com.entity.JinhuojiluEntity;
import com.service.JinhuojiluService;
import com.entity.vo.JinhuojiluVO;
import com.entity.view.JinhuojiluView;

@Service("jinhuojiluService")
public class JinhuojiluServiceImpl extends ServiceImpl<JinhuojiluDao, JinhuojiluEntity> implements JinhuojiluService {
	
	
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<JinhuojiluEntity> page = this.selectPage(
                new Query<JinhuojiluEntity>(params).getPage(),
                new EntityWrapper<JinhuojiluEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<JinhuojiluEntity> wrapper) {
		  Page<JinhuojiluView> page =new Query<JinhuojiluView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<JinhuojiluVO> selectListVO(Wrapper<JinhuojiluEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public JinhuojiluVO selectVO(Wrapper<JinhuojiluEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<JinhuojiluView> selectListView(Wrapper<JinhuojiluEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public JinhuojiluView selectView(Wrapper<JinhuojiluEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}


}

CommonServiceImpl.java


package com.service.impl;


import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.dao.CommonDao;
import com.service.CommonService;


/**
 * 系统用户
 */
@Service("commonService")
public class CommonServiceImpl implements CommonService {
	
	@Autowired
	private CommonDao commonDao;

	@Override
	public List<String> getOption(Map<String, Object> params) {
		return commonDao.getOption(params);
	}
	
	@Override
	public Map<String, Object> getFollowByOption(Map<String, Object> params) {
		return commonDao.getFollowByOption(params);
	}
	
	@Override
	public void sh(Map<String, Object> params) {
		commonDao.sh(params); 
	}

	@Override
	public int remindCount(Map<String, Object> params) {
		return commonDao.remindCount(params);
	}

	@Override
	public Map<String, Object> selectCal(Map<String, Object> params) {
		return commonDao.selectCal(params);
	}
	
	@Override
	public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
		return commonDao.selectGroup(params);
	}
	
	@Override
	public List<Map<String, Object>> selectValue(Map<String, Object> params) {
		return commonDao.selectValue(params);
	}

	@Override
	public List<Map<String, Object>> selectTimeStatValue(Map<String, Object> params) {
		return commonDao.selectTimeStatValue(params);
	}

}

add-or-update.vue

<template>
	<div class="addEdit-block" style="width: 100%;">
		<el-form
			:style='{"padding":"30px","boxShadow":"0 0px 0px rgba(64, 158, 255, .3)","borderRadius":"6px","flexWrap":"wrap","background":"rgba(221,242,242,1)","display":"flex"}'
			class="add-update-preview"
			ref="ruleForm"
			:model="ruleForm"
			:rules="rules"
			label-width="120px"
		>
			<template >
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="商品表名" prop="tablename">
					<el-input v-model="ruleForm.tablename" placeholder="商品表名" clearable  :readonly="ro.tablename"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="商品表名" prop="tablename">
					<el-input v-model="ruleForm.tablename" placeholder="商品表名" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="商品id" prop="goodid">
					<el-input v-model="ruleForm.goodid" placeholder="商品id" clearable  :readonly="ro.goodid"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="商品id" prop="goodid">
					<el-input v-model="ruleForm.goodid" placeholder="商品id" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="商品名称" prop="goodname">
					<el-input v-model="ruleForm.goodname" placeholder="商品名称" clearable  :readonly="ro.goodname"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="商品名称" prop="goodname">
					<el-input v-model="ruleForm.goodname" placeholder="商品名称" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="upload" v-if="type!='info' && !ro.picture" label="图片" prop="picture">
					<file-upload
						tip="点击上传图片"
						action="file/upload"
						:limit="3"
						:multiple="true"
						:fileUrls="ruleForm.picture?ruleForm.picture:''"
						@change="pictureUploadChange"
					></file-upload>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="upload" v-else-if="ruleForm.picture" label="图片" prop="picture">
					<img v-if="ruleForm.picture.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;" v-bind:key="index" :src="ruleForm.picture.split(',')[0]" width="100" height="100">
					<img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture.split(',')" :src="$base.url+item" width="100" height="100">
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="购买数量" prop="buynumber">
					<el-input v-model="ruleForm.buynumber" placeholder="购买数量" clearable  :readonly="ro.buynumber"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="购买数量" prop="buynumber">
					<el-input v-model="ruleForm.buynumber" placeholder="购买数量" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="单价" prop="price">
					<el-input v-model="ruleForm.price" placeholder="单价" clearable  :readonly="ro.price"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="单价" prop="price">
					<el-input v-model="ruleForm.price" placeholder="单价" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="会员价" prop="discountprice">
					<el-input v-model="ruleForm.discountprice" placeholder="会员价" clearable  :readonly="ro.discountprice"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="会员价" prop="discountprice">
					<el-input v-model="ruleForm.discountprice" placeholder="会员价" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' class="input" v-if="type!='info'"  label="商品类型" prop="goodtype">
					<el-input v-model="ruleForm.goodtype" placeholder="商品类型" clearable  :readonly="ro.goodtype"></el-input>
				</el-form-item>
				<el-form-item :style='{"width":"50%","margin":"0 0 20px 0"}' v-else class="input" label="商品类型" prop="goodtype">
					<el-input v-model="ruleForm.goodtype" placeholder="商品类型" readonly></el-input>
				</el-form-item>
			</template>
			<el-form-item :style='{"padding":"0","margin":"0"}' class="btn">
				<el-button :style='{"border":"0","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"5px","background":"#458C8C","width":"128px","lineHeight":"40px","fontSize":"18px","height":"40px"}'  v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
				<el-button :style='{"border":"0px solid rgba(64, 158, 255, 1)","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#fff","borderRadius":"5px","background":"#458C8C","width":"128px","lineHeight":"40px","fontSize":"18px","height":"40px"}' v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
				<el-button :style='{"border":"0px solid rgba(64, 158, 255, 1)","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#fff","borderRadius":"5px","background":"#458C8C","width":"128px","lineHeight":"40px","fontSize":"18px","height":"40px"}' 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 {
			id: '',
			type: '',
			
			
			ro:{
				tablename : false,
				userid : false,
				goodid : false,
				goodname : false,
				picture : false,
				buynumber : false,
				price : false,
				discountprice : false,
				goodtype : false,
			},
			
			
			ruleForm: {
				userid: '',
				goodid: '',
				goodname: '',
				picture: '',
				buynumber: '',
				price: '',
				discountprice: '',
				goodtype: '',
			},
		
			
			rules: {
				tablename: [
				],
				userid: [
					{ required: true, message: '用户id不能为空', trigger: 'blur' },
				],
				goodid: [
					{ required: true, message: '商品id不能为空', trigger: 'blur' },
				],
				goodname: [
				],
				picture: [
				],
				buynumber: [
					{ required: true, message: '购买数量不能为空', trigger: 'blur' },
					{ validator: validateIntNumber, trigger: 'blur' },
				],
				price: [
					{ validator: validateNumber, trigger: 'blur' },
				],
				discountprice: [
					{ validator: validateNumber, trigger: 'blur' },
				],
				goodtype: [
				],
			}
		};
	},
	props: ["parent"],
	computed: {



	},
	created() {
	},
	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=='logistics'){
				this.logistics=false;
				this.info(id);
			}else if(this.type=='cross'){
				var obj = this.$storage.getObj('crossObj');
				for (var o in obj){
						if(o=='tablename'){
							this.ruleForm.tablename = obj[o];
							this.ro.tablename = true;
							continue;
						}
						if(o=='userid'){
							this.ruleForm.userid = obj[o];
							this.ro.userid = true;
							continue;
						}
						if(o=='goodid'){
							this.ruleForm.goodid = obj[o];
							this.ro.goodid = true;
							continue;
						}
						if(o=='goodname'){
							this.ruleForm.goodname = obj[o];
							this.ro.goodname = true;
							continue;
						}
						if(o=='picture'){
							this.ruleForm.picture = obj[o];
							this.ro.picture = true;
							continue;
						}
						if(o=='buynumber'){
							this.ruleForm.buynumber = obj[o];
							this.ro.buynumber = true;
							continue;
						}
						if(o=='price'){
							this.ruleForm.price = obj[o];
							this.ro.price = true;
							continue;
						}
						if(o=='discountprice'){
							this.ruleForm.discountprice = obj[o];
							this.ro.discountprice = true;
							continue;
						}
						if(o=='goodtype'){
							this.ruleForm.goodtype = obj[o];
							this.ro.goodtype = true;
							continue;
						}
				}
				









			}
			
			
			
			
		},
    // 多级联动参数

    info(id) {
      this.$http({
        url: `cart/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.picture!=null) {
		this.ruleForm.picture = this.ruleForm.picture.replace(new RegExp(this.$base.url,"g"),"");
	}









var objcross = this.$storage.getObj('crossObj');

      //更新跨表属性
       var crossuserid;
       var crossrefid;
       var crossoptnum;
       if(this.type=='cross'){
                var statusColumnName = this.$storage.get('statusColumnName');
                var statusColumnValue = this.$storage.get('statusColumnValue');
                if(statusColumnName!='') {
                        var obj = this.$storage.getObj('crossObj');
                       if(statusColumnName && !statusColumnName.startsWith("[")) {
                               for (var o in obj){
                                 if(o==statusColumnName){
                                   obj[o] = statusColumnValue;
                                 }
                               }
                               var table = this.$storage.get('crossTable');
                             this.$http({
                                 url: `${table}/update`,
                                 method: "post",
                                 data: obj
                               }).then(({ data }) => {});
                       } else {
                               crossuserid=this.$storage.get('userid');
                               crossrefid=obj['id'];
                               crossoptnum=this.$storage.get('statusColumnName');
                               crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");
                        }
                }
        }
       this.$refs["ruleForm"].validate(valid => {
         if (valid) {
		 if(crossrefid && crossuserid) {
			 this.ruleForm.crossuserid = crossuserid;
			 this.ruleForm.crossrefid = crossrefid;
			let params = { 
				page: 1, 
				limit: 10, 
				crossuserid:this.ruleForm.crossuserid,
				crossrefid:this.ruleForm.crossrefid,
			} 
			this.$http({ 
				url: "cart/page", 
				method: "get", 
				params: params 
			}).then(({ 
				data 
			}) => { 
				if (data && data.code === 0) { 
				       if(data.data.total>=crossoptnum) {
					     this.$message.error(this.$storage.get('tips'));
					       return false;
				       } else {
					 this.$http({
					   url: `cart/${!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.cartCrossAddOrUpdateFlag = false;
						 this.parent.search();
						 this.parent.contentStyleChange();
					       }
					     });
					   } else {
					     this.$message.error(data.msg);
					   }
					 });

				       }
				} else { 
				} 
			});
		 } else {
			 this.$http({
			   url: `cart/${!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.cartCrossAddOrUpdateFlag = 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.cartCrossAddOrUpdateFlag = false;
      this.parent.contentStyleChange();
    },
    pictureUploadChange(fileUrls) {
	    this.ruleForm.picture = fileUrls;
    },
  }
};
</script>
<style lang="scss" scoped>
	.amap-wrapper {
		width: 100%;
		height: 500px;
	}
	
	.search-box {
		position: absolute;
	}
	
	.el-date-editor.el-input {
		width: auto;
	}
	
	.add-update-preview .el-form-item /deep/ .el-form-item__label {
	  	  padding: 0 10px 0 0;
	  	  color: #000;
	  	  font-weight: 500;
	  	  width: 120px;
	  	  font-size: 14px;
	  	  line-height: 40px;
	  	  text-align: right;
	  	}
	
	.add-update-preview .el-form-item /deep/ .el-form-item__content {
	  margin-left: 120px;
	}
	
	.add-update-preview .el-input /deep/ .el-input__inner {
	  	  border: 2px solid #797979;
	  	  border-radius: 4px;
	  	  padding: 0 12px;
	  	  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	  	  outline: none;
	  	  color: #000;
	  	  width: 400px;
	  	  font-size: 14px;
	  	  height: 40px;
	  	}
	
	.add-update-preview .el-select /deep/ .el-input__inner {
	  	  border: 2px solid #797979;
	  	  border-radius: 0;
	  	  padding: 0 10px;
	  	  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	  	  outline: none;
	  	  color: #000;
	  	  width: 200px;
	  	  font-size: 14px;
	  	  height: 40px;
	  	}
	
	.add-update-preview .el-date-editor /deep/ .el-input__inner {
	  	  border: 2px solid #797979;
	  	  border-radius: 0;
	  	  padding: 0 10px 0 30px;
	  	  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	  	  outline: none;
	  	  color: #000;
	  	  width: 200px;
	  	  font-size: 14px;
	  	  height: 40px;
	  	}
	
	.add-update-preview /deep/ .el-upload--picture-card {
		background: transparent;
		border: 0;
		border-radius: 0;
		width: auto;
		height: auto;
		line-height: initial;
		vertical-align: middle;
	}
	
	.add-update-preview /deep/ .upload .upload-img {
	  	  border: 1px solid #797979;
	  	  cursor: pointer;
	  	  border-radius: 6px;
	  	  color: #797979;
	  	  width: 90px;
	  	  font-size: 32px;
	  	  line-height: 90px;
	  	  text-align: center;
	  	  height: 90px;
	  	}
	
	.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
	  	  border: 1px solid #797979;
	  	  cursor: pointer;
	  	  border-radius: 6px;
	  	  color: #797979;
	  	  width: 90px;
	  	  font-size: 32px;
	  	  line-height: 90px;
	  	  text-align: center;
	  	  height: 90px;
	  	}
	
	.add-update-preview /deep/ .el-upload .el-icon-plus {
	  	  border: 1px solid #797979;
	  	  cursor: pointer;
	  	  border-radius: 6px;
	  	  color: #797979;
	  	  width: 90px;
	  	  font-size: 32px;
	  	  line-height: 90px;
	  	  text-align: center;
	  	  height: 90px;
	  	}
	
	.add-update-preview .el-textarea /deep/ .el-textarea__inner {
	  	  border: 2px solid #797979;
	  	  border-radius: 0;
	  	  padding: 12px;
	  	  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	  	  outline: none;
	  	  color: #000;
	  	  width: 400px;
	  	  font-size: 14px;
	  	  height: 120px;
	  	}
</style>