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

<template>
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
        <el-upload v-model:file-list="fileList" drag accept=".xls, .xlsx" :auto-upload="false" :limit="1">
            <div class="el-upload__text">
                将文件拖到此处，或 <em>点击上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    仅允许导入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 { onMounted, reactive, ref, toRefs, watch } from 'vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

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

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

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

defineExpose({
    open,
    close
})

function open() {
    dialogVisible.value = true
}
function close() {
    dialogVisible.value = false
}

const downloadTemplate = () => {
    window.open(props.templateUrl, '_blank')
}
const importData = () => {
    console.log(fileList.value)
    if(fileList.value.length === 0) {
        ElMessage.warning('请上传符合格式的xls或xlsx文件')
        return
    }
    ElMessage.success('上传成功')
    close()
    emit('success')
    // emit('error')
}

</script>

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