feat(shop/order): 新增订单管理模块,包括前端页面和API接口

新增订单管理模块,包含订单列表展示、搜索、分页等功能。前端页面使用Vue3和Element Plus实现,后端API接口包括订单查询、分页处理等。同时添加了订单实体类、查询条件类以及控制器类,支持订单状态的筛选和支付状态的查询。
This commit is contained in:
dzq 2025-04-19 16:28:04 +08:00
parent 0b3138e5f0
commit cfb96f1af1
6 changed files with 358 additions and 0 deletions

View File

@ -0,0 +1,34 @@
package com.agileboot.domain.shop.order.query;
import cn.hutool.core.util.StrUtil;
import com.agileboot.common.core.page.AbstractPageQuery;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import java.util.Date;
import lombok.Data;
import lombok.EqualsAndHashCode;
@EqualsAndHashCode(callSuper = true)
@Data
public class SearchShopOrderQuery<T> extends AbstractPageQuery<T> {
private String orderNumber;
private Integer status;
private Integer payStatus;
private Date startTime;
private Date endTime;
@Override
public QueryWrapper<T> addQueryCondition() {
QueryWrapper<T> queryWrapper = new QueryWrapper<>();
queryWrapper
.like(StrUtil.isNotEmpty(orderNumber), "order_number", orderNumber)
.eq(status != null, "status", status)
.eq(payStatus != null, "pay_status", payStatus)
.between(startTime != null && endTime != null, "create_time", startTime, endTime)
.eq("deleted", 0)
.orderByDesc("create_time");
return queryWrapper;
}
}

View File

@ -0,0 +1,31 @@
package com.agileboot.admin.controller.shop;
import com.agileboot.common.core.base.BaseController;
import com.agileboot.common.core.dto.ResponseDTO;
import com.agileboot.common.core.page.PageDTO;
import com.agileboot.domain.shop.order.OrderApplicationService;
import com.agileboot.domain.shop.order.db.ShopOrderEntity;
import com.agileboot.domain.shop.order.query.SearchShopOrderQuery;
import io.swagger.v3.oas.annotations.Operation;
import lombok.RequiredArgsConstructor;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/shop/order")
@RequiredArgsConstructor
@Validated
public class ShopOrderController extends BaseController {
private OrderApplicationService orderApplicationService;
@Operation(summary = "订单列表")
// @PreAuthorize("@permission.has('shop:goods:list')")
@GetMapping("/list")
public ResponseDTO<PageDTO<ShopOrderEntity>> list(SearchShopOrderQuery<ShopOrderEntity> query) {
PageDTO<ShopOrderEntity> page = orderApplicationService.getOrderList(query);
return ResponseDTO.ok(page);
}
}

View File

@ -0,0 +1,94 @@
package com.agileboot.domain.shop.order.db;
import com.agileboot.common.core.base.BaseEntity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Getter;
import lombok.Setter;
/**
* <p>
* 商品订单表
* </p>
*
* @author valarchie
* @since 2025-03-10
*/
@Getter
@Setter
@TableName("shop_order")
@ApiModel(value = "ShopOrderEntity对象", description = "商品订单表")
public class ShopOrderEntity extends BaseEntity<ShopOrderEntity> {
private static final long serialVersionUID = 1L;
@ApiModelProperty("订单唯一ID")
@TableId(value = "order_id", type = IdType.AUTO)
private Long orderId;
@ApiModelProperty("ucid")
@TableField("ucid")
private String ucid;
@ApiModelProperty("openid")
@TableField("openid")
private String openid;
@ApiModelProperty("支付网关交易id")
@TableField("trade_id")
private String tradeId;
@ApiModelProperty("手机号码")
@TableField("mobile")
private String mobile;
@ApiModelProperty("企业微信用户ID或汇邦云用户ID")
@TableField("userid")
private String userid;
@ApiModelProperty("用户姓名")
@TableField("name")
private String name;
@ApiModelProperty("是否内部用户0否 1汇邦云用户 2企业微信用户")
@TableField("is_internal")
private Integer isInternal;
@ApiModelProperty("业务系统订单ID对接外部系统")
@TableField("biz_order_id")
private String bizOrderId;
@ApiModelProperty("订单总金额")
@TableField("total_amount")
private BigDecimal totalAmount;
@ApiModelProperty("订单状态1待付款 2已付款 3已发货 4已完成 5已取消")
@TableField("`status`")
private Integer status;
@ApiModelProperty("支付状态1未支付 2已支付 3退款中 4已退款")
@TableField("pay_status")
private Integer payStatus;
@ApiModelProperty("支付方式")
@TableField("payment_method")
private String paymentMethod;
@ApiModelProperty("支付时间")
@TableField("pay_time")
private Date payTime;
@Override
public Serializable pkVal() {
return this.orderId;
}
}

37
src/api/shop/order.ts Normal file
View File

@ -0,0 +1,37 @@
import { http } from "@/utils/http";
export interface OrderQuery extends BasePageQuery {
orderNumber?: string;
status?: number;
payStatus?: number;
startTime?: string;
endTime?: string;
}
export interface OrderDTO {
orderId: number;
ucid?: string;
openid?: string;
tradeId?: string;
mobile?: string;
userid?: string;
name?: string;
isInternal?: number;
bizOrderId?: string;
totalAmount: number;
status: number;
payStatus: number;
paymentMethod?: string;
payTime?: string;
}
export const getOrderListApi = (params?: OrderQuery) => {
return http.request<ResponseData<PageDTO<OrderDTO>>>("get", "/shop/order/list", {
params: {
...params,
// 处理时间范围参数格式
startTime: params?.startTime ? new Date(params.startTime).toISOString() : undefined,
endTime: params?.endTime ? new Date(params.endTime).toISOString() : undefined
}
});
};

View File

@ -9,6 +9,10 @@ import Refresh from "@iconify-icons/ep/refresh";
import View from "@iconify-icons/ep/view"; import View from "@iconify-icons/ep/view";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
defineOptions({
name: "Approval"
});
const formRef = ref(); const formRef = ref();
const tableRef = ref(); const tableRef = ref();

View File

@ -0,0 +1,158 @@
<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { ElMessage } from "element-plus";
defineOptions({
name: "ShopOrder"
});
const formRef = ref();
const tableRef = ref();
const searchFormParams = ref({
orderNumber: "",
status: null,
payStatus: null,
startTime: "",
endTime: ""
});
const pagination = ref({
pageSize: 10,
currentPage: 1,
total: 0
});
const loading = ref(false);
const dataList = ref<OrderDTO[]>([]);
const getList = async () => {
try {
loading.value = true;
const { data } = await getOrderListApi({
...searchFormParams.value,
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
dataList.value = data.rows;
pagination.value.total = data.total;
} finally {
loading.value = false;
}
};
const onSearch = () => {
pagination.value.currentPage = 1;
getList();
};
const resetForm = () => {
formRef.value.resetFields();
onSearch();
};
const onSizeChange = (val: number) => {
pagination.value.pageSize = val;
getList();
};
const onCurrentChange = (val: number) => {
pagination.value.currentPage = val;
getList();
};
getList();
</script>
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
<el-form-item label="时间范围:">
<el-date-picker v-model="searchFormParams.startTime" type="datetime" placeholder="开始时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
<span class="mx-2"></span>
<el-date-picker v-model="searchFormParams.endTime" type="datetime" placeholder="结束时间"
value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
</el-form-item>
<el-form-item label="订单编号:" prop="orderNumber">
<el-input v-model="searchFormParams.orderNumber" placeholder="请输入订单编号" clearable class="!w-[200px]" />
</el-form-item>
<el-form-item label="订单状态:" prop="status">
<el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
<el-option label="待付款" :value="1" />
<el-option label="已付款" :value="2" />
<el-option label="已发货" :value="3" />
<el-option label="已完成" :value="4" />
<el-option label="已取消" :value="5" />
</el-select>
</el-form-item>
<el-form-item label="支付状态:" prop="payStatus">
<el-select v-model="searchFormParams.payStatus" placeholder="请选择支付状态" clearable class="!w-[180px]">
<el-option label="未支付" :value="1" />
<el-option label="已支付" :value="2" />
<el-option label="退款中" :value="3" />
<el-option label="已退款" :value="4" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar title="订单列表" @refresh="getList">
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="orderId" border>
<el-table-column label="订单ID" prop="orderId" width="120" />
<el-table-column label="订单金额" prop="totalAmount" width="120">
<template #default="{ row }">{{ row.totalAmount }}</template>
</el-table-column>
<el-table-column label="订单状态" prop="status" width="120">
<template #default="{ row }">
<el-tag :type="row.status === 2 ? 'success' : row.status === 5 ? 'danger' : 'info'">
{{ { 1: '待付款', 2: '已付款', 3: '已发货', 4: '已完成', 5: '已取消' }[row.status] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="支付状态" prop="payStatus" width="120">
<template #default="{ row }">
<el-tag :type="row.payStatus === 2 ? 'success' : 'info'">
{{ { 1: '未支付', 2: '已支付', 3: '退款中', 4: '已退款' }[row.payStatus] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="支付方式" prop="paymentMethod" width="120" />
<el-table-column label="支付时间" prop="payTime" width="180">
<template #default="{ row }">
{{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}
</template>
</el-table-column>
<!-- <el-table-column label="操作" width="100" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleDetail(row)">
详情
</el-button>
</template>
</el-table-column> -->
</el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" />
</PureTableBar>
</div>
</template>
<style scoped>
.right-btn {
margin: 0;
}
</style>