wuzhen
8697b21b4d
- 完成学生信息管理核心功能开发 - 新增学生信息采集批次管理功能 - 完成班干部管理模块开发 - 修复物业报修模块附件上传逻辑 - 完善数据库表结构和权限配置 - 更新API文档和变更记录 - 优化前端页面交互体验 详细变更记录见： - docs/变更管理/code-adjust-record-2025-01-13-wuzhen.md - docs/变更管理/code-adjust-record-2025-07-11-wuzilong.md - docs/变更管理/code-adjust-record-2025-07-12-wuzhen.md
127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<template>
|
||
<el-dialog title="导入数据" v-model="dialogVisible" width="600px" append-to-body @close="handleClose">
|
||
<el-form>
|
||
<el-form-item label="选择文件">
|
||
<el-upload
|
||
ref="uploadRef"
|
||
:action="uploadUrl"
|
||
:headers="headers"
|
||
:on-success="handleSuccess"
|
||
:on-error="handleError"
|
||
:before-upload="beforeUpload"
|
||
:file-list="fileList"
|
||
:auto-upload="false"
|
||
accept=".xlsx,.xls"
|
||
drag
|
||
>
|
||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<template #tip>
|
||
<div class="el-upload__tip">只能上传xlsx/xls文件，且不超过10MB</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleDownloadTemplate">下载模板</el-button>
|
||
<el-button @click="handleClose">取 消</el-button>
|
||
<el-button type="primary" @click="handleUpload" :loading="uploading">
|
||
{{ uploading ? '导入中...' : '确定导入' }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
|
||
import { getToken } from '@/utils/auth';
|
||
|
||
interface Props {
|
||
visible: boolean;
|
||
uploadUrl: string;
|
||
templateUrl: string;
|
||
}
|
||
|
||
interface Emits {
|
||
(e: 'update:visible', value: boolean): void;
|
||
(e: 'success'): void;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
const emit = defineEmits<Emits>();
|
||
|
||
const uploadRef = ref<UploadInstance>();
|
||
const uploading = ref(false);
|
||
const fileList = ref([]);
|
||
|
||
const dialogVisible = computed({
|
||
get: () => props.visible,
|
||
set: (value) => emit('update:visible', value)
|
||
});
|
||
|
||
const headers = computed(() => ({
|
||
Authorization: 'Bearer ' + getToken()
|
||
}));
|
||
|
||
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
|
||
const isExcel = rawFile.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || rawFile.type === 'application/vnd.ms-excel';
|
||
const isLt10M = rawFile.size / 1024 / 1024 < 10;
|
||
|
||
if (!isExcel) {
|
||
ElMessage.error('只能上传 Excel 文件!');
|
||
return false;
|
||
}
|
||
if (!isLt10M) {
|
||
ElMessage.error('文件大小不能超过 10MB!');
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const handleSuccess = (response: any) => {
|
||
uploading.value = false;
|
||
if (response.code === 200) {
|
||
ElMessage.success('导入成功');
|
||
emit('success');
|
||
handleClose();
|
||
} else {
|
||
ElMessage.error(response.msg || '导入失败');
|
||
}
|
||
};
|
||
|
||
const handleError = () => {
|
||
uploading.value = false;
|
||
ElMessage.error('导入失败');
|
||
};
|
||
|
||
const handleUpload = () => {
|
||
if (fileList.value.length === 0) {
|
||
ElMessage.warning('请先选择文件');
|
||
return;
|
||
}
|
||
uploading.value = true;
|
||
uploadRef.value?.submit();
|
||
};
|
||
|
||
const handleDownloadTemplate = () => {
|
||
window.open(props.templateUrl, '_blank');
|
||
};
|
||
|
||
const handleClose = () => {
|
||
dialogVisible.value = false;
|
||
fileList.value = [];
|
||
uploading.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog-footer {
|
||
text-align: right;
|
||
}
|
||
</style>
|