|
|
|
@ -107,6 +107,9 @@ |
|
|
|
<el-form-item label=" " style="margin-top: -11px"> |
|
|
|
<el-button @click="getDataList('Y')" type="primary" class="search-btn" plain>查询</el-button> |
|
|
|
<el-button @click="resetQuery()" plain class="reset-btn">重置</el-button> |
|
|
|
<el-button @click="exportReport()" plain class="export-btn" :loading="exportLoading"> |
|
|
|
{{ exportLoading ? '导出中...' : '导出' }} |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
@ -335,7 +338,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getApprovalCycleReportList } from '@/api/erf/erf' |
|
|
|
import { getApprovalCycleReportList, exportApprovalCycleReport } from '@/api/erf/erf' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'ApprovalCycleReport', |
|
|
|
@ -367,6 +370,7 @@ export default { |
|
|
|
pageSize: 20, |
|
|
|
totalPage: 0, |
|
|
|
dataListLoading: false, |
|
|
|
exportLoading: false, |
|
|
|
|
|
|
|
// 表格高度 |
|
|
|
tableHeight: 500 |
|
|
|
@ -464,6 +468,85 @@ export default { |
|
|
|
this.getDataList('Y') |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 导出报表 |
|
|
|
*/ |
|
|
|
exportReport() { |
|
|
|
this.exportLoading = true |
|
|
|
|
|
|
|
const exportParams = { ...this.queryHeaderData } |
|
|
|
delete exportParams.page |
|
|
|
delete exportParams.limit |
|
|
|
|
|
|
|
exportApprovalCycleReport(exportParams).then((response) => { |
|
|
|
const contentType = (response.headers['content-type'] || '').toLowerCase() |
|
|
|
if (!contentType.includes('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) { |
|
|
|
this.handleExportErrorResponse(response.data) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) |
|
|
|
const fileName = this.getDownloadFileName(response, `审批周期报表_${Date.now()}.xlsx`) |
|
|
|
|
|
|
|
const linkNode = document.createElement('a') |
|
|
|
linkNode.download = fileName |
|
|
|
linkNode.style.display = 'none' |
|
|
|
linkNode.href = URL.createObjectURL(blob) |
|
|
|
document.body.appendChild(linkNode) |
|
|
|
linkNode.click() |
|
|
|
URL.revokeObjectURL(linkNode.href) |
|
|
|
document.body.removeChild(linkNode) |
|
|
|
|
|
|
|
this.$message.success('导出成功') |
|
|
|
}).catch(() => { |
|
|
|
this.$message.error('导出失败') |
|
|
|
}).finally(() => { |
|
|
|
this.exportLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 处理导出错误响应(JSON/HTML等非Excel内容) |
|
|
|
*/ |
|
|
|
handleExportErrorResponse(blobData) { |
|
|
|
const reader = new FileReader() |
|
|
|
reader.onload = () => { |
|
|
|
let errorMsg = '导出失败' |
|
|
|
try { |
|
|
|
const result = JSON.parse(reader.result) |
|
|
|
errorMsg = result.msg || result.message || errorMsg |
|
|
|
} catch (e) { |
|
|
|
if (reader.result && String(reader.result).indexOf('404') > -1) { |
|
|
|
errorMsg = '导出接口不存在,请确认后端已更新并重启' |
|
|
|
} |
|
|
|
} |
|
|
|
this.$message.error(errorMsg) |
|
|
|
} |
|
|
|
reader.readAsText(blobData, 'utf-8') |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 解析下载文件名 |
|
|
|
*/ |
|
|
|
getDownloadFileName(response, defaultName) { |
|
|
|
const disposition = response.headers['content-disposition'] |
|
|
|
if (!disposition) { |
|
|
|
return defaultName |
|
|
|
} |
|
|
|
|
|
|
|
const utf8Match = disposition.match(/filename\*=utf-8''([^;]+)/i) |
|
|
|
if (utf8Match && utf8Match[1]) { |
|
|
|
return decodeURIComponent(utf8Match[1]) |
|
|
|
} |
|
|
|
|
|
|
|
const normalMatch = disposition.match(/filename="?([^"]+)"?/i) |
|
|
|
if (normalMatch && normalMatch[1]) { |
|
|
|
return decodeURIComponent(normalMatch[1]) |
|
|
|
} |
|
|
|
|
|
|
|
return defaultName |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 行点击事件 |
|
|
|
*/ |
|
|
|
@ -747,4 +830,17 @@ export default { |
|
|
|
border-color: #909399; |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
|
|
|
|
/* 导出按钮 - 绿色扁平 */ |
|
|
|
.export-btn { |
|
|
|
background-color: #F0F9EB; |
|
|
|
border-color: #C2E7B0; |
|
|
|
color: #67C23A; |
|
|
|
} |
|
|
|
|
|
|
|
.export-btn:hover { |
|
|
|
background-color: #67C23A; |
|
|
|
border-color: #67C23A; |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
</style> |