基于Spring Boot、Vue.js和MySQL的超市管理系统设计与实现

**技术说明：**本文围绕超市管理系统进行Java Web开发复盘，重点整理Spring Boot后端架构、Vue.js前端交互、MySQL数据建模、用户管理、商品管理、库存管理、销售记录和系统测试等技术要点。内容用于前后端分离系统设计、零售业务建模和数据库应用方法交流，不涉及商业推广或服务宣传。

摘要

信息技术的发展速度很快，超市管理系统是零售业信息化科学智能化管理的核心工具，促进和带动超市内部管理，消费者购物便捷，零售业走向越来越好的方向发展，设计一个超市管理的系统可以在日常生活中提高超市各个部门的工作效率。系统工作的能力可以很大程度决定超市在日常经营中工作效率强弱和顾客在购物时对购物广场的整体满意程度。

这个系统是用Java语言进行设计，系统需要进行分析，知道超市的业务流程和需求是什么，了解需要建立什么系统模块。利用Springboot作为后端框架，其轻量级、独立运行和自动配置特点简化开发部署的环节；Vue.js前端框架可以很好增强用户界面的交互性和提升代码的可维护性。还要了解系统的可行性、运行效果、稳定程度、技术这些应该怎么选择。MySQL数据库则确保了数据的安全存储和查询功能。系统功能包括用户管理、商品管理、库存管理、销售记录。这些功能共同组成了一个高效、易于维护的超市管理平台，保障系统的方便使用和性能的安全。

经过测试证明，该系统可以轻松应对超市日常运营中的各种复杂要求。超市管理系统界面设计很直观很友好，操作流程方便快捷，很大的提升了超市员工的工作效率和顾客服务质量。这个系统的实现也说明了信息化时代下超市管理系统可以很好的发展，也再次证实了Spring Boot与Vue.js组合在开发企业级应用程序时所展现出的巨大优势和潜力。

关键词：Spring Boot；Vue.js；MySQL；超市管理系统

Abstract

The rapid evolution of information technology has positioned supermarket management systems as pivotal tools for informed, intelligent management in retail. These systems enhance internal supermarket operations and facilitate convenient shopping experiences, driving continuous improvement in the retail industry. The design of such systems can elevate work efficiency across supermarket departments. Their operational capabilities are crucial in determining daily productivity and customer satisfaction.

This system is designed using Java, necessitating an analysis to understand supermarket business processes and requirements, and identify necessary system modules. Spring Boot, as the backend framework, simplifies development and deployment due to its lightweight, standalone, and auto-configuration features. Vue.js enhances user interface interactivity and improves code maintainability. It's crucial to understand system feasibility, operational effectiveness, stability, and technology selection. MySQL ensures secure data storage and efficient querying. The system functionalities include user management, product management, inventory management, and sales record keeping, collectively forming an efficient and easy-to-maintain supermarket management platform, ensuring convenient usage and secure performance.

Test results demonstrate the system can address complex daily supermarket operation requirements. The supermarket management system features an intuitive, user-friendly interface and streamlined procedures, enhancing staff efficiency and customer service quality. Its implementation underscores the promising development of supermarket management systems in the information era, confirming the advantages and potential of the Spring Boot and Vue.js combination in enterprise-level application development.

Keywords: Spring Boot； Vue.js； MySQL； Supermarket Management System

绪论

研究背景与意义

研究背景

信息化管理的要求，信息化科技时代在我们生活的环境下高速发展，超市在我们生活的环境下和我们密不可分，利用信息化技术来升级超市的各个方面，会让我们的生活变的很便捷。在超市管理系统设计可视化的方面 $1$ 。Java技术有很多的优点，在我们日常生活中也是很流行受欢迎的一个技术，Java语言的可以跨平台性、面向对象特性、成熟的开发框架，让很多人在开发时候就会选择Java语言。在对系统进行设计和运行过程中Java语言有不错的稳定性和大众对Java语言也有一定程度的了解。现在超市管理系统中很多超市存在功能不全、操作复杂、维护困难等问题，这些问题限制了超市管理效率的提升。我国需要加速发展超市管理系统，让超市也可以进入信息化流程。新技术像云计算这样的技术越来越成熟也可以帮助超市管理系统慢慢的走向信息化时代，超市管理系统也在向智能化方向发展，已经有人提出的基于大数据平台的无人智慧超市管理系统设计 $2$ 。新的系统设计需要考虑这些技术的应用，实现更高级的功能，可以智能库存管理、销售数据分析等。

研究意义

增强顾客体验，系统还提供便捷的结账流程和可以为顾客开通会员进行专门的信息存储和愉快的购物体验，可以帮助超市提升顾客满意度和忠诚度。提升超市在零售业在市场中的竞争力，可以提高系统管理的效率，该系统通过集成化的管理功能，库存管理、销售跟踪和积分存储，能够很好提升超市的日常运营效率，降低依靠人力来完成管理造成的低级错误，数据记录和存储不会出现很多错误数据的上传和显示也是实时性的。有效降低了超市经营成本，通过自动化和优化业务流程，这个管理系统可以减少超市人力工资支出和节省很多靠人力手工来记录的信息，保证销售的记录数据，积分的详细情况和商品数量的多少不会出现人工记录造成的错误。这个系统能够帮助超市更好地分析市场变化趋势和顾客对于购物的需求，制定更有效的营销手段，从而让零售业在激烈的市场竞争中获得优势。

研究目标和内容

研究目标

利用Java语言的面向对象特性，设计模块化、成熟的语言体系，来保证系统在任何一个方面都可以很好的运行和如果系统出现什么问题也方便查看问题出现在什么地方。在数据库管理中使用的是navicat premium16管理工具利用MySQL数据库记录积分管理、会员资料、员工信息、销售记录、商品信息等数据。让数据更加安全和准确。完善超市管理系统中的商品管理功能，销售管理功能，库存管理功能。优化算法和数据结构设计，提升系统处理速度和响应能力。

研究内容

在我对超市管理系统的研究中主要内容是通过信息化手段优化超市经营流程，提升超市在管理过程中的效率，增强顾客满意度。在开始设计时我要对超市每个方面的功能进行详细认真的了解，知道超市要有些什么业务流程的模块，才方便对系统进行设计，还需要明确应该有什么系统功能模块，每一个功能模块应该完成什么操作。功能模块应该有商品信息管理、库存管理、销售管理、会员管理和数据分析等。在系统设计中系统响应的速度也需要考虑，不能让系统半天都没有反应，数据也要保证安全，不能随便就泄露顾客的信息。在准备进行系统设计，需要根据一开始了解超市的需求、业务流程、总体功能来判断系统的整体框架和每一个功能模块应该怎么具体实现，需要选择合适比较稳定大众认知度高成本不是很高的数据库管理系统，建立合适的数据库表结构，确定界面的构建样式和布局的美观，在与用户交互性保证用户的体验感。在进入系统正式设立的阶段，要考虑一下用户看这个界面是否美观，用户使用起来方不方便，体验感怎么样，提升用户的体验感和操作更加方便。技术实现是比较困难的地方，要使用Java语言和一些系统框架来构建系统总体。

