feat:管理员订单记录分页报错

2025-08-27 15:58:28 +08:00
1 parent ac657b4698
commit fd65cf1bf3
@@ -41,14 +41,8 @@
 			</el-descriptions>
 			<el-descriptions :column="1" title="商品信息">
 				<el-descriptions-item labelClassName="no-colon">
-					<el-table
-						:data="state.dataList"
-						v-loading="state.loading"
-						border
-						:cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle"
-						@sort-change="sortChangeHandle"
-					>
+					<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
 						<el-table-column label="商品名" align="center" prop="productName" />
 						<el-table-column label="商品图片" align="center" prop="code">
 							<template #default="{ row }">
@@ -75,16 +69,13 @@
 				<el-descriptions-item :column="1" label="退款状态: ">
 					<dict-tag :options="hard_sale_status" :value="globalData.afterSaleData.status" />
 				</el-descriptions-item>
-				<el-descriptions-item
-					:column="1"
+				<el-descriptions-item :column="1"
 					v-if="globalData.type == 'apply' && globalData.afterSaleData.status == 10"
-					v-auth="'hard_hardAfterSale_change'"
-					label="操作: "
-					label-class-name="no-colon"
-				>
+					v-auth="'hard_hardAfterSale_change'" label="操作: " label-class-name="no-colon">
 					<div class="flex justify-evenly">
 						<el-button type="primary" @click="agree"> 同意售后 </el-button>
-						<el-button type="danger" @click="refundRejectRef.openDialog(globalData.detail.id)"> 拒绝售后 </el-button>
+						<el-button type="danger" @click="refundRejectRef.openDialog(globalData.detail.id)"> 拒绝售后
+						</el-button>
 					</div>
 				</el-descriptions-item>
 			</el-descriptions>
@@ -32,7 +32,7 @@
    </el-form>
 </template>

-<script setup lang="ts">
+<script setup lang="ts" name="RefundForm">
 import * as walletSettingApi from "/@/api/wallet/wallet-setting"

 // 定义变量内容
@@ -1,29 +1,72 @@
 <template>
