🚀前言

在电商行业中，订单管理模块是后台管理系统的核心组成部分之一。它直接关系到商家的运营效率和客户的购物体验。一个高效的订单管理模块不仅能够帮助商家实时追踪订单状态，减少处理时间，还能提升客户满意度，实现更好的业务增长。

本文将深入探讨电商后台管理系统中订单管理模块的开发实战。我们将从功能需求分析入手，逐步构建一个完整的订单管理模块，包括订单的创建、查看、修改、删除，以及订单状态的更新和搜索功能等。

🚀一、订单管理模块的开发

🔎1.使用 Mock.js 进行模拟数据的生成

Mock.js 是一款基于 JavaScript 的小巧的模拟数据生成器。在 Vue 项目中，我们可以使用 Mock.js 生成随机数据，方便在前端开发过程中调试页面功能。

🦋1.1 安装 Mock.js 模块

首先，在项目中安装 Mock.js 模块：

npm install mockjs --save

🦋1.2 创建 Mock 数据文件

安装完成后，在项目的 src 文件夹下新建一个名为 mock 的子文件夹，在其中新建一个名为 Mock.js 的文件，编写代码如下：

// src/mock/Mock.js
import mockjs from "mockjs";

const Mock = {
  // 模拟获取订单数据
  // type: 订单类型。0 为普通订单，1 为秒杀订单
  getOrder(type) {
    let array = [];
    for (let i = 0; i < mockjs.Random.integer(5, 10); i++) {
      array.push(mockjs.mock({
        'name': type === 0 ? '普通商品' : '秒杀商品' + i,
        'price': mockjs.Random.integer(20, 500) + '元',
        'buyer': mockjs.Random.cname(),
        'time': mockjs.Random.datetime('yyyy-MM-dd A HH:mm:ss'),
        'role': mockjs.Random.boolean(),
        'state': mockjs.Random.boolean(),
        'payType': mockjs.Random.boolean(),
        'source': mockjs.Random.url(),
        'phone': mockjs.mock(/\d{11}/)
      }));
    }
    return array;
  }
};

export default Mock;

如以上代码提供了一个获取订单列表的 getOrder 方法，该方法将返回生成的模拟数据。关于 Mock.js 模块的使用语法，本书中不做详细的介绍，读者只需了解通过上面的方法将返回一组模拟的订单数据即可。现在，尝试运行该项目，在控制台打印 getOrder 方法返回的数据，可以体会到 Mock.js 模块的强大之处。

🔎2.编写工具类与全局样式

在编写具体的功能模块前，我们先分析一下这些功能模块是否有通用的部分。有些样式是通用的，例如容器样式、输入框样式等，我们可以将这些通用的样式定义为全局样式，这样在之后编写其他功能模块时就会方便很多。另外，对于一些工具方法，我们也可以将其整合到一个单独的 JavaScript 模块中，方便复用。

🦋2.1 全局样式

首先在 App.vue 文件中编写如下样式代码，这些 CSS 样式都是全局生效的：