国内外研究现状

国外研究现状

随着信息技术时代的快速发展，国外在超市信息化管理方面已经取得了比较不错的研究成果。早在一个多世纪前，随着工业革命和大规模生产的兴起，库存管理就引起了人们的广泛关注。为了减少存货、提高效率和效益，各种库存管理理论和方法不断被提出并应用于实践中。

在现在信息技术飞速发展的时代，国外的一些大型零售商和连锁超市已经实现了自动化和数字化的库存管理。数字化技术的普及，超市管理系统也逐渐向智能化、数字化方向发展，这与超市管理中的数字化趋势相契合 $3$ 。国外的系统发展的已经很快，在很多方面和管理的过程中已经实现现代化的操作，在前端网页的结构和外观的美化和一些交互性已经发展的挺不错，后端也使用目前比较稳定和方便使用的框架进行设计。国外的系统在销售记录信息的管理有很不错的管理措施，商品信息的管理中也可以全面展示出商品的价值和商品的各个信息，库存管理中有很清楚的库存数量记录数据，还可以进行系统管理对整个系统进行合理的调控，还引入了智能推荐算法和在线支付接口，进一步提高了系统的便捷性和针对性。

国内研究现状

相较于国外，国内在超市信息化管理方面的研究起步较晚，但近年来也取得了显著的进展，如庄帅基于B/S架构设计实现的超市管理系统，为国内超市管理系统的开发提供有益参考 $4$ 。在科技发展飞速上升的阶段，超市又是我们离不开的一个行业，大力的去发展超市管理系统来帮助超市管理人员的压力很是重要，也可以让顾客感觉超市的发展对人们的生活越来越便利，改善人们的生活质量，让超市的管理感觉方便高效。

当前，我国部分小型连锁超市仍旧沿用传统的手工管理模式，尽管已有少数超市引入了POS系统进行收银作业，但还涉及商品采购、库存管理、盘点核对和账务汇总等环节的操作依旧依赖于人工手段。这种状况引发了一系列管理上的短板，包括商品数据统计不便、结账流程效率低下、缺乏即时的数据分析能力等问题。

要解决这些问题，国内的一些学者和实践者开始关注超市管理系统的深入了解与实现。他们深入了解Java语言的特点和好处，熟悉spring boot和mybatis框架来构建系统的方便程度。设计并实现了一系列功能丰富的超市管理系统。这些系统涵盖了超市日常生活中顾客信息的管理，办理成为会员的记录，商品销售的记录，商品进行明确的管理划分准则，库存商品的统计这些功能，创建了我国信息化超市管理的新篇章，保证了超市管理在以后会向越来越好的方向发展 $5$ 。

国内的超市管理系统在这几年来信息化发展的驱动下，体系逐步越来越成熟，规模也越来越壮大，发展的进程也越来越快，在一些系统的功能中还需要完善设计规划，在系统具有实现的功能内容中要去细化各个功能模块的内容，确保功能可以全面实现。一些复杂的操作也需要去让执行的过程变得简单。

关键技术简介

SpringBoot简介

Spring Boot是一个用于快速创建企业级应用程序的开发方法，它是在Spring框架本质上的一种轻量级的应用程序开发技术。Spring Boot极大地减少了开发人员的配置工作量，使开发人员能够更专注于业务逻辑的实现 $6$ 。

Vue.js

Vue.js是一个轻量级、渐进式的JavaScript框架，专注于构建响应式用户界面，支持组件化开发，拥有高效的虚拟DOM技术和丰富的生态系统。

Java语言及其相关技术

Java是一种面向对象的编程语言，是比较方便使用了解这门语言的人也非常的多。本系统采用Java语言进行开发,它具有可移植性、安全性和跨平台等特性，适合构建复杂的超市管理系统 $7$ 。因此被广泛应用于各个领域的软件开发中。

数据库技术

MySQL是一款关系型数据库管理系统，能够多用户访问和多线程处理强大能力的SQL数据库特性。它有许多的优越的性能特点，每一个人都可以随意使用也是市面上比较常见的数据库管理工具，它的体积也紧凑，运行的效果稳定性也挺不错的，大多数人在选用数据库管理是都比较喜欢使用。

前端技术与用户界面设计

前端技术可以合理设计出页面的布局，可以美化用户界面的一些外观和布局，提升用户界面的交互性能和一些动态页面，在用户开来界面很美观，比较感兴趣的页面布局。

开发环境

表2-1展示了系统所需的开发环境。

表2-1系统所需开发环境表

操作系统	Windows10
开发工具	IntelliJ IDEA 2024.2.1
Java环境	JDK1.8,Maven3.8.1
数据库	Mysql 5.7

系统分析

可行性分析

经济可行性

这个系统是本科毕业生论文，人力成本就是我自己写的，不需要花费任何费用，所需要的硬件设备只需要一台电脑就可以完成，软件方面的idea，MySQL，vue都是官网可以找到免费的版本，不需要我们额外花钱，资料方面可以利用大学课程中计算机相关的知识来完成，开发该系统所用到的知识和所需要掌握的要点都是大学中老师所教过我们的，或者也可以通过网上免费查找所需要的资料，这个系统也没有正式在实际生活中运用，所以考虑这个系统经济可行性方面是没问题的。

技术可行性

这个系统是利用Java语言进行书写完成的，框架的选择是目前比较流行的SpringBoot和Vue.js框架支撑。在这些数据的存放和数据的整理中是把数据放在MySQL数据库管理的，超市的所有数据存放在数据库中会很安全，不用担心数据遗失或错误这些情况，MySQL也在我们现在的数据库使用中也是比较常见很比较好用的。如在超市管理系统的设计与实现中所使用的 $8$ 。这个系统所使用的技术，都是现在比较常见的，开源的技术，在Internet上有非常健全的文档和数据，开发成功的项目也是非常多的。所以超市管理系统在技术方面开发是没有问题的。

运行可行性

系统主要使用现在比较流行的Springboot框架作为支持，在前端的页面使用Vue.js来负责页面的构建和布局、美化每一个页面的外观和保证页面的交互性和动态性。环境中主要使用Redis来处理系统中很多数据造成的缓存问题，帮助数据可以正常快速流畅的使用，还使用Maven。在项目设计中虽然会出现很多问题，像系统页面无法显示，代码记不清楚这些问题，许多的问题都会发生，多数发生的问题都是老师课上说过或者带着我们进行实操解决过了的，还有一部分问题可以通过网上查找资料和老师同学之间交流说明什么问题困扰了我，自己没办法解决，老师同学也会帮我一起去解决问题，还会给我指出那些地方出现错误，需要改正。从操作上来说，这套系统的开发是可行的。