-    <el-table :data="state.dataList" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle" show-summary
-        :summary-method="getSummaries">
-        <el-table-column label="商品名" align="center" prop="productName" />
-        <el-table-column label="商品图片" align="center" prop="code">
-            <template #default="{ row }">
-                <preview-image v-if="row.productPic" :src="row.productPic" />
-                <div v-else class="w-[50px] h-[50px]" />
-            </template>
-        </el-table-column>
-        <el-table-column label="商品价格" align="center" prop="productPrice">
-            <template #default="{ row }">
-                <span>{{ displayPrice(row.productPrice) }}</span>
-            </template>
-        </el-table-column>
-        <el-table-column label="商品数量" align="center" prop="productCount" />
-        <el-table-column label="商品总额" align="center" prop="totalPrice">
-            <template #default="{ row }">
-                <span>{{ displayPrice(row.totalPrice) }}</span>
-            </template>
-        </el-table-column>
-    </el-table>
+    <div class="refund-table">
+        <el-descriptions :column="1" title="购物车商品">
+            <el-descriptions-item labelClassName="no-colon">
+                <el-table :data="state.dataList" border :cell-style="tableStyle.cellStyle"
+                    :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle" show-summary
+                    :summary-method="getSummaries">
+                    <el-table-column label="商品名" align="center" prop="productName" />
+                    <el-table-column label="商品图片" align="center" prop="code">
+                        <template #default="{ row }">
+                            <preview-image v-if="row.productPic" :src="row.productPic" />
+                            <div v-else class="w-[50px] h-[50px]" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="商品价格" align="center" prop="productPrice">
+                        <template #default="{ row }">
+                            <span>{{ displayPrice(row.productPrice) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="商品数量" align="center" prop="productCount" />
+                    <el-table-column label="商品总额" align="center" prop="totalPrice">
+                        <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-item labelClassName="no-colon">
+                <el-table :data="disposeDataList" border :cell-style="tableStyle.cellStyle"
+                    :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle" show-summary
+                    :summary-method="getSummaries">
+                    <el-table-column label="商品名" align="center" prop="productName" />
+                    <el-table-column label="商品图片" align="center" prop="code">
+                        <template #default="{ row }">
+                            <preview-image v-if="row.productPic" :src="row.productPic" />
+                            <div v-else class="w-[50px] h-[50px]" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="商品价格" align="center" prop="productPrice">
+                        <template #default="{ row }">
+                            <span>{{ displayPrice(row.productPrice) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="退款商品数量" align="center" prop="refundProductCount">
+                        <template #default="{ row }">
+                            <div>
+                                <el-input-number v-if="row.productNature == 2" v-model="row.refundProductCount" :min="0"
+                                    :max="row.productCount" :step="0.1"
+                                    @change="handleRefundProductCount($event, row)" />
+                                <el-input-number v-else v-model="row.refundProductCount" :min="0"
+                                    :max="row.productCount" @change="handleRefundProductCount($event, row)" />
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="退款商品总额" align="center" prop="refundTotalPrice">
+                        <template #default="{ row }">
+                            <span>{{ displayPrice(row.refundTotalPrice) }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
 </template>

-<script setup lang="ts">
+<script setup lang="ts" name="RefundTable">
 import { BasicTableProps, useTable } from "/@/hooks/table"

 import { displayPrice } from "/@/utils/formatMoney"
@@ -36,16 +79,96 @@ const state: BasicTableProps = reactive<BasicTableProps>({
    pageList: hardCar.getCarByOrderId,
 })

+const disposeDataList = computed(() => {
+    if (!state.dataList || !state.dataList.length) {
+        return []
+    }
+    return state.dataList.map((item) => {
+        if (!item) return null
+        return {
+            ...item,
+            refundProductCount: 0,
+            refundTotalPrice: 0,
+        }
+    }).filter(Boolean)
+})
+
 //  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+const { getDataList, sortChangeHandle, tableStyle } = useTable(state)

 const getCarList = (orderId: string) => {
    state.queryForm.orderId = orderId
    getDataList()
 }

+const handleRefundProductCount = (value: any, row: any) => {
+    const target = disposeDataList.value.find((item: any) => item.id == row.id)
+    if (!target) return
+    const { productPrice } = target
+    target.refundTotalPrice = productPrice * value
+}
+
+const getSummaries = (param: any) => {
+    const { columns, data } = param
+    const totalColumns = ["productCount", "totalPrice", "totalPrice", "refundProductCount", "refundTotalPrice"]
+    const totalRow = Array.from({ length: columns.length }, () => "")
+    totalRow[0] = "合计"
+    columns.forEach((i: any, index: number) => {
+        if (totalColumns.includes(i.property)) {
+            const total = data
+                .filter((v: any) => v[i.property] != null)
+                .map((v: any) => Number(v[i.property]))
+                .reduce((pren: number, next: number) => pren + next, 0)
+            if (i.property.includes("Price")) {
+                totalRow[index] = displayPrice(total)
+            } else {
+                totalRow[index] = total
+            }
+        }
+    })
+    return totalRow
+}
+
 // 暴露变量
 defineExpose({
    getCarList,
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.refund-table {
+    padding: 0 10px;
+}
+
+:deep(.el-descriptions) {
+    &:not(:nth-child(1)) {
+        margin-top: 20px;
+    }
+
+    .el-descriptions__title {
+        display: flex;
+        align-items: center;
+
+        &::before {
+            display: inline-block;
+            width: 3px;
+            height: 20px;
+            margin-right: 10px;
+            background-color: #409eff;
+            content: "";
+        }
+    }
+
+    .el-descriptions-item__container {
+        margin: 0 10px;
+
+        .no-colon {
+            margin: 0;
+
+            &::after {
+                content: "";
+            }
+        }
+    }
+}
+</style>
@@ -54,7 +54,8 @@
 					</div>
 					<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
 						:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-						@sort-change="sortChangeHandle" :show-summary="false" :summary-method="getSummaries">
+						@sort-change="sortChangeHandle" :show-summary="false" :summary-method="getSummaries"
+						row-key="id">
 						<el-table-column type="selection" width="60" align="center" />
 						<el-table-column type="index" label="#" width="50" />
 						<el-table-column width="200" label="用户">
@@ -242,7 +243,6 @@
 				</template>
 			</DraggableDepTree>
 		</div>
-
 		<!-- 编辑、新增  -->
 		<transaction-list ref="transactionListRef" @refresh="getDataList(false)" />
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
@@ -402,7 +402,7 @@ const getSummaries = (param: SummaryMethodProps) => {
 					{ column: "totalPrice", columnName: "商品总价", color: "#67C260" },
 					{ column: "extraPrice", columnName: "额外支付", color: "#F56E9B" },
 					{ column: "payPrice", columnName: "实际支付", color: "#355CF6" },
-				].forEach(({ column, columnName, color }: any, index: number) => {
+				].forEach(({ column, columnName, color }: any) => {
 					const values = data.map((item) => Number(item[column]))
 					if (!values.every((value) => Number.isNaN(value))) {
 						priceVNode.push(