plus-ui/src/views/doc/data/index.vue

<template>
  <div class="p-2">
    <el-card shadow="hover" class="mb-[10px]">
      <el-form :inline="true">
        <!-- 上传区域 -->
        <el-form-item label="上传Excel" prop="excelFile" class="mr-4">
          <el-upload
            v-model:file-list="fileList"
            :auto-upload="false"
            :on-change="handleFileChange"
            accept=".xlsx,.xls"
            :show-file-list="false"
          >
            <el-button type="primary">选择文件</el-button>
            <span class="ml-2" v-if="formData.file">{{ formData.file.name }}</span>
          </el-upload>
        </el-form-item>

        <!-- 组数输入 -->
        <el-form-item label="组数" prop="count" class="mb-[30px]">
          <div class="flex items-center">
            <el-button @click="decrease" icon="Minus" circle />
            <el-input-number
              v-model="formData.count"
              :min="1"
              :max="1000"
              class="mx-2 w-24"
            />
            <el-button @click="increase" icon="Plus" circle />
          </div>
        </el-form-item>

        <!-- 生成按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="handleGenerate"
          >
            生成数据
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 下载区域 -->
    <el-card shadow="hover" class="mb-[10px]">
      <div class="flex items-center">
        <el-input
          v-model="downloadFileName"
          placeholder="请输入要下载的文件名"
          class="mr-2 w-64"
        />
        <el-button type="success" @click="handleDownload">
          下载文件
        </el-button>
      </div>
    </el-card>

    <!-- 文件列表 -->
    <el-card shadow="hover">
      <el-table :data="generatedFiles" style="width: 40%">
        <el-table-column prop="name" label="文件名" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              type="success"
              size="small"
              @click="handleDownloadItem(scope.row)"
            >
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { generateData, downloadFile } from '@/api/doc/data';
import type { ExcelGenerateParams, ExcelFileItem } from '@/api/doc/data/types';

import { globalHeaders } from '@/utils/request';
import { to } from 'await-to-js';

//服务器地址
const baseURL = import.meta.env.VITE_APP_BASE_API;
// 响应式数据
const loading = ref(false);
const downloadFileName = ref('');
const generatedFiles = ref<ExcelFileItem[]>([]);

const formData = reactive<ExcelGenerateParams>({
  file: null,
  count: 4
});

// 文件选择处理
const handleFileChange = (file: File) => {
  formData.file = file.raw;
};

// 组数增减
const increase = () => {
  if (formData.count < 100) formData.count++;
};
const decrease = () => {
  if (formData.count > 1) formData.count--;
};

// 生成数据
const handleGenerate = async () => {
  if (!formData.file) {
    ElMessage.warning('请选择Excel文件');
    return;
  }

  loading.value = true;
  try {
    const res = await generateData(formData);
    generatedFiles.value.unshift({
      name: res.data,
      url: `${baseURL}/system/caiqr/upload/downloadExcel?fileName=${res.data}`
    });
    ElMessage.success('文件生成成功');
  } catch (error) {
    ElMessage.error('文件生成失败');
  } finally {
    loading.value = false;
  }
};

// 下载处理
const handleDownload = async () => {
  if (!downloadFileName.value.trim()) {
    ElMessage.warning('请输入文件名');
    return;
  }
  try {
    ElMessage.success('文件下载开始');
    const res = await downloadFile(downloadFileName.value);
    if (res) {
      const blob = new Blob([res], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', `match_data_${new Date().getTime()}.xlsx`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      ElMessage.success('导出成功');
    }
  } catch (error) {
    ElMessage.error('文件下载失败');
  }
};

// 下载列表项
// ... existing code ...
const handleDownloadItem = async (item: ExcelFileItem) => {
  downloadFileName.value = item.name;
  try {
    const res = await downloadFile(item.name);
    ElMessage.success('文件下载开始');
    if (res) {
      const blob = new Blob([res], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', `match_data_${new Date().getTime()}.xlsx`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      ElMessage.success('导出成功');
    }
  } catch (error) {
    ElMessage.error('文件下载失败');
  }
};
</script>

<style scoped>
/* 可以保留原有样式或使用Element Plus样式 */
.mr-4 {
  margin-right: 1rem;
}
.w-24 {
  width: 6rem;
}
.w-64 {
  width: 16rem;
}
</style>