zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:共富商城退款

Browse Source
This commit is contained in:
dzc committed 2025-10-31 17:55:05 +08:00
1 parent d1a4e1373e
commit f6b2a86ff9
1 file changed
+295 -262
Download Patch File Download Diff File Expand all files Collapse all files
src/views/hard/hard-order/components/admin-refund-dialog/table.vue
+295 -262
View File
@@ -1,139 +1,167 @@
<template> <template>
<div class="refund-table"> <div class="refund-table">
<el-descriptions :column="1" title="购物车商品"> <el-descriptions :column="1" title="购物车商品">
<el-descriptions-item labelClassName="no-colon"> <el-descriptions-item labelClassName="no-colon">
<el-table :data="state.dataList" border :cell-style="tableStyle.cellStyle" <el-table
:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle" show-summary :data="state.dataList"
:summary-method="getSummaries"> border
<el-table-column label="商品名" width="120" align="center" prop="productName" /> :cell-style="tableStyle.cellStyle"
<el-table-column label="商品图片" width="120" align="center" prop="code"> :header-cell-style="tableStyle.headerCellStyle"
<template #default="{ row }"> @sort-change="sortChangeHandle"
<preview-image v-if="row.productPic" :src="row.productPic" /> show-summary
<div v-else class="w-[60px] h-[60px]" /> :summary-method="getSummaries"
</template> >
</el-table-column> <el-table-column label="商品名" width="120" align="center" prop="productName" />
<el-table-column width="120" label="商品类型" align="center" prop="productName"> <el-table-column label="商品图片" width="120" align="center" prop="code">
<template #default="{ row }"> <template #default="{ row }">
<dict-tag :options="supermarket_nature" :value="row.productNature" /> <preview-image v-if="row.productPic" :src="row.productPic" />
</template> <div v-else class="w-[60px] h-[60px]" />
</el-table-column> </template>
<el-table-column label="商品价格" align="center" prop="productPrice"> </el-table-column>
<template #default="{ row }"> <el-table-column width="120" label="商品类型" align="center" prop="productName">
<span>{{ displayPrice(row.productPrice) }}</span> <template #default="{ row }">
</template> <dict-tag :options="supermarket_nature" :value="row.productNature" />
</el-table-column> </template>
<el-table-column label="商品数量" align="center" prop="productCount"> </el-table-column>
<template #default="{ row }"> <el-table-column label="商品价格" align="center" prop="productPrice">
<span v-if="row.productNature == 1">{{ row.productCount }}</span> <template #default="{ row }">
<span v-if="row.productNature == 2">{{ displayWeight(row.productWeight) }}kg</span> <span>{{ displayPrice(row.productPrice) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="商品总额" align="center" prop="totalPrice"> <el-table-column label="商品数量" align="center" prop="productCount">
<template #default="{ row }"> <template #default="{ row }">
<span>{{ displayPrice(row.totalPrice) }}</span> <span v-if="row.productNature == 1">{{ row.productCount }}</span>
</template> <span v-if="row.productNature == 2">{{ displayWeight(row.productWeight) }}kg</span>
</el-table-column> </template>
</el-table> </el-table-column>
</el-descriptions-item> <el-table-column label="商品总额" align="center" prop="totalPrice">
</el-descriptions> <template #default="{ row }">
<span>{{ displayPrice(row.totalPrice) }}</span>
</template>
</el-table-column>
</el-table>
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1" title="已退款商品"> <el-descriptions :column="1" title="已退款商品">
<el-descriptions-item labelClassName="no-colon"> <el-descriptions-item labelClassName="no-colon">
<el-table :data="refundSuccessList" border :cell-style="tableStyle.cellStyle" <el-table
:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle" show-summary :data="refundSuccessList"
:summary-method="getSummaries"> border
<el-table-column label="商品名" width="120" align="center" prop="productName" /> :cell-style="tableStyle.cellStyle"
<el-table-column label="商品图片" width="120" align="center" prop="code"> :header-cell-style="tableStyle.headerCellStyle"
<template #default="{ row }"> @sort-change="sortChangeHandle"
<preview-image v-if="row.productPic" :src="row.productPic" /> show-summary
<div v-else class="w-[60px] h-[60px]" /> :summary-method="getSummaries"
</template> >
</el-table-column> <el-table-column label="商品名" width="120" align="center" prop="productName" />
<el-table-column label="商品类型" width="120" align="center" prop="productName"> <el-table-column label="商品图片" width="120" align="center" prop="code">
<template #default="{ row }"> <template #default="{ row }">
<dict-tag :options="supermarket_nature" :value="row.productNature" /> <preview-image v-if="row.productPic" :src="row.productPic" />
</template> <div v-else class="w-[60px] h-[60px]" />
</el-table-column> </template>
<el-table-column label="商品价格" align="center" prop="productPrice"> </el-table-column>
<template #default="{ row }"> <el-table-column label="商品类型" width="120" align="center" prop="productName">
<span>{{ displayPrice(row.productPrice) }}</span> <template #default="{ row }">
</template> <dict-tag :options="supermarket_nature" :value="row.productNature" />
</el-table-column> </template>
<el-table-column label="已退款商品数量" align="center" prop="productCount"> </el-table-column>
<template #default="{ row }"> <el-table-column label="商品价格" align="center" prop="productPrice">
<span v-if="row.productNature == 1">{{ row.productCount }}</span> <template #default="{ row }">
<span v-if="row.productNature == 2">{{ displayWeight(row.productWeight) }}kg</span> <span>{{ displayPrice(row.productPrice) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="已退款商品总额" align="center" prop="totalPrice"> <el-table-column label="已退款商品数量" align="center" prop="productCount">
<template #default="{ row }"> <template #default="{ row }">
<span>{{ displayPrice(row.totalPrice) }}</span> <span v-if="row.productNature == 1">{{ row.productCount }}</span>
</template> <span v-if="row.productNature == 2">{{ displayWeight(row.productWeight) }}kg</span>
</el-table-column> </template>
</el-table> </el-table-column>
</el-descriptions-item> <el-table-column label="已退款商品总额" align="center" prop="totalPrice">
</el-descriptions> <template #default="{ row }">
<span>{{ displayPrice(row.totalPrice) }}</span>
</template>
</el-table-column>
</el-table>
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1" title="退款商品"> <el-descriptions :column="1" title="退款商品">
<template #extra> <template #extra>
<el-button type="primary" text @click="handleAllRefund">全部退款</el-button> <el-button type="primary" text @click="handleAllRefund">全部退款</el-button>
</template> </template>
<el-descriptions-item labelClassName="no-colon"> <el-descriptions-item labelClassName="no-colon">
<el-table :data="disposeDataList" border :cell-style="tableStyle.cellStyle" <el-table
:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle" show-summary :data="disposeDataList"
:summary-method="getSummaries"> border
<el-table-column label="商品名" width="120" align="center" prop="productName" /> :cell-style="tableStyle.cellStyle"
<el-table-column label="商品图片" width="120" align="center" prop="code"> :header-cell-style="tableStyle.headerCellStyle"
<template #default="{ row }"> @sort-change="sortChangeHandle"
<preview-image v-if="row.productPic" :src="row.productPic" /> show-summary
<div v-else class="w-[60px] h-[60px]" /> :summary-method="getSummaries"
</template> >
</el-table-column> <el-table-column label="商品名" width="120" align="center" prop="productName" />
<el-table-column label="商品类型" width="120" align="center" prop="productName"> <el-table-column label="商品图片" width="120" align="center" prop="code">
<template #default="{ row }"> <template #default="{ row }">
<dict-tag :options="supermarket_nature" :value="row.productNature" /> <preview-image v-if="row.productPic" :src="row.productPic" />
</template> <div v-else class="w-[60px] h-[60px]" />
</el-table-column> </template>
<el-table-column label="商品价格" align="center" prop="productPrice"> </el-table-column>
<template #default="{ row }"> <el-table-column label="商品类型" width="120" align="center" prop="productName">
<span>{{ displayPrice(row.productPrice) }}</span> <template #default="{ row }">
</template> <dict-tag :options="supermarket_nature" :value="row.productNature" />
</el-table-column> </template>
<el-table-column label="退款商品数量" align="center" prop="refundProductCount"> </el-table-column>
<template #default="{ row }"> <el-table-column label="商品价格" align="center" prop="productPrice">
<div class="w-full h-full"> <template #default="{ row }">
<!-- start 重量商品 start --> <span>{{ displayPrice(row.productPrice) }}</span>
<el-input-number size="small" v-if="row.productNature == 2" </template>
v-model="row.refundProductWeight" :min="0" :max="row.maxRefundProductWeight" </el-table-column>
:step="0.01" @change="handleRefundProductCount($event, row)" /> <el-table-column label="退款商品数量" align="center" prop="refundProductCount">
<!-- end 重量商品 end --> <template #default="{ row }">
<div class="w-full h-full">
<!-- start 重量商品 start -->
<el-input-number
size="small"
v-if="row.productNature == 2"
v-model="row.refundProductWeight"
:min="0"
:max="row.maxRefundProductWeight"
:step="0.01"
@change="handleRefundProductCount($event, row)"
/>
<!-- end 重量商品 end -->
<!-- start 数量商品 start --> <!-- start 数量商品 start -->
<el-input-number size="small" v-else v-model="row.refundProductCount" :min="0" <el-input-number
:max="row.maxRefundProductCount" @change="handleRefundProductCount($event, row)" /> size="small"
<!-- end 数量商品 end --> v-else
<div class="h-4"> v-model="row.refundProductCount"
<div v-if="row.productNature == 1 && row.refundProductCount >= row.maxRefundProductCount" :min="0"
class="color-danger text-xs"> :max="row.maxRefundProductCount"
该商品已全部退款 @change="handleRefundProductCount($event, row)"
</div> />
<div v-if="row.productNature == 2 && row.refundProductWeight >= row.maxRefundProductWeight" <!-- end 数量商品 end -->
class="color-danger text-xs"> <div class="h-4">
该商品已全部退款 <div v-if="row.productNature == 1 && row.refundProductCount >= row.maxRefundProductCount" class="color-danger text-xs">
</div> 该商品已全部退款
</div> </div>
</div> <div v-if="row.productNature == 2 && row.refundProductWeight >= row.maxRefundProductWeight" class="color-danger text-xs">
</template> 该商品已全部退款
</el-table-column> </div>
<el-table-column label="退款商品总额" align="center" prop="refundTotalPrice"> </div>
<template #default="{ row }"> </div>
<span>{{ displayPrice(row.refundTotalPrice) }}</span> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="退款商品总额" align="center" prop="refundTotalPrice">
</el-table> <template #default="{ row }">
</el-descriptions-item> <span>{{ displayPrice(row.refundTotalPrice) }}</span>
</el-descriptions> </template>
</div> </el-table-column>
</el-table>
</el-descriptions-item>
</el-descriptions>
</div>
</template> </template>
<script setup lang="ts" name="RefundTable"> <script setup lang="ts" name="RefundTable">
@@ -146,9 +174,9 @@ import { displayPrice, displayWeight } from "/@/utils/formatMoney"
import * as hardCar from "/@/api/hard/hard-car" import * as hardCar from "/@/api/hard/hard-car"
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
createdIsNeed: false, createdIsNeed: false,
queryForm: {}, queryForm: {},
pageList: hardCar.getCarByOrderId, pageList: hardCar.getCarByOrderId,
}) })
const refundSuccessList = ref<any>([]) const refundSuccessList = ref<any>([])
@@ -160,165 +188,170 @@ const { supermarket_nature } = useDict("supermarket_nature")
const { getDataList, sortChangeHandle, tableStyle } = useTable(state) const { getDataList, sortChangeHandle, tableStyle } = useTable(state)
const getCarList = async (orderId: string) => { const getCarList = async (orderId: string) => {
state.queryForm.orderId = orderId state.queryForm.orderId = orderId
try { try {
// 获取订单商品列表 // 获取订单商品列表
await getDataList() await getDataList()
if (!state.dataList || !state.dataList.length) { console.log(state.dataList?.length, "state.dataList")
return
}
// 获取已退款的商品
const { data } = await hardCar.refundCar({ orderId })
if (!data || !data.length) {
disposeDataList.value = state.dataList.map((item) => {
if (!item) return null
return {
...item,
refundProductCount: 0,
maxRefundProductCount: item.productCount,
refundProductWeight: 0,
maxRefundProductWeight: displayWeight(item.productWeight),
refundTotalPrice: 0,
}
}).filter(Boolean)
return
}
refundSuccessList.value = data
// 计算出需要退款的商品
const refundViewList = [...state.dataList]
disposeDataList.value = refundViewList.map((item) => {
if (!item) return null
const target = data.find((v: any) => v.productId == item.productId)
return {
...item,
refundProductCount: 0,
maxRefundProductCount: item.productCount - (target?.productCount ?? 0),
refundProductWeight: 0,
maxRefundProductWeight: displayWeight(item.productWeight - (target?.productWeight ?? 0)),
refundTotalPrice: 0,
}
}).filter(Boolean)
} catch (error: any) {
state.dataList = []
disposeDataList.value = []
refundSuccessList.value = []
}
if (!state.dataList || !state.dataList.length) {
return
}
// 获取已退款的商品
const { data } = await hardCar.refundCar({ orderId })
if (!data || !data.length) {
disposeDataList.value = state.dataList
.map((item) => {
if (!item) return null
return {
...item,
refundProductCount: 0,
maxRefundProductCount: item.productCount,
refundProductWeight: 0,
maxRefundProductWeight: displayWeight(item.productWeight ?? 0),
refundTotalPrice: 0,
}
})
.filter(Boolean)
return
}
refundSuccessList.value = data
// 计算出需要退款的商品
const refundViewList = [...state.dataList]
disposeDataList.value = refundViewList
.map((item) => {
if (!item) return null
const target = data.find((v: any) => v.productId == item.productId)
return {
...item,
refundProductCount: 0,
maxRefundProductCount: item.productCount - (target?.productCount ?? 0),
refundProductWeight: 0,
maxRefundProductWeight: displayWeight(item.productWeight - (target?.productWeight ?? 0)),
refundTotalPrice: 0,
}
})
.filter(Boolean)
} catch (error: any) {
console.log(error)
state.dataList = []
disposeDataList.value = []
refundSuccessList.value = []
}
} }
const handleRefundProductCount = (value: any, row: any) => { const handleRefundProductCount = (value: any, row: any) => {
const target = disposeDataList.value.find((item: any) => item.id == row.id) const target = disposeDataList.value.find((item: any) => item.id == row.id)
if (!target) return if (!target) return
const { productPrice } = target const { productPrice } = target
target.refundTotalPrice = productPrice * value target.refundTotalPrice = productPrice * value
} }
// 全部退款 // 全部退款
const handleAllRefund = () => { const handleAllRefund = () => {
if (!state.dataList || !state.dataList.length) return if (!state.dataList || !state.dataList.length) return
const _list = [...disposeDataList.value] const _list = [...disposeDataList.value]
for (const v of _list) { for (const v of _list) {
const target = state.dataList.find((item: any) => item.id == v.id) const target = state.dataList.find((item: any) => item.id == v.id)
if (!target) continue if (!target) continue
v.refundProductCount = target.productCount v.refundProductCount = target.productCount
v.refundProductWeight = displayWeight(target.productWeight) v.refundProductWeight = displayWeight(target.productWeight)
v.refundTotalPrice = target.totalPrice v.refundTotalPrice = target.totalPrice
}
} disposeDataList.value = _list
disposeDataList.value = _list
} }
const getSummaries = (param: any) => { const getSummaries = (param: any) => {
const { columns, data } = param const { columns, data } = param
const totalColumns = ["totalPrice", "totalPrice", "refundTotalPrice"] const totalColumns = ["totalPrice", "totalPrice", "refundTotalPrice"]
const totalRow = Array.from({ length: columns.length }, () => "") const totalRow = Array.from({ length: columns.length }, () => "")
totalRow[0] = "合计" totalRow[0] = "合计"
columns.forEach((i: any, index: number) => { columns.forEach((i: any, index: number) => {
if (totalColumns.includes(i.property)) { if (totalColumns.includes(i.property)) {
const total = data const total = data
.filter((v: any) => v[i.property] != null) .filter((v: any) => v[i.property] != null)
.map((v: any) => Number(v[i.property])) .map((v: any) => Number(v[i.property]))
.reduce((pren: number, next: number) => pren + next, 0) .reduce((pren: number, next: number) => pren + next, 0)
if (i.property.includes("Price")) { if (i.property.includes("Price")) {
totalRow[index] = displayPrice(total) totalRow[index] = displayPrice(total)
} else { } else {
totalRow[index] = total totalRow[index] = total
} }
} }
}) })
return totalRow return totalRow
} }
// 提交 // 提交
const validate = async () => { const validate = async () => {
// 如果购物车为空直接返回true // 如果购物车为空直接返回true
if (!state.dataList || !state.dataList.length) { if (!state.dataList || !state.dataList.length) {
return [] return []
} }
let valid = false let valid = false
for (const v of disposeDataList.value) { for (const v of disposeDataList.value) {
if (v.refundProductCount > 0 || v.refundProductWeight > 0) { if (v.refundProductCount > 0 || v.refundProductWeight > 0) {
valid = true valid = true
break break
} }
} }
if (!valid) { if (!valid) {
useMessage().error("退款商品列表不能为空") useMessage().error("退款商品列表不能为空")
return false return false
} }
// 处理一下 // 处理一下
return disposeDataList.value.map((item: any) => { return disposeDataList.value.map((item: any) => {
return { return {
...item, ...item,
productCount: item.refundProductCount, productCount: item.refundProductCount,
productWeight: displayWeight(item.refundProductWeight), productWeight: displayWeight(item.refundProductWeight),
totalPrice: item.refundTotalPrice, totalPrice: item.refundTotalPrice,
} }
}) })
} }
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
getCarList, getCarList,
validate, validate,
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.refund-table { .refund-table {
padding: 0 10px; padding: 0 10px;
} }
:deep(.el-descriptions) { :deep(.el-descriptions) {
&:not(:nth-child(1)) { &:not(:nth-child(1)) {
margin-top: 20px; margin-top: 20px;
} }
.el-descriptions__title { .el-descriptions__title {
display: flex; display: flex;
align-items: center; align-items: center;
&::before { &::before {
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
background-color: #409eff; background-color: #409eff;
content: ""; content: "";
} }
} }
.el-descriptions-item__container { .el-descriptions-item__container {
margin: 0 10px; margin: 0 10px;
.no-colon { .no-colon {
margin: 0; margin: 0;
&::after { &::after {
content: ""; content: "";
} }
} }
} }
} }
</style> </style>