后台管理 -> 订单管理完成；nginx配置文件限制ip并发数

frontend/components.d.ts

@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Header: typeof import('./src/components/header.vue')['default']

frontend/src/api/shop-order.js

@@ -0,0 +1,64 @@
+import send_request from '../utils/send_request';
+
+/**
+ * 获取订单列表
+ * @returns
+ */
+export function getOrderList(params) {
+    return send_request({
+        url: '/shop/order/manage/getOrderList',
+        method: 'GET',
+        params: params,
+    });
+};
+
+/**
+ * 获取订单详情
+ * @returns
+ */
+export function getOrderDetail(params) {
+    return send_request({
+        url: '/shop/order/miniprogram/orderDetail',
+        method: 'GET',
+        params: params,
+    });
+};
+
+/**
+ * 订单发货
+ * @returns
+ */
+export function deliverOrder(params) {
+    console.log("params", params)
+    return send_request({
+        url: '/shop/order/manage/deliverOrder',
+        method: 'POST',
+        useQS: true,
+        params: params,
+    });
+};
+
+/**
+ * 关闭订单
+ * @returns
+ */
+export function cancelOrder(params) {
+    return send_request({
+        url: '/shop/order/manage/cancelOrder',
+        method: 'POST',
+        useQS: true,
+        params: params,
+    });
+};
+
+/**
+ * 导出订单列表
+ * @returns
+ */
+export function exportOrderList(params) {
+    return send_request({
+        url: '/shop/order/manage/exportOrderList',
+        method: 'GET',
+        params: params,
+    });
+};

frontend/src/components/manage-list.vue

@@ -56,16 +56,27 @@
                         </el-tooltip>
                     </template>
                 </el-table-column>
-                <el-table-column label="操作" width="220" align="center" v-if="props.editFunc || props.deleteFunc">
+                <el-table-column label="操作" width="220" align="center"
+                    v-if="props.editFunc || props.deleteFunc || props.customEditHandle">
                     <template #default="scope">
-                        <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
-                            v-permiss="props.editPermiss" v-if="props.editFunc">
-                            编辑
-                        </el-button>
-                        <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
-                            v-permiss="props.editPermiss" v-if="props.deleteFunc">
-                            删除
-                        </el-button>
+                        <template v-if="props.customEditHandle">
+                            <el-button text :icon="List"
+                                @click="props.customEditHandle((scope as any).$index, (scope as any).row, getData)"
+                                v-permiss="props.editPermiss">
+                                管理
+                            </el-button>
+                        </template>
+                        <template v-else>
+                            <el-button text :icon="Edit" @click="handleEdit((scope as any).$index, (scope as any).row)"
+                                v-permiss="props.editPermiss" v-if="props.editFunc">
+                                编辑
+                            </el-button>
+                            <el-button text :icon="Delete" class="red"
+                                @click="handleDelete((scope as any).$index, (scope as any).row)"
+                                v-permiss="props.editPermiss" v-if="props.deleteFunc">
+                                删除
+                            </el-button>
+                        </template>
                     </template>
                 </el-table-column>
             </el-table>
@@ -141,7 +152,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
 import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
-import { Delete, Edit, Search, Plus, Filter, Download } from '@element-plus/icons-vue';
+import { Delete, Edit, Search, Plus, Filter, Download, List } from '@element-plus/icons-vue';
 import * as xlsx from 'xlsx';
 import Mock from 'mockjs';
 import ImageUpload from './image-upload.vue';
@@ -176,6 +187,12 @@ const props = defineProps({
     'editPermiss': {
         type: String,
         required: true,
+    },
+
+    // 自定义修改按钮点击事件
+    'customEditHandle': {
+        type: Function,
+        required: false,
     }
 })
 
@@ -540,7 +557,7 @@ const handleExport = async () => {
         // 数据部分
         let excelList = dataList.map((row: any) => {
             // 通过翻译前的 key 拿数据
-            return fieldNameList.map((field: any) => String(row[field]))
+            return fieldNameList.map((field: any) => String(row[field] || ""))
         })
         excelList.unshift(firstRow) // 插入表头
 

frontend/src/components/sidebar.vue

@@ -91,6 +91,11 @@ const items = [
                 title: '商品管理',
                 permiss: 'shop-good-setting',
             },
+            {
+                index: '/shop-order-setting',
+                title: '订单管理',
+                permiss: 'shop-order-setting',
+            },
         ],
     },
     {

frontend/src/router/index.ts

@@ -84,6 +84,15 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import('../views/shop-good-setting.vue'),
             },