业务流程分析

这个系统中存在三个不同的用户角色，分别是销售人员、仓库管理人员和系统管理人员，这一点与企业小型超市管理系统的研究与开发论文中的描述相似 $9$ 。系统管理的人员可以对超市销售的人员进行管理也可以对仓库中库存进行管理。

主要的业务需求表是如下3-1：

表3-1业务需求表

编号	业务的名称	可以操作该功能的人员
1	销售主页	销售
2	销售记录	销售
3	积分兑换记录	销售
4	仓库管理	仓库管理员
5	出库明细	仓库管理员
6	入库明细	仓库管理员
7	供货商信息	仓库管理员
8	库存统计	仓库管理员
9	人事管理	系统管理员
10	系统管理	系统管理员

用例图分析

总用例关系图如图3-1所示：

图3-1总用例关系图

销售员工可以进行销售管理，在销售主页可以进行对顾客的购物结账和顾客如果看上积分商品可以给顾客积分商品兑换。还可以进行会员管理，删除会员、修改会员、新增会员。顾客可以对所选中的商品进行购物结账，可以通过原来购物获得的积分对积分商品进行兑换可以进行的功能用例如图3-2所示:

图3-2销售用例图

仓库管理员对商品管理功能管理：功能赋予管理人员权限，以浏览销售统计数据、商品详细信息、管理积分兑换商品，并对商品进行分类管理 $10$ 。库存管理功能描述：仓库管理员利用此功能，能够对仓库实施全面管理，包括出库详细记录、入库详细记录、库存数量统计，供货商信息的查询与管理。可以进行的功能用例如图3-3所示:

图3-3仓库管理员用例图

用例描述

商品管理用例描述

商品管理用例描述如表3-2所示。

表3-2商品用例描述表

用例名称	商品信息管理
用例编号	3.3.1
参与者	管理员
前置条件	1、管理员已登录系统。2、商品信息管理功能已启用。
后置条件	1、商品信息已成功添加、修改或删除。2、系统记录操作日志。
基本流程	1、管理的人打开项目管理。2、界面显示出所有商品的信息。3、可以进行下面这些功能：查找商品：查找所需商品的条件新增商品：填写信息并提交。修改商品：修改信息并提交。删除商品：确认删除。
扩展流程	1、商品信息不正确：提示"价格或库存数量不能为负数"。2、网络中断：提示"网络连接失败，请重试"。

会员管理用例描述

会员管理用例描述如表3-3所示。

表3-3会员管理用例描述表

用例名称	会员信息管理
用例编号	3.2.1
参与者	管理员、会员
前置条件	1、管理员或会员已登录系统。2、会员管理功能已启用。
后置条件	1、会员信息已成功添加、修改或删除。2、系统记录操作日志。
基本流程	1、管理的人打开项目管理。2、界面中出现所有会员的信息。3、可以进行下面这些功能：查找需要找到的会员：输入会员的特点。改变会员资料：改变要修正的地方点击上传。增加新的会员：输入新会员所有资料并上传。删除过期的会员：确定删除信息。
扩展流程	1、会员资料不是正确的：出现"需要进行实名绑定"。2、网络中断：显示"网络连接失败，请重试"。

商品分类管理用例描述

商品分类管理用例描述如表3-4所示。

表3-4商品分类用例描述表

用例名称	商品分类管理
用例编号	3.3.2
参与者	管理员
前置条件	1、管理员已登录系统。2、商品分类管理功能已启用。
后置条件	1、商品分类信息已成功添加、修改或删除。2、系统记录操作日志。
基本流程	1、管理的人打开项目管理功能。 2、界面出现所有的分类划分。 3、可以进行下面这些功能：查询分类：输入条件查询。增加需要的新分类:输入划分的信息并上传。改变分类划分：输入需要改变的资料。删除不使用的分类：确认删除。
扩展流程	1、分类划分不规范：提示"已经有类似分类"。 2、网络中断：提示"网络连接失败，请重试"。

销售管理用例描述

销售管理用例描述如表3-5所示。

表3-5销售管理用例描述表

用例名称	销售管理
用例编号	3.2.2
参与者	销售、顾客
前置条件	1、销售已登录系统。 2、商品信息已录入系统。
后置条件	1、销售订单已成功生成并记录。 2、商品库存数量已更新。 3、系统记录销售日志。
基本流程	1、收银员进入销售管理页面。 2、系统显示商品列表。 3、选择操作：创建订单：扫描商品并提交。修改订单：修改内容并提交。取消订单：确认取消。查询订单：输入条件查询。
扩展流程	1、库存不足：提示"库存不足，无法完成订单"。 2、订单信息不合法：提示"购买数量不合法"。 3、网络中断：提示"网络连接失败，请重试"。 4、顾客取消订单：提示"订单取消成功"。

非功能需求分析

在我设计的超市管理系统中，非功能需求的分析也是很重要的一个部分，它们确保系统不仅功能完备，还可以在系统的性能、安全性、易用性和扩展性等方面也表现不错,无人超市系统通过自助购物和智能结算功能，显著提升了用户体验和运营效率 $11$ 。

超市管理系统要重视数据安全，加密存储重要的数据，严格访问控制。人机交互设计简洁直观，提升用户体验。系统需模块化设计，便于扩展和维护。关注稳定性、响应速度及维护支持等非功能性需求，确保高性能、强安全性和友好界面，提升竞争力。

时序图

用户登录过程中的时序图，在登录到系统中需要进行的时序操作。

用户登录时序图如图3-4所示。

图3-4登录时序图

库存管理员时序图

库存管理员通过提交商品入库的申请，系统收到申请后开始处理，系统弹出提示用户输入商品的信息，库存管理员根据实际信息输入入库商品种类和数量，系统处理用户输入的信息，更新数据库中的库存信息，系统确认信息修改返回结果，在用户界面显示数据信息修改成功。库存管理员时序图如下3-5所示。

图3-5库存管理员时序图

商品信息管理时序图

员工可以在系统显示所有商品信息的界面进行商品的修改功能，像商品如果最近价格波动可以进行商品价格的增加或者减少，商品若卖出去库存减少了可以调整商品的数量，或者超市进货了商品数量增加可以把商品显示的数量增加，最近新的商品到货包装发生变化可以上传新包装的商品图片，可以查询商品，输入指定的条件去查询需要找到的商品，这样不用一个一个去找可以节省很多时间。还有商品已经卖完的不存在的商品可以把这一类的商品资料删除。员工通过商品界面发起删除商品的请求，系统处理删除请求，准备从数据库中移除商品记录，系统从数据库中删除指定的商品记录，系统确认商品删除成功。商品管理时序图如下3-6所示。

