From 347fb8847760497eff734d4502ab125c827854e6 Mon Sep 17 00:00:00 2001
From: YuNan <3194726156@qq.com>
Date: Wed, 23 Oct 2024 19:19:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E7=94=9F=E4=BF=A1=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cet/data-import/student-data-import.vue   | 228 ++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 src/views/cet/data-import/student-data-import.vue

diff --git a/src/views/cet/data-import/student-data-import.vue b/src/views/cet/data-import/student-data-import.vue
new file mode 100644
index 0000000..ebfecf7
--- /dev/null
+++ b/src/views/cet/data-import/student-data-import.vue
@@ -0,0 +1,228 @@
+<template>
+  <div style="background: #ececec; padding-top: 0px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px">
+    <a-card title="英语四级数据导入" :bordered="false">
+      <a-row :gutter="2">
+        <a-col :xl="24" :style="{ marginBottom: '24px' }">
+          <div class="clearfix">
+            <div class="clearfix">
+              <!-- accept=".dbf" 属性限制文件类型 -->
+              <a-upload
+                :file-list="fileList"
+                accept=".dbf"
+                :max-count="1"
+                :customRequest="handleUpload"
+                :before-upload="beforeUpload"
+                @remove="handleRemove"
+              >
+                <a-button type="primary">
+                  <upload-outlined />
+                  导入文件
+                </a-button>
+              </a-upload>
+            </div>
+            <!--<div class="clearfix">
+              <a-button preIcon="ant-design:export-outlined" @click="downloadTemplate"> 下载模板</a-button>
+            </div>-->
+            <div class="clearfix">
+              <a-button type="primary" :disabled="!canUpload" :loading="uploading" @click="handleUpload">
+                {{ uploading ? 'Uploading' : '确认上传文件' }}
+              </a-button>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="10">
+        <a-col :xl="24">
+          <a-table :dataSource="dataSourceCet4" :columns="columns" :pagination="false" :loading="loading" bordered class="custom-table" />
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { downloadTemplateExcel } from './dataImportApi';
+  import { conversionFileDownload } from '@/utils/download';
+  const loading = ref(false);
+  // 批次选择（月份选择器）
+  const month = ref(null);
+  const url = {
+    downLoadTemplate: '/cetDataImport/downloadTemplate',
+    importCet4Data: '/cetDataImport/dbfImport',
+    loadImportData: '/cet_4/loadImportDataList',
+  };
+  // 文件上传部分
+  const fileList: any = ref([]);
+  const uploading = ref(false);
+
+  // 计算属性：控制上传按钮的可用性
+  const canUpload = computed(() => fileList.value.length > 0 && month.value !== null);
+
+  // 移除文件
+  const handleRemove = (file) => {
+    const index = fileList.value.indexOf(file);
+    const newFileList = fileList.value.slice();
+    newFileList.splice(index, 1);
+    fileList.value = newFileList;
+  };
+
+  // 文件选择前的校验处理
+  const beforeUpload = (file) => {
+    console.log(file);
+    fileList.value = [];
+    fileList.value = [...fileList.value, file];
+    let fileType = file.name.split('.').pop().toLowerCase();
+    if (fileType !== 'dbf') {
+      message.error('请上传.dbf文件');
+      fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
+    }
+    return false; // 阻止自动上传
+  };
+  // 处理上传逻辑
+  const handleUpload = async () => {
+    // 检查是否选择了文件
+    if (!fileList.value || fileList.value.length === 0) {
+      message.error('没有选择文件');
+      return;
+    }
+
+    const file = fileList.value[0];
+    if (!file) {
+      message.error('没有选择文件');
+      return;
+    }
+
+    // 读取文件为 Base64 编码
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = async () => {
+      const base64File = reader.result as string;
+
+      // 构建请求体
+      const payload = {
+        fileName: file.name,
+        fileContent: base64File,
+        batch: '',
+      };
+
+      // 处理 batch 参数
+      let batch: any = month.value;
+      if (batch) {
+        batch = batch.format('YYYY-MM-DD');
+        batch = setDayToFirst(batch); // 将日期的天改为当月第一天
+        payload.batch = batch;
+      }
+
+      try {
+        uploading.value = true;
+
+        // 发送 POST 请求
+        const response: any = await defHttp.post(
+          {
+            url: url.importCet4Data,
+            data: payload,
+            headers: { 'Content-Type': 'application/json' },
+          },
+          {
+            isTransformResponse: false,
+          }
+        );
+
+        // 清空文件列表和日期选择（根据需要）
+        fileList.value = [];
+
+        // 处理响应
+        if (response.success) {
+          message.success('上传成功');
+        } else {
+          message.error(response.message || '上传失败');
+        }
+      } catch (error) {
+        console.error('上传失败:', error);
+        message.error('上传失败');
+      } finally {
+        uploading.value = false;
+      }
+    };
+    reader.onerror = (error) => {
+      console.error('文件读取错误:', error);
+      message.error('文件读取失败');
+    };
+  };
+
+  /**
+   * 将 'yyyy-MM-dd' 格式的日期字符串的天部分设置为 '01'
+   * @param {string} dateStr - 原始日期字符串，格式为 'yyyy-MM-dd'
+   * @returns {string} 修改后的日期字符串，格式为 'yyyy-MM-01'
+   */
+  const setDayToFirst = (dateStr) => {
+    // 使用正则表达式验证日期格式
+    const regex = /^(\d{4})-(\d{2})-(\d{2})$/;
+    const match = dateStr.match(regex);
+
+    if (!match) {
+      throw new Error("日期格式不正确，应为 'yyyy-MM-dd'");
+    }
+
+    const year = match[1];
+    const month = match[2];
+
+    // 构造新的日期字符串，天部分设置为 '01'
+    return `${year}-${month}-01`;
+  };
+
+  // 定义表格的数据源
+  const dataSourceCet4 = ref([]);
+  // 定义表格的列配置
+  const columns = [
+    {
+      title: '年级',
+      dataIndex: 'entrydate',
+      key: 'entrydate',
+      align: 'center',
+    },
+    {
+      title: '学生人数',
+      dataIndex: 'studentNumber',
+      key: 'studentNumber',
+      align: 'center',
+    },
+  ];
+  //处理表格数据源
+  const fetchData = async () => {
+    loading.value = true; // 开始加载
+    try {
+      const response = await defHttp.post({ url: url.loadImportData });
+      console.log(response, 'response');
+      dataSourceCet4.value = response.data; // 将数据绑定到表格
+    } catch (error) {
+      message.error('Failed to load data.');
+    } finally {
+      loading.value = false; // 加载结束
+    }
+  };
+
+  //const downloadTemplate = async () => {
+  //  downloadTemplateExcel()
+  //    .then((response: any) => {
+  //      console.log(response, '123');
+  //      conversionFileDownload(response);
+  //    })
+  //    .catch((error) => {
+  //      console.error(error);
+  //    });
+  //};
+
+  // 在组件挂载时调用 fetchData
+  onMounted(fetchData);
+</script>
+
+<style scoped>
+  .clearfix {
+    display: flex;
+    padding-left: 10px;
+  }
+</style>
\ No newline at end of file