Skip to content

Commit 04d88ce

Browse files
author
puhui999
committed
订单列表：自定义列抽离封装为组件
1 parent d1a3fe5 commit 04d88ce

File tree

4 files changed

+281
-248
lines changed

4 files changed

+281
-248
lines changed

‎src/api/mall/trade/delivery/pickUpStore/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const getDeliveryPickUpStore = async (id: number) => {
2626
}
2727

2828
// 查询自提门店精简列表
29-
export const getListAllSimple = async () => {
29+
export const getListAllSimple = async (): Promise<DeliveryPickUpStoreVO[]> => {
3030
return await request.get({ url: '/trade/delivery/pick-up-store/list-all-simple' })
3131
}
3232

‎src/views/mall/trade/order/components/OrderTableColumn.vue

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<template>
2+
<el-table-column class-name="order-table-col">
3+
<template #header>
4+
<!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
5+
<div class="flex items-center" style="width: 100%">
6+
<div class="ml-100px mr-200px">商品信息</div>
7+
<div class="mr-60px">单价(元)/数量</div>
8+
<div class="mr-60px">售后状态</div>
9+
<div class="mr-60px">实付金额(元)</div>
10+
<div class="mr-60px">买家/收货人</div>
11+
<div class="mr-60px">配送方式</div>
12+
<div class="mr-60px">订单状态</div>
13+
<div class="mr-60px">操作</div>
14+
</div>
15+
</template>
16+
<template #default="scope">
17+
<el-table
18+
:border="true"
19+
:data="scope.row.items"
20+
:header-cell-style="headerStyle"
21+
:span-method="spanMethod"
22+
style="width: 100%"
23+
>
24+
<el-table-column class-name="table-col-1" min-width="300" prop="spuName">
25+
<template #header>
26+
<div
27+
class="flex items-center"
28+
style="width: 100%; height: 35px; background-color: #f7f7f7"
29+
>
30+
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
31+
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
32+
<span>订单来源：</span>
33+
<dict-tag :type="DICT_TYPE.TERMINAL" :value="scope.row.terminal" class="mr-20px" />
34+
<span>支付方式：</span>
35+
<dict-tag
36+
v-if="scope.row.payChannelCode"
37+
:type="DICT_TYPE.PAY_CHANNEL_CODE"
38+
:value="scope.row.payChannelCode"
39+
class="mr-20px"
40+
/>
41+
<span v-else class="mr-20px">未支付</span>
42+
<span v-if="scope.row.payTime" class="mr-20px">
43+
支付时间：{{ formatDate(scope.row.payTime) }}
44+
</span>
45+
<span>订单类型：</span>
46+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
47+
</div>
48+
</template>
49+
<template #default="{ row }">
50+
<div class="flex items-center">
51+
<el-image
52+
:src="row.picUrl"
53+
class="mr-10px h-30px w-30px"
54+
@click="imagePreview(row.picUrl)"
55+
/>
56+
<span class="mr-10px">{{ row.spuName }}</span>
57+
<el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
58+
{{ property.propertyName }}: {{ property.valueName }}
59+
</el-tag>
60+
</div>
61+
</template>
62+
</el-table-column>
63+
<el-table-column class-name="table-col-2" label="商品原价*数量" prop="price" width="150">
64+
<template #default="{ row }">
65+
{{ floatToFixed2(row.price) }} 元 / {{ row.count }}
66+
</template>
67+
</el-table-column>
68+
<el-table-column
69+
class-name="table-col-3"
70+
label="售后状态"
71+
prop="afterSaleStatus"
72+
width="120"
73+
>
74+
<template #default="{ row }">
75+
<dict-tag
76+
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
77+
:value="row.afterSaleStatus"
78+
/>
79+
</template>
80+
</el-table-column>
81+
<el-table-column
82+
align="center"
83+
class-name="table-col-4"
84+
label="实际支付"
85+
min-width="120"
86+
prop="payPrice"
87+
>
88+
<template #default>
89+
{{ floatToFixed2(scope.row.payPrice) + '元' }}
90+
</template>
91+
</el-table-column>
92+
<el-table-column class-name="table-col-5" label="买家/收货人" min-width="160">
93+
<template #default>
94+
<!-- 快递发货 -->
95+
<div
96+
v-if="scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type"
97+
class="flex flex-col"
98+
>
99+
<span>买家：{{ scope.row.user.nickname }}</span>
100+
<span>
101+
收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
102+
{{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
103+
</span>
104+
</div>
105+
<!-- 自提 -->
106+
<div
107+
v-if="scope.row.deliveryType === DeliveryTypeEnum.PICK_UP.type"
108+
class="flex flex-col"
109+
>
110+
<span>
111+
门店名称：
112+
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
113+
</span>
114+
<span>
115+
门店手机：
116+
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
117+
</span>
118+
<span>
119+
自提门店:
120+
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress }}
121+
</span>
122+
</div>
123+
</template>
124+
</el-table-column>
125+
<el-table-column align="center" class-name="table-col-6" label="配送方式" width="120">
126+
<template #default>
127+
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
128+
</template>
129+
</el-table-column>
130+
<el-table-column align="center" class-name="table-col-7" label="订单状态" width="120">
131+
<template #default>
132+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
133+
</template>
134+
</el-table-column>
135+
<el-table-column
136+
align="center"
137+
class-name="table-col-8"
138+
fixed="right"
139+
label="操作"
140+
width="160"
141+
>
142+
<template #default>
143+
<slot :row="scope.row"></slot>
144+
</template>
145+
</el-table-column>
146+
</el-table>
147+
</template>
148+
</el-table-column>
149+
</template>
150+
<script lang="ts" setup>
151+
import { DICT_TYPE } from '@/utils/dict'
152+
import { DeliveryTypeEnum } from '@/utils/constants'
153+
import { formatDate } from '@/utils/formatTime'
154+
import { floatToFixed2 } from '@/utils'
155+
import * as TradeOrderApi from '@/api/mall/trade/order'
156+
import { OrderVO } from '@/api/mall/trade/order'
157+
import { TableColumnCtx } from 'element-plus'
158+
import { createImageViewer } from '@/components/ImageViewer'
159+
import type { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
160+
161+
defineOptions({ name: 'OrderTableColumn' })
162+
163+
const props = defineProps<{
164+
list: OrderVO[]
165+
pickUpStoreList: DeliveryPickUpStoreVO[]
166+
}>()
167+
168+
const headerStyle = ({ row, columnIndex }: any) => {
169+
// 表头第一行第一列占 8
170+
if (columnIndex === 0) {
171+
row[columnIndex].colSpan = 8
172+
} else {
173+
// 其余的不要
174+
row[columnIndex].colSpan = 0
175+
return {
176+
display: 'none'
177+
}
178+
}
179+
}
180+
181+
interface SpanMethodProps {
182+
row: TradeOrderApi.OrderItemRespVO
183+
column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
184+
rowIndex: number
185+
columnIndex: number
186+
}
187+
188+
type spanMethodResp = number[] | { rowspan: number; colspan: number } | undefined
189+
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethodResp => {
190+
const len = props.list.find(
191+
(order) => order.items?.findIndex((item) => item.id === row.id) !== -1
192+
)?.items?.length
193+
// 要合并的列，从零开始
194+
const colIndex = [3, 4, 5, 6, 7]
195+
if (colIndex.includes(columnIndex)) {
196+
// 除了第一行其余的不要
197+
if (rowIndex !== 0) {
198+
return {
199+
rowspan: 0,
200+
colspan: 0
201+
}
202+
}
203+
// 动态合并行
204+
return {
205+
rowspan: len!,
206+
colspan: 1
207+
}
208+
}
209+
}
210+
211+
/** 商品图预览 */
212+
const imagePreview = (imgUrl: string) => {
213+
createImageViewer({
214+
urlList: [imgUrl]
215+
})
216+
}
217+
</script>
218+
<style lang="scss" scoped>
219+
:deep(.order-table-col > .cell) {
220+
padding: 0;
221+
}
222+
</style>

‎src/views/mall/trade/order/components/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import OrderTableColumn from './OrderTableColumn.vue'
2+
3+
export { OrderTableColumn }

0 commit comments

Comments
 (0)