图3-6商品管理时序图

会员办理时序图

顾客向前台提出办理会员卡的申请，前台收到会员需要办理的信息，然后开始进行办理的流程，在会员资料卡中输入会员自己的详细资料，信息输入完成以后，点击上传资料，资料就会被保存下来，系统返回新会员的信息资料，界面就会显示新会员的信息资料，系统确认会员卡办理成功。会员办理时序图如下3-7所示。

图3-7会员办理时序图

商品分类创建时序图

员工在系统中打开商品分类创建界面，在界面中输入新的商品分类信息，点击上传保存新的分类，在所有的分类信息中就会显示出刚才所设立的商品分类类别。商品分类创建时序图如下3-8所示。

图3-8商品分类创建时序图

部门类别管理时序图

管理的工作人员可以管理部门的增加所需要新成立的新部门，删除一些不存在的部门，若科室职能变化也可以对科室的资料进行修改管理，所需进行的操作完成之后就可以回到界面上显示部门信息操作成功的消息。部门管理时序图如下3-9所示。

图3-9部门管理时序图

系统设计

系统架构设计

本系统采用了Spring Boot、Vue.js等前沿开发框架进行构建，并严格遵循MVC设计模式。利用Element-UI组件库来优化用户界面设计。为了确保前后端的有效集成及未来系统的便捷维护，本系统被架构为视图层、控制层、服务层和数据持久层四个独立部分。这些层级之间通过清晰的接口实现交互，呈现出高度的内聚性和低耦合性，系统框架设计图如图4-1所示。

图4-1系统框架设计图

系统功能模块设计

总体系统功能结构图如图4-2所示。

图4-2总体系统功能结构图

库存管理功能结构图

在这个功能下面可以进行仓库管理，创建新仓库，删除不用的仓库，对出问题仓库停用。出库明细对商品进行出库。入库明细对商品进行入库。供货商信息可以创建新的供货商，删除不合作的供货商，供货商信息的修改。库存统计出仓库中商品的数量。超市后台管理系统使用科技化手段完成了商品整理、库存清算和销售统计等功能，保证系统可以正确高效的完成所安排的任务 $12$ 。库存管理功能结构图如下4-3所示。

图4-3库存管理功能结构图

商品管理功能结构图

商品管理模块结构图如下4-4所示。

图4-4商品管理功能结构图

销售管理功能结构图

在销售管理功能下可以在销售主页进行购物结账，对选中的商品进行结账处理，也可以进行积分商品的积分兑换，还能查看销售记录和积分物品历史兑换的痕迹。销售记录中可以查看历史买过什么商品价格是多少买的数量有几件买的商品有些什么种类，积分兑换记录可以知道原来自己的积分在换什么商品时候使用，后面会显示换了多少商品换了商品的数量。销售管理功能结构图如下4-5所示。

图4-5销售管理功能结构图

流程图设计

用户登录流程图

用户通过登录页，输入要登录的用户名密码，前端验证通过后发送至后端；后端验证用户信息，成功则创建会话并返回会话ID，用户登录成功跳转主页；失败显示登录不成功，用户重新输入账号和密码。用户登录流程图如下4-6所示。

图4-6用户登录流程图

总体业务流程图

总的业务流程图如下图4-7所示:

图4-7 业务主体流程图

商品销售流程图

开始购买商品。输入商品名称。检查超市里有没有该商品。如果商品不存在，提示重新输入商品名称或选择退出。如果商品存在，继续购买流程。输入购买数量。计算金额。顾客对所挑选的商品进行付款，完成付款，顾客就完成商品的购买流程。购买商品流程图如下4-8所示。

图4-8购买商品流程图

库存管理流程图

开始进行到商品收入仓库，有库房就不需要新加库房，若查找的库房没有就需要找增加新的库房，若查找到搜索的商品需要对商品进行移出库房，查找的商品在库房中所有商品都找完了没有找到就需要对没有的商品进入库房。库存管理流程图如下4-9所示。

图4-9库存管理流程图

商品管理流程图

在商品管理中，搜索的功能可以方便快速找到根据自己条件找到的商品，商品的资料显示不正确价格有变动数量多少的变化可以进行资料信息的变更，商品卖完的可以直接进行移除流程把这个商品移除，到货新的商品需要上线可以进行新建。商品管理流程图如下4-10所示。

图4-10商品管理流程图

商品分类流程图

在分类信息过程中，打开分类管理功能，可以通过分类划分商品的任意类别区分不同的商品，没有这个分类可以新建该分类，有这个分类的就不需要重新新建新的分类，分类也还正在使用就可以退出分类管理。过去已经不使用的可以对分类移除，移除不需要的分类后流程结束。商品分类流程图如下4-11所示。

图4-11商品分类流程图

积分商品管理流程图

显示积分商品列表。检查是否存在指定的积分商品。如果存在，可以选择删除或修改该积分商品。如果选择删除，删除成功后流程结束。如果选择修改，修改成功后流程结束。如果不存在，可以选择创建新的积分商品。流程结束。积分商品管理流程图如下4-12所示。

图4-12积分商品管理流程图

会员管理流程图

流程从"开始"进入"会员管理首页"模块。系统检查是否存在指定的会员：如果不存在，创建新的会员信息。如果存在，进入下一步判断。用户可以选择删除或修改会员信息：需要修正会员资料的输入修正的操作资料就会相应的修改。需要删除的就会把会员资料移除出去。如果不进行任何操作，流程结束。流程最终到达"结束"节点。会员管理流程图如下4-13所示。

图4-13会员管理流程图

类图设计

UML建模技术能够清晰地描述系统的结构和行为，为超市信息系统的设计提供了有力支持 $13$ 。类图如下4-14所示。

图4-14类图

数据库设计

总体E-R图如下4-15所示。

图4-15总体ER图

员工实体属性图如下4-16所示。

图4-16员工实体信息属性图

角色实体定义：该实体负责存储角色的基础信息，其中角色ID作为唯一标识符，充当主键角色。数据来源：角色的录入，修改。角色实体属性图如下4-17所示。

图4-17角色实体信息属性图

菜单实体概述：此实体负责记载菜单的核心数据，其中，菜单ID作为关键标识符，承担主键的职责。数据来源：菜单录入，修改。菜单实体属性图如下4-9所示。

图4-18菜单实体信息属性图

商品实体定义：该实体负责存储有关商品的基础资料，其中，商品ID被设定为唯一主键，用以标识每一个商品实例。数据来源：商品的录入，修改。商品实体属性图如下4-19所示。

