From c3bb35b20d6e076f73a1cad50fd6b9b94ca399a7 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期一, 06 一月 2025 16:15:05 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/onlineEducation/classCertManage/index.vue | 223 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 180 insertions(+), 43 deletions(-) diff --git a/src/views/onlineEducation/classCertManage/index.vue b/src/views/onlineEducation/classCertManage/index.vue index 44616d7..495bcdc 100644 --- a/src/views/onlineEducation/classCertManage/index.vue +++ b/src/views/onlineEducation/classCertManage/index.vue @@ -1,11 +1,19 @@ <template> <div class="app-container"> - <div style="margin-left: -35px;margin-top: 15px"> - <el-button - size="small" - type="primary" - style="margin-bottom: 10px;margin-left: 20px" - >批量导出</el-button> + <div style="margin-left: -20px;margin-top: 15px;display: flex"> + <json-excel + class="export-excel-wrapper" + :data="jsonData" + :fields="json_fields" + type="xls" + name="学时证书.xls"> + <el-button + size="small" + type="primary" + style="margin-bottom: 10px;margin-left: 20px" + @click="exportData" + >批量导出</el-button> + </json-excel> <el-date-picker v-model="time" size="small" @@ -17,22 +25,24 @@ style="margin-left: 30px;" > </el-date-picker> - <el-select v-model="queryParams.institutionId" size="small" style="margin-left: 40px;" placeholder="请选择平台"> + <el-input size="small" style="margin-left: 30px;width: 200px" v-model="queryParams.idcard" placeholder="请输入身份证号"></el-input> + <el-select v-model="queryParams.institutionName" size="small" style="margin-left: 40px;" placeholder="请选择平台"> <el-option v-for="item in platformList" :key="item.id" :label="item.institutionalName" - :value="item.id"> + :value="item.institutionalName"> </el-option> </el-select> - <el-select v-model="queryParams.trainOrgId" size="small" style="margin-left: 40px;" placeholder="请选择培训机构"> - <el-option - v-for="item in trainOrgList" - :key="item.id" - :label="item.trainOrgName" - :value="item.id"> - </el-option> - </el-select> + <el-input size="small" style="margin-left: 30px;width: 200px" v-model="queryParams.trainOrgName" placeholder="请输入机构"></el-input> +<!-- <el-select v-model="queryParams.trainOrgId" size="small" style="margin-left: 40px;" placeholder="请选择培训机构">--> +<!-- <el-option--> +<!-- v-for="item in trainOrgList"--> +<!-- :key="item.id"--> +<!-- :label="item.trainOrgName"--> +<!-- :value="item.id">--> +<!-- </el-option>--> +<!-- </el-select>--> <el-button size="small" type="primary" @@ -47,20 +57,20 @@ @click="resetQuery()" >重置</el-button> </div> - <el-table v-loading="loading" :data="expertList" style="margin-top: 10px"> + <el-table v-loading="loading" :data="expertList" style="margin-top: 10px" @selection-change="changeCheckBoxValue"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="ID" align="center" prop="id" /> <el-table-column label="姓名" align="center" prop="name" /> - <el-table-column label="身份证号" align="center" prop="idCard" /> + <el-table-column label="身份证号" align="center" prop="idcard" /> <el-table-column label="推送平台" align="center" prop="institutionName" /> <el-table-column label="所属机构" align="center" prop="trainOrgName" /> - <el-table-column label="批次" align="center" prop="batch" /> - <el-table-column label="证书生成时间" align="center" prop="certCreateTime" /> + <el-table-column label="批次" align="center" prop="batchName" /> + <el-table-column label="证书生成时间" align="center" prop="certTime" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> - <el-button size="mini" type="text" style="color: #1890ff">查看</el-button> - <el-button size="mini" type="text" style="color: #1890ff">下载</el-button> - <el-button size="mini" type="text" style="color: #1890ff">打印</el-button> + <el-button size="mini" type="text" style="color: #1890ff" @click="viewPic(scope.row)">查看</el-button> + <el-button size="mini" type="text" style="color: #1890ff" @click="downloadByBlob(scope.row)">下载</el-button> + <el-button size="mini" type="text" style="color: #1890ff" @click="print(scope.row)">打印</el-button> </template> </el-table-column> </el-table> @@ -71,18 +81,48 @@ :limit.sync="queryParams.pageSize" @pagination="getList" /> + <el-dialog + :visible.sync="picDialog" + width="500px" + :before-close="handleClose"> + <div style="display: flex;justify-content: center"> + <el-image + style="width: 450px; height: auto" + :src="viewUrl" + :preview-src-list="srcList"> + </el-image> + </div> + </el-dialog> + <el-dialog + :visible.sync="printDialog" + width="500px" + :before-close="handlePrintClose"> + <div style="display: flex;flex-direction: column;align-items: flex-end"> + <el-button type="primary" style="margin-bottom: 5px" v-print="'#printPic'">打印</el-button> + </div> + <div style="display: flex;justify-content: center" ref="printPic" id="printPic"> + <el-image + style="width: 85%; height: auto;margin-top: 10px" + :src="printUrl" + > + </el-image> + </div> + </el-dialog> </div> </template> <script> + import { listBatch, listQuestion } from '@/api/onlineEducation/student' import { listPlatSelect } from '@/api/onlineEducation/plat' import moment from 'moment/moment' +import JsonExcel from 'vue-json-excel' import { getSubject } from '@/api/onlineEducation/count' +import { getCert } from '@/api/onlineEducation/question' export default { name: "nPeopleManage", dicts: [], - components: { }, + components: { JsonExcel }, data() { return { time: [], @@ -97,36 +137,67 @@ queryParams: { pageNum: 1, pageSize: 10, - institutionId: '', + idcard: '', + institutionName: '', startTime: '', endTime: '', - trainOrgId: '' + trainOrgName: '' }, - trainOrgList: [] + trainOrgList: [], + jsonData: [], + json_fields: { + 'ID': { + field: 'id', + callback: value => { + return ' '+value + } + }, + '姓名': "name", + '身份证号': { + field: 'idcard', + callback: value => { + return ' '+value + } + }, + '推送平台': "institutionName", + '所属机构': { + field: 'trainOrgName', + callback: value => { + return ' '+value + } + }, + '批次': "batchName", + '证书生成时间': "certTime", + }, + picDialog: false, + viewUrl: '', + srcList: [], + printDialog: false, + printUrl: '', }; }, created() { - this.setDate(); - // this.getList(); + // this.setDate(); + this.getList(); this.getPlat(); }, methods: { - setDate(){ - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - const s = moment(start).format('YYYY-MM-DD') - const e = moment(end).format('YYYY-MM-DD') - this.time = [s,e] - }, + // setDate(){ + // const end = new Date(); + // const start = new Date(); + // start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + // const s = moment(start).format('YYYY-MM-DD') + // const e = moment(end).format('YYYY-MM-DD') + // this.time = [s,e] + // }, getList(){ if(this.time && this.time.length >0){ - this.queryParams.startTime = moment(this.time[0]).format('YYYY-MM-DD') - this.queryParams.endTime = moment(this.time[1]).format('YYYY-MM-DD') + this.queryParams.startTime = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00' + this.queryParams.endTime = moment(this.time[1]).format('YYYY-MM-DD') + ' 00:00:00' } this.loading = true; - listBatch( this.queryParams).then((res) => { + getCert( this.queryParams).then((res) => { if (res.code == 200) { this.expertList = res.rows.map(item => { return { @@ -134,12 +205,12 @@ trainOrgName: item.trainOrgName ? item.trainOrgName : '--', startTime: item.startTime ? item.startTime : '--', endTime: item.endTime ? item.endTime : '--', - category: item.category ? item.category : '--' } }) this.total = res.total this.loading = false; } + console.log('this.expertList',this.expertList) }) }, getPlat() { @@ -148,6 +219,18 @@ this.platformList = res.data } }) + }, + exportData(){ + if(this.jsonData && this.jsonData.length <= 0){ + this.$message({ + message: '请选择要导出的数据', + type: 'warning' + }) + } + }, + changeCheckBoxValue(val) { + console.log('val',val) + this.jsonData = val; }, handleChange(){ @@ -160,14 +243,68 @@ this.queryParams = { pageNum: 1, pageSize: 10, - institutionId: '', + institutionName: '', + idcard: '', startTime: '', endTime: '', - trainOrgId: '' + trainOrgName: '' } this.time = []; this.getList(); + }, + viewPic(val){ + this.viewUrl = val.certUrl + this.srcList[0] = val.certUrl + this.picDialog = true + }, + handleClose() { + this.viewUrl = '' + // this.srcList = [] + this.picDialog = false + }, + handlePrintClose() { + this.printUrl = '' + this.printDialog = false + }, + print(val){ + this.printUrl = val.certUrl + + this.printDialog = true + }, + downloadByBlob(val) { + let image = new Image() + image.setAttribute('crossOrigin', 'anonymous') + image.src = val.certUrl + image.onload = () => { + let canvas = document.createElement('canvas') + canvas.width = image.width + canvas.height = image.height + let ctx = canvas.getContext('2d') + ctx.drawImage(image, 0, 0, image.width, image.height) + canvas.toBlob((blob) => { + let url = URL.createObjectURL(blob) + this.download(url,val.name + '_学时证书') + // 用完释放URL对象 + URL.revokeObjectURL(url) + }) + } + }, + download(href, name) { + let eleLink = document.createElement('a') + eleLink.download = name + eleLink.href = href + eleLink.click() + eleLink.remove() } } }; </script> +<style media="printPic" scoped> +@page { + margin: 0; /* this affects the margin in the printer settings */ + display: block; + width: 100%; + overflow: hidden; +} + +</style> -- Gitblit v1.9.2