商品退款,单个退款

src/views/hard/components/shop-car.vue

@@ -1,19 +1,13 @@
 <template>
 	<el-dialog title="购物车" v-model="visible" :close-on-click-modal="false" draggable>
-		<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 :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="商品名" 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">

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

@@ -1,129 +0,0 @@
-<template>
-	<el-dialog title="后台退款" v-model="visible" width="30%" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
-			<el-row :gutter="24">
-				<el-col :span="24" class="mb20">
-					<el-form-item label="售后方式" prop="way">
-						<dict-select disabled v-model="form.way" dict-code="hard_after_sale_way" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="24" class="mb20">
-					<el-form-item label="退款原因" prop="applyReason">
-						<el-select v-model="form.applyReason">
-							<el-option v-for="reason in state.setting.afterSaleRefundReasons" :key="reason" :label="reason" :value="reason" />
-						</el-select>
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="24" class="mb20">
-					<el-form-item label="补充凭证图片" prop="applyPicUrls">
-						<upload-imgs v-model="form.applyPicUrls" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="24" class="mb20">
-					<el-form-item label="相关描述" prop="applyDescription">
-						<el-input v-model="form.applyDescription" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 6 }" />
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-		<template #footer>
-			<span class="dialog-footer">
-				<el-button @click="visible = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
-			</span>
-		</template>
-	</el-dialog>
-</template>
-
-<script setup lang="ts" name="admin-refund-dialog">
-import { useMessage } from "/@/hooks/message"
-import * as hardAfterSaleApi from "/@/api/hard/hard-after-sale"
-import * as walletSettingApi from "/@/api/wallet/wallet-setting"
-
-const emit = defineEmits(["refresh"])
-
-// 定义变量内容
-const dataFormRef = ref()
-const visible = ref(false)
-const loading = ref(false)
-
-// 定义字典
-
-// 提交表单数据
-const form = reactive({
-	orderId: "",
-	way: "10",
-	applyReason: "",
-	applyPicUrls: "",
-	applyDescription: "",
-})
-
-const state = reactive<any>({
-	setting: {},
-})
-
-// 定义校验规则
-const dataRules = ref({
-	way: [{ required: true, message: "请选择售后方式", trigger: "change" }],
-	applyReason: [{ required: true, message: "请选择退款原因", trigger: "change" }],
-})
-
-// 打开弹窗
-const openDialog = (id: string) => {
-	visible.value = true
-	form.orderId = ""
-	// 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields()
-	})
-	// 获取hardwareOrder信息
-	if (id) {
-		form.orderId = id
-		gethardwareOrderData(id)
-	}
-}
-
-// 初始化表单数据
-const gethardwareOrderData = async (id: string) => {
-	// 获取数据
-	loading.value = true
-	try {
-		const { data } = await walletSettingApi.getObj()
-		if (data.afterSaleRefundReasons) {
-			data.afterSaleRefundReasons = data.afterSaleRefundReasons?.split(",")
-		}
-		if (data.afterSaleReturnReasons) {
-			data.afterSaleReturnReasons = data.afterSaleReturnReasons?.split(",")
-		}
-		state.setting = data
-	} finally {
-		loading.value = false
-	}
-}
-
-// 提交
-const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {})
-	if (!valid) return false
-
-	try {
-		loading.value = true
-		await hardAfterSaleApi.adminRefund(form)
-		useMessage().success("退款成功")
-		visible.value = false
-		emit("refresh")
-	} catch (err: any) {
-		useMessage().error(err.msg)
-	} finally {
-		loading.value = false
-	}
-}
-
-// 暴露变量
-defineExpose({
-	openDialog,
-})
-</script>

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

@@ -0,0 +1,90 @@
+<template>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px">
+        <el-row :gutter="24">
+            <el-col :span="24" class="mb20">
+                <el-form-item label="售后方式" prop="way">
+                    <dict-select disabled v-model="form.way" dict-code="hard_after_sale_way" />
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="24" class="mb20">
+                <el-form-item label="退款原因" prop="applyReason">
+                    <el-select v-model="form.applyReason">
+                        <el-option v-for="reason in state.setting.afterSaleRefundReasons" :key="reason" :label="reason"
+                            :value="reason" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="24" class="mb20">
+                <el-form-item label="补充凭证图片" prop="applyPicUrls">
+                    <upload-imgs v-model="form.applyPicUrls" />
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="24" class="mb20">
+                <el-form-item label="相关描述" prop="applyDescription">
+                    <el-input v-model="form.applyDescription" placeholder="请输入备注" type="textarea"
+                        :autosize="{ minRows: 6 }" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+
+<script setup lang="ts">
+import * as walletSettingApi from "/@/api/wallet/wallet-setting"
+
+// 定义变量内容
+const dataFormRef = ref()
+
+// 提交表单数据
+const form = reactive({
+    orderId: "",
+    way: "10",
+    applyReason: "",
+    applyPicUrls: "",
+    applyDescription: "",
+})
+
+const state = reactive<any>({
+    setting: {},
+})
+
+onMounted(() => {
+    getSetting()
+})
+
+// 定义校验规则
+const dataRules = ref({
+    way: [{ required: true, message: "请选择售后方式", trigger: "change" }],
+    applyReason: [{ required: true, message: "请选择退款原因", trigger: "change" }],
+})
+
+// 初始化表单数据
+const getSetting = async () => {
+    try {
+        const { data } = await walletSettingApi.getObj()
+        if (data.afterSaleRefundReasons) {
+            data.afterSaleRefundReasons = data.afterSaleRefundReasons?.split(",")
+        }
+        if (data.afterSaleReturnReasons) {
+            data.afterSaleReturnReasons = data.afterSaleReturnReasons?.split(",")
+        }
+        state.setting = data
+    } catch (error: any) {
+        console.log(error);
+    }
+}
+
+// 提交
+const validate = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { })
+    if (!valid) return false
+    return form
+}
+
+defineExpose({
+    validate,
+})
+</script>

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

@@ -0,0 +1,108 @@
+<template>
+	<el-dialog title="后台退款" v-model="visible" width="50%" :close-on-click-modal="false" draggable>
+		<el-tabs v-model="state.currentTab" class="demo-tabs" @tab-click="tabClick">
+			<el-tab-pane v-for="(v) in data.tabs" :key="v.name" :label="v.label" :name="v.name" />
+		</el-tabs>
+		<div class="container" v-loading="loading">
+			<refund-form ref="refundFormRef" v-if="state.currentTab === 'INFO'" />
+			<refund-table ref="refundTableRef" v-if="state.currentTab === 'CAR'" />
+		</div>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="admin-refund-dialog">
+import { useMessage } from "/@/hooks/message"
+import * as hardAfterSaleApi from "/@/api/hard/hard-after-sale"
+
+const RefundForm = defineAsyncComponent(() => import("./form.vue"))
+const RefundTable = defineAsyncComponent(() => import("./table.vue"))
+
+
+const emit = defineEmits(["refresh"])
+
+const data = {
+	tabs: [
+		{
+			label: "退款信息",
+			name: "INFO",
+		},
+		{
+			label: "退款购物车",
+			name: "CAR",
+		},
+	]
+}
+
+const refundTableRef = ref()
+const refundFormRef = ref()
+
+// 定义变量内容
+const visible = ref(false)
+const loading = ref(false)
+
+const state = reactive<any>({
+	currentTab: data.tabs[0].name,
+	setting: {},
+	orderId: "",
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+	visible.value = true
+	state.orderId = id
+}
+
+function tabClick(e: any) {
+	console.log("tabClick", e);
+	nextTick(async () => {
+		loading.value = true
+		try {
+			await new Promise((resolve) => setTimeout(() => resolve(true), 250))
+			switch (e.paneName) {
+				case "CAR":
+					refundTableRef.value?.getCarList(state.orderId)
+					break
+			}
+			await new Promise((resolve) => setTimeout(() => resolve(true), 250))
+		} catch (error: any) {
+			console.log(error);
+		} finally {
+			loading.value = false
+		}
+	})
+}
+
+// 提交
+const onSubmit = async () => {
+
+	try {
+		loading.value = true
+		const _data = {}
+		await hardAfterSaleApi.adminRefund(_data)
+		useMessage().success("退款成功")
+		visible.value = false
+		emit("refresh")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	} finally {
+		loading.value = false
+	}
+}
+
+// 暴露变量
+defineExpose({
+	openDialog,
+})
+</script>
+
+<style>
+.container {
+	min-height: 450px;
+}
+</style>

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

@@ -0,0 +1,51 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+
+import { displayPrice } from "/@/utils/formatMoney"
+
+import * as hardCar from "/@/api/hard/hard-car"
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: hardCar.getCarByOrderId,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+const getCarList = (orderId: string) => {
+    state.queryForm.orderId = orderId
+    getDataList()
+}
+
+// 暴露变量
+defineExpose({
+    getCarList,
+})
+</script>

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

@@ -266,7 +266,7 @@ const { push } = useRouter()
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
-const AdminRefundDialog = defineAsyncComponent(() => import("./admin-refund-dialog.vue"))
+const AdminRefundDialog = defineAsyncComponent(() => import("./components/admin-refund-dialog/index.vue"))
 const ShopCar = defineAsyncComponent(() => import("../components/shop-car.vue"))
 const TransactionList = defineAsyncComponent(() => import("/@/views/wallet/components/transaction-list.vue"))
 // 定义查询字典