图4-19商品实体信息属性图

数据库模块详细设计

逻辑结构设计

部门表如下表4-1所示。

表4-1department(部门表)

属性	类型	长度	键	备注
id	int	11	主键	主键
name	varchar	20		部门名称
info	varchar	255		描述
state	char	2		状态

员工表如表4-2所示。

表4-2employee(员工表)

属性	类型	长度	键	备注
id	int	11	主键	主键
phone	varchar	255		用户名
email	varchar	64		邮箱
address	varchar	64		住址
sex	char	1		性别
password	varchar	64		密码
nick_name	varchar	64		昵称
head_img	longtext			头像
state	varchar	1		状态 0：在职 1：离职
info	varchar	255		描述
age	int	11		年龄
id_card	varchar	18		身份证号
leave_time	datetime			离职时间

商品表如下表4-3所示。

表4-3goods(商品表)

属性	类型	长度	键	备注
id	int	11	主键	主键
name	varchar	255		商品名
category_id	int	11		商品分类id
sell_price	double	10		销售价格
purchash_price	double	10		进货价格
category_name	varchar	64		分类名
cover_url	varchar	255		商品封面
state	Char	2		状态

会员表如下表4-4所示。

表4-4t-member（会员表）

属性	类型	长度	键	备注
Id	int	11	主键	主键
Name	varchar	64		姓名
Phone	varchar	11		手机号
Password	varchar	64		密码
Email	varchar	64		邮箱
State	char	2		状态
Info	varchar	255		描述
Integral	int	11		会员积分

仓库表如下表4-5所示。

表4-5store（仓库表）

属性	类型	长度	键	备注
id	int	11	主键	主键
name	varchar	255		仓库名称
address	varchar	255		仓库地址
state	char	2		状态
info	varchar	255		描述

供货商信息表如下表4-6所示。

表4-6supplier（供货商信息表）

属性	类型	长度	键	备注
cn	int	11	主键	主键
name	varchar	64		名称
address	varchar	64		地址
tel	varchar	64		联系电话
info	varchar	255		备注
state	char	2

销售记录表如下表4-7所示。

表4-7datail_sale_records(销售记录表)

属性	类型	长度	备注
sell_cn	varchar	255	销售订单号
goods_id	int	20	商品编号
goods_num	int	11	商品数量
goods_price	double	10	销售单价
goods_name	varchar	64	商品名

商品分类表如下表4-8所示。

表4-8good_category(商品分类表)

属性	类型	长度	键	备注
Id	int	11	主键	主键
Name	varchar	255		分类名
Info	varchar	255		备注
state	char	2		状态

商品进货表如下表4-9所示。

表4-9t_goods_store(商品进货表)

属性	类型	长度	备注
goods_id	int	20	商品编号
store_id	int	20	仓库编号
in_num	int	11	入库数数量
residue_num	int	11	剩余数量
store_name	varchar	255	仓库名

接口设计

本系统的主要接口如表4-10所示。

表4-10 超市管理系统主要接口表

模块	接口	请求方式	作用
部门模块	save	Post	保存部门
	update	Post	更新部门
	deactivate	Post	停用部门
	list	Get	查询部门列表
员工模块	list	Get	获取员工列表列表
	detail	Get	获取员工详情
	uploadImg	Post	上传图片
	save	Post	保存员工
	upadte	Post	更新员工
角色信息模块	save	Post	保存角色
	update	Post	更新角色
	forbiddenRole	Post	停用角色
	checkPermissons	Get	检查权限
	saveRolePermissons	Post	保存角色权限
菜单信息模块	queryPageByQo	Get	分页查询菜单
商品模块	queryPageByQo	Get	分页查询商品
	uploadImg	Post	上传图片
	save	Post	保存商品
	upOrDown	Post	上/下架
	queryGoodsById	Post	通过 id查询商品
	upload	Post	更新商品

系统实现

登录功能模块

下面这个是系统的登录功能模块，使用者通过启动后端项目并且打开前端页面，然后通过在浏览器上输入网址，就可以在网页上看见自己写的登录页面了。登录页面如下图5-1所示

图5-1登录页面

登录页面核心代码如下图5-2所示。

图5-2登录页面核心代码

销售功能模块

在销售管理功能模块中可以看到销售主页，销售记录，积分兑换记录。销售功能系统是超市管理的对顾客展示超市运行过程，对外展示超市主体能力的一个部分，能不错的处理商品，销售的记录工作，提高超市的各方面能力 $14$ 。

销售主页如下图5-3所示。

图5-3销售主页

销售主页核心代码如下图5-4所示。

图5-4销售主页核心代码

销售记录如下图5-5所示。

图5-5销售记录

销售记录核心代码如下图5-6所示。

图5-6销售记录核心代码

积分兑换记录如下图5-7所示。

图5-7积分兑换记录

积分兑换记录核心代码如下图5-8所示。

图5-8积分兑换记录核心代码

人事管理模块

部门管理如下图5-9所示。

图5-9部门管理

部门管理核心代码如下图5-10所示。

图5-10部门管理核心代码

员工管理如下图5-11所示。

图5-11员工管理

员工管理核心代码如下图5-12所示。

图5-12员工管理核心代码。

库存管理模块

库存管理功能，可以通过搜索功能要找的仓库，也可以对仓库进行全方面的管理控制。仓库管理如下图5-13所示。

图5-13仓库管理

仓库管理核心代码如下图5-14所示。

图5-14仓库管理核心代码

会员管理模块

会员管理功能模块会显示会员的信息，可以通过录入会员来新建会员的资料，过期不是会员的可以出这里移除，会员信息若需要变更可以进行改变。会员管理功能如下图5-15所示。

图5-15会员管理功能

会员管理功能核心代码如下图5-16所示。

图5-16会员管理核心代码

商品管理模块

商品管理功能模块可以对商品的信息进行处理，保证商品每一个部分的信息都不会错误。

商品分类管理如下图5-17所示。

图5-17商品分类管理

商品分类管理核心代码如下图5-18所示。

图5-18商品分类管理核心代码

商品信息管理如下图5-19所示。

图5-19商品信息管理

商品信息管理核心代码如下图5-20所示。

图5-20商品信息管理核心代码

积分商品管理如下图5-21所示。

图5-21积分商品管理

积分商品管理核心代码如下图5-22所示。

图5-22积分商品管理核心代码

销售统计管理如下图5-23所示。

图5-23销售统计

销售统计核心代码如下图5-24所示。

图5-24销售统计核心代码

系统测试

测试目的

验证系统功能、性能及安全性，确保稳定运行，提升用户体验和数据可靠性。

测试环境与准备

操作系统：Windows 10

