From 0e835b93ea8fe183a6c86f8eff93ea65cb94c510 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 29 May 2025 18:45:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AE=A2=E5=8D=95=E5=A4=9A=E6=AC=A1?=
 =?UTF-8?q?=E9=80=80=E6=AC=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/views/hard/components/sale-table.vue      | 120 ++++++++++++++++++
 .../hard/hard-after-sale/order-refund.vue     |  25 ++--
 3 files changed, 130 insertions(+), 17 deletions(-)
 create mode 100644 src/views/hard/components/sale-table.vue

diff --git a/package.json b/package.json
index e6c78ed..c9ff9f0 100644
--- a/package.json
+++ b/package.json
@@ -116,4 +116,4 @@
 		"type": "git",
 		"url": "https://gitee.com/log4j/pig"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/views/hard/components/sale-table.vue b/src/views/hard/components/sale-table.vue
new file mode 100644
index 0000000..06c67d0
--- /dev/null
+++ b/src/views/hard/components/sale-table.vue
@@ -0,0 +1,120 @@
+<template>
+	<div class="flex-col">
+		<el-table
+			:data="state.dataList"
+			v-loading="state.loading"
+			border
+			:cell-style="tableStyle.cellStyle"
+			:header-cell-style="tableStyle.headerCellStyle"
+			@sort-change="sortChangeHandle"
+			show-summary
+			:summary-method="getSummaries"
+		>
+			<el-table-column label="退款编号" width="180" align="center" prop="id" />
+			<el-table-column label="售后类型" align="center" prop="code">
+				<template #default="{ row }">
+					<dict-tag :options="hard_after_sale_type" :value="row.type" />
+				</template>
+			</el-table-column>
+			<el-table-column label="售后方式" align="center" prop="productPrice">
+				<template #default="{ row }">
+					<dict-tag :options="hard_after_sale_way" :value="row.way" />
+				</template>
+			</el-table-column>
+			<el-table-column label="退款金额" align="center" prop="refundPrice">
+				<template #default="{ row }">
+					{{ displayPrice(row.refundPrice) }}
+				</template>
+			</el-table-column>
+			<el-table-column label="退款原因" align="center" prop="applyReason" />
+			<el-table-column label="补充图片" align="center" prop="applyPicUrls">
+				<template #default="{ row }">
+					<preview-image v-if="row.applyPicUrls" :src="row.applyPicUrls" />
+				</template>
+			</el-table-column>
+			<el-table-column label="退款时间" width="160" align="center" prop="createTime" />
+			<el-table-column label="操作" width="120" align="center">
+				<template #default="{ row }">
+					<el-button icon="Tickets" text type="primary" @click="doSaleLogDialog(row)"> 售后日志 </el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+
+		<el-dialog title="售后日志" v-model="visible" :close-on-click-modal="false" draggable>
+			<el-timeline>
+				<el-timeline-item v-for="v in saleLogList" :key="v.id" :timestamp="v.createTime" placement="top">
+					<div class="el-timeline-right-content">
+						<span>{{ v.content }}</span>
+					</div>
+				</el-timeline-item>
+			</el-timeline>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="sale-table">
+import { useDict } from "/@/hooks/dict"
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import * as hardAfterSaleApi from "/@/api/hard/hard-after-sale"
+import { displayPrice } from "/@/utils/formatMoney"
+import { TableColumnCtx } from "element-plus"
+
+const props = withDefaults(defineProps<{ orderId: any }>(), { orderId: "" })
+
+// 定义变量内容
+const visible = ref(false)
+const saleLogList = ref<any>([])
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	createdIsNeed: false,
+	queryForm: {},
+	pageList: hardAfterSaleApi.pageJoin,
+})
+
+watch(
+	() => props.orderId,
+	(newVal, oldVal) => {
+		if (!newVal || newVal == oldVal) return
+		state.queryForm.orderId = newVal
+		getDataList()
+	},
+	{ immediate: true, deep: true },
+)
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+// 定义查询字典
+const { hard_after_sale_type, hard_after_sale_way } = useDict("hard_after_sale_type", "hard_after_sale_way")
+
+// 查看售后日志
+const doSaleLogDialog = async (row: any) => {
+	const { data: log } = await hardAfterSaleApi.history({ id: row.id })
+	saleLogList.value = log
+	visible.value = true
+}
+
+interface SummaryMethodProps<T = any> {
+	columns: TableColumnCtx<T>[]
+	data: T[]
+}
+
+const getSummaries = (param: SummaryMethodProps) => {
+	const { columns, data } = param
+	const totalColumns = ["refundPrice"]
+	const totalRow = Array.from({ length: columns.length })
+	columns.forEach((i: any, index: number) => {
+		if (totalColumns.includes(i.property)) {
+			const total = data
+				.filter((v: any) => v[i.property] != null)
+				.map((v: any) => v[i.property])
+				.reduce((pren: number, next: number) => pren + next, 0)
+			totalRow[index] = displayPrice(total)
+		}
+	})
+	return totalRow
+}
+
+onMounted(() => {})
+</script>
diff --git a/src/views/hard/hard-after-sale/order-refund.vue b/src/views/hard/hard-after-sale/order-refund.vue
index 1877139..31bafbb 100644
--- a/src/views/hard/hard-after-sale/order-refund.vue
+++ b/src/views/hard/hard-after-sale/order-refund.vue
@@ -89,7 +89,13 @@
 				</el-descriptions-item>
 			</el-descriptions>
 
