128 lines
3.6 KiB
Vue
128 lines
3.6 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 文件职责：交易流水导出确认弹窗。
|
||
*/
|
||
import type { QuickDateRangeKey } from '../types';
|
||
|
||
import { computed } from 'vue';
|
||
|
||
import { Modal } from 'ant-design-vue';
|
||
|
||
import {
|
||
QUICK_RANGE_OPTIONS,
|
||
TRANSACTION_CHANNEL_OPTIONS,
|
||
TRANSACTION_PAYMENT_OPTIONS,
|
||
TRANSACTION_TYPE_OPTIONS,
|
||
} from '../composables/transaction-page/constants';
|
||
|
||
interface FilterState {
|
||
channel: string;
|
||
endDate: string;
|
||
keyword: string;
|
||
paymentMethod: string;
|
||
quickRange: QuickDateRangeKey;
|
||
startDate: string;
|
||
type: string;
|
||
}
|
||
|
||
interface Props {
|
||
filters: FilterState;
|
||
open: boolean;
|
||
selectedStoreName: string;
|
||
submitting: boolean;
|
||
totalCount: number;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
|
||
const emit = defineEmits<{
|
||
(event: 'close'): void;
|
||
(event: 'confirm'): void;
|
||
}>();
|
||
|
||
function resolveOptionLabel(
|
||
options: Array<{ label: string; value: string }>,
|
||
value: string,
|
||
) {
|
||
return options.find((item) => item.value === value)?.label || '--';
|
||
}
|
||
|
||
const dateRangeText = computed(() => {
|
||
if (!props.filters.startDate && !props.filters.endDate) {
|
||
return '不限';
|
||
}
|
||
return `${props.filters.startDate || '--'} 至 ${props.filters.endDate || '--'}`;
|
||
});
|
||
|
||
const typeText = computed(() =>
|
||
resolveOptionLabel(TRANSACTION_TYPE_OPTIONS, props.filters.type),
|
||
);
|
||
|
||
const channelText = computed(() =>
|
||
resolveOptionLabel(TRANSACTION_CHANNEL_OPTIONS, props.filters.channel),
|
||
);
|
||
|
||
const paymentText = computed(() =>
|
||
resolveOptionLabel(TRANSACTION_PAYMENT_OPTIONS, props.filters.paymentMethod),
|
||
);
|
||
|
||
const quickRangeText = computed(() =>
|
||
resolveOptionLabel(QUICK_RANGE_OPTIONS, props.filters.quickRange || ''),
|
||
);
|
||
|
||
const keywordText = computed(() => props.filters.keyword.trim() || '未填写');
|
||
</script>
|
||
|
||
<template>
|
||
<Modal
|
||
:open="props.open"
|
||
title="导出交易流水"
|
||
ok-text="确认导出"
|
||
cancel-text="取消"
|
||
:confirm-loading="props.submitting"
|
||
@ok="emit('confirm')"
|
||
@cancel="emit('close')"
|
||
>
|
||
<div class="ft-export-modal">
|
||
<p class="ft-export-desc">
|
||
将按当前筛选条件导出交易流水 CSV 文件，请确认以下信息：
|
||
</p>
|
||
|
||
<div class="ft-export-list">
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">门店</span>
|
||
<span class="ft-export-value">{{ props.selectedStoreName }}</span>
|
||
</div>
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">日期范围</span>
|
||
<span class="ft-export-value">{{ dateRangeText }}</span>
|
||
</div>
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">快捷日期</span>
|
||
<span class="ft-export-value">{{ quickRangeText }}</span>
|
||
</div>
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">交易类型</span>
|
||
<span class="ft-export-value">{{ typeText }}</span>
|
||
</div>
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">渠道</span>
|
||
<span class="ft-export-value">{{ channelText }}</span>
|
||
</div>
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">支付方式</span>
|
||
<span class="ft-export-value">{{ paymentText }}</span>
|
||
</div>
|
||
<div class="ft-export-line">
|
||
<span class="ft-export-label">关键词</span>
|
||
<span class="ft-export-value">{{ keywordText }}</span>
|
||
</div>
|
||
<div class="ft-export-line is-total">
|
||
<span class="ft-export-label">预计导出</span>
|
||
<span class="ft-export-value">{{ props.totalCount }} 条</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</template>
|