feature/1.0版本页面优化 #1

Merged
Xubx merged 19 commits from feature/1.0版本页面优化 into DEV 2024-12-10 13:53:08 +08:00
1 changed files with 228 additions and 0 deletions
Showing only changes of commit 347fb88477 - Show all commits

View File

@ -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>