ExportBox.vue
4.07 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
<template>
<el-dialog title="导出拓客数据" :close-on-click-modal="false" :visible.sync="visible"
class="NCC-dialog NCC-dialog_center" lock-scroll width="500px">
<el-form label-position="right" label-width="100px">
<el-form-item label="活动编号">
<el-select v-model="exportParams.eventId" placeholder="请选择活动编号（可选）" clearable filterable :loading="eventListLoading">
<el-option
v-for="event in eventList"
:key="event.id"
:label="`${event.eventNumber} - ${event.eventName}`"
:value="event.id">
</el-option>
</el-select>
<div class="form-tip">留空则导出所有活动的数据</div>
</el-form-item>
<el-form-item label="截止时间">
<el-date-picker
v-model="exportParams.endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择截止时间（可选）"
clearable>
</el-date-picker>
<div class="form-tip">留空则导出所有时间的数据</div>
</el-form-item>
<el-form-item label="导出说明">
<div class="export-info">
<p>• 导出包含15个字段：拓客编号、拓客时间、拓客人员、顾客姓名、电话号码、购买张数、支付方式、是否加微信、备注、门店名称、活动名称等</p>
<p>• 所有字段都会显示中文名称，无需手动选择</p>
<p>• 支持从下拉框选择活动编号，或按截止时间进行筛选</p>
<p>• 活动编号显示格式：编号 - 活动名称</p>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible=false">取 消</el-button>
<el-button type="primary" @click="downLoad" :loading="btnLoading">导 出</el-button>
</span>
</el-dialog>
</template>
<script>
import { getLqEventList } from '@/api/extend/lqevent'
export default {
data() {
return {
visible: false,
btnLoading: false,
eventList: [],
eventListLoading: false,
exportParams: {
eventId: '',
endTime: ''
}
}
},
methods: {
init() {
this.visible = true
// 重置参数
this.exportParams = {
eventId: '',
endTime: ''
}
// 获取活动列表
this.getEventList()
},
// 获取拓客活动列表
async getEventList() {
this.eventListLoading = true
try {
const response = await getLqEventList({
currentPage: 1,
pageSize: 1000 // 获取所有活动
})
if (response.code === 200 && response.data && response.data.list) {
this.eventList = response.data.list.map(event => ({
id: event.id,
eventNumber: event.eventNumber,
eventName: event.eventName
}))
} else {
this.eventList = []
}
} catch (error) {
console.error('获取活动列表失败:', error)
this.eventList = []
this.$message({
type: 'warning',
message: '获取活动列表失败，请手动输入活动编号'
})
} finally {
this.eventListLoading = false
}
},
downLoad() {
this.btnLoading = true
// 发送简化的参数
this.$emit('download', {
eventId: this.exportParams.eventId || null,
endTime: this.exportParams.endTime || null
})
// 延迟重置loading状态
setTimeout(() => {
this.btnLoading = false
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
>>> .el-dialog__body {
padding: 20px !important;
}
.form-tip {
font-size: 12px;
color: #909399;
margin-top: 5px;
}
.export-info {
background-color: #f5f7fa;
padding: 15px;
border-radius: 4px;
border-left: 4px solid #409eff;
p {
margin: 5px 0;
font-size: 13px;
color: #606266;
line-height: 1.5;
}
}
.el-form-item {
margin-bottom: 20px;
}
.dialog-footer {
text-align: right;
}
</style>