feature/1.0版本页面优化 #1
|
@ -0,0 +1,70 @@
|
||||||
|
function myBrowser() {
|
||||||
|
var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
|
||||||
|
var isOpera = userAgent.indexOf('Opera') > -1;
|
||||||
|
if (isOpera) {
|
||||||
|
return 'Opera';
|
||||||
|
} // 判断是否Opera浏览器
|
||||||
|
if (userAgent.indexOf('Firefox') > -1) {
|
||||||
|
return 'FF';
|
||||||
|
} // 判断是否Firefox浏览器
|
||||||
|
if (userAgent.indexOf('Chrome') > -1) {
|
||||||
|
return 'Chrome';
|
||||||
|
}
|
||||||
|
if (userAgent.indexOf('Safari') > -1) {
|
||||||
|
return 'Safari';
|
||||||
|
} // 判断是否Safari浏览器
|
||||||
|
if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) {
|
||||||
|
return 'IE';
|
||||||
|
} // 判断是否IE浏览器
|
||||||
|
if (userAgent.indexOf('Trident') > -1) {
|
||||||
|
return 'Edge';
|
||||||
|
} // 判断是否Edge浏览器
|
||||||
|
}
|
||||||
|
function SaveAs5(imgURL) {
|
||||||
|
var oPop = window.open(imgURL, '', 'width=1, height=1, top=5000, left=5000');
|
||||||
|
for (; oPop.document.readyState !== 'complete'; ) {
|
||||||
|
if (oPop.document.readyState === 'complete') break;
|
||||||
|
}
|
||||||
|
oPop.document.execCommand('SaveAs');
|
||||||
|
oPop.close();
|
||||||
|
}
|
||||||
|
function download(src, fileName) {
|
||||||
|
// 创建隐藏的可下载链接
|
||||||
|
var eleLink = document.createElement('a');
|
||||||
|
if (fileName) {
|
||||||
|
eleLink.setAttribute('download', fileName);
|
||||||
|
} else {
|
||||||
|
eleLink.download = src;
|
||||||
|
}
|
||||||
|
eleLink.style.display = 'none';
|
||||||
|
// // 字符内容转变成blob地址
|
||||||
|
eleLink.href = src;
|
||||||
|
// // 触发点击
|
||||||
|
document.body.appendChild(eleLink);
|
||||||
|
eleLink.click();
|
||||||
|
// // 然后移除
|
||||||
|
document.body.removeChild(eleLink);
|
||||||
|
}
|
||||||
|
function downLoadFile(url, fileName = '') {
|
||||||
|
if (myBrowser() === 'IE' || myBrowser() === 'Edge') {
|
||||||
|
SaveAs5(url);
|
||||||
|
} else {
|
||||||
|
download(url, fileName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function conversionFileDownload(res) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
|
||||||
|
const temp = res.headers['content-disposition'].split(';')[1].split('filename=')[1];
|
||||||
|
// 对文件名乱码转义--【Node.js】使用iconv-lite解决中文乱码
|
||||||
|
const iconv = require('iconv-lite');
|
||||||
|
iconv.skipDecodeWarning = true; // 忽略警告
|
||||||
|
const fileName = iconv.decode(temp, 'utf-8');
|
||||||
|
console.log(fileName);
|
||||||
|
a.setAttribute('download', fileName);
|
||||||
|
const objectUrl = URL.createObjectURL(blob);
|
||||||
|
a.setAttribute('href', objectUrl);
|
||||||
|
a.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
export { downLoadFile, conversionFileDownload };
|
|
@ -261,7 +261,6 @@
|
||||||
this.collegeMajor = '全校';
|
this.collegeMajor = '全校';
|
||||||
}
|
}
|
||||||
//如果this.batch[1]不存在则设为null
|
//如果this.batch[1]不存在则设为null
|
||||||
let major = this.batch.length > 1 ? this.batch[1] : '';
|
|
||||||
this.topCollege = this.collegeMajor;
|
this.topCollege = this.collegeMajor;
|
||||||
this.topBath = this.batch;
|
this.topBath = this.batch;
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
|
@ -55,7 +55,7 @@
|
||||||
});
|
});
|
||||||
const isShow = ref(false);
|
const isShow = ref(false);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const tableData = ref([]);
|
const tableData: any = ref([]);
|
||||||
const tableLabel = ref([
|
const tableLabel = ref([
|
||||||
{
|
{
|
||||||
title: '考试批次',
|
title: '考试批次',
|
||||||
|
|
|
@ -2,24 +2,31 @@
|
||||||
<div style="background: #ececec; padding-top: 0px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px">
|
<div style="background: #ececec; padding-top: 0px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px">
|
||||||
<a-card title="英语四级数据导入" :bordered="false">
|
<a-card title="英语四级数据导入" :bordered="false">
|
||||||
<a-row :gutter="2">
|
<a-row :gutter="2">
|
||||||
<a-col :xl="3" :style="{ marginBottom: '24px' }">
|
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
||||||
<a-space direction="vertical" :size="12">
|
|
||||||
<a-date-picker v-model:value="month" picker="month" />
|
|
||||||
</a-space>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :xl="5" :style="{ marginBottom: '24px' }">
|
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<!-- accept=".dbf" 属性限制文件类型 -->
|
<span style="padding-top: 5px">考试批次:</span>
|
||||||
<a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
|
<a-space direction="vertical" :size="12">
|
||||||
<a-button type="primary">
|
<a-date-picker v-model:value="month" picker="month" />
|
||||||
<upload-outlined />
|
</a-space>
|
||||||
导入文件
|
|
||||||
</a-button>
|
|
||||||
</a-upload>
|
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<a-button preIcon="ant-design:export-outlined" @click="onExportXls"> 下载模板</a-button>
|
<!-- 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>
|
||||||
|
<!--<div class="clearfix">
|
||||||
|
<a-button preIcon="ant-design:export-outlined" @click="downloadTemplate"> 下载模板</a-button>
|
||||||
|
</div>-->
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<a-button type="primary" :disabled="!canUpload" :loading="uploading" @click="handleUpload">
|
<a-button type="primary" :disabled="!canUpload" :loading="uploading" @click="handleUpload">
|
||||||
{{ uploading ? 'Uploading' : '确认上传文件' }}
|
{{ uploading ? 'Uploading' : '确认上传文件' }}
|
||||||
|
@ -27,7 +34,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="1" :style="{ marginBottom: '24px' }" />
|
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row :gutter="10">
|
<a-row :gutter="10">
|
||||||
<a-col :xl="24">
|
<a-col :xl="24">
|
||||||
|
@ -38,15 +44,22 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted } from 'vue';
|
import { ref, computed, onMounted } from 'vue';
|
||||||
import { message } from 'ant-design-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 month = ref(null);
|
||||||
|
const url = {
|
||||||
|
downLoadTemplate: '/cetDataImport/downloadTemplate',
|
||||||
|
importCet4Data: '/cetDataImport/dbfImport',
|
||||||
|
loadImportData: '/cet_4/loadImportDataList',
|
||||||
|
};
|
||||||
// 文件上传部分
|
// 文件上传部分
|
||||||
const fileList = ref([]);
|
const fileList: any = ref([]);
|
||||||
const uploading = ref(false);
|
const uploading = ref(false);
|
||||||
|
|
||||||
// 计算属性:控制上传按钮的可用性
|
// 计算属性:控制上传按钮的可用性
|
||||||
|
@ -62,33 +75,110 @@
|
||||||
|
|
||||||
// 文件选择前的校验处理
|
// 文件选择前的校验处理
|
||||||
const beforeUpload = (file) => {
|
const beforeUpload = (file) => {
|
||||||
|
console.log(file);
|
||||||
|
fileList.value = [];
|
||||||
fileList.value = [...fileList.value, file];
|
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; // 阻止自动上传
|
return false; // 阻止自动上传
|
||||||
};
|
};
|
||||||
// 处理上传逻辑
|
// 处理上传逻辑
|
||||||
const handleUpload = async () => {
|
const handleUpload = async () => {
|
||||||
const formData = new FormData();
|
// 检查是否选择了文件
|
||||||
fileList.value.forEach((file) => {
|
if (!fileList.value || fileList.value.length === 0) {
|
||||||
formData.append('files[]', file);
|
message.error('没有选择文件');
|
||||||
});
|
return;
|
||||||
|
|
||||||
uploading.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
let queryParams = {
|
|
||||||
month: month,
|
|
||||||
formData: formData,
|
|
||||||
};
|
|
||||||
const response = await defHttp.post({ url: url, data: queryParams });
|
|
||||||
fileList.value = [];
|
|
||||||
month.value = null; // 上传后清空日期选择
|
|
||||||
message.success('Upload successfully.');
|
|
||||||
} catch (error) {
|
|
||||||
message.error('Upload failed.');
|
|
||||||
} finally {
|
|
||||||
uploading.value = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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: '',
|
||||||
|
level: 'cet4',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理 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 dataSourceCet4 = ref([]);
|
||||||
// 定义表格的列配置
|
// 定义表格的列配置
|
||||||
|
@ -110,7 +200,7 @@
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
loading.value = true; // 开始加载
|
loading.value = true; // 开始加载
|
||||||
try {
|
try {
|
||||||
const response = await defHttp.get('/api/words');
|
const response = await defHttp.post({ url: url.loadImportData });
|
||||||
console.log(response, 'response');
|
console.log(response, 'response');
|
||||||
dataSourceCet4.value = response.data; // 将数据绑定到表格
|
dataSourceCet4.value = response.data; // 将数据绑定到表格
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
@ -120,6 +210,17 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//const downloadTemplate = async () => {
|
||||||
|
// downloadTemplateExcel()
|
||||||
|
// .then((response: any) => {
|
||||||
|
// console.log(response, '123');
|
||||||
|
// conversionFileDownload(response);
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// console.error(error);
|
||||||
|
// });
|
||||||
|
//};
|
||||||
|
|
||||||
// 在组件挂载时调用 fetchData
|
// 在组件挂载时调用 fetchData
|
||||||
onMounted(fetchData);
|
onMounted(fetchData);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
|
||||||
|
export function downloadTemplateExcel() {
|
||||||
|
return defHttp.request<Blob>({
|
||||||
|
url: '/cetDataImport/downloadTemplate',
|
||||||
|
method: 'post',
|
||||||
|
responseType: 'blob',
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in New Issue