基于springboot2+vue2的贸易行业crm系统

1. 资源

注意阅读全文

2. 项目简介

贸易行业CRM（客户关系管理）系统，从代码和数据库结构分析，该系统旨在为贸易企业提供一个集成的管理平台，核心功能围绕客户、产品、销售、配送和售后服务等环节展开。

系统设计包含两种用户角色：

• 管理员：拥有系统最高权限，可以进行全面的数据管理和配置，如管理产品分类、客户信息、部门、员工、市场活动、产品信息、销售订单、配送订单、售后回访以及系统轮播图等。
• 员工：主要负责业务操作，可以查看客户信息，查看产品信息，并基于产品创建“销售订单”，并对订单进行“配送”和“回访”操作。

系统同时提供了面向内部员工的后台管理界面和面向外部用户（或员工）的前端展示门户。

3. 技术栈

• 后端框架: Spring Boot (版本 2.2.2.RELEASE)
• 核心框架: Spring MVC, Apache Shiro (用于安全认证)
• ORM框架: MyBatis Plus (版本 2.3) / MyBatis (版本 2.1.1)
• 数据库: MySQL (驱动版本 mysql-connector-java，连接配置为 jdbc:mysql://127.0.0.1:3306/springbootl8m1o...)
• 前端框架: Vue.js (用于后台管理模块)
• UI库:
  • 后台管理: Element UI (通过 element-ui 引入)
  • 前端门户: Layui (通过 layui/css/layui.css 和 layui.js 引入)
• 其他工具库:
  • fastjson, hutool: Java工具库
  • poi, poi-ooxml: 用于Excel文件处理
  • js-md5: 前端密码加密
  • echarts: 数据图表展示

4. 详细介绍

4.1. 数据库设计

• bumen (部门): 存储企业内部部门信息。
• yuangong (员工): 存储员工账号、基本信息及所属部门。
• chanpinfenlei (产品分类): 用于对产品进行分类管理。
• chanpinxinxi (产品信息): 存储产品名称、分类、封面、数量、价格、产地、详情等。
• kehuxinxi (客户信息): 存储客户名称、地址、联系方式、来源、行业等。
• xiaoshoudingdan (销售订单): 记录销售订单，关联产品和客户，包含订单编号、数量、总金额、发票、交货日期等。
• peisongdingdan (配送订单): 由销售订单流转生成，记录配送状态（待配送、配送中、已送达）、配送方式等。
• shouhouhuifang (售后回访): 由配送订单流转生成，记录对客户的回访内容。
• shichanghuodong (市场活动): 发布市场营销活动，包含活动主题、时间、地点、详情等。
• news (企业公告): 发布企业公告新闻。
• config (配置文件): 存储系统配置，如首页轮播图。
• users (用户表): 存储管理员账号信息。
• token (token表): 存储用户登录凭证。

4.2. 核心业务模块与功能

1. 产品管理:

   • 产品分类管理: 对产品分类进行增删改查。
   • 产品信息管理: 对产品的基本信息、库存、价格、详情等进行管理。

2. 客户管理:

   • 客户信息管理: 集中管理客户资料，支持按来源、行业等信息进行筛选和报表统计。

3. 销售管理:

   • 销售订单管理: 员工可从产品详情页直接创建销售订单，提交后系统会自动扣减产品库存。管理员可以查看和管理所有订单。

4. 订单履行与售后:

   • 配送订单管理: 销售订单生成后，可生成配送订单。员工可以更新配送状态（待配送 -> 配送中 -> 已送达）。
   • 售后回访管理: 配送订单完成后，可生成售后回访记录，用于跟踪客户满意度。

5. 市场活动管理:

   • 管理市场活动，并在前台门户进行展示。

6. 系统管理:

   • 部门管理: 维护公司组织架构。
   • 员工管理: 管理员工账号、密码及归属部门。
   • 企业公告管理: 发布和展示企业新闻、公告。
   • 轮播图管理: 维护前台门户首页的轮播图片。

5. 部分代码

5.1. 后端 - 登录方法 (YuangongController.java)

此代码片段展示了员工登录的接口实现，使用员工工号（yuangonggonghao）作为用户名进行验证，验证成功后生成Token。

// 文件路径: ./springbootl8m1o/src/main/java/com/controller/YuangongController.java
package com.controller;

// ... imports ...

@RestController
@RequestMapping("/yuangong")
public class YuangongController {
    // ...

    /**
     * 员工登录接口
     * @param username 员工工号
     * @param password 密码
     * @return 登录结果及token
     */
    @IgnoreAuth // 此注解表示登录接口不需要token验证
    @RequestMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        // 根据员工工号查询用户
        YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", username));
        // 验证用户是否存在及密码是否正确
        if(user==null || !user.getMima().equals(password)) {
            return R.error("账号或密码不正确");
        }
        // 生成token
        String token = tokenService.generateToken(user.getId(), username,"yuangong",  "员工" );
        return R.ok().put("token", token);
    }
    // ...
}

