feat:订单多次退款

package.json

@@ -116,4 +116,4 @@
 		"type": "git",
 		"url": "https://gitee.com/log4j/pig"
 	}
-}
+}

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>

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>