数据库：MySQL 5.7.39、Redis 3.0.10

应用软件：Idea 2021.03

浏览器：Chrome 90.0.4430.93

软硬件环境：10台电脑

测试方法

在系统测试阶段，我们采用Design and Implementation of Supermarket Sales Management System Based on Apriori Algorithm论文中类似的测试方法，以确保系统的准确性和可靠性 $15$ 。

测试用例

用户登录测试用例如表6-1所示：

表6-1 用户登录测试用例

编号	用例名	预期结果	实际结果
CS0101	输入正确的账号和密码	登录成功，进入用户角色首页	登录成功，进入用户角色首页
CS0102	输入错误的账号和正确的密码	提示账号或者密码错误，不做跳转	提示账号或者密码错误，不做跳转
CS0103	输入正确的账号和错误密码	提示账号或者密码错误，不做跳转	提示账号或者密码错误，不做跳转
CS0104	账号和密码均为空	提示账号或密码不能为空，不做跳转	提示账号或密码不能为空，不做跳转

修改密码测试用例如表6-2所示：

表6-2修改密码测试用例

编号	用例名	预期结果	实际结果
CS0301	修改用户密码错误	提示之前密码错误	未能接收到验证码
CS0302	修改用户密码正确	提示密码修改成功	提示密码修改成功

商品管理功能测试用例如表6-3所示：

表6-3商品管理功能测试用例

编号	用例名	预期结果	实际结果
CS0106	添加新商品	商品成功添加到系统中，并在商品列表中显示。	商品成功添加，商品列表中显示新添加的商品。
CS0105	添加重复商品	系统提示"商品已存在"，添加失败。	系统提示"商品已存在"，添加失败。
CS0108	添加商品时缺少必填字段	系统提示"必填字段不能为空"，添加失败。	系统提示"商品名称不能为空"，添加失败。
CS0110	修改商品信息	商品信息更新成功，并在商品列表中显示修改后的信息。	商品信息更新成功，商品列表中显示修改后的价格和库存数量。
CS0201	删除商品	商品从系统中删除，商品列表中不再显示该商品。	商品成功删除，商品列表中不再显示该商品。
CS0110	按名称查询商品	系统返回与名称匹配的商品列表。	系统返回与名称"苹果"匹配的商品列表。
CS0220	按分类查询商品	系统返回该分类下的所有商品。	系统返回"饮料"分类下的所有商品。
CS0123	增加库存	商品库存数量更新为增加后的值。	商品库存数量从 100 增加到 150。
CS0234	减少库存	商品库存数量更新为减少后的值。	商品库存数量从 100 减少到 80。
CS0563	网络中断时操作商品管理	系统提示"网络连接失败"，操作未执行。	系统提示"网络连接失败，请检查网络设置"，操作未执行。
CS0166	数据库连接失败时操作商品管理	系统提示"数据库连接失败"，操作未执行。	系统提示"数据库连接失败，请联系管理员"，操作未执行。

库存管理功能测试用例如表6-4所示。

表6-4库存管理功能测试用例

编号	用例名	预期结果	实际结果
CS0168	正常增加库存	商品库存数量更新为增加后的值（如原库存 100 件，更新后为 150 件）。	商品库存数量从 100 增加到 150。
CS0154	增加库存时输入负数	系统提示"库存数量不能为负数"，增加失败。	系统提示"库存数量不能为负数"，增加失败。
CS0199	正常减少库存	商品库存数量更新为减少后的值（如原库存 100 件，更新后为 70 件）。	商品库存数量从 100 减少到 70。
CS0542	减少库存时库存不足	系统提示"库存不足，无法减少"，减少失败。	系统提示"库存不足，无法减少"，减少失败。
CS0132	按商品名称查询库存	系统返回该商品的库存数量。	系统返回"苹果"的库存数量为 100 件。
CS0321	按商品分类查询库存	系统返回该分类下所有商品的库存信息。	系统返回"饮料"分类下所有商品的库存信息。
CS0323	查询不存在的商品库存	系统提示"未找到相关商品"。	系统提示"未找到相关商品"。
CS0354	网络中断时操作库存管理	系统提示"网络连接失败"，操作未执行。	系统提示"网络连接失败，请检查网络设置"，操作未执行。
CS0256	数据库连接失败时操作库存管理	系统提示"数据库连接失败"，操作未执行。	系统提示"数据库连接失败，请联系管理员"，操作未执行。

测试结果及分析

在上面所说的测试环境中，我设计的系统历经了几轮严格的测试流程后。在开始测试的第一轮过程中，系统出现很多细微存在问题，像在尝试删除个人信息时，数据库已经成功移除相关数据，但是显示成功的提示框却不能正常弹出来。经过很多次测试和修改错误的代码查找测试中出现的许多问题，进入到后面的测试时，全部功能模块都可以正常运行，达到了我一开始设计系统时预期的功能效果。这几轮的测试都表现出不错的测试结果。

结论

历经数月的辛勤努力学习与论文系统中各个功能板块的完善和实现，我成功实现了这套超市管理系统，我设计的这个系统是采用SpringBoot框架与Vue.js前端技术来创建的整体项目。项目设计的前期需要了解超市的业务流程和需要的功能需求，来了解清楚这些情况以后就可以初步在大脑中形成思维体系，该怎么去开发这套系统，就可以确定系统技术的构建和开发过程中需要用到那些环境，我利用了前后端相分离的开发策略。

系统在开发中出现了许许多多的问题，有的问题很困难好几天都没办法解决，有的问题只需要在网上查看一下资料或者网上有类似问题的视频讲解都可以轻松解决，在特别难的问题我是很老师沟通，和老师一起去分析问题的原因出在什么地方和需要改进优化的地方就去一一解决，在系统设计中，我使用的是前后端分离的技术，我们在平时课上都经常学习前端和后端的内容，老师也带着我们将前端和后端一起整合联合使用的过程，在这些不断持续学习中，我慢慢的克服了所有遇到的问题，成功的开发出这个系统，系统的功能也能完全的实现和运行。这次我设计的超市管理系统的设计与实现过程对我很有价值。我深刻掌握了SpringBoot及Vue.js等前沿开发框架的应用，还知道了前后端分离开发模式的好处与MVC架构的设计理念。

我很真诚的感激在我设计超市管理系统的过程中，我的导师给我了许多宝贵的建议和同学在我出问题时候帮助我一起解决。是他们耐心指导和不断鼓励我，我才可以很好的完成这次系统设计。

参考文献

$1$ 崔祥.基于Java超市可视化管理系统设计 $J$ .网络安全技术与应用,2023,(02):45-46.

$2$ 吴永豪.基于大数据平台的无人智慧超市管理系统设计 $J$ .电子技术与软件工程,2021,(12):189-191.

