From db905ecd14f63dba9337b4f4715584ef2d7e8c7e Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Fri, 07 Mar 2025 14:45:00 +0800
Subject: [PATCH] 修改
---
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