|
@@ -0,0 +1,245 @@
|
|
|
+<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" } }
|
|
|
+ },
|
|
|
+ { 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>
|