于SpringBoot2+vue2智能无人仓库管理

1. 资源

发到最后面

2. 项目简介

智能无人仓库管理系统，旨在通过信息化手段优化仓库的补货与取货流程。系统主要面向管理员和员工两类角色，提供了从补货提醒、补货申请到取货申请的一整套闭环管理功能。

• 核心业务：系统以“物品”为核心，管理员可以发布补货提醒，员工看到提醒后可提交补货申请；同时，员工也可以主动发起取货申请。所有申请均需管理员审核，确保了仓库操作的规范性和可追溯性。
• 管理目标：通过线上流程化管理，减少沟通成本，避免库存积压或短缺，提升仓库运营效率。

3. 技术栈

项目采用前后端分离但部署在一起的传统架构（后端渲染+前端交互），主要技术如下：

• 后端：
  • 核心框架：Spring Boot 2.2.2
  • 持久层框架：MyBatis-Plus 2.3
  • 数据库：MySQL 5.7.32
  • 安全/权限：Apache Shiro 1.3.2、Token拦截器
  • 其他工具：Apache POI（Excel处理）、Fastjson、Hutool等。
• 前端：
  • 核心框架：Vue.js
  • UI组件库：Element UI
  • HTTP请求：Axios
  • 图表库：ECharts
  • 其他工具：vue-json-excel、print-js等。
• 开发与部署：
  • 构建工具：Maven
  • 服务器：内置Tomcat，端口8080，上下文路径为 /wurenchangku
  • 环境：JDK 1.8

4. 详细介绍

4.1 核心功能模块

根据代码分析，系统主要分为以下几个核心功能模块：

• 管理员端：

  • 员工管理：对员工账户进行增、删、改、查，管理员工基本信息（如姓名、手机号、身份证等）。
  • 补货提醒管理：发布需要补货的物品信息，包括物品名称、类型、补货数量等。
  • 补货申请审核：查看员工提交的补货申请，并进行“通过”或“拒绝”的审核操作，可填写审核意见。
  • 取货申请审核：查看员工提交的取货申请，并进行“通过”或“拒绝”的审核操作，可填写审核意见。
  • 基础数据管理：管理系统中的字典数据，如“物品类型”、“补货状态”、“审核状态”等。

• 员工端：

  • 补货提醒查看：查看管理员发布的补货提醒列表。
  • 补货申请：针对看到的补货提醒，提交补货申请。
  • 补货申请记录查看：查看自己提交的补货申请及其审核状态与意见。
  • 取货申请：主动发起取货申请，填写物品名称、类型、取货数量等信息。
  • 取货申请管理：对自己提交的取货申请进行增、删、改、查操作。

4.2 数据库设计

项目数据库名为 wurenchangku，核心表结构如下：

• 关联关系：
  • buhuoshneqing 通过 buhuotixing_id 关联 buhuotixing 表，通过 yonghu_id 关联 yonghu 表。
  • quhuoshenqing 通过 yonghu_id 关联 yonghu 表。
• 逻辑删除：yonghu 和 buhuotixing 表设计了 *_delete 字段（1为未删除，2为已删除），用于实现逻辑删除功能，避免数据物理丢失。

4.3 用户与权限

系统存在两种角色，权限通过菜单和按钮级别进行控制，相关配置在 menu.js 文件中。

• 管理员：
  • 拥有后台所有模块的访问和操作权限。
  • 菜单包括：管理员管理、员工管理、补货提醒管理、补货申请管理、取货申请管理、基础数据管理。
• 员工：
  • 权限受限，仅能访问与自身相关的模块。
  • 菜单包括：补货提醒管理（仅查看和申请）、补货申请管理（仅查看）、取货申请管理（增删改查）。

4.4 业务流程

1. 补货流程：

   • 管理员在【补货提醒管理】中添加需要补货的物品（状态为“未补货”）。
   • 员工在【补货提醒管理】列表中看到该提醒，并点击“申请”。
   • 系统生成一条【补货申请】记录，状态为“未审核”。
   • 管理员在【补货申请管理】中查看申请，并审核为“通过”或“拒绝”。
   • 若审核通过，对应的【补货提醒】状态更新为“已补货”。

2. 取货流程：

   • 员工在【取货申请管理】中直接发起取货申请，填写物品和数量，状态默认为“未审核”。
   • 管理员在【取货申请管理】中查看申请，并审核为“通过”或“拒绝”。
   • 员工端会显示审核结果和意见。

5. 部分代码

5.1 后端：BuhuoshneqingController - 补货申请控制器

