Skip to content

Commit 4f81468

Browse files
author
puhui999
committed
订单售后列表：重构列表
1 parent 8239ca4 commit 4f81468

File tree

3 files changed

+277
-5
lines changed

3 files changed

+277
-5
lines changed

‎src/api/mall/trade/afterSale/index.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import request from '@/config/axios'
2+
3+
// 定义 TradeAfterSaleDTO 接口，映射 TradeAfterSaleDO
4+
export interface TradeAfterSaleVO {
5+
id?: number | null // 售后编号，主键自增
6+
no?: string // 售后单号
7+
status?: number | null // 退款状态
8+
way?: number | null // 售后方式
9+
type?: number | null // 售后类型
10+
userId?: number | null // 用户编号
11+
applyReason?: string // 申请原因
12+
applyDescription?: string // 补充描述
13+
applyPicUrls?: string[] // 补充凭证图片
14+
orderId?: number | null // 交易订单编号
15+
orderNo?: string // 订单流水号
16+
orderItemId?: number | null // 交易订单项编号
17+
spuId?: number | null // 商品 SPU 编号
18+
spuName?: string // 商品 SPU 名称
19+
skuId?: number | null // 商品 SKU 编号
20+
properties?: ProductPropertiesVO[] // 属性数组
21+
picUrl?: string // 商品图片
22+
count?: number | null // 退货商品数量
23+
auditTime?: Date // 审批时间
24+
auditUserId?: number | null // 审批人
25+
auditReason?: string // 审批备注
26+
refundPrice?: number | null // 退款金额，单位：分。
27+
payRefundId?: number | null // 支付退款编号
28+
refundTime?: Date // 退款时间
29+
logisticsId?: number | null // 退货物流公司编号
30+
logisticsNo?: string // 退货物流单号
31+
deliveryTime?: Date // 退货时间
32+
receiveTime?: Date // 收货时间
33+
receiveReason?: string // 收货备注
34+
}
35+
36+
export interface ProductPropertiesVO {
37+
propertyId?: number | null // 属性的编号
38+
propertyName?: string // 属性的名称
39+
valueId?: number | null //属性值的编号
40+
valueName?: string // 属性值的名称
41+
}
42+
43+
// 获得交易售后
44+
export function getAfterSale(id) {
45+
return request({
46+
url: '/trade/after-sale/get?id=' + id,
47+
method: 'get'
48+
})
49+
}
50+
51+
// 获得交易售后分页
52+
export const getAfterSalePage = async (params) => {
53+
return await request.get({ url: `/trade/after-sale/page`, params })
54+
}

‎src/views/mall/trade/afterSale/index.vue

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<template>
2+
<!-- 搜索 -->
3+
<ContentWrap>
4+
<el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
5+
<el-form-item label="商品名称" prop="spuName">
6+
<el-input
7+
v-model="queryParams.spuName"
8+
clearable
9+
placeholder="请输入商品 SPU 名称"
10+
@keyup.enter="handleQuery"
11+
/>
12+
</el-form-item>
13+
<el-form-item label="退款编号" prop="no">
14+
<el-input
15+
v-model="queryParams.no"
16+
clearable
17+
placeholder="请输入退款编号"
18+
@keyup.enter="handleQuery"
19+
/>
20+
</el-form-item>
21+
<el-form-item label="订单编号" prop="orderNo">
22+
<el-input
23+
v-model="queryParams.orderNo"
24+
clearable
25+
placeholder="请输入订单编号"
26+
@keyup.enter="handleQuery"
27+
/>
28+
</el-form-item>
29+
<el-form-item label="售后状态" prop="status">
30+
<el-select v-model="queryParams.status" clearable placeholder="请选择售后状态">
31+
<el-option label="全部" value="0" />
32+
<el-option
33+
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
34+
:key="dict.value"
35+
:label="dict.label"
36+
:value="dict.value"
37+
/>
38+
</el-select>
39+
</el-form-item>
40+
<el-form-item label="售后方式" prop="way">
41+
<el-select v-model="queryParams.way" clearable placeholder="请选择售后方式">
42+
<el-option
43+
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
44+
:key="dict.value"
45+
:label="dict.label"
46+
:value="dict.value"
47+
/>
48+
</el-select>
49+
</el-form-item>
50+
<el-form-item label="售后类型" prop="type">
51+
<el-select v-model="queryParams.type" clearable placeholder="请选择售后类型">
52+
<el-option
53+
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
54+
:key="dict.value"
55+
:label="dict.label"
56+
:value="dict.value"
57+
/>
58+
</el-select>
59+
</el-form-item>
60+
<el-form-item label="创建时间" prop="createTime">
61+
<el-date-picker
62+
v-model="queryParams.createTime"
63+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
64+
class="!w-280px"
65+
end-placeholder="自定义时间"
66+
start-placeholder="自定义时间"
67+
type="daterange"
68+
value-format="YYYY-MM-DD HH:mm:ss"
69+
/>
70+
</el-form-item>
71+
<el-form-item>
72+
<el-button @click="handleQuery">
73+
<Icon class="mr-5px" icon="ep:search" />
74+
搜索
75+
</el-button>
76+
<el-button @click="resetQuery">
77+
<Icon class="mr-5px" icon="ep:refresh" />
78+
重置
79+
</el-button>
80+
</el-form-item>
81+
</el-form>
82+
</ContentWrap>
83+
<ContentWrap>
84+
<el-tabs v-model="queryParams.status" @tab-click="tabClick">
85+
<el-tab-pane
86+
v-for="item in statusTabs"
87+
:key="item.label"
88+
:label="item.label"
89+
:name="item.value"
90+
/>
91+
</el-tabs>
92+
<!-- 列表 -->
93+
<el-table v-loading="loading" :data="list">
94+
<el-table-column align="center" label="退款编号" prop="no" />
95+
<el-table-column align="center" label="订单编号" prop="orderNo" />
96+
<!-- TODO 芋艿：未来要加个订单链接 -->
97+
<el-table-column align="center" label="商品信息" min-width="300" prop="spuName" width="auto">
98+
<!-- TODO @小红：样式不太对，辛苦改改 -->
99+
<!-- <div v-slot="{ row }" class="goods-info">-->
100+
<!-- <img :src="row.picUrl"/>-->
101+
<!-- <span class="ellipsis-2" :title="row.name">{{row.name}}</span>-->
102+
<!-- </div>-->
103+
</el-table-column>
104+
<el-table-column align="center" label="订单金额" prop="refundPrice">
105+
<template #default="scope">
106+
<span>￥{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
107+
</template>
108+
</el-table-column>
109+
<el-table-column align="center" label="买家" prop="user.nickname" />
110+
<!-- TODO 芋艿：未来要加个会员链接 -->
111+
<el-table-column align="center" label="申请时间" prop="createTime" width="180">
112+
<template #default="scope">
113+
<span>{{ formatDate(scope.row.createTime) }}</span>
114+
</template>
115+
</el-table-column>
116+
<el-table-column align="center" label="售后状态">
117+
<template #default="scope">
118+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="scope.row.status" />
119+
</template>
120+
</el-table-column>
121+
<el-table-column align="center" label="售后方式">
122+
<template #default="scope">
123+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
124+
</template>
125+
</el-table-column>
126+
<el-table-column align="center" fixed="right" label="操作" width="160">
127+
<template #default>
128+
<el-button icon="el-icon-thumb" link type="primary">处理退款</el-button>
129+
</template>
130+
</el-table-column>
131+
</el-table>
132+
<!-- 分页 -->
133+
<Pagination
134+
v-model:limit="queryParams.pageSize"
135+
v-model:page="queryParams.pageNo"
136+
:total="total"
137+
@pagination="getList"
138+
/>
139+
</ContentWrap>
140+
</template>
141+
<script lang="ts" setup>
142+
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
143+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
144+
import { formatDate } from '@/utils/formatTime'
145+
import { TabsPaneContext } from 'element-plus'
146+
import { cloneDeep } from 'lodash-es'
147+
148+
defineOptions({ name: 'TradeAfterSale' })
149+
150+
const loading = ref(true) // 列表的加载中
151+
const total = ref(0) // 列表的总页数
152+
const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
153+
const statusTabs = ref([
154+
{
155+
label: '全部',
156+
value: '0'
157+
}
158+
])
159+
const queryFormRef = ref() // 搜索的表单
160+
// 查询参数
161+
const queryParams = reactive({
162+
pageNo: 1,
163+
pageSize: 10,
164+
no: null,
165+
status: '0',
166+
orderNo: null,
167+
spuName: null,
168+
createTime: [],
169+
way: null,
170+
type: null
171+
})
172+
/** 查询列表 */
173+
const getList = async () => {
174+
loading.value = true
175+
try {
176+
const data = cloneDeep(queryParams)
177+
// 处理掉全部的状态，不传就是全部
178+
if (data.status === '0') {
179+
delete data.status
180+
}
181+
// 执行查询
182+
const res = (await AfterSaleApi.getAfterSalePage(data)) as AfterSaleApi.TradeAfterSaleVO[]
183+
list.value = res.list
184+
total.value = res.total
185+
} finally {
186+
loading.value = false
187+
}
188+
}
189+
/** 搜索按钮操作 */
190+
const handleQuery = async () => {
191+
queryParams.pageNo = 1
192+
await getList()
193+
}
194+
/** 重置按钮操作 */
195+
const resetQuery = () => {
196+
queryFormRef.value?.resetFields()
197+
handleQuery()
198+
}
199+
/** tab 切换 */
200+
const tabClick = async (tab: TabsPaneContext) => {
201+
queryParams.status = tab.paneName
202+
await getList()
203+
}
204+
205+
onMounted(async () => {
206+
await getList()
207+
// 设置 statuses 过滤
208+
for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
209+
statusTabs.value.push({
210+
label: dict.label,
211+
value: dict.value
212+
})
213+
}
214+
})
215+
</script>

‎src/views/mall/trade/order/index.vue

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,10 @@
146146
</template>
147147
<template #default="scope">
148148
<el-table
149+
:border="true"
149150
:data="scope.row.items"
150151
:header-cell-style="headerStyle"
151152
:span-method="spanMethod"
152-
:border="true"
153153
style="width: 100%"
154154
>
155155
<el-table-column min-width="300" prop="spuName">
@@ -173,8 +173,8 @@
173173
:value="scope.row.payChannelCode"
174174
class="mr-20px"
175175
/>
176-
<v-else class="mr-20px" v-else>未支付</v-else>
177-
<span class="mr-20px" v-if="scope.row.payTime">
176+
<v-else v-else class="mr-20px">未支付</v-else>
177+
<span v-if="scope.row.payTime" class="mr-20px">
178178
支付时间：{{ formatDate(scope.row.payTime) }}
179179
</span>
180180
<span>订单类型：</span>
@@ -280,7 +280,8 @@
280280
发货
281281
</el-dropdown-item>
282282
<el-dropdown-item command="remark">
283-
<Icon icon="ep:chat-line-square" /> 备注
283+
<Icon icon="ep:chat-line-square" />
284+
备注
284285
</el-dropdown-item>
285286
</el-dropdown-menu>
286287
</template>
@@ -306,7 +307,7 @@
306307
<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
307308
</template>
308309

309-
<script lang="ts" name="Order" setup>
310+
<script lang="ts" setup>
310311
import type { FormInstance, TableColumnCtx } from 'element-plus'
311312
import OrderDeliveryForm from './components/OrderDeliveryForm.vue'
312313
import OrderUpdateRemarkForm from './components/OrderUpdateRemarkForm.vue'
@@ -318,6 +319,8 @@ import { floatToFixed2 } from '@/utils'
318319
import { createImageViewer } from '@/components/ImageViewer'
319320
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
320321
322+
defineOptions({ name: 'TradeOrder' })
323+
321324
const { currentRoute, push } = useRouter() // 路由跳转
322325
323326
const loading = ref(true) // 列表的加载中

0 commit comments

Comments
 (0)