$3$ Leonard S M,Kusi L F,Asare S O, et al. A digital turn for urban management? Residents' perception and utilisation of the digital property address system in Accra, Ghana $J$ . Urban Governance, 2023, 3 (2): 157-167.

$4$ 庄帅.基于B/S架构设计实现超市管理系统 $J$ .信息系统工程,2022,(01):105-108.

$5$ 张静,胡宁玉,冯丽萍.基于Java的超市进销存管理系统的设计与实现 $J$ .信息与电脑(理论版),2022,34(18):124-127+131.

$6$ 吕冠艳,李奋华.MVC架构下的校园超市管理系统的设计 $J$ .计算机时代,2022,(04):123-125.DOI:10.16644/j.cnki.cn33-1094/tp.2022.04.034.

$7$ 卢长鹏,张业男,周敏. Java程序设计项目化教程 $M$ . 化学工业出版社: 202403. 298.

$8$ 梅瑞泽,王静.超市信息管理系统的设计与实现 $J$ .电子测试,2021,(18):78-80.DOI:10.16520/j.cnki.1000-8519.2021.18.028.

$9$ 岳纹.企业小型超市管理系统的研究与开发 $J$ .电脑编程技巧与维护,2021,(05):89-91.DOI:10.16184/j.cnki.comprg.2021.05.036.

$10$ 袁明坤,曾丽.基于JavaWeb的超市商品采购管理系统设计与实现 $J$ .电脑知识与技术,2022,18(05):61-63.DOI:10.14004/j.cnki.ckt.2022.0346.

$11$ 席硕. 无人超市全自助购物系统设计与开发 $D$ . 沈阳航空航天大学, 2023. DOI:10.27324/d.cnki.gshkc.2023.000181.

$12$ 王立新. 基于信息技术的超市后台管理系统研究 $J$ . 无线互联科技, 2021, 18 (08): 60-61.

$13$ 龙棉棉,姚敦红. 基于UML的超市信息系统设计 $J$ . 信息与电脑(理论版), 2020, 32 (14): 101-103.

$14$ 李楚贞,曾琳,余育文. 华润万家超市进销存管理系统的设计与实现 $J$ . 计算机产品与流通, 2020, (11): 274.

$15$ 王宁.Design and Implementation of Supermarket Sales Management System Based on Apriori Algorithm $D$ .首都经济贸易大学,2020.DOI:10.27338/d.cnki.gsjmu.2020.001126.

致谢

随着本论文的撰写接近尾声，也预示我的大学四年生活接近了尾声，在大学生活里，让我学习到了很多的知识，这其中包括很多的专业知识，也有很多其他方面的知识，让我成长了许多，我衷心地对在这个过程中向我伸出援手、给予我坚定支持的每一个人表示感谢。

我要向我的导师表达深深的谢意。正是他专业的引领和耐心的释疑，使我在超市管理系统的设计与实现过程中避免了许多不必要的曲折。他对待科研的严谨态度和精湛的技术能力，对我产生了深远的影响，帮助我在技术层面和项目管理上均取得了显著的进步。

我也非常感谢我的同学们。他们在项目开发期间，不仅与我共同面对技术难题，还在精神上给予了我巨大的支持。我们一同探讨解决方案，共同攻克了一个又一个难关，这种团队协作的精神是我能够顺利完成项目的重要保障。

我要对家人的支持和理解表达衷心的感激。在我全身心投入项目开发的那段日子里，他们始终是我坚强的后盾。家人的鼓励和关怀，让我能够无后顾之忧地专注于项目，直至成功完成。圆满完成了这次超市管理系统的设计与实现。这段经历让我学习到更多的专业知识，也为我未来的发展很有帮助。

附录

登录功能模块代码：

<el-form:model="loginForm" ref="loginForm" class="demo-ruleForm">

<br>

<b style="font-size: 28px;color: #f35a34"> 超市管理系统 </b>

<el-form-item prop="username">

<el-row>

<el-col:span="5" style="text-align: right">

class="iconfont icon-r-user1"

style="font-size: 26px;color: grey;"

</i>

</el-col>

<el-col

:span="19"

style="text-align: left; padding-left: 10px"

<el-input

v-model="loginForm.username"

placeholder="账号"

></el-input>

</el-col>

</el-row>

</el-form-item>

<el-form-item prop="password">

<el-row>

<el-col:span="5" style="text-align: right">

class="iconfont icon-r-lock"

style="font-size: 26px;color: grey;"

</i>

</el-col>

<el-col

:span="19"

style="text-align: left; padding-left: 10px"

<el-input

type="password"

v-model="loginForm.password"

placeholder="密码"

></el-input>

</el-col>

</el-row>

</el-form-item>

<el-form-item>

<el-button

style="font-size: 18px"

type="primary"

@click="submitForm('loginForm')"

</i>

</el-form-item>

销售管理功能模块代码：

销售主页

</div>

<el-col:span="12">

购物结账

</button>

</el-col>

<el-col:span="12">

</i>

积分兑换

</button>

</el-col>

<el-col:span="12">

</i>

销售记录

</button>

</el-col>

<el-col:span="12">

</i>

兑换记录

</button>

</el-col>

</div>

积分兑换功能模块：

<el-dialog

title="积分兑换"

:visible.sync="pointProductsVisable"

label-width="200"

width="40%"

<el-form

:model="pointProductsForm"

:rules="rules"

ref="pointProductsForm"

class="demo-ruleForm"

<el-form-item v-if="confirmVisiable">

<img

width="100px"

:src="BaseApi + pointProductsForm.coverUrl"

alt="商品图片"

</el-form-item>

<el-form-item

v-if="!confirmVisiable"

label="会员账号："

prop="memberId"

<el-select

@change="queryPointProductByMemberId"

v-model="pointProductsForm.memberId"

placeholder="请选择会员"

filterable

clearable

<el-option

v-for="item in options_members"

:key="item.id"

:label="item.name"

:value="item.id"

</el-option>

</el-select>

</el-form-item>

<el-form-item

v-if="confirmVisiable"

label="会员账号："

prop="memberId"

<el-select

disabled

@change="queryPointProductByMemberId"

v-model="pointProductsForm.memberId"

placeholder="请选择会员"

filterable

clearable

<el-option

v-for="item in options_members"

:key="item.id"

:label="item.name"

:value="item.id"

</el-option>

</el-select>

</el-form-item>

<el-form-item

v-if="!confirmVisiable"

label="积分商品："

prop="goodsId"

<el-select

@change="queryPointProductByGoodsId"

v-model="pointProductsForm.goodsId"

placeholder="请选择积分商品"

filterable

clearable

<el-option

v-for="item in options_pointProducts"

:key="item.id"

:label="item.name"

:value="item.id"

