feat: 新增财务交易流水模块页面与接口

apps/web-antd/src/views/finance/transaction/components/TransactionExportModal.vue

@@ -0,0 +1,127 @@
+<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>