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

src/views/hard/hard-after-sale/order-refund.vue

@@ -41,14 +41,8 @@
 			</el-descriptions>
 			<el-descriptions :column="1" title="商品信息">
 				<el-descriptions-item labelClassName="no-colon">
-					<el-table
+					<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-						:data="state.dataList"
+						:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
-						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
+				<el-descriptions-item :column="1"
-					:column="1"
 					v-if="globalData.type == 'apply' && globalData.afterSaleData.status == 10"
-					v-auth="'hard_hardAfterSale_change'"
+					v-auth="'hard_hardAfterSale_change'" label="操作: " label-class-name="no-colon">
-					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>

src/views/hard/hard-order/components/admin-refund-dialog/form.vue

@@ -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"
 
 // 定义变量内容

src/views/hard/hard-order/components/admin-refund-dialog/table.vue

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

src/views/hard/hard-order/index.vue

@@ -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(