</el-option>

</el-select>

</el-form-item>

<el-form-item

v-if="confirmVisiable"

label="积分商品："

prop="goodsId"

<el-select

disabled

@change="queryPointProductByGoodsId"

v-model="pointProductsForm.goodsId"

placeholder="请选择积分商品"

filterable

clearable

<el-option

v-for="item in options_pointProducts"

:key="item.id"

:label="item.name"

:value="item.id"

</el-option>

</el-select>

</el-form-item>

<el-form-item v-if="confirmVisiable" label="所需积分：">

<el-input

disabled

type="number"

v-model="pointProductsForm.integral"

placeholder="所需积分"

</el-form-item>

<el-form-item>

<el-button

v-if="confirmVisiable"

type="primary"

@click="submitPointProductsForm('pointProductsForm')"

style="font-size: 22px"

</i>

确认兑换

</el-button>

<el-button

v-if="confirmVisiable"

type="info"

@click="closePointProductsForm"

style="font-size: 22px"

</i>

关闭</el-button

<el-button

type="success"

v-if="!confirmVisiable"

@click="confirmPointProducts('pointProductsForm')"

style="font-size: 22px"

</i>

兑换

</el-button>

<el-button

v-if="!confirmVisiable"

type="info"

@click="closeConfirmPointProducts"

style="font-size: 22px"

</i>

关闭</el-button

</el-form-item>

</el-form>

</el-dialog>

库存管理功能模块：

<el-breadcrumb separator="/">

<el-breadcrumb-item>首页</el-breadcrumb-item>

<el-breadcrumb-item>库存管理 </el-breadcrumb-item>

<el-breadcrumb-item>仓库管理</el-breadcrumb-item> </el-breadcrumb

><br />

<el-row>

<el-col:span="8" style="text-align: left;padding-right: 10px;">

<el-input placeholder="仓库名称" v-model="searchForm.name"/>

</el-col>

<el-col:span="8">

<el-select v-model="searchForm.state" placeholder="请选择状态" clearable>

<el-option label="正常" value="0"></el-option>

<el-option label="停用" value="-1"></el-option>

</el-select>

</el-col>

</el-row>

<br />

<el-row>

<el-col:span="24" style="text-align: left">

<el-button

type="primary"

@click="subSearchForm"

style="font-size: 18px"

</i>

搜索</el-button

<el-button

type="success"

@click="newVisable = true"

style="font-size: 18px"

创建仓库

</el-button>

</el-col>

</el-row>

<br />

<el-table

:data="tableData"

style="width: 100%">

<el-table-column

type="index"

label="序号"

width="180">

</el-table-column>

<el-table-column

prop="name"

label="名称"

width="180">

</el-table-column>

<el-table-column

prop="address"

label="地址"

width="180">

</el-table-column>

<el-table-column

prop="info"

:show-overflow-tooltip="true"

label="描述">

</el-table-column>

<el-table-column

prop="state"

label="状态">

<el-tag v-if="scope.row.state=='0'" type="success">正常</el-tag>

<el-tag v-else type="danger">停用</el-tag>

</template>

</el-table-column>

<el-table-column width="240" fixed="right"

label="操作">

<el-button type="success" style="font-size: 18px;" @click="editStore(scope.row)">

修改

</el-button>

<el-button style="font-size: 18px;" type="danger" @click="forbidden(scope.row.id)">

停用

</el-button>

</template>

</el-table-column>

</el-table>

商品管理功能模块：

<el-breadcrumb separator="/">

<el-breadcrumb-item>首页</el-breadcrumb-item>

<el-breadcrumb-item>商品管理</el-breadcrumb-item>

<el-breadcrumb-item>分类管理</el-breadcrumb-item> </el-breadcrumb

><br />

<el-row>

<el-col:span="8" style="text-align: left; padding-right: 10px">

<el-input placeholder="分类名称" v-model="searchForm.name" />

</el-col>

<el-col:span="8">

<el-select

v-model="searchForm.state"

placeholder="状态"

clearable

<el-option label="正常" value="0"></el-option>

<el-option label="停用" value="-1"></el-option>

</el-select>

</el-col>

</el-row>

<br />

<el-row>

<el-col:span="24" style="text-align: left">

<el-button

type="primary"

@click="submitSearchForm"

style="font-size: 18px"

</i>

搜索</el-button

<el-button

type="success"

@click="newVisable = true"

style="font-size: 18px"

创建分类

</el-button>

</el-col>

</el-row>

<br />

<el-table:data="tableData" style="width: 100%" size="medium">

<el-table-column type="index" label-width="100px" label="序号">

</el-table-column>

<el-table-column prop="name" label-width="100px" label="名称">

</el-table-column>

<el-table-column

prop="info"

label-width="100px"

:show-overflow-tooltip="true"

label="描述"

</el-table-column>

<el-table-column prop="state" label-width="100px" label="状态">

<el-tag type="success" v-if="scope.row.state == '0'"

>正常</el-tag

<el-tag type="danger" v-else>停用</el-tag>

</template>

</el-table-column>

<el-table-column label="操作" width="240" fixed="right">

<el-button

type="success"

@click="editbtn(scope.row)"

style="font-size: 18px"

class="iconfont icon-r-edit"

style="font-size: 18px"

></i>

修改</el-button

<el-button

type="danger"

@click="forbidden(scope.row.id)"

style="font-size: 18px"

class="iconfont icon-r-no"

style="font-size: 18px"

></i>

停用</el-button

</template>

</el-table-column>

</el-table>

<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page.sync="searchForm.currentPage"

:page-sizes=" $5, 10, 20, 50$ "

:page-size="searchForm.pageSize"

layout="total,sizes, prev, pager, next,jumper"

:total="searchForm.total"

</el-pagination>

部门管理功能模块：

<el-breadcrumb separator="/">

<el-breadcrumb-item

>首页</el-breadcrumb-item

<el-breadcrumb-item

>人事管理

</el-breadcrumb-item>

<el-breadcrumb-item

>部门管理</el-breadcrumb-item

> </el-breadcrumb

><br />

<el-row>

<el-col:span="7">

<el-input placeholder="部门名称" v-model="searchForm.name"/>

</el-col>

<el-col:span="7">

<el-select v-model="searchForm.state" placeholder="请选择状态" clearable>

<el-option label="正常" value="0"></el-option>

<el-option label="停用" value="-1"></el-option>

</el-select>

</el-col>

</el-row>

<br />

<el-row>

<el-col:span="24" style="text-align: left">

<el-button

type="primary"

@click="subSearchForm"

style="font-size: 18px"

</i>

搜索</el-button

<el-button type="success" @click="newVisable=true"

style="font-size: 18px"

</i> 创建部门

</el-button>

</el-col>