5.2. 后端 - 跨表保存逻辑 (XiaoshoudingdanController.java 与 前端add.html)

销售订单的创建涉及跨表操作，即在生成销售订单的同时，需要扣减对应产品的库存。这部分逻辑在前端页面 xiaoshoudingdan/add.html 的JavaScript代码中实现。

• 前端核心逻辑 (xiaoshoudingdan/add.html):

  // 文件路径: ./springbootl8m1o/src/main/resources/front/front/pages/xiaoshoudingdan/add.html
  // ... 在表单提交方法 form.on('submit(*)', ...) 中 ...
  
  // 获取从产品详情页传递过来的产品对象
  var obj = JSON.parse(localStorage.getItem('crossObj'));
  // 计算新库存 = 原库存 - 订单数量
  obj.shuliang = obj.shuliang - data.shuliang
  if(obj.shuliang<0){
      layer.msg(`数量不足`, { time: 2000, icon: 5 });
      return false
  }
  // 更新产品信息表中的库存
  http.requestJson(`${table}/update`,'post',obj,(res)=>{});
  // 然后再提交销售订单数据...
  http.requestJson('xiaoshoudingdan' + '/add', 'post', data, function(res) {
      // ...
  });
  

  这段代码清晰地展示了当员工提交销售订单时，系统会先计算并更新产品库存，然后再保存订单，保证了数据的一致性。

5.3. 前端 - 权限判断 (utils.js)

前端通过 isAuth 函数来控制页面元素的显示与隐藏，例如列表页的“添加”按钮或详情页的“配送”按钮。

// 文件路径: ./springbootl8m1o/src/main/resources/admin/admin/src/utils/utils.js
import storage from './storage';
import menu from './menu';

/**
 * 判断当前登录用户是否有指定表名的指定按钮权限
 * @param {*} tableName 表名，如 'xiaoshoudingdan'
 * @param {*} key 按钮名，如 '新增'、'配送'
 */
export function isAuth(tableName,key) {
    let role = storage.get("role"); // 获取角色，如 '管理员' 或 '员工'
    if(!role){
        role = '管理员';
    }
    let menus = menu.list(); // 获取完整的菜单权限配置
    // ... 遍历菜单配置，根据角色和表名找到对应的按钮列表，判断 key 是否在列表中
    // 最终返回 true 或 false
}

此函数在Vue组件中被挂载为全局方法，因此在页面模板中可以这样使用：
v-if="isAuth('peisongdingdan','回访')" 来控制“回访”按钮的显示。

6. 部分截图

7. 项目总结

贸易行业crm系统功能相对完整、基于主流框架（Spring Boot + MyBatis Plus + Vue/Layui）构建的贸易行业CRM系统。

主要优点：

1. 业务闭环：系统覆盖了从“产品管理 -> 销售下单 -> 库存扣减 -> 订单配送 -> 售后回访”的完整业务流程，逻辑清晰，形成了CRM的管理闭环。
2. 多角色支持：区分了“管理员”和“员工”角色，并基于角色进行了权限控制，满足了企业内部的基本权限管理需求。
3. 技术栈实用：后端采用经典的Spring Boot + MyBatis Plus组合，开发效率高；前端后台使用Vue + Element UI，前台门户使用Layui，技术选型比较合理。
4. 功能丰富：除了核心的业务流，还包含了市场活动、企业公告、数据统计报表等辅助功能。

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