feat(报表): 新增灵枢年度报表页面及路由配置
添加灵枢年度报表下载功能页面,包含年份选择器和报表下载功能 在路由配置中新增灵枢年度报表页面路由
This commit is contained in:
@@ -80,20 +80,19 @@ const mainRoutes = {
|
||||
{ path: '/talents-list', component: _import('modules/talents/talents-list'), name: 'talents-list', meta: { title: '太湖英才列表', isTab: true } },
|
||||
{ path: '/talents-articleList', component: _import('modules/talents/talents-articleList'), name: 'talents-articleList', meta: { title: '文章列表', isTab: true } },
|
||||
{ path: '/talents-commontList', component: _import('modules/talents/talents-commontList'), name: 'talents-commontList', meta: { title: '评论列表', isTab: true } },
|
||||
|
||||
{ path: '/course-taihumedList', component: _import('modules/course/taihumedList'), name: 'course-taihumedList', meta: { title: '太湖标签', isTab: true } },
|
||||
{ path: '/courses-list', component: _import('modules/talents/courses-list'), name: 'courses-list', meta: { title: '查看课程', isTab: true } },
|
||||
{ path: '/mergeList', component: _import('modules/certificate/mergeList'), name: 'mergeList', meta: { title: '小班、自考证书', isTab: true } },
|
||||
|
||||
{ path: '/medicalrecords-medicalList', component: _import('modules/medicalrecords/medicalList'), name: 'medicalrecords-medicalList', meta: { title: '医案列表', isTab: true } },
|
||||
{ path: '/medicalrecords-userList', component: _import('modules/medicalrecords/userList'), name: 'medicalrecords-userList', meta: { title: '审核人员列表', isTab: true } },
|
||||
{ path: '/vipList-userList', component: _import('modules/vipList/userList'), name: 'vipList-userList', meta: { title: 'VIP用户列表', isTab: true } },
|
||||
{ path: '/vipList-vipDetail', component: _import('modules/vipList/vipDetail'), name: 'vipList-vipDetail', meta: { title: 'VIP详情', isTab: true } },
|
||||
{ path: '/reportList-vipList', component: _import('modules/reportList/vipList'), name: 'reportList-vipList', meta: { title: 'VIP报表', isTab: true } },
|
||||
{ path: '/reportList-vipList', component: _import('modules/reportList/vipList'), name: 'reportList-vipList', meta: { title: 'VIP 报表', isTab: true } },
|
||||
{ path: '/reportList-trainingCourseList', component: _import('modules/reportList/trainingCourseList'), name: 'reportList-trainingCourseList', meta: { title: '培训班月度报表', isTab: true } },
|
||||
{ path: '/reportList-trainingCourseClassList', component: _import('modules/reportList/trainingCourseClassList'), name: 'reportList-trainingCourseClassList', meta: { title: '培训班报表', isTab: true } },
|
||||
{ path: '/reportList-courseList', component: _import('modules/reportList/courseList'), name: 'reportList-courseList', meta: { title: '课程报表', isTab: true } },
|
||||
|
||||
{ path: '/reportList-lingshuFullYear', component: _import('modules/reportList/lingshuFullYear'), name: 'reportList-lingshuFullYear', meta: { title: '灵枢年度报表', isTab: true } },
|
||||
{ path: '/content-psychologicalForum', component: _import('modules/content/psychologicalForum'), name: 'content-psychologicalForum', meta: { title: '心理论坛', isTab: true } }
|
||||
],
|
||||
beforeEnter (to, from, next) {
|
||||
let token = Vue.cookie.get('token')
|
||||
|
||||
98
src/views/modules/reportList/lingshuFullYear.vue
Normal file
98
src/views/modules/reportList/lingshuFullYear.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="downloadReport()"
|
||||
>
|
||||
<el-form-item label="年份选择">
|
||||
<el-date-picker
|
||||
v-model="selectedYear"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
value-format="yyyy"
|
||||
:picker-options="pickerOptions"
|
||||
placeholder="选择年份"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="downloadReport"
|
||||
:disabled="!selectedYear"
|
||||
>
|
||||
下载报表
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataForm: {},
|
||||
selectedYear: new Date().getFullYear().toString(),
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
// 禁用今年以后的年份
|
||||
return time.getFullYear() > new Date().getFullYear()
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
downloadReport() {
|
||||
if (!this.selectedYear) {
|
||||
this.$message.warning('请选择年份');
|
||||
return;
|
||||
}
|
||||
|
||||
const filename = `灵枢年度报表_${this.selectedYear}年.xlsx`;
|
||||
this.$message({
|
||||
message: '请耐心等待...',
|
||||
type: 'info',
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/master/statistics/getLSYearStatistics'),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
year: this.selectedYear
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then(res => {
|
||||
const blob = new Blob([res.data], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
});
|
||||
const link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
|
||||
this.$message({
|
||||
message: '灵枢年度报表文件下载完成,请注意查看!',
|
||||
type: 'success',
|
||||
duration: 3000,
|
||||
showClose: true
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mod-config {
|
||||
padding: 20px;
|
||||
}
|
||||
.el-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user