<!-- src/App.vue -->
<style>
body {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.content-container {
  background-color: white;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  min-width: 1200px;
  display: inline-block;
  width: 90%;
}

.input-tip {
  margin: 0 10px;
  line-height: 40px;
}

.input-field {
  margin-right: 40px;
}

.content-row {
  margin-bottom: 20px;
}
</style>

后面在编写 HTML 模板时，对于这些通用的样式直接使用即可。

🦋2.2 工具类

在工程的 tools 文件夹下新建一个名为 Tools.js 的文件，编写代码如下：

// src/tools/Tools.js
const Tools = {
  // 导出文件
  exportJson(name, data) {
    var blob = new Blob([data]); // 创建 blob 对象
    var link = document.createElement("a");
    link.href = URL.createObjectURL(blob); // 创建一个 URL 对象并传给 a 元素的 href
    link.download = name; // 设置下载的默认文件名
    link.click();
  }
};

export default Tools;

我们暂时只实现一个导出 JSON 文件的方法，在订单管理模块的订单导出相关功能中会使用这个方法。

🔎3.订单管理页面

在 Order.vue 文件中，我们可以看到完整的示例代码。下面是详细整理后的代码和注释：

<script setup>
import Mock from '../../mock/Mock'
import Tools from '../../tools/Tools'
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由对象
const route = useRoute()

// 订单列表数据
const orderList = ref([])

// 筛选订单的参数
const queryParam = ref({
  goods: "",
  consignee: "",
  phone: "",
  name: "",
  payTime: "",
  sendTime: ""
})

// 当前选中的订单对象
const multipleSelection = ref([])

// 组件加载时获取数据
onMounted(() => {
  orderList.value = Mock.getOrder(route.params.type)
})

// 路由更新时刷新数据
onBeforeRouteUpdate((to) => {
  orderList.value = Mock.getOrder(to.params.type)
})

// 模拟请求数据
function requestData() {
  ElMessage({
    type: 'success',
    message: '筛选请求参数:' + JSON.stringify(queryParam.value)
  })
  orderList.value = Mock.getOrder(route.params.type)
}

// 切换 tab 刷新数据
function handleClick(tab) {
  ElMessage({
    type: 'success',
    message: '切换tab刷新数据:' + tab.props.label
  })
  orderList.value = Mock.getOrder(route.params.type)
}

// 清空筛选项
function clear() {
  queryParam.value = {
    goods: "",
    consignee: "",
    phone: "",
    name: "",
    payTime: "",
    sendTime: ""
  }
  orderList.value = Mock.getOrder(route.params.type)
}

// 导出订单
function exportData() {
  Tools.exportJson('订单.json', JSON.stringify(orderList.value))
}

// 导出选中的发货单
function exportDispatchGoods() {
  Tools.exportJson('发货单.json', JSON.stringify(multipleSelection.value))
}

// 处理多选
function handleSelectionChange(val) {
  multipleSelection.value = val
}

// 进行发货
function dispatchGoods() {
  ElMessage({
    type: 'success',
    message: '发货商品:' + JSON.stringify(multipleSelection.value)
  })
}

// 删除订单
function deleteItem(index) {
  orderList.value.splice(index, 1)
}

// 联系用户
function callUser(item) {
  ElMessage({
    type: 'success',
    message: '联系客户:' + item.phone
  })
}
</script>

<template>
  <div class="content-container" direction="vertical">
    <!-- Input -->
    <div>
      <el-container class="content-row">
        <div class="input-tip">商品名称:</div>
        <div class="input-field">
          <el-input v-model="queryParam.goods"></el-input>
        </div>
        <div class="input-tip">收货人:</div>
        <div class="input-field">
          <el-input v-model="queryParam.consignee"></el-input>
        </div>
        <div class="input-tip">支付时间:</div>
        <div class="input-field">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="queryParam.payTime">
          </el-date-picker>
        </div>
      </el-container>
      <el-container class="content-row">
        <div class="input-tip">用户名称:</div>
        <div class="input-field">
          <el-input v-model="queryParam.name"></el-input>
        </div>
        <div class="input-tip">手机号:</div>
        <div class="input-field">
          <el-input v-model="queryParam.phone"></el-input>
        </div>
        <div class="input-tip">发货时间:</div>
        <div class="input-field">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="queryParam.sendTime">
          </el-date-picker>
        </div>
      </el-container>
    </div>
    <div class="content-row">
      <el-container>
        <el-button type="primary" @click="requestData">筛选</el-button>
        <el-button type="danger" @click="clear">清空筛选</el-button>
        <el-button type="primary" @click="exportData">导出</el-button>
        <el-button type="primary" @click="dispatchGoods">批量发货</el-button>
        <el-button type="primary" @click="exportDispatchGoods">下载批量发货单</el-button>
      </el-container>
    </div>
    <!-- List -->
    <div>
      <el-tabs type="card" @tab-click="handleClick">
        <el-tab-pane label="全部"></el-tab-pane>
        <el-tab-pane label="未支付"></el-tab-pane>
        <el-tab-pane label="已支付"></el-tab-pane>
        <el-tab-pane label="待发货"></el-tab-pane>
        <el-tab-pane label="已发货"></el-tab-pane>
        <el-tab-pane label="支付超时"></el-tab-pane>
      </el-tabs>
      <el-table
        ref="multipleTable"
        :data="orderList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="商品" width="100" prop="name"></el-table-column>
        <el-table-column label="总价/数量" width="100" prop="price"></el-table-column>
        <el-table-column label="买家信息" width="100" prop="buyer"></el-table-column>
        <el-table-column label="交易时间" width="200" prop="time"></el-table-column>
        <el-table-column label="分销信息" width="100">
          <template #default="scope">
            <el-tag>{{ scope.row.role ? '经理' : '分销员' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.state ? 'success' : 'danger'">
              {{ scope.row.state ? '已完成' : '未完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" type="danger" @click="deleteItem(scope.$index)">删除</el-button>
            <el-button size="small" type="primary" @click="callUser(scope.row)">联系客户</el-button>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" width="100">
          <template #default="scope">
            <el-tag size="default">{{ scope.row.payType ? '微信' : '支付宝' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="来源" width="200" prop="source"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

🦋3.1 代码详细解析

1. 模块导入：

   • Mock 和 Tools 模拟数据和工具函数的导入。
   • Vue 和 Vue Router 的相关函数和 Element Plus 消息组件的导入。

2. 数据定义：

   • route 获取当前路由对象。
   • orderList 存储订单列表数据。
   • queryParam 存储筛选订单的参数。
   • multipleSelection 存储当前选中的订单对象。

3. 生命周期钩子：

   • onMounted：组件加载时获取当前订单数据。
   • onBeforeRouteUpdate：路由更新时刷新订单数据。

4. 方法定义：

   • requestData：模拟请求数据并更新订单列表。
   • handleClick：处理 Tab 切换事件，刷新数据。
   • clear：清空筛选项并刷新订单列表。
   • exportData：导出订单数据为 JSON 文件。
   • exportDispatchGoods：导出选中的发货单数据为 JSON 文件。
   • handleSelectionChange：处理多选事件，更新选中的订单。
   • dispatchGoods：模拟发货操作。
   • deleteItem：删除订单。
   • callUser：联系客户。

5. 模板定义：

   • 各种输入框和按钮，用于筛选和操作订单。
   • el-tabs 和 el-table 用于展示和操作订单列表。

上述代码中没有特别复杂的逻辑，并且每个方法的功能都有注释。运行工程后，你可以尝试体验订单管理的各个功能，虽然所需的数据都是模拟的，但整个交互流程已经非常完善。