mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-10 02:49:03 +08:00
78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<template>
|
|
<div class="search">
|
|
<el-card>
|
|
<el-form inline>
|
|
<el-form-item label="日期范围">
|
|
<el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="loadData">查询</el-button>
|
|
<el-button @click="handleExport">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card class="mt_10">
|
|
<el-table v-loading="loading" border :data="data">
|
|
<el-table-column prop="period" label="日期" width="120" />
|
|
<el-table-column prop="paymentName" label="支付方式" width="140">
|
|
<template #default="{ row }">
|
|
{{ formatPaymentName(row.paymentName) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payCount" label="支付笔数" width="100" />
|
|
<el-table-column prop="payAmount" label="支付金额" width="120" />
|
|
<el-table-column prop="refundCount" label="退款笔数" width="100" />
|
|
<el-table-column prop="refundAmount" label="退款金额" width="120" />
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import * as API_Finance from "@/api/finance";
|
|
import { downloadBlob } from "@/utils/downloadBlob";
|
|
|
|
defineOptions({ name: "finance-payment-method" });
|
|
|
|
const loading = ref(false);
|
|
const dateRange = ref([]);
|
|
const data = ref([]);
|
|
|
|
const paymentNameMap = {
|
|
WECHAT: "微信支付",
|
|
ALIPAY: "支付宝",
|
|
WALLET: "余额支付",
|
|
BANK_TRANSFER: "线下转账",
|
|
};
|
|
|
|
function formatPaymentName(name) {
|
|
return paymentNameMap[name] || name || "-";
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
|
|
function buildParams() {
|
|
const p = {};
|
|
if (dateRange.value?.length === 2) {
|
|
p.startDate = dateRange.value[0];
|
|
p.endDate = dateRange.value[1];
|
|
}
|
|
return p;
|
|
}
|
|
function loadData() {
|
|
loading.value = true;
|
|
API_Finance.getPaymentMethodReport(buildParams()).then((res) => {
|
|
loading.value = false;
|
|
if (res.success) data.value = res.result || [];
|
|
});
|
|
}
|
|
function handleExport() {
|
|
API_Finance.exportPaymentMethodReport(buildParams()).then((blob) => {
|
|
downloadBlob(blob, "支付方式汇总.xlsx");
|
|
});
|
|
}
|
|
</script>
|