ExportBox.vue
4.12 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
<template>
<el-dialog title="导出拓客活动" :close-on-click-modal="false" :visible.sync="visible" width="500px">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
<el-form-item label="导出格式" prop="fileType">
<el-radio-group v-model="dataForm.fileType">
<el-radio label="excel">Excel</el-radio>
<el-radio label="csv">CSV</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导出范围" prop="exportRange">
<el-radio-group v-model="dataForm.exportRange">
<el-radio label="all">全部数据</el-radio>
<el-radio label="current">当前页</el-radio>
<el-radio label="selected">选中数据</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导出字段" prop="fields">
<el-checkbox-group v-model="dataForm.fields">
<el-checkbox label="eventName">活动名称</el-checkbox>
<el-checkbox label="eventNumber">活动编号</el-checkbox>
<el-checkbox label="eventCoordinator">活动负责人</el-checkbox>
<el-checkbox label="startTime">开始时间</el-checkbox>
<el-checkbox label="endTime">结束时间</el-checkbox>
<el-checkbox label="memberCount">参与人数</el-checkbox>
<el-checkbox label="createTime">创建时间</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="文件名" prop="fileName">
<el-input v-model="dataForm.fileName" placeholder="请输入文件名" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()" :loading="exportLoading">确定导出</el-button>
</span>
</el-dialog>
</template>
<script>
import { exportLqEvent } from '@/api/extend/lqevent'
import { saveAs } from 'file-saver'
export default {
name: 'LqEventExportBox',
data() {
return {
visible: false,
exportLoading: false,
dataForm: {
fileType: 'excel',
exportRange: 'all',
fields: ['eventName', 'eventNumber', 'eventCoordinator', 'startTime', 'endTime', 'memberCount', 'createTime'],
fileName: '拓客活动数据'
},
dataRule: {
fileType: [
{ required: true, message: '请选择导出格式', trigger: 'change' }
],
exportRange: [
{ required: true, message: '请选择导出范围', trigger: 'change' }
],
fields: [
{ required: true, message: '请选择导出字段', trigger: 'change' }
],
fileName: [
{ required: true, message: '请输入文件名', trigger: 'blur' }
]
}
}
},
methods: {
init() {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.dataForm = {
fileType: 'excel',
exportRange: 'all',
fields: ['eventName', 'eventNumber', 'eventCoordinator', 'startTime', 'endTime', 'memberCount', 'createTime'],
fileName: '拓客活动数据'
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.exportLoading = true
const exportData = {
...this.dataForm,
query: this.$parent.query || {}
}
exportLqEvent(exportData).then(response => {
// 创建文件名
const timestamp = new Date().getTime()
const fileExtension = this.dataForm.fileType === 'excel' ? 'xlsx' : 'csv'
const fileName = `${this.dataForm.fileName}_${timestamp}.${fileExtension}`
// 保存文件
const blob = new Blob([response], {
type: this.dataForm.fileType === 'excel'
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
: 'text/csv;charset=utf-8'
})
saveAs(blob, fileName)
this.$message({
message: '导出成功',
type: 'success'
})
this.visible = false
this.exportLoading = false
}).catch(() => {
this.exportLoading = false
})
}
})
}
}
}
</script>
<style scoped>
.dialog-footer {
text-align: right;
}
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
}
.el-checkbox {
margin-right: 20px;
margin-bottom: 10px;
}
</style>