+            {
+                path: '/shop-order-setting',
+                name: 'shop-order-setting',
+                meta: {
+                    title: '订单管理',
+                    permiss: 'shop-order-setting',
+                },
+                component: () => import('../views/shop-order-setting.vue'),
+            },
 
 
             {

frontend/src/store/permiss.ts

@@ -25,6 +25,7 @@ export const usePermissStore = defineStore('permiss', {
                 "shop",
                 "shop-cate-setting",
                 "shop-good-setting",
+                "shop-order-setting",
 
                 "privilege",
                 "privilege-user-setting",
@@ -46,6 +47,7 @@ export const usePermissStore = defineStore('permiss', {
                 "shop",
                 "shop-cate-setting",
                 "shop-good-setting",
+                "shop-order-setting",
 
                 "privilege",
                 "privilege-user-setting",

frontend/src/views/shop-order-setting.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="container">
+        <manageList :list-func="shopOrderApi.getOrderList" :custom-edit-handle="editHandle"
+            :export-func="shopOrderApi.exportOrderList" edit-permiss="shop-order-setting" />
+
+        <!-- 新增 / 编辑弹出框 -->
+        <el-dialog title="管理订单" v-model="visible" style="width: 60%; min-width: 280px;">
+            <el-row>
+                <el-col :span="12">
+                    <p class="line-height">
+                        <span class="row-index">订单ID</span>
+                        {{ orderDetail.id || "" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">订单状态</span>
+                        <el-tag effect="plain" round>{{ orderDetail.orderStatus || "" }}</el-tag>
+                        {{ orderDetail.orderStatusCode || "" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">下单用户ID</span>
+                        {{ orderDetail.userId || "" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">订单价格</span>
+                        {{ orderDetail.orderPrice ? ('￥' + orderDetail.orderPrice) : "-" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">下单时间</span>
+                        {{ orderDetail.orderDate || "-" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">订单取消时间</span>
+                        {{ orderDetail.cancelDate || "-" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">订单支付时间</span>
+                        {{ orderDetail.payDate || "-" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">订单发货时间</span>
+                        {{ orderDetail.shipDate || "-" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">订单送达时间</span>
+                        {{ orderDetail.deliverDate || "-" }}
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">运单号</span>
+                        <template
+                            v-if="orderDetail.orderStatusCode != 'Processing' && orderDetail.orderStatusCode != 'Shipped'">
+                            {{ orderDetail.expressId || "-" }}
+                        </template>
+                        <el-input v-else v-model="shippingInfo.expressId" placeholder="Please input" />
+                    </p>
+                    <p class="line-height">
+                        <span class="row-index">发货备注</span>
+                        <template
+                            v-if="orderDetail.orderStatusCode != 'Processing' && orderDetail.orderStatusCode != 'Shipped'">
+                            {{ orderDetail.comment || "-" }}
+                        </template>
+                        <el-input v-else v-model="shippingInfo.comment" placeholder="Please input" />
+                    </p>
+                </el-col>
+                <el-col :span="12">
+                    <p style="margin-bottom: 20px;">该订单中包含如下商品</p>
+                    <div style="max-height:50vh; overflow-y: scroll;">
+                        <el-card class="box-card" v-for="i in orderItem" :key="i.goodId"
+                            style="--el-card-padding: 10px; margin-bottom: 8px;">
+                            <div style="display: grid; grid-template-columns: 50px 1fr 60px; gap: 15px;">
+                                <img :src="i.good.picUrl" style="width: 60px; height: 60px;" />
+                                <div style="place-self: center left;">
+                                    <p>{{ i.good.goodsName }}</p>
+                                    <p style="color: grey; font-size: 12px;">商品ID: {{ i.goodId }}</p>
+                                </div>
+                                <div style="place-self: center; font-size: 16px;">{{ i.goodCount }} {{ i.good.unit }}</div>
+                            </div>
+                        </el-card>
+                    </div>
+                </el-col>
+            </el-row>
+            <!-- 订单状态：PENDING("Pending", "等待确认"), -->
+            <!-- 订单状态：PROCESSING("Processing", "已支付，等待发货中"), -->
+            <!-- 订单状态：SHIPPED("Shipped", "已发货，等待确认收货"), -->
+            <!-- 订单状态：DELIVERED("Delivered", "已送达"), -->
+            <!-- 订单状态：CANCELLED("Cancelled", "已取消"); -->
+            <!-- 该订单已被取消 -->
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button
+                        v-if="orderDetail.orderStatusCode == 'Processing' || orderDetail.orderStatusCode == 'Shipped'"
+                        type="primary" @click="saveEdit">保存发货信息</el-button>
+                    <el-button @click="visible = false">关 闭</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import manageList from '../components/manage-list.vue';
+import * as shopOrderApi from '../api/shop-order';
+import { ref, reactive, onMounted, computed } from 'vue';
+import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
+import { Delete, Edit, Search, Plus, Filter, Download } from '@element-plus/icons-vue';
+
+const visible: any = ref(false);
+
+const orderDetail = ref({} as any);
+const orderItem = ref([] as any);
+
+const shippingInfo = ref({} as any); // 发货信息
+
+let completeCallback: Function = () => { };
+
+const editHandle = async function (tabIndex: number, row: any, refreshFunc: Function) {
+    console.log("tabIndex", tabIndex)
+    console.log("orderDetail", row)
+    orderDetail.value = row // 订单详情
+
+    shippingInfo.value.expressId = row.expressId
+    shippingInfo.value.comment = row.comment
+
+    completeCallback = refreshFunc
+    visible.value = true
+
+    shopOrderApi.getOrderDetail({
+        orderId: row.id
+    }).then(function (data) {
+        let orderGoods = {}
+        data.goods.forEach((good: any) => {
+            orderGoods[good.id] = good
+        });
+
+        orderItem.value = data.orderItem.map((item: any) => {
+            item.good = orderGoods[item.goodId]
+            return item
+        })
+
+        console.log("orderItem", orderItem.value)
+    })
+}
+
+const saveEdit = function () {
+    // 保存发货信息
+    shopOrderApi.deliverOrder({
+        orderId: orderDetail.value.id,
+        ...shippingInfo.value
+    }).then(function (data) {
+        ElMessage.success({ message: data })
+        visible.value = false
+        completeCallback()
+    })
+}
+</script>
+
+<style>
+.line-height {
+    line-height: 2.7em;
+}
+
+.row-index {
+    width: 110px;
+    display: inline-block;
+}
+</style>