<template>
|
<div class="testStudent-container" >
|
|
<el-dialog v-model="isShowDialog" :width="800" draggable="" :close-on-click-modal="false" :show-close="false">
|
<template #header>
|
<div style="color: #fff">
|
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
|
<span> {{title}} </span>
|
</div>
|
</template>
|
<div>
|
<el-upload ref="uploadRef" v-loading="state.loading" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action="" :on-change="handleChange" accept=".xlsx">
|
<el-icon class="el-icon--upload">
|
<ele-UploadFilled />
|
</el-icon>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<template #tip>
|
<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
|
</template>
|
</el-upload>
|
<span>【</span>
|
<el-button style="width: 90px;text-align: left;" type="warning" @click="downFile" link>下载导入模板</el-button>，填写并上传
|
<span>】</span>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="closeDialog" :disabled="disable_confiom">取消</el-button>
|
<el-button type="primary" @click="uploadFile" :disabled="disable_confiom">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<style scoped>
|
:deep(.el-select),
|
:deep(.el-input-number) {
|
width: 100%;
|
}
|
</style>
|
<script lang="ts" setup>
|
import { ref,reactive } from "vue";
|
import { ElMessage } from "element-plus";
|
import { downloadFile } from '/@/utils/download2';
|
|
const state = reactive({
|
loading: false,
|
fileList: [] as any
|
});
|
|
const disable_confiom=ref<bool>(false);
|
const uploadRef = ref();
|
const getEnumGenderData = ref<any>([]);
|
const getEnumOtherGenderData = ref<any>([]);
|
//父级传递来的参数
|
var props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
//父级传递来的函数，用于回调
|
const emit = defineEmits(["parentUploadFun","parentDownFun"]);
|
const isShowDialog = ref(false);
|
|
// 打开弹窗
|
const openDialog = async () => {
|
isShowDialog.value = true;
|
};
|
|
// 关闭弹窗
|
const closeDialog = () => {
|
isShowDialog.value = false;
|
clearData();
|
};
|
|
// 下载导入模板
|
const downFile = async () => {
|
//调用父级页面方法
|
await emit("parentDownFun");
|
};
|
|
// 清空数据
|
const clearData = () =>{
|
state.fileList.value = [];
|
uploadRef.value.clearFiles();//清空已上传的文件列表
|
};
|
|
// 通过onChanne方法获得文件列表
|
const handleChange = (file: any, fileList: []) => {
|
state.fileList = fileList;
|
};
|
|
// 上传
|
const uploadFile = async () => {
|
if (state.fileList.length < 1) {
|
ElMessage.warning('请上传文件!');
|
return;
|
};
|
disable_confiom.value=true;
|
state.loading = true;
|
//调用父级页面方法
|
//debugger
|
const formData = new FormData()
|
formData.append('file',state.fileList[0].raw)
|
await emit("parentUploadFun",formData);
|
};
|
//父级页面回调上传文件
|
const callBackUploadFun=(result:any)=>{
|
if(result.type=="success"){
|
ElMessage.success('上传成功');
|
isShowDialog.value = false;
|
clearData();
|
}else{
|
//失败不用自己写提示，框架自动写
|
//ElMessage.error('上传失败:'+result.message);
|
}
|
state.loading = false;
|
disable_confiom.value=false;
|
};
|
//父级页面回调下载模板文件
|
const callBackDownFun=(result:any)=>{
|
downloadFile(result);
|
}
|
|
//将属性或者函数暴露给父组件
|
defineExpose({ openDialog,callBackUploadFun,callBackDownFun });
|
</script>
|