// 文件路径: ./wurenchangku/src/main/java/com/controller/BuhuoshneqingController.java
@RestController
@RequestMapping("/buhuoshneqing")
public class BuhuoshneqingController {
    @Autowired
    private BuhuoshneqingService buhuoshneqingService;
    @Autowired
    private DictionaryService dictionaryService;

    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        String role = String.valueOf(request.getSession().getAttribute("role"));
        // 如果是员工角色，则只查询该员工自己的申请数据
        if("员工".equals(role)) {
            params.put("yonghuId", request.getSession().getAttribute("userId"));
        }
        // 默认按id排序
        if(params.get("orderBy")==null || params.get("orderBy")=="") {
            params.put("orderBy","id");
        }
        // 调用service层进行分页查询
        PageUtils page = buhuoshneqingService.queryPage(params);

        // 将查询结果中的字典字段（如审核状态）从编码转换为可读文本
        List<BuhuoshneqingView> list = (List<BuhuoshneqingView>) page.getList();
        for(BuhuoshneqingView c : list) {
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }
}

5.2 后端：MyBatis Mapper XML - 多表联查

此代码片段展示了如何在MyBatis的Mapper文件中实现复杂查询，关联了 buhuoshneqing、buhuotixing 和 yonghu 三张表。

<!-- 文件路径: ./wurenchangku/src/main/resources/mapper/BuhuoshneqingDao.xml -->
<mapper namespace="com.dao.BuhuoshneqingDao">
    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
        a.id as id, a.buhuotixing_id as buhuotixingId, ...
    </sql>

    <select id="selectListView" resultType="com.entity.view.BuhuoshneqingView">
        SELECT
        <include refid="Base_Column_List" />
        -- 级联查询补货提醒表
        ,buhuotixing.buhuotixing_name as buhuotixingName
        -- 级联查询员工表
        ,yonghu.yonghu_name as yonghuName
        FROM buhuoshneqing a
        LEFT JOIN buhuotixing ON a.buhuotixing_id = buhuotixing.id
        LEFT JOIN yonghu ON a.yonghu_id = yonghu.id
        <where>
            <!-- 动态SQL条件 -->
            <if test="params.buhuotixingName != null">
                and buhuotixing.buhuotixing_name like CONCAT('%', #{params.buhuotixingName}, '%')
            </if>
            <if test="params.yonghuId != null">
                and a.yonghu_id = #{params.yonghuId}
            </if>
        </where>
        order by a.${params.orderBy} desc
    </select>
</mapper>

5.3 前端：Vue Router - 路由配置

此代码是前端路由配置文件，定义了系统中各个页面组件的访问路径。

// 文件路径: ./wurenchangku/src/main/resources/admin/admin/src/router/router-static.js
import Vue from 'vue';
import VueRouter from 'vue-router'
Vue.use(VueRouter);

// 懒加载页面组件
import users from '@/views/modules/users/list'
import buhuoshneqing from '@/views/modules/buhuoshneqing/list'
import buhuotixing from '@/views/modules/buhuotixing/list'
// ...

const routes = [{
    path: '/index',
    component: Index,
    children: [
        { path: '/users', name: '管理员管理', component: users },
        { path: '/buhuoshneqing', name: '补货申请', component: buhuoshneqing },
        { path: '/buhuotixing', name: '补货提醒', component: buhuotixing },
        // ... 其他子路由
    ]
},
{
    path: '/login',
    name: 'login',
    component: Login
},
{
    path: '*', // 404路由
    component: NotFound
}]

const router = new VueRouter({
    mode: 'hash', // 使用hash模式
    routes
});

export default router;

5. 部分截图

7. 项目总结

该项目是一个功能较为完善的仓库业务管理系统，专注于解决补货和取货流程中的核心问题。总体来看，具有以下特点和改进空间：

• 完整性：项目结构清晰，从数据库设计、后端API到前端界面均有完整实现，是一个可以独立部署和运行的完整系统。
• 角色明确：通过基于角色的权限控制（管理员/员工），清晰地划分了操作边界，符合中小型企业或组织的管理需求。
• 流程闭环：补货流程从“提醒”到“申请”再到“审核”形成了完整的业务闭环，数据在各环节间有明确的状态流转。
• 技术实践：项目运用了Spring Boot、MyBatis-Plus、Vue.js等主流技术，并实现了逻辑删除、Token认证、分页查询、字典转换等通用功能，具有一定的学习和参考价值。

代码：https://fifteen.xiaobias.com/source/184