// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (targetDom, callback) {
var title = this.htmlTitle
html2Canvas(document.querySelector(targetDom), {
scale: 2,
allowTaint: true,
useCORS: true, // 【重要】开启跨域配置
// background: '#FFFFFF'
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
callback('Ok')
}
)
}
}
}
<template>
<!-- 学分查询详细 -->
<div class="app-container creditInquireDetail">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="年度" prop="subjectDeptId">
<el-select
v-model="queryParams.projectYear"
placeholder="年度"
clearable
size="small"
style="width: 240px"
>
<el-option
v-for="dict in yearList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="small"
@click="handleQuery"
>搜索</el-button
>
<el-button
icon="el-icon-download"
size="small"
type="primary"
@click="hasPDFModal = true"
>导出年度审核表</el-button
>
<!-- <el-button
icon="el-icon-view"
size="small"
type="primary"
@click="goCertificateDetails"
>合格证审验详情</el-button
> -->
</el-form-item>
</el-form>
<el-row :gutter="15" style="padding: 0px 20px">
<h4>单位：{{ userInfo.deptName }}</h4>
<table
border="1"
cellpadding="10"
cellspacing="0"
align="center"
width="100%"
class="table-box"
>
<tr>
<td class="table-title">姓名</td>
<td>{{ userInfo.name || "-" }}</td>
<td class="table-title">性别</td>
<td>
{{
dictFormat(userInfo.sex, "sys_sex")
? dictFormat(userInfo.sex, "sys_sex")
: "-"
}}
</td>
<td class="table-title">证件号码</td>
<td>{{ userInfo.cardNo || "-" }}</td>
<td rowspan="5" class="table-img">
<el-image class="img" :src="userInfo.personalPhoto">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</td>
</tr>
<tr>
<td class="table-title">学历</td>
<td>
{{
dictFormat(userInfo.education, "education")
? dictFormat(userInfo.education, "education")
: "-"
}}
</td>
<td class="table-title">学位</td>
<td>
{{
dictFormat(userInfo.degree, "degree")
? dictFormat(userInfo.degree, "degree")
: "-"
}}
</td>
<td class="table-title">执业类别</td>
<td>
{{
dictFormat(userInfo.jobCategory, "job_category")
? dictFormat(userInfo.jobCategory, "job_category")
: "-"
}}
</td>
</tr>
<tr>
<td class="table-title">职称</td>
<td>
{{
dictFormat(userInfo.jobTitle, "certificate")
? dictFormat(userInfo.jobTitle, "certificate")
: "-"
}}
</td>
<td class="table-title">科室</td>
<td>
{{ userInfo.subjectDeptName || "-" }}
</td>
<td class="table-title">联系电话</td>
<td>{{ userInfo.phone || "-" }}</td>
</tr>
<!-- <tr>
<td class="table-title">总学分</td>
<td>
{{
parseFloat(userInfo.oneSumCredits || 0) +
parseFloat(userInfo.twoSumCredits || 0)
}}
</td>
<td class="table-title">I类总学分</td>
<td>{{ userInfo.oneSumCredits || 0 }}</td>
<td class="table-title">II类总学分</td>
<td>{{ userInfo.twoSumCredits || 0 }}</td>
</tr> -->
<!-- <tr>
<td class="table-title">年审信息</td>
<td></td>
<td class="table-title">不合格原因</td>
<td></td>
<td></td>
<td></td>
</tr> -->
</table>
</el-row>
<el-row :gutter="15" style="padding: 0px 20px">
<h4>学分汇总</h4>
<table
border="1"
cellpadding="10"
cellspacing="0"
align="center"
width="100%"
class="table-box"
>
<tr>
<td>学分名称</td>
<td>年度获得学分</td>
</tr>
<tr>
<td>总分</td>
<td>
{{
addFloat(
addFloat(
parseFloat(userInfo.oneZhongyiCredits || 0),
parseFloat(userInfo.oneXiyiCredits || 0)
),
addFloat(
parseFloat(userInfo.twoZhongyiCredits || 0),
parseFloat(userInfo.twoXiyiCredits || 0)
)
)
}}
</td>
</tr>
<tr>
<td>西医I类</td>
<td>{{ parseFloat(userInfo.oneXiyiCredits || 0) }}</td>
</tr>
<tr>
<td>西医II类</td>
<td>{{ parseFloat(userInfo.twoXiyiCredits || 0) }}</td>
</tr>
<tr>
<td>中医I类</td>
<td>{{ parseFloat(userInfo.oneZhongyiCredits || 0) }}</td>
</tr>
<tr>
<td>中医II类</td>
<td>{{ parseFloat(userInfo.twoZhongyiCredits || 0) }}</td>
</tr>
</table>
</el-row>
<el-row :gutter="15" style="padding: 10px 30px">
<h3>I类学分</h3>
<Tables
:tableLoadData="firstCreditList"
:tableHeadConfig="creditTableConfig"
>
<template v-slot:creditSubCategory="slotData">
{{
dictFormat(slotData.data.row.creditSubCategory, "one_class")
? dictFormat(slotData.data.row.creditSubCategory, "one_class")
: "-"
}}
</template>
<template v-slot:subjectCode="slotData">
{{
slotData.data.row.dataSourceFlag == "2"
? slotData.data.row.thirdSubjectName || "-"
: loadSubject(slotData.data.row)
}}
</template>
<template v-slot:projectProperty="slotData">
{{
dictFormat(slotData.data.row.projectProperty, "credit_attribute")
? dictFormat(
slotData.data.row.projectProperty,
"credit_attribute"
)
: "-"
}}
</template>
<template v-slot:time="slotData">
{{
slotData.data.row.trainStartTime && slotData.data.row.trainEndTime
? slotData.data.row.trainStartTime +
"至" +
slotData.data.row.trainEndTime
: "-"
}}
</template>
<template v-slot:operation="slotData">
<el-button
size="mini"
type="text"
icon="el-icon-reading"
@click="checkDetails(slotData.data.row)"
>详情</el-button
>
</template>
</Tables>
</el-row>
<el-row :gutter="15" style="padding: 10px 30px">
<h3>II类学分</h3>
<Tables
:tableLoadData="secondCreditList"
:tableHeadConfig="creditTableConfig"
>
<template v-slot:creditSubCategory="slotData">
{{
dictFormat(slotData.data.row.creditSubCategory, "two_class")
? dictFormat(slotData.data.row.creditSubCategory, "two_class")
: "-"
}}
</template>
<template v-slot:subjectCode="slotData">
{{
slotData.data.row.dataSourceFlag == "2"
? slotData.data.row.thirdSubjectName || "-"
: loadSubject(slotData.data.row)
}}
</template>
<template v-slot:projectProperty="slotData">
{{
dictFormat(slotData.data.row.projectProperty, "credit_attribute")
? dictFormat(
slotData.data.row.projectProperty,
"credit_attribute"
)
: "-"
}}
</template>
<template v-slot:time="slotData">
{{
slotData.data.row.trainStartTime && slotData.data.row.trainEndTime
? slotData.data.row.trainStartTime +
"至" +
slotData.data.row.trainEndTime
: "-"
}}
</template>
<template v-slot:operation="slotData">
<el-button
size="mini"
type="text"
icon="el-icon-reading"
@click="checkDetails(slotData.data.row)"
>详情</el-button
>
</template>
</Tables>
</el-row>
<el-row :gutter="15" style="padding: 10px 30px">
<h3>学分减免信息</h3>
<Tables
:tableLoadData="tbCreditReductionList"
:tableHeadConfig="creditReliefTableConfig"
>
<template v-slot:category="slotData">
{{
dictFormat(slotData.data.row.category, "credit_reduction_type")
? dictFormat(slotData.data.row.category, "credit_reduction_type")
: "-"
}}
</template>
<template v-slot:operation="slotData">
<el-button
size="mini"
type="text"
icon="el-icon-reading"
@click="checkInfo(slotData.data.row)"
>详情</el-button
>
</template>
</Tables>
</el-row>
<!-- <el-row :gutter="15" style="padding: 10px 30px">
<h4>学分互补信息</h4>
<Tables
:tableLoadData="creditComplementaryList"
:tableHeadConfig="creditComplementaryTableConfig"
/>
</el-row> -->
<!-- 导出PDF预览框 -->
<el-dialog
title="导出PDF"
:visible.sync="hasPDFModal"
width="1200px"
append-to-body
class="pdf-box"
destroy-on-close
>
<div ref="targetDom" class="new-box" id="pdfDom">
<div
class="target-node-item top-box target-node-title"
style="text-align: center"
>
<div class="qr-box"></div>
<div class="title-box">
<h2>辽宁省卫生技术人员继续医学教育年度审核表</h2>
<h2>（{{ queryParams.projectYear }}年度）</h2>
<!-- <h2>（{{ '2021' }}年度）</h2> -->
</div>
<div class="qr-box"></div>
</div>
<div
class="target-node-item target-node-header"
style="padding: 0 0 10px 0"
>
<h4 style="display: flex; justify-content: space-between">
<span>单位：{{ userInfo.deptName }}</span>
<span
>打印日期：{{
userInfo.printTime ? userInfo.printTime.slice(0, 10) : "-"
}}</span
>
</h4>
<table
border="1"
cellpadding="10"
cellspacing="0"
align="center"
width="100%"
class="table-box"
>
<tr>
<td style="width: 9.8%">姓名</td>
<td style="width: 20.5%">
{{ userInfo.name || "-" }}
</td>
<td style="width: 9.8%">性别</td>
<td style="width: 20.5%">
{{
dictFormat(userInfo.sex, "sys_sex")
? dictFormat(userInfo.sex, "sys_sex")
: "-"
}}
</td>
<td style="width: 9.8%">证件号码</td>
<td style="width: 20.5%">
{{ userInfo.cardNo || "-" }}
</td>
<td rowspan="3" style="width: 9.6%" class="table-img">
<el-image class="img-pdf" :src="Photo">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</td>
</tr>
<tr>
<td style="width: 9.8%">学历</td>
<td style="width: 20.5%">
{{
dictFormat(userInfo.education, "education")
? dictFormat(userInfo.education, "education")
: "-"
}}
</td>
<td style="width: 9.8%">学位</td>
<td style="width: 20.5%">
{{
dictFormat(userInfo.degree, "degree")
? dictFormat(userInfo.degree, "degree")
: "-"
}}
</td>
<td style="width: 9.8%">执业类别</td>
<td style="width: 20.5%">
{{
dictFormat(userInfo.jobCategory, "job_category")
? dictFormat(userInfo.jobCategory, "job_category")
: "-"
}}
</td>
</tr>
<tr>
<td style="width: 9.8%">职称</td>
<td style="width: 20.5%">
{{
dictFormat(userInfo.jobTitle, "certificate")
? dictFormat(userInfo.jobTitle, "certificate")
: "-"
}}
</td>
<td style="width: 9.8%">科室</td>
<td style="width: 20.5%">
{{ userInfo.subjectDeptName || "-" }}
</td>
<td style="width: 9.8%">联系电话</td>
<td style="width: 20.5%">
{{ userInfo.phone || "-" }}
</td>
</tr>
</table>
</div>
<div class="target-node-item" v-if="firstCreditList.length !== 0">
<h4>I类学分</h4>
<div class="row-top row">
<div class="row-item">学分类别</div>
<div class="row-item">项目名称/活动名称</div>
<div class="row-item">项目编号</div>
<div class="row-item">学分属性</div>
<div class="row-item">学时</div>
<div class="row-item">学分</div>
</div>
</div>
<!-- <div class="target-node-item">
<div class="row-top row">
<div class="row-item">国家继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS513235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">国家继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS513235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">国家继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS513235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div> -->
<template v-if="firstCreditList.length !== 0">
<div
class="target-node-item"
v-for="item in firstCreditList"
:key="item.value"
>
<div class="row">
<div class="row-item">
{{
cssClassFormat(item.creditSubCategory, "one_class")
? cssClassFormat(item.creditSubCategory, "one_class")
: "-"
}}
</div>
<div class="row-item">{{ item.projectName || "-" }}</div>
<div class="row-item">{{ item.projectCode || "-" }}</div>
<div class="row-item">
{{
dictFormat(item.projectProperty, "credit_attribute")
? dictFormat(item.projectProperty, "credit_attribute")
: "-"
}}
</div>
<div class="row-item">{{ item.period || "0" }}</div>
<div class="row-item">{{ item.credit || "0" }}</div>
</div>
</div>
</template>
<div class="target-node-item" v-if="firstCreditList.length !== 0">
<div class="row-bottom"></div>
</div>
<div class="target-node-item" v-if="secondCreditList.length !== 0">
<h4>II类学分</h4>
<div class="row-top row">
<div class="row-item">学分类别</div>
<div class="row-item">项目名称/活动名称</div>
<div class="row-item">项目编号</div>
<div class="row-item">学分属性</div>
<div class="row-item">学时</div>
<div class="row-item">学分</div>
</div>
</div>
<!-- <div class="target-node-item">
<div class="row-top row">
<div class="row-item">市级继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS423235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">市级继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS423235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">市级继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS423235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">市级继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS423235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">市级继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS423235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div>
<div class="target-node-item">
<div class="row-top row">
<div class="row-item">市级继续医学项目</div>
<div class="row-item">骨科论坛</div>
<div class="row-item">XNS423235315</div>
<div class="row-item">西医</div>
<div class="row-item">9</div>
<div class="row-item">3</div>
</div>
</div> -->
<template v-if="secondCreditList.length !== 0">
<div
class="target-node-item"
v-for="item in secondCreditList"
:key="item.value"
>
<div class="row">
<div class="row-item">
{{
cssClassFormat(item.creditSubCategory, "two_class")
? cssClassFormat(item.creditSubCategory, "two_class")
: "-"
}}
</div>
<div class="row-item">{{ item.projectName || "-" }}</div>
<div class="row-item">{{ item.projectCode || "-" }}</div>
<div class="row-item">
{{
dictFormat(item.projectProperty, "credit_attribute")
? dictFormat(item.projectProperty, "credit_attribute")
: "-"
}}
</div>
<div class="row-item">{{ item.period || "0" }}</div>
<div class="row-item">{{ item.credit || "0" }}</div>
</div>
</div>
</template>
<div class="target-node-item" v-if="secondCreditList.length !== 0">
<div class="row-bottom"></div>
</div>
<div class="target-node-item" v-if="tbCreditReductionList.length !== 0">
<h4>学分减免信息</h4>
<div class="row-top row">
<div class="row-item">年度</div>
<div class="row-item">减免类别</div>
</div>
</div>
<!-- <div class="target-node-item">
<div class="row-top row">
<div class="row-item">2021</div>
<div class="row-item">培训</div>
</div>
</div> -->
<template v-if="tbCreditReductionList.length !== 0">
<div
class="target-node-item"
v-for="item in tbCreditReductionList"
:key="item.value"
>
<div class="row">
<div class="row-item">
{{ item.projectYear || "-" }}
</div>
<div class="row-item">
{{
dictFormat(item.category, "credit_reduction_type")
? dictFormat(item.category, "credit_reduction_type")
: "-"
}}
</div>
</div>
</div>
</template>
<div class="target-node-item" v-if="tbCreditReductionList.length !== 0">
<div class="row-bottom"></div>
</div>
<div class="target-node-item">
<h4>年度审核情况（合格/不合格）</h4>
<h4>
<!-- <span style="margin-right: 20px">合格</span> -->
<!-- <span>不合格原因：</span> -->
<span>_________________________________________</span>
</h4>
<div class="row-top row">
<div class="row-item">学分名称</div>
<div class="row-item">年度获得总学分</div>
<!-- <div class="row-item">年度最终计入达标学分</div> -->
<!-- <div class="row-item">年度获得学分</div> -->
</div>
<div class="row-top row">
<div class="row-item">总分</div>
<div class="row-item">
{{
addFloat(
addFloat(
parseFloat(userInfo.oneZhongyiCredits || 0),
parseFloat(userInfo.oneXiyiCredits || 0)
),
addFloat(
parseFloat(userInfo.twoZhongyiCredits || 0),
parseFloat(userInfo.twoXiyiCredits || 0)
)
)
}}
</div>
<!-- <div class="row-item">25</div> -->
<!-- <div class="row-item">0</div> -->
</div>
<div class="row-top row">
<div class="row-item">西医I类</div>
<div class="row-item">
{{ parseFloat(userInfo.oneXiyiCredits || 0) }}
</div>
<!-- <div class="row-item">8</div> -->
<!-- <div class="row-item">0</div> -->
</div>
<div class="row-top row">
<div class="row-item">西医II类</div>
<div class="row-item">
{{ parseFloat(userInfo.twoXiyiCredits || 0) }}
</div>
<!-- <div class="row-item">22</div> -->
<!-- <div class="row-item">0</div> -->
</div>
<div class="row-top row">
<div class="row-item">中医I类</div>
<div class="row-item">
{{ parseFloat(userInfo.oneZhongyiCredits || 0) }}
</div>
<!-- <div class="row-item">0</div> -->
<!-- <div class="row-item">0</div> -->
</div>
<div class="row-top row">
<div class="row-item">中医II类</div>
<div class="row-item">
{{ parseFloat(userInfo.twoZhongyiCredits || 0) }}
</div>
<!-- <div class="row-item">0</div> -->
<!-- <div class="row-item">0</div> -->
</div>
<div class="opinion-box">
<div class="opinion">
<div class="title">单位意见</div>
<div class="fficialSeal">（公章）</div>
<div class="time">
<span>年</span>
<span>月</span>
<span>日</span>
</div>
</div>
<div class="opinion">
<div class="title">市级或省相关单位主管部门意见</div>
<div class="fficialSeal">（公章）</div>
<div class="time">
<span>年</span>
<span>月</span>
<span>日</span>
</div>
</div>
<div class="opinion">
<div class="title">省继教办公室意见</div>
<div class="fficialSeal">（公章）</div>
<div class="time">
<span>年</span>
<span>月</span>
<span>日</span>
</div>
</div>
</div>
</div>
</div>
<div slot="title" class="dialog-title">
<span>{{ "PDF预览" }}</span>
<el-button
type="primary"
@click="outPutPdfFn"
style="margin-left: 30px"
icon="el-icon-download"
:loading="PDFBtnLoading"
v-preventReClick="3000"
>下载年度审核表PDF</el-button
>
<!-- <span>（暂不支持IE浏览器及360浏览器）</span> -->
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="hasPDFModal = false">取 消</el-button>
<!-- <el-button type="primary" v-print="print">打 印</el-button> -->
<el-button
type="primary"
@click="outPutPdfFn"
:loading="PDFBtnLoading"
v-preventReClick="3000"
>下 载</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
// import { DATA_LIST } from "./data";
// import { getSubjectDept } from "@/api/personnelManage";
import { getCreitsDetail } from "@/api/creditManage";
import { getYearList } from "@/utils/ruoyi";
import Tables from "@/components/Tables";
export default {
name: "CreditInquireDetail",
dicts: [
"certificate",
"card_type",
"education",
"degree",
"credit_attribute",
"c_second_subject",
"c_third_subject",
"second_subject",
"third_subject",
"one_class",
"two_class",
"job_category",
"credit_reduction_type",
"sys_sex",
],
components: {
Tables,
},
data() {
return {
// DATA_LIST,
htmlTitle: "本年度学分证明",
hasPDFModal: false,
print: {
id: "pdfDom",
popTitle: "打印", // 打印配置页上方标题
extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
beforeOpenCallback() {}, // 开启打印前的回调事件
openCallback() {}, // 调用打印之后的回调事件
closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
url: "",
standard: "",
extraCss: "",
},
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 选中数组name
names: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 查询参数
queryParams: {
// pageNum: 1,
// pageSize: 10,
projectYear: new Date().getFullYear(),
// name: undefined,
// phone: undefined,
// cardNo: undefined,
// deptName: undefined,
// subjectDeptId: undefined,
},
// 科室列表
subjectDeptList: [],
// 调整科室
subjectDeptId: undefined,
// ------------------------
// I类学分 II类学分
firstCreditList: [],
secondCreditList: [],
creditTableConfig: [
{
label: "学分类别",
columnType: "slot",
slotName: "creditSubCategory",
},
{
label: "项目名称/活动名称",
field: "projectName",
},
{
label: "学科",
columnType: "slot",
slotName: "subjectCode",
},
{
label: "起止时间",
columnType: "slot",
slotName: "time",
},
{
label: "学分属性",
columnType: "slot",
slotName: "projectProperty",
},
{
label: "学时",
field: "period",
},
{
label: "学分",
field: "credit",
},
{
label: "操作",
columnType: "slot",
slotName: "operation",
// width: 260,
},
],
// 学分减免信息
tbCreditReductionList: [],
creditReliefTableConfig: [
{
label: "年度",
field: "projectYear",
},
{
label: "类别",
columnType: "slot",
slotName: "category",
},
{
label: "操作",
columnType: "slot",
slotName: "operation",
// width: 260,
},
],
// 学分互补信息
creditComplementaryList: [],
creditComplementaryTableConfig: [
{
label: "年度",
field: "teachTitle",
},
{
label: "转换类型",
field: "teacherName",
},
{
label: "I类学分",
field: "teacherName",
},
{
label: "II类学分",
field: "teacherName",
},
],
yearList: [], // 年度选项
userInfo: {},
Photo: "",
PDFBtnLoading: false,
};
},
created() {
this.queryParams.projectYear = parseFloat(this.$route.query.projectYear);
this.getList();
// this.getSubjectDept();
this.yearList = getYearList(2017);
},
methods: {
isSplit(nodes, index, pageHeight) {
return (
nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
nodes[index + 1] &&
nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
);
},
getFooterElement(remainingHeight, fillingHeight = 180) {
let newNode = document.createElement("div");
newNode.style.background = "#ffffff";
newNode.style.width = "calc(100%)";
newNode.style.marginLeft = "0px";
newNode.style.marginBottom = "0px";
newNode.style.borderTop = "2px solid #000";
newNode.style.height = remainingHeight + fillingHeight + "px"; // pdf截断需要一个空白位置
return newNode;
},
outPutPdfFn() {
this.PDFBtnLoading = true;
let vm = this;
const A4_WIDTH = 592.28;
const A4_HEIGHT = 841.89;
vm.$nextTick(async () => {
let target = vm.$refs.targetDom;
// let target = node.cloneNode(true);
// console.log(node)
// console.log(target);
let pageHeight = (target.scrollWidth / A4_WIDTH) * A4_HEIGHT;
let lableListID = document.getElementsByClassName("target-node-item");
let lableListTitle =
document.getElementsByClassName("target-node-title")[0];
let lableListHeader =
document.getElementsByClassName("target-node-header")[0];
for (let i = 0; i < lableListID.length; i++) {
let multiple = Math.ceil(
(lableListID[i].offsetTop + lableListID[i].offsetHeight) /
pageHeight
);
if (this.isSplit(lableListID, i, multiple * pageHeight)) {
let divParent = lableListID[i].parentNode; // 获取该div的父节点
let _H =
multiple * pageHeight -
(lableListID[i].offsetTop + lableListID[i].offsetHeight);
let newNode = vm.getFooterElement(_H);
let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
// 判断兄弟节点是否存在
if (next) {
// 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode, next);
// 每页表头增加个人信息
divParent.insertBefore(lableListTitle.cloneNode(true), next);
divParent.insertBefore(lableListHeader.cloneNode(true), next);
} else {
// 不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode);
}
}
}
this.gethtmlToPdf();
// vm.$createPdf(target, "文件名", async (file) => {
// // file对象
// // this.hasPDFModal = false;
// });
});
},
gethtmlToPdf() {
this.htmlTitle = `${this.userInfo.name}继续医学教育年度审核表（${this.queryParams.projectYear}年度）`;
this.getPdf("#pdfDom", async (file) => {
// file对象
this.hasPDFModal = false;
this.PDFBtnLoading = false;
});
},
// 字典翻译
dictFormat(val, dict) {
return this.selectDictLabel(this.dict.type[dict], val);
},
cssClassFormat(val, dict) {
return this.selectDictCssClass(this.dict.type[dict], val);
},
// 科室翻译
// subjectDeptFormat(value) {
// var actions = [];
// Object.keys(this.subjectDeptList).some((key) => {
// if (this.subjectDeptList[key].deptId == "" + value) {
// actions.push(this.subjectDeptList[key].deptName);
// return true;
// }
// });
// return actions.join("");
// },
/** 查询用户列表 */
getList() {
if (!this.queryParams.projectYear) {
return this.$modal.msgError("请选择年度");
}
getCreitsDetail(this.$route.query.userId, this.queryParams.projectYear)
.then((res) => {
if (res.code === 200) {
const data = res.data;
this.userInfo = data;
this.firstCreditList = data.firstCreditList;
this.secondCreditList = data.secondCreditList;
this.tbCreditReductionList = data.tbCreditReductionList;
this.toBase64(data.personalPhoto);
}
})
.catch((err) => {});
},
toBase64(imgUrl) {
const image = new Image();
image.setAttribute("crossOrigin", "anonymous");
const imageUrl = imgUrl + "?v=" + Math.random();
image.src = imageUrl;
image.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let quality = 0.8;
let dataUrl = canvas.toDataURL("image/jpeg", quality);
this.Photo = dataUrl;
return dataUrl;
};
},
// 查询科室选项
// getSubjectDept() {
// getSubjectDept().then((res) => {
// if (res.code === 200) {
// this.subjectDeptList = res.data;
// }
// });
// },
/** 搜索按钮操作 */
handleQuery() {
this.getList();
this.$router
.push({
path: "/creditManage/creditInquireDetail",
query: {
userId: this.$route.query.userId,
projectYear: this.queryParams.projectYear,
},
})
.catch(() => {});
},
/** 查看详情按钮操作 */
checkDetails(row) {
if (row.id) {
if (row.creditCategory == "2") {
if (
["1", "2", "3", "4", "11", "12", "13", "14"].includes(
row.creditSubCategory
)
) {
this.$router.push({
path: "/creditManage/creditInfoDetail",
query: {
userId: this.userInfo.userId,
id: row.id,
creditCategory: row.creditCategory,
creditSubCategory: row.creditSubCategory,
},
});
} else if (
["5", "6", "7", "8", "9", "10", "15"].includes(
row.creditSubCategory
)
) {
this.$router.push({
path: "/creditManage/creditAuditDetail",
query: {
userId: this.userInfo.userId,
id: row.id,
creditCategory: row.creditCategory,
creditSubCategory: row.creditSubCategory,
},
});
}
} else {
this.$router.push({
path: "/creditManage/creditInfoDetail",
query: {
userId: this.userInfo.userId,
id: row.id,
creditCategory: row.creditCategory,
creditSubCategory: row.creditSubCategory,
},
});
}
} else {
this.$modal.msgError("参数错误");
}
},
//II,III级学科
loadSubject(row) {
let secondSubjectInput, thirdSubjectInput;
if (row.projectProperty == "1") {
secondSubjectInput = this.selectDictLabel(
this.dict.type.c_second_subject,
row.secondSubjectCode
);
thirdSubjectInput = this.selectDictLabel(
this.dict.type.c_third_subject,
row.thirdSubjectCode
);
} else {
secondSubjectInput = this.selectDictLabel(
this.dict.type.second_subject,
row.secondSubjectCode
);
thirdSubjectInput = this.selectDictLabel(
this.dict.type.third_subject,
row.thirdSubjectCode
);
}
if (row.secondSubjectCode == "" || row.secondSubjectCode == null) {
return "-";
} else if (row.thirdSubjectCode == "" || row.thirdSubjectCode == null) {
return row.secondSubjectCode + secondSubjectInput;
} else {
return (
row.secondSubjectCode +
secondSubjectInput +
"-" +
row.thirdSubjectCode +
thirdSubjectInput
);
}
},
// ---------------
// 跳转学分减免详情
checkInfo(row) {
if (row.id) {
this.$router.push({
path: "/creditManage/reliefDetail",
query: {
id: row.id,
},
});
} else {
this.$modal.msgError("参数错误");
}
},
goCertificateDetails() {
this.$router.push({
path: "/creditManage/certificateDetails",
query: {
userId: this.$route.query.userId,
projectYear: this.$route.query.projectYear,
},
});
},
},
};
</script>
<style media="print" lang="scss" scoped>
.creditInquireDetail {
.table-box {
td {
width: 14%;
text-align: center;
word-break: break-word;
white-space: break-spaces;
}
// .table-title{
// width: 10%;
// }
.table-img {
width: 7%;
padding: 0;
position: relative;
.img {
width: 100%;
height: 100%;
vertical-align: bottom;
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
}
}
}
::v-deep .el-dialog__body {
padding: 0px;
}
}
.pdf-box {
color: #000;
.new-box {
.top-box {
vertical-align: middle;
.qr-box {
height: 120px;
width: 20%;
display: inline-block;
}
.title-box {
width: 60%;
display: inline-block;
}
}
h4 {
color: #000;
font-weight: 600;
font-size: 22px;
}
padding: 80px 80px 0;
font-size: 18px;
color: #000;
font-weight: 600;
.target-node-item {
.row {
width: 100%;
border-left: 2px solid #000;
text-align: center;
display: table;
.row-item {
display: table-cell;
vertical-align: middle;
// border: 1px solid #000;
border-top: 2px solid #000;
// border-bottom: 1px solid #000;
border-right: 2px solid #000;
padding: 10px;
width: 16.66%;
}
}
.row-bottom {
border-bottom: 2px solid #000;
}
}
}
.table-box {
border-color: #000;
// border-top: 1px solid #000;
// border-left: 1px solid #000;
td {
width: 10%;
text-align: center;
word-break: break-word;
white-space: break-spaces;
// border-bottom: 1px solid #000;
// border-right: 1px solid #000;
}
.table-img {
width: 9%;
padding: 0;
position: relative;
.img-pdf {
width: 100%;
height: 100%;
vertical-align: bottom;
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
}
}
}
.opinion-box {
width: 100%;
height: 500px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
.opinion {
border-left: 2px solid #000;
height: 500px;
width: 33.3%;
display: inline-block;
.title {
text-align: left;
padding: 10px;
color: #000;
}
.fficialSeal {
color: #707070;
margin-top: 50%;
margin-right: 40%;
text-align: right;
}
.time {
margin-top: 60%;
text-align: right;
span {
margin-right: 30px;
}
}
}
}
::v-deep .el-dialog__body {
padding: 0px;
}
}
@media print {
td {
width: 10%;
text-align: center;
word-break: break-word;
white-space: break-spaces;
}
.table-img {
width: 16%;
padding: 0;
position: relative;
.img-pdf {
width: 100%;
height: 100%;
vertical-align: bottom;
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
}
}
::v-deep .el-dialog__body {
padding: 0px;
}
}
</style>
网友评论