<template>
|
<div class="app-container">
|
<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"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy-MM-dd"
|
style="margin-left: 30px;"
|
>
|
</el-date-picker>
|
<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.institutionalName">
|
</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"
|
style="margin-bottom: 10px;margin-left: 20px"
|
@click="handleQuery()"
|
>查询</el-button>
|
<el-button
|
plain
|
size="small"
|
type="primary"
|
style="margin-bottom: 10px"
|
@click="resetQuery()"
|
>重置</el-button>
|
</div>
|
<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="institutionName" />
|
<el-table-column label="所属机构" align="center" prop="trainOrgName" />
|
<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" @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>
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
: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: { JsonExcel },
|
data() {
|
return {
|
time: [],
|
loading: false,
|
single: true,
|
multiple: true,
|
showSearch: true,
|
addForm: false,
|
total: 0,
|
platformList: [],
|
expertList: [],
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
idcard: '',
|
institutionName: '',
|
startTime: '',
|
endTime: '',
|
trainOrgName: ''
|
},
|
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.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]
|
// },
|
getList(){
|
if(this.time && this.time.length >0){
|
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;
|
getCert( this.queryParams).then((res) => {
|
if (res.code == 200) {
|
this.expertList = res.rows.map(item => {
|
return {
|
...item,
|
trainOrgName: item.trainOrgName ? item.trainOrgName : '--',
|
startTime: item.startTime ? item.startTime : '--',
|
endTime: item.endTime ? item.endTime : '--',
|
}
|
})
|
this.total = res.total
|
this.loading = false;
|
}
|
console.log('this.expertList',this.expertList)
|
})
|
},
|
getPlat() {
|
listPlatSelect().then((res) => {
|
if (res.code == 200) {
|
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(){
|
|
},
|
handleQuery(){
|
this.getList();
|
|
},
|
resetQuery(){
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
institutionName: '',
|
idcard: '',
|
startTime: '',
|
endTime: '',
|
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>
|
