export-approved-details-dialog.vue
3.26 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
<template>
<el-dialog
:visible.sync="visible"
title="导出已通过报销明细"
width="420px"
@close="handleClose"
>
<div class="export-content">
<el-form label-width="80px" label-position="right">
<el-form-item label="选择月份">
<el-date-picker
v-model="selectedMonth"
type="month"
placeholder="请选择月份"
format="yyyy-MM"
value-format="yyyy-MM"
style="width: 260px"
/>
</el-form-item>
</el-form>
<p class="tip-text">
将导出所选月份内<span class="strong-text">已审核通过</span>的报销申请及其购买明细，
用于线下整理后导入店内支出表。
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" :loading="loading" @click="handleConfirm">
确 定
</el-button>
</span>
</el-dialog>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'ExportApprovedDetailsDialog',
data() {
return {
visible: false,
loading: false,
selectedMonth: ''
}
},
methods: {
// 对外初始化方法
init() {
this.visible = true
this.loading = false
this.selectedMonth = this.getCurrentMonth()
},
// 获取当前月份，格式：yyyy-MM
getCurrentMonth() {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
return `${year}-${month}`
},
handleClose() {
this.visible = false
this.$emit('close')
},
async handleConfirm() {
if (!this.selectedMonth) {
this.$message.warning('请选择要导出的月份')
return
}
const parts = this.selectedMonth.split('-')
if (parts.length !== 2) {
this.$message.error('月份格式不正确')
return
}
const year = parseInt(parts[0], 10)
const month = parts[1]
if (!year || !month) {
this.$message.error('年份或月份不正确')
return
}
this.loading = true
try {
const res = await request({
url: '/api/Extend/LqReimbursementApplication/Actions/ExportApprovedDetails',
method: 'GET',
data: {
year,
month
}
})
if (res && res.data && res.data.url) {
// 触发文件下载
window.location.href = this.define.comUrl + res.data.url
this.$message.success('导出任务已开始，请稍后查看下载的文件')
this.handleClose()
} else {
this.$message.error((res && res.msg) || '导出失败，请稍后重试')
}
} catch (error) {
console.error('导出失败:', error)
this.$message.error('导出失败，请稍后重试')
} finally {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.export-content {
padding: 10px 10px 0 10px;
}
.tip-text {
margin-top: 10px;
font-size: 12px;
color: #909399;
line-height: 1.6;
}
.strong-text {
color: #F56C6C;
font-weight: 600;
}
.dialog-footer {
text-align: right;
}
</style>