rax-medical/src/components/import-dialog.vue

<template>
	<el-dialog v-model="dialogVisible" :title="title" width="50%">
		<el-upload action="#" v-model:file-list="fileList" drag accept=".xls, .xlsx"
							 :auto-upload="false" :limit="1" :http-request="handleUpload" ref="uploadRef">
			<div class="el-upload__text" style="padding: 40px 10px;font-size: 20px;">
				将文件拖到此处，或 <em>点击上传</em>
			</div>
			<template #tip>
				<div class="el-upload__tip" style="font-size: 16px;">
					仅允许导入xls、xlsx格式文件。<span class="main-color" style="cursor: pointer;"
																					 @click="downloadTemplate">下载模板</span>
				</div>
			</template>
		</el-upload>

		<div style="text-align: right;margin-top: 20px;">
			<el-button class="f18" @click="dialogVisible = false">取消</el-button>
			<el-button class="f18" type="primary" @click="importData">确认</el-button>
		</div>
	</el-dialog>
</template>

<script lang='ts' setup>
import {ref} from 'vue'
import type {UploadUserFile} from 'element-plus'
import {ElMessage} from 'element-plus'
import {downBlobFile} from "@/utils/file-util";
import {handleHttpUploadUrl} from "@/api/file-upload";

const emit = defineEmits(['success', 'error'])

const props = defineProps({
	title: String,
	templateUrl: String, // 模板下载地址
	importUrl: String, // 上传接口地址
})

const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([])
const uploadRef = ref()

defineExpose({
	open,
	close
})

function open() {
	dialogVisible.value = true
}

function close() {
	dialogVisible.value = false
}

const downloadTemplate = () => {
	downBlobFile(props.templateUrl, {}, "temp.xlsx")
}
const importData = () => {
	// console.log(fileList.value)
	if (fileList.value.length === 0) {
		ElMessage.warning('请上传符合格式的xls或xlsx文件')
		return
	}
	uploadRef.value.submit()
	// emit('error')
}

function handleUpload(options: any) {
	handleHttpUploadUrl(options, props.importUrl).then((res: any) => {
		if (res.code == 0) {
			ElMessage.success('上传成功')
			close()
			emit('success')
		} else {
			ElMessage.error(res.msg ? res.msg : "上传失败")
			emit("error");
		}
	})
}

</script>

<style lang='scss' scoped></style>