mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-25 05:24:57 +08:00
68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
||
<el-dialog v-model="dialogVisible" :title="title" width="50%">
|
||
<el-upload v-model:file-list="fileList" drag accept=".xls, .xlsx" :auto-upload="false" :limit="1">
|
||
<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 { 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>
|