<template> <div style="margin: 10px"> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"> <el-form-item label="课程名称" prop="lessonName"> <el-input v-model="queryParams.lessonName" placeholder="请输入培训名称" clearable size="small" /> </el-form-item> <el-form-item label="发布时间" prop="publishTime"> <el-date-picker v-model="publishTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateFormat"> </el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="search" >搜索</el-button > <el-button icon="el-icon-refresh" size="mini" @click="resetClick" >重置</el-button > </el-form-item> </el-form> <!-- 培训统计列表 --> <el-table v-loading="loading" :data="trainStatData"> <el-table-column label="序号" width='100' align="center" prop="trainNum"/> <el-table-column label="课程标题" align="center" prop="lessonName"/> <el-table-column label="培训开始时间" align="center" prop="trainStartTime"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.trainStartTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> </template> </el-table-column> <el-table-column label="培训结束时间" align="center" prop="trainEndTime"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.trainEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> </template> </el-table-column> <el-table-column label="应参加人数" align="center" prop="mustTestNum"/> <el-table-column label="实际完成人数" align="center" prop="finishTestNum"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > <template v-slot="{ row: { trainManageId, lessonName }}"> <el-button size="mini" type="text" icon="el-icon-edit" @click="trainCourseStatDetail(trainManageId,lessonName)" >查看详情</el-button> </template> </el-table-column> </el-table> <!-- 列表分页 --> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getTrainStatList" /> <!-- 详情 --> <el-dialog :title="'培训详情:'+lessonName" :visible.sync="trainStatDetailOpen" append-to-body :close-on-click-modal="false"> <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" style="position: relative;left: 16px;top: -17px;" >导出</el-button> <el-table v-loading="loading" :data="trainStatDetailData"> <el-table-column label="序号" width='100' align="center" prop="detailNum"/> <el-table-column label="培训人员" align="center" prop="employedPeopleName"/> <el-table-column label="所属企业" align="center" prop="enterpriseName"/> <el-table-column label="培训时长" align="center" prop="realityTrainDuration"> <template slot-scope="scope"> <span v-if="scope.row.realityTrainDuration != null ">{{ scope.row.realityTrainDuration }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="是否完成" align="center" prop="isComplete"/> </el-table> <pagination v-show="totalDetail > 0" :total="totalDetail" :page.sync="queryDetailParams.pageNum" :limit.sync="queryDetailParams.pageSize" @pagination="getTrainStatDetail" /> </el-dialog> </div> </template> <script> import {trainStatData,trainStatDetail,exportTrianStat} from "@/api/trainManage/trainStat"; export default { name: "trainCourseStat", components: { }, data() { return { queryParams: { pageNum: 1, pageSize: 10, lessonName:"", publishBeginTime: "", publishEndTime: "" }, publishTime: "", trainStatData: [], // 遮罩层 loading: false, // 总条数 total: 0, totalDetail: 0, queryDetailParams:{ pageNum: 1, pageSize: 10, courseId: "" }, lessonName: "", trainStatDetailOpen: false, trainStatDetailData: [], exportLoading: false } }, created() { this.getTrainStatList(); }, methods: { dateFormat(picker){ this.queryParams.publishBeginTime = picker[0]; this.queryParams.publishEndTime = picker[1]; }, search(){ this.getTrainStatList(); }, resetClick(){ this.publishTime = ""; this.queryParams.publishBeginTime = null; this.queryParams.publishEndTime = null; this.queryParams={ pageNum: 1, pageSize: 10, lessonName:"", publishBeginTime: "", publishEndTime: "" }; this.getTrainStatList(); }, getTrainStatList(){ trainStatData(this.queryParams).then(res =>{ this.trainStatData = res.rows.map((item, index) => { return { trainNum: index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize, ...item, }; }); this.total = res.total; }) }, trainCourseStatDetail(trainManageId,lessonName){ this.queryDetailParams.trainManageId = trainManageId; this.lessonName = lessonName; this.queryDetailParams.pageNum = 1; this.queryDetailParams.pageSize = 10; this.getTrainStatDetail(); this.trainStatDetailOpen = true; }, getTrainStatDetail(){ trainStatDetail(this.queryDetailParams).then(res =>{ this.trainStatDetailData = res.rows.map((item, index) => { return { detailNum: index + 1 + (this.queryDetailParams.pageNum - 1) * this.queryDetailParams.pageSize, ...item, }; }); this.totalDetail = res.total; }) }, handleExport(){ this.$confirm('是否确认导出所有培训详细数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.exportLoading = true; return exportTrianStat({"trainManageId":this.queryDetailParams.trainManageId}); }).then(response => { this.download(response.msg); this.exportLoading = false; }).catch(() => {}); }, }, }; </script> <style lang="scss" scoped> </style>