feat(shop): 新增退货审批功能及页面
添加退货审批相关的API接口和前端页面，支持审批列表查询、新增、修改、删除及批量删除操作。页面包含搜索、重置、分页、查看详情等功能，提升退货审批流程的管理效率。
This commit is contained in:
dzq
parent
d8ae565b4a
commit
550df0a15b
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { http } from '@/utils/http';
|
||||||
|
|
||||||
|
export interface SearchReturnApprovalQuery extends BasePageQuery {
|
||||||
|
approvalId?: number;
|
||||||
|
orderId?: number;
|
||||||
|
goodsId?: number;
|
||||||
|
status?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 退货审批DTO */
|
||||||
|
/** 退货审批DTO */
|
||||||
|
export interface ReturnApprovalDTO {
|
||||||
|
/** 审批编号 */
|
||||||
|
approvalId?: number;
|
||||||
|
/** 关联订单ID */
|
||||||
|
orderId: number;
|
||||||
|
/** 关联商品ID */
|
||||||
|
goodsId: number;
|
||||||
|
/** 归还数量 */
|
||||||
|
returnQuantity: number;
|
||||||
|
/** 商品单价 */
|
||||||
|
goodsPrice: number;
|
||||||
|
/** 退还金额 */
|
||||||
|
returnAmount: number;
|
||||||
|
/** 归还图片路径数组 */
|
||||||
|
returnImages: string[];
|
||||||
|
/** 审核图片路径数组 */
|
||||||
|
auditImages: string[];
|
||||||
|
/** 归还说明 */
|
||||||
|
returnRemark?: string;
|
||||||
|
/** 审核说明 */
|
||||||
|
auditRemark?: string;
|
||||||
|
/** 审批状态(1待审核 2已通过 3已驳回) */
|
||||||
|
status: number;
|
||||||
|
statusStr: string;
|
||||||
|
creatorId?: number;
|
||||||
|
createTime?: Date;
|
||||||
|
updaterId?: number;
|
||||||
|
updateTime?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AddReturnApprovalCommand {
|
||||||
|
/** 关联订单ID */
|
||||||
|
orderId: number;
|
||||||
|
/** 关联商品ID */
|
||||||
|
goodsId: number;
|
||||||
|
/** 归还数量 */
|
||||||
|
returnQuantity: number;
|
||||||
|
/** 归还图片路径数组 */
|
||||||
|
returnImages: string[];
|
||||||
|
/** 归还说明 */
|
||||||
|
returnRemark?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateReturnApprovalCommand {
|
||||||
|
/** 审批编号 */
|
||||||
|
approvalId: number;
|
||||||
|
/** 归还数量 */
|
||||||
|
returnQuantity: number;
|
||||||
|
/** 审核图片路径数组 */
|
||||||
|
auditImages: string[];
|
||||||
|
/** 审核说明 */
|
||||||
|
auditRemark?: string;
|
||||||
|
/** 审批状态(1待审核 2已通过 3已驳回) */
|
||||||
|
status: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取退货审批列表 */
|
||||||
|
export const getReturnApprovalListApi = (params?: SearchReturnApprovalQuery) => {
|
||||||
|
return http.request<ResponseData<PageDTO<ReturnApprovalDTO>>>(
|
||||||
|
'get',
|
||||||
|
'/shop/returnApproval',
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 新增退货审批 */
|
||||||
|
export const addReturnApprovalApi = (data: AddReturnApprovalCommand) => {
|
||||||
|
return http.request<ResponseData<void>>('post', '/shop/returnApproval', {
|
||||||
|
data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 修改退货审批 */
|
||||||
|
export const updateReturnApprovalApi = (
|
||||||
|
approvalId: number,
|
||||||
|
data: UpdateReturnApprovalCommand
|
||||||
|
) => {
|
||||||
|
return http.request<ResponseData<void>>(
|
||||||
|
'put',
|
||||||
|
`/shop/returnApproval/${approvalId}`,
|
||||||
|
{ data }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 批量删除退货审批 */
|
||||||
|
export const deleteReturnApprovalApi = (approvalIds: (number | string)[]) => {
|
||||||
|
return http.request<ResponseData<void>>(
|
||||||
|
'delete',
|
||||||
|
`/shop/returnApproval/${approvalIds.join(',')}`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
import { getReturnApprovalListApi, deleteReturnApprovalApi, ReturnApprovalDTO } from "@/api/shop/approval";
|
||||||
|
import Delete from "@iconify-icons/ep/delete";
|
||||||
|
import Search from "@iconify-icons/ep/search";
|
||||||
|
import Refresh from "@iconify-icons/ep/refresh";
|
||||||
|
import View from "@iconify-icons/ep/view";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const tableRef = ref();
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
const searchFormParams = ref({
|
||||||
|
approvalId: null,
|
||||||
|
orderId: null,
|
||||||
|
goodsId: null,
|
||||||
|
status: null
|
||||||
|
});
|
||||||
|
|
||||||
|
// 分页参数
|
||||||
|
const pagination = ref({
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
total: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const dataList = ref<ReturnApprovalDTO[]>([]);
|
||||||
|
const multipleSelection = ref<number[]>([]);
|
||||||
|
const detailVisible = ref(false);
|
||||||
|
const currentDetail = ref<ReturnApprovalDTO>();
|
||||||
|
|
||||||
|
// 获取审批列表
|
||||||
|
const getList = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const { data } = await getReturnApprovalListApi({
|
||||||
|
...searchFormParams.value,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
pageNum: pagination.value.currentPage
|
||||||
|
});
|
||||||
|
dataList.value = data.rows.map(item => ({
|
||||||
|
...item,
|
||||||
|
statusStr: { 1: '待审核', 2: '已通过', 3: '已驳回' }[item.status]
|
||||||
|
}));
|
||||||
|
pagination.value.total = data.total;
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const onSearch = () => {
|
||||||
|
pagination.value.currentPage = 1;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const resetForm = () => {
|
||||||
|
formRef.value.resetFields();
|
||||||
|
onSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页变化
|
||||||
|
const handlePaginationChange = () => getList();
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
const handleBulkDelete = async () => {
|
||||||
|
if (multipleSelection.value.length === 0) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(
|
||||||
|
`确认删除选中的${multipleSelection.value.length}项审批记录？`,
|
||||||
|
"警告",
|
||||||
|
{ confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }
|
||||||
|
);
|
||||||
|
|
||||||
|
await deleteReturnApprovalApi(multipleSelection.value);
|
||||||
|
ElMessage.success("批量删除成功");
|
||||||
|
multipleSelection.value = [];
|
||||||
|
getList();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("删除取消或失败", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const showDetail = (row: ReturnApprovalDTO) => {
|
||||||
|
currentDetail.value = row;
|
||||||
|
detailVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
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="审批ID：" prop="approvalId">
|
||||||
|
<el-input v-model.number="searchFormParams.approvalId" placeholder="请输入审批ID" clearable class="!w-[180px]" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单ID：" prop="orderId">
|
||||||
|
<el-input v-model.number="searchFormParams.orderId" placeholder="请输入订单ID" clearable class="!w-[180px]" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品ID：" prop="goodsId">
|
||||||
|
<el-input v-model.number="searchFormParams.goodsId" placeholder="请输入商品ID" clearable class="!w-[180px]" />
|
||||||
|
</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-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">
|
||||||
|
<template #buttons>
|
||||||
|
<el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
|
||||||
|
@click="handleBulkDelete">
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="approvalId"
|
||||||
|
@selection-change="rows => multipleSelection = rows.map(r => r.approvalId)" border>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="审批ID" prop="approvalId" width="120" />
|
||||||
|
<el-table-column label="订单ID" prop="orderId" width="120" />
|
||||||
|
<el-table-column label="商品ID" prop="goodsId" width="120" />
|
||||||
|
<el-table-column label="退货数量" prop="returnQuantity" width="100" />
|
||||||
|
<el-table-column label="状态" prop="status" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="{ 1: 'warning', 2: 'success', 3: 'danger' }[row.status]">
|
||||||
|
{{ row.statusStr }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="120" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link :icon="useRenderIcon(View)" @click="showDetail(row)">
|
||||||
|
详情
|
||||||
|
</el-button>
|
||||||
|
<el-popconfirm :title="`确认删除审批记录#${row.approvalId}？`"
|
||||||
|
@confirm="() => deleteReturnApprovalApi([row.approvalId])">
|
||||||
|
<template #reference>
|
||||||
|
<el-button type="danger" link :icon="useRenderIcon(Delete)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</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="handlePaginationChange" @current-change="handlePaginationChange" />
|
||||||
|
</PureTableBar>
|
||||||
|
|
||||||
|
<!-- 详情弹窗 -->
|
||||||
|
<el-dialog v-model="detailVisible" title="审批详情" width="50%">
|
||||||
|
<el-descriptions :column="2" border>
|
||||||
|
<el-descriptions-item label="退货图片">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<el-image v-for="(img, index) in currentDetail?.returnImages" :key="index" :src="img"
|
||||||
|
:preview-src-list="currentDetail?.returnImages" :initial-index="index" fit="cover"
|
||||||
|
class="w-20 h-20 rounded" />
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="审核图片">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<el-image v-for="(img, index) in currentDetail?.auditImages" :key="index" :src="img"
|
||||||
|
:preview-src-list="currentDetail?.auditImages" :initial-index="index" fit="cover"
|
||||||
|
class="w-20 h-20 rounded" />
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="退货说明">{{ currentDetail?.returnRemark || '无' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="审核说明">{{ currentDetail?.auditRemark || '无' }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.el-image-viewer__wrapper) {
|
||||||
|
z-index: 9999 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue