importDuan.vue
2.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<el-dialog v-model="show" title="段位信息上传" width="400px" append-to-body draggable>
<el-upload
ref="uploadRef"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
name="excel"
>
<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 text-center">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link href="/static/excel/duanInfo.xlsx" type="primary" target="_blank">下载模板</el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="show = false">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { reactive } from '@vue/runtime-core'
import { getToken } from '@/utils/auth'
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['uploaded'])
const show = ref(false)
const upload = reactive({
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: ''
})
function submitFileForm() {
proxy.$refs['uploadRef'].submit()
}
const handleFileUploadProgress = (event, file, fileList) => {
upload.isUploading = true
}
const handleFileSuccess = (response, file, fileList) => {
show.value = false
upload.isUploading = false
proxy.$refs['uploadRef'].handleRemove(file)
proxy.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
'</div>',
'导入结果',
{ dangerouslyUseHTMLString: true }
).then(() => {
emit('uploaded')
})
}
function open() {
upload.url = `${import.meta.env.VITE_APP_BASE_API}/person/technology/importDuan`
show.value = true
}
defineExpose({
open
})
</script>
<style scoped>
</style>