f-web/src/modules/dj/views/refund.vue

<template>
	<cl-crud ref="Crud">
		<cl-row>
			<cl-filter-group :items="items" :data="filterParam" :reset-btn="true" />
			<cl-export-btn :columns="Table?.columns" />
		</cl-row>

		<cl-row>
			<cl-table ref="Table" :contextMenu="[]">
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>
	</cl-crud>
</template>

<script lang="ts" name="dj-refund" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { ref } from "vue";
import dayjs from "dayjs";
import { checkPerm } from "/$/base";
import { ElMessage } from "element-plus";

const { service } = useCool();

const filterParam = ref({
	createTime: [
		dayjs().format("YYYY-MM-DD ") + "00:00:00",
		dayjs().format("YYYY-MM-DD ") + "23:59:59"
	]
});

const items = ref<ClForm.Item[]>([
	{
		label: "订单号",
		prop: "orderNo",
		component: {
			name: "el-input"
		}
	},
	{
		label: "商户订单号",
		prop: "outOrderNo",
		component: {
			name: "el-input"
		}
	},
	{
		label: "交易号",
		prop: "traceNo",
		component: {
			name: "el-input"
		}
	},
	{
		label: "退款订单号",
		prop: "refundNo",
		component: {
			name: "el-input"
		}
	},
	{
		label: "退款交易号",
		prop: "RefundTraceNo",
		component: {
			name: "el-input"
		}
	},
	{
		label: "商户号",
		prop: "mchId",
		component: {
			name: "el-input"
		},
		hidden: !checkPerm(service.dj.order.permission.mch)
	},
	{
		label: "退款状态",
		prop: "status",
		component: {
			name: "el-select",
			props: {
				clearable: true
			},
			options: [
				{
					label: "退款中",
					value: 0
				},
				{
					label: "退款成功",
					value: 1
				},
				{
					label: "退款失败",
					value: 2
				}
			]
		}
	},
	{
		label: "日期范围",
		prop: "createTime",
		component: {
			name: "el-date-picker",
			props: {
				style: { width: "360px" },
				type: "datetimerange",
				unlinkPanels: true,
				valueFormat: "YYYY-MM-DD HH:mm:ss",
				shortcuts: [
					{
						text: '今天',
						value: () => {
							return [dayjs().startOf('day'), dayjs().endOf('day')]
						}
					},
					{
						text: '昨天',
						value: () => {
							return [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')]
						}
					},
					{
						text: '近三天',
						value: () => {
							return [dayjs().subtract(2, 'day').startOf('day'), dayjs().endOf('day')]
						}
					},
					{
						text: '近七天',
						value: () => {
							return [dayjs().subtract(6, 'day').startOf('day'), dayjs().endOf('day')]
						}
					},
					{
						text: '近一个月',
						value: () => {
							return [dayjs().startOf('month'), dayjs().endOf('month')]
						}
					},
				],
				onChange() { }
			}
		}
	}
]);

// cl-table
const Table = useTable({
	columns: [
		{ label: "#", type: "index" },
		{ prop: "orderNo", label: "订单号", showOverflowTooltip: true, width: 120 },
		{ prop: "refundNo", label: "退款订单号", showOverflowTooltip: true, width: 120 },
		{
			prop: "mchId", label: "商户号", hidden: !checkPerm(service.dj.order.permission.mch), showOverflowTooltip: true, width: 120
		},
		{
			prop: "amount",
			label: "退款金额",
			width: 90,
			formatter(row) {
				return (+row.amount).toFixed(2);
			}
		},
		{
			prop: "charge",
			label: "手续费",
			width: 90,
			formatter(row) {
				return (+row.charge).toFixed(2);
			}
		},
		{ prop: "currency", label: "货币单位", width: 90 },
		{
			prop: "code", label: "通道编码", hidden: !checkPerm(service.dj.order.permission.code), width: 90
		},
		{
			prop: "status",
			label: "订单状态",
			width: 90,
			dict: [
				{ label: "退款中", value: 0, color: "#909399" },
				{ label: "退款成功", value: 1, color: "#67C23A" },
				{ label: "退款失败", value: 2, color: "#F56C6C" }
			],
		},
		{ prop: "createTime", label: "创建时间", width: 155 },
		{ prop: "reson", label: "退款原因", showOverflowTooltip: true, width: 120 },
		{
			prop: "date",
			label: "退款时间",
			width: 155,
			component: { name: "cl-date-text", props: { format: "YYYY-MM-DD HH:mm:ss" } }
		},
		{ prop: "refundTraceNo", label: "退款交易号", showOverflowTooltip: true, width: 120 },
		{ prop: "outOrderNo", label: "商户订单号", showOverflowTooltip: true, width: 120 },
		{ prop: "traceNo", label: "交易号", showOverflowTooltip: true, width: 120 },
		{ prop: "remark", label: "备注", showOverflowTooltip: true, width: 120 },
		{
			type: "op",
			width: 120,
			buttons({ scope }) {
				return [
					{
						label: "API查单",
						type: "primary",
						async onClick({ scope }: any) {
							try {
								const data = await service.dj.refund.query({ id: scope.row.id });
								if (+data.status === 2) {
									ElMessage.error("订单退款失败，已刷新状态！");
									Crud.value?.refresh();
								} else if (+data.status === 1) {
									ElMessage.success("订单退款成功，已刷新状态！");
									Crud.value?.refresh();
								} else {
									ElMessage.warning("订单仍在处理中，请稍后查询");
								}
							} catch (e: any) {
								ElMessage.warning(e.message);
							}
						}
					}
				];
			}
		}
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.dj.refund
	},
	(app) => {
		app.refresh(filterParam.value);
	}
);
</script>