-			<el-descriptions v-if="globalData.afterSaleData.id" border title="售后信息">
+			<el-descriptions :column="1" title="售后信息">
+				<el-descriptions-item labelClassName="no-colon">
+					<sale-table :orderId="globalData.detail?.id" />
+				</el-descriptions-item>
+			</el-descriptions>
+
+			<el-descriptions v-if="globalData.afterSaleData.id && false" border title="售后信息">
 				<el-descriptions-item :span="3" label="退款编号: ">
 					{{ globalData.afterSaleData.no }}
 				</el-descriptions-item>
@@ -112,18 +118,6 @@
 					<preview-image :src="globalData.afterSaleData.applyPicUrls" />
 				</el-descriptions-item>
 			</el-descriptions>
-
-			<el-descriptions v-if="globalData.log && globalData.log.length" title="售后日志">
-				<el-descriptions-item labelClassName="no-colon">
-					<el-timeline>
-						<el-timeline-item v-for="v in globalData.log" :key="v.id" :timestamp="v.createTime" placement="top">
-							<div class="el-timeline-right-content">
-								<span>{{ v.content }}</span>
-							</div>
-						</el-timeline-item>
-					</el-timeline>
-				</el-descriptions-item>
-			</el-descriptions>
 			<hard-door-log :orderId="globalData.detail.id" />
 		</div>
 
@@ -133,7 +127,7 @@
 
 <script setup lang="ts" name="order-refund">
 import { BasicTableProps, useTable } from "/@/hooks/table"
-import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useMessage } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import * as hardOrder from "/@/api/hard/hard-order"
 import * as hardCar from "/@/api/hard/hard-car"
@@ -144,6 +138,7 @@ import { ElLoading } from "element-plus"
 // 引入组件
 const RefundRejectForm = defineAsyncComponent(() => import("./refund-reject.vue"))
 const HardDoorLog = defineAsyncComponent(() => import("../components/hard-door-log.vue"))
+const SaleTable = defineAsyncComponent(() => import("../components/sale-table.vue"))
 
 // 定义查询字典
 const { hard_pay_type, hard_order_type, hard_order_status, hard_after_sale_way, hard_after_sale_type, hard_sale_status, hard_type } =
@@ -214,8 +209,6 @@ const getDetail = async () => {
 	const { data: afterSaleData } = await hardAfterSaleApi.detailByOrderId({ orderId: id })
 	if (afterSaleData && afterSaleData.id) {
 		globalData.afterSaleData = afterSaleData
-		const { data: log } = await hardAfterSaleApi.history({ id: afterSaleData.id })
-		globalData.log = log
 	}
 }
 </script>