ImportDialog.vue
5.04 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<template>
<el-dialog
title="导入考勤数据"
:visible.sync="visible"
width="500px"
:close-on-click-modal="false"
@close="close"
>
<div>
<el-form label-width="100px" label-position="right">
<el-form-item label="选择文件">
<el-upload
ref="upload"
:action="uploadUrl"
:headers="uploadHeaders"
:data="uploadData"
:file-list="fileList"
:before-upload="beforeUpload"
:on-success="onUploadSuccess"
:on-error="onUploadError"
:on-change="handleFileChange"
:auto-upload="false"
:limit="1"
:on-exceed="handleExceed"
accept=".xlsx,.xls"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传一个xlsx/xls文件，且不超过10MB</div>
</el-upload>
</el-form-item>
</el-form>
<div v-if="uploadResult" class="upload-result">
<el-alert
:title="uploadResult.title"
:type="uploadResult.type"
:description="uploadResult.description"
show-icon
:closable="false"
/>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="submitUpload" :loading="uploading" >
确定导入
</el-button>
</div>
</el-dialog>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'ImportDialog',
data() {
return {
visible: false,
uploading: false,
fileList: [],
uploadUrl: '',
uploadHeaders: {},
uploadData: {},
uploadResult: null
}
},
methods: {
init() {
this.visible = true
this.resetForm()
},
resetForm() {
this.fileList = []
this.uploadResult = null
this.uploading = false
},
beforeUpload(file) {
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
file.type === 'application/vnd.ms-excel'
const isLt10M = file.size / 1024 / 1024 < 10
if (!isExcel) {
this.$message.error('只能上传Excel文件!')
return false
}
if (!isLt10M) {
this.$message.error('上传文件大小不能超过 10MB!')
return false
}
return true
},
submitUpload() {
console.log('fileList:', this.fileList)
console.log('fileList.length:', this.fileList.length)
if (!this.fileList.length || !this.fileList[0]) {
this.$message.warning('请选择要上传的文件')
return
}
const file = this.fileList[0]
console.log('selected file:', file)
if (!file.raw) {
this.$message.warning('文件信息异常，请重新选择文件')
return
}
this.uploading = true
this.uploadResult = null
const formData = new FormData()
formData.append('file', file.raw)
request({
url: '/api/Extend/lqattendancesummary/ImportAttendanceDataFromExcel',
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
this.uploading = false
if (res.code === 200) {
this.uploadResult = {
type: 'success',
title: '导入成功',
description: res.msg || '数据导入完成'
}
this.$message.success('导入成功')
setTimeout(() => {
this.close()
this.$emit('refresh', true)
}, 2000)
} else {
this.uploadResult = {
type: 'error',
title: '导入失败',
description: res.msg || '数据导入失败，请检查文件格式'
}
}
}).catch(err => {
this.uploading = false
this.uploadResult = {
type: 'error',
title: '导入失败',
description: err.message || '网络错误，请重试'
}
this.$message.error('导入失败')
})
},
onUploadSuccess(response, file, fileList) {
// 这里不需要处理，因为我们使用手动上传
},
onUploadError(err, file, fileList) {
this.uploading = false
this.uploadResult = {
type: 'error',
title: '上传失败',
description: '文件上传失败，请重试'
}
},
handleExceed(files, fileList) {
this.$message.warning('只能上传一个文件，请先删除已选择的文件')
},
handleFileChange(file, fileList) {
console.log('文件变化:', file, fileList)
this.fileList = fileList
},
close() {
this.visible = false
this.resetForm()
}
}
}
</script>
<style scoped>
.upload-result {
margin-top: 20px;
}
.el-upload-dragger {
width: 100%;
}
</style>