添加报表
This commit is contained in:
461
src/pagesBank/report/download.vue
Normal file
461
src/pagesBank/report/download.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<script lang="ts" setup>
|
||||
import { downloadReport } from '@/pagesBank/api'
|
||||
import { DateDimension } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '报表下载',
|
||||
},
|
||||
})
|
||||
|
||||
// 从路由参数获取报表信息
|
||||
const reportId = ref('')
|
||||
const reportName = ref('')
|
||||
|
||||
// 日期维度选项
|
||||
const dimensionOptions = [
|
||||
{ label: '按日', value: DateDimension.DAY },
|
||||
{ label: '按月', value: DateDimension.MONTH },
|
||||
{ label: '按季', value: DateDimension.QUARTER },
|
||||
{ label: '自定义', value: DateDimension.CUSTOM },
|
||||
]
|
||||
|
||||
// 当前选中的日期维度
|
||||
const activeDimension = ref(DateDimension.DAY)
|
||||
|
||||
// 当前选中的日期
|
||||
const selectedDate = ref('2025-12-25')
|
||||
|
||||
// 日期选择器显示状态
|
||||
const showDatePicker = ref(false)
|
||||
|
||||
// 下载中状态
|
||||
const downloading = ref(false)
|
||||
|
||||
// 获取日期维度标签
|
||||
function getDimensionLabel(dimension: DateDimension) {
|
||||
const option = dimensionOptions.find(opt => opt.value === dimension)
|
||||
return option?.label || ''
|
||||
}
|
||||
|
||||
// 切换日期维度
|
||||
function handleDimensionChange(dimension: DateDimension) {
|
||||
activeDimension.value = dimension
|
||||
// 根据维度更新默认日期
|
||||
updateDefaultDate(dimension)
|
||||
}
|
||||
|
||||
// 根据维度更新默认日期
|
||||
function updateDefaultDate(dimension: DateDimension) {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
|
||||
switch (dimension) {
|
||||
case DateDimension.DAY:
|
||||
selectedDate.value = `${year}-${month}-${day}`
|
||||
break
|
||||
case DateDimension.MONTH:
|
||||
selectedDate.value = `${year}-${month}`
|
||||
break
|
||||
case DateDimension.QUARTER:
|
||||
const quarter = Math.floor(now.getMonth() / 3) + 1
|
||||
selectedDate.value = `${year}-Q${quarter}`
|
||||
break
|
||||
case DateDimension.CUSTOM:
|
||||
selectedDate.value = `${year}-${month}-${day}`
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 显示日期选择器
|
||||
function showDateSelector() {
|
||||
showDatePicker.value = true
|
||||
}
|
||||
|
||||
// 日期选择确认
|
||||
function handleDateConfirm(e: any) {
|
||||
const { value } = e
|
||||
const date = new Date(value)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
|
||||
if (activeDimension.value === DateDimension.MONTH) {
|
||||
selectedDate.value = `${year}-${month}`
|
||||
} else {
|
||||
selectedDate.value = `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
showDatePicker.value = false
|
||||
}
|
||||
|
||||
// 下载报表
|
||||
async function handleDownload() {
|
||||
if (downloading.value) return
|
||||
|
||||
downloading.value = true
|
||||
try {
|
||||
await downloadReport({
|
||||
reportId: reportId.value,
|
||||
dimension: activeDimension.value,
|
||||
date: selectedDate.value
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: '下载成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
downloading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (options.reportId) {
|
||||
reportId.value = options.reportId
|
||||
}
|
||||
if (options.reportName) {
|
||||
reportName.value = decodeURIComponent(options.reportName)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="download-page">
|
||||
<!-- 报表信息卡片 -->
|
||||
<view class="report-info-card">
|
||||
<view class="report-icon">
|
||||
<text class="i-carbon-document"></text>
|
||||
</view>
|
||||
<view class="report-details">
|
||||
<text class="report-name">{{ reportName }}</text>
|
||||
<text class="report-id">报表编号: {{ reportId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期维度筛选 -->
|
||||
<view class="dimension-section">
|
||||
<view class="section-title">选择日期维度</view>
|
||||
<view class="dimension-tabs">
|
||||
<view
|
||||
v-for="option in dimensionOptions"
|
||||
:key="option.value"
|
||||
class="dimension-tab"
|
||||
:class="{ active: activeDimension === option.value }"
|
||||
@click="handleDimensionChange(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<view class="date-section">
|
||||
<view class="section-title">选择日期</view>
|
||||
<view class="date-picker" @click="showDateSelector">
|
||||
<view class="date-display">
|
||||
<text class="i-carbon-calendar"></text>
|
||||
<text class="date-value">{{ selectedDate }}</text>
|
||||
</view>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下载区域 -->
|
||||
<view class="download-section">
|
||||
<view class="format-tag">EXCEL</view>
|
||||
<button
|
||||
class="download-btn"
|
||||
:class="{ loading: downloading }"
|
||||
:disabled="downloading"
|
||||
@click="handleDownload"
|
||||
>
|
||||
<text v-if="downloading" class="i-carbon-circle-dash loading-icon"></text>
|
||||
<text>{{ downloading ? '下载中...' : '点击下载' }}</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 使用帮助 -->
|
||||
<view class="help-section">
|
||||
<view class="help-title">
|
||||
<text class="i-carbon-help"></text>
|
||||
<text>Excel格式: 使用帮助</text>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<view class="help-item">
|
||||
<text class="help-number">1</text>
|
||||
<text class="help-text">选择要下载报表的日期</text>
|
||||
</view>
|
||||
<view class="help-item">
|
||||
<text class="help-number">2</text>
|
||||
<text class="help-text">点击下载按钮进行下载</text>
|
||||
</view>
|
||||
<view class="help-item">
|
||||
<text class="help-number">3</text>
|
||||
<text class="help-text">下载后自动打开文件，可以点击手机右上角的【...】进行转发或保存文件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器弹窗 -->
|
||||
<wd-datetime-picker
|
||||
v-model="selectedDate"
|
||||
v-model:show="showDatePicker"
|
||||
type="date"
|
||||
@confirm="handleDateConfirm"
|
||||
@cancel="showDatePicker = false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.download-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.report-info-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.report-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.report-details {
|
||||
flex: 1;
|
||||
|
||||
.report-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.report-id {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dimension-section,
|
||||
.date-section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.dimension-tabs {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.dimension-tab {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.date-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 36rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
}
|
||||
|
||||
.download-section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
|
||||
.format-tag {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active:not(:disabled) {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 32rpx;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.help-section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.help-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 32rpx;
|
||||
color: #4d80f0;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.help-content {
|
||||
.help-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.help-number {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #4d80f0;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user