|
|
<template> <div class="box"> <div> <div class="middlebox"> <div class="contenttitle"> 客户报表 / <span class="contenttitleBold">单位职业病汇总报表</span> </div> </div> <div :style="'display: block;'"> <div style=" background-color: #fff; padding: 15px; border-radius: 8px; display: flex; flex-wrap: wrap; margin-bottom: 10px; height: 35px; margin-top: 7px; "> <div class="query"> <span>体检单位：</span> <el-input placeholder="请选择体检单位" v-model="patientRegister.query.cusOrgOCX" style="width: 240px" size="small" disabled> <el-button slot="append" icon="el-icon-search" @click="report.dialogCusOrgOCX = true" style="font-size: 20px"></el-button> </el-input> </div> <div class="query"> <span>报表格式：</span> <el-select v-model="format" placeholder="请选择" style="width: 80px" @change="changeValue" size="small"> <el-option label="疾控汇报" value="0" /> <el-option label="单位格式" value="1" /> </el-select> </div> <div class="query"> <el-button @click="btnQuery(true)" size="small" class="commonbutton">预览</el-button> <el-button @click="btnQuery(false)" size="small" class="commonbutton">打印</el-button> </div> <!-- <div class="query"> <el-button size="small" class="commonbutton" :disabled="format == 2" @click="handleExport">导出excel</el-button> </div> <div class="query"> <el-button size="small" class="commonbutton" :disabled="format == 2" @click="onPrint">打印</el-button> </div> --> </div> <div v-show="format == 3" ref="imageDom0"> <div style="background-color: #fff; padding: 15px; border-radius: 8px"> <el-table border :height="flag ? window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20 : '' " :data="tableData" id="standardTableData" ref="standardTableData" style="width: 100%" :header-cell-class-name="headerStyle"> <el-table-column :label="reportTitle"> <el-table-column :label="`单位： ${customerOrgName || ''} 体检次数 ${medicalTimes || ''} 开始月份： ${startMonth || ''} 结束月份： ${endMonth || ''}`"> <template slot-scope="scope"> <el-table :data="scope.row.patientRegisterPositiveReports" border show-summary :summary-method="summarizeRegisterCounts" :header-cell-class-name="headerStyle"> <el-table-column label="人员阳性结果清单"> <el-table-column :label="`${startDate || ''} 至 ${endDate || ''} 体检人员共计： ${sumMedicalNumber || ''} 其中男： ${maleMedicalNumber || ''} 女： ${femaleMedicalNumber || ''} 其他： ${otherMedicalNumber || ''} `">
<el-table-column prop="patientNo" label="档案号" width="120" /> <el-table-column prop="patientName" label="姓名" width="120" /> <el-table-column prop="sexName" label="性别" width="50" /> <el-table-column prop="age" label="年龄" width="80" /> <el-table-column prop="medicalTimes" label="次数" width="50" /> <el-table-column prop="mobileTelephone" label="手机号码" width="120" /> <el-table-column prop="diagnosisNames" label="诊断名称" /> </el-table-column> </el-table-column> </el-table>
<el-table :data="scope.row.positivePatientRegisterReportStandards" border :header-cell-class-name="headerStyle" style="margin-top: 15px"> <el-table-column label="阳性结果人员清单"> <el-table-column :label="`${startDate || ''} 至 ${endDate || ''} 体检人员共计： ${sumMedicalNumber || ''} 其中男： ${maleMedicalNumber || ''} 女： ${femaleMedicalNumber || ''} 其他： ${otherMedicalNumber || ''} `">
<template slot-scope="scopes"> <el-table :data="scopes.row.patientRegisters" border show-summary :summary-method="summarizeRegisterCounts"> <el-table-column :label="scopes.row.diagnosisName"> <el-table-column label="部门名称" prop="departmentName"></el-table-column> <el-table-column label="姓名" prop="patientName"></el-table-column> <el-table-column label="性别" prop="sexName"></el-table-column> <el-table-column prop="age" label="年龄"> </el-table-column> <el-table-column prop="patientRegisterNo" label="条码号"> </el-table-column> <el-table-column prop="patientNo" label="档案号"> </el-table-column> <el-table-column prop="medicalTimes" label="体检次数"> </el-table-column> <el-table-column prop="telephone" label="电话"> </el-table-column> <el-table-column prop="mobileTelephone" label="手机号"> </el-table-column> </el-table-column> </el-table> </template> </el-table-column> </el-table-column> </el-table>
<el-table :data="scope.row.diseaseCountStatisticsReports" border :header-cell-class-name="headerStyle" show-summary :summary-method="summarizeRegisterCount" style="margin-top: 15px"> <el-table-column label="疾病人数统计"> <el-table-column :label="`${startDate || ''} 至 ${endDate || ''} 体检人员共计： ${sumMedicalNumber || ''} 其中男： ${maleMedicalNumber || ''} 女： ${femaleMedicalNumber || ''} 其他： ${otherMedicalNumber || ''} `">
<el-table-column label="序号" type="index"> </el-table-column> <el-table-column prop="diagnosisName" label="疾病" /> <el-table-column prop="patientCount" label="人数" /> <el-table-column prop="percentage" label="占总检人员百分比" /> </el-table-column> </el-table-column> </el-table> </template> </el-table-column> </el-table-column> </el-table> </div> </div> <div v-show="format == 4" ref="imageDom1"> <div style="background-color: #fff; padding: 15px; border-radius: 8px"> <el-table border :height="flag ? window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20 : '' " :data="reducetableData" id="reducetableData" ref="reducetableData" style="width: 100%" :header-cell-class-name="headerStyle"> <el-table-column :label="reducereportTitle"> <el-table-column :label="`单位： ${customerOrgName || ''} 体检次数 ${medicalTimes || ''} 开始月份： ${startMonth || ''} 结束月份： ${endMonth || ''}`"> <template slot-scope="scope"> <el-table :data="scope.row.patientRegisterPositiveReports" border show-summary :summary-method="summarizeRegisterCounts" :header-cell-class-name="headerStyle"> <el-table-column label="人员阳性结果清单"> <el-table-column :label="`${reducestartDate || ''} 至 ${reduceendDate || ''} 体检人员共计： ${reducesumMedicalNumber || ''} 其中男： ${reducemaleMedicalNumber || ''} 女： ${reducefemaleMedicalNumber || ''} 其他： ${reduceotherMedicalNumber || ''} `">
<el-table-column prop="patientNo" label="档案号" width="120" /> <el-table-column prop="patientName" label="姓名" width="120" /> <el-table-column prop="sexName" label="性别" width="50" /> <el-table-column prop="age" label="年龄" width="80" /> <el-table-column prop="medicalTimes" label="次数" width="50" /> <el-table-column prop="mobileTelephone" label="手机号码" width="120" /> <el-table-column prop="diagnosisNames" label="诊断名称" /> </el-table-column> </el-table-column> </el-table>
<el-table :data="scope.row.positivePatientRegisterReportReduces" border :header-cell-class-name="headerStyle" show-summary :summary-method="summarizeRegisterCount" style="margin-top: 15px"> <el-table-column label="阳性结果人员清单"> <el-table-column :label="`${reducestartDate || ''} 至 ${reduceendDate || ''} 体检人员共计： ${reducesumMedicalNumber || ''} 其中男： ${reducemaleMedicalNumber || ''} 女： ${reducefemaleMedicalNumber || ''} 其他： ${reduceotherMedicalNumber || ''} `">
<el-table-column label="序号" type="index"> </el-table-column> <el-table-column prop="diagnosisName" label="诊断" /> <el-table-column prop="patientCount" label="人数" /> <el-table-column prop="percentage" label="占总检人员百分比" /> </el-table-column> </el-table-column> </el-table>
<el-table :data="scope.row.diseaseCountStatisticsReports" border :header-cell-class-name="headerStyle" show-summary :summary-method="summarizeRegisterCount" style="margin-top: 15px"> <el-table-column label="疾病人数统计"> <el-table-column :label="`${reducestartDate || ''} 至 ${reduceendDate || ''} 体检人员共计： ${reducesumMedicalNumber || ''} 其中男： ${reducemaleMedicalNumber || ''} 女： ${reducefemaleMedicalNumber || ''} 其他： ${reduceotherMedicalNumber || ''} `">
<el-table-column label="序号" type="index"> </el-table-column> <el-table-column prop="diagnosisName" label="疾病" /> <el-table-column prop="patientCount" label="人数" /> <el-table-column prop="percentage" label="占总检人员百分比" /> </el-table-column> </el-table-column> </el-table> </template> </el-table-column> </el-table-column> </el-table> </div> </div> <div v-show="format == 0 || format == 1" ref="imageDom2"> <div style="background-color: #fff; padding: 15px; border-radius: 8px"> <div :style="'display: flex;justify-content: center;align-items: center;height:' + (window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20) + 'px;' "> <div v-show="reportUrl == ''">无数据</div> <a :href="reportUrl" v-show="reportUrl != ''"> <el-button>下载Word报表</el-button> </a> </div> </div> </div> </div> </div> <!--通用选单位、体检次数、分组的控件--> <el-dialog title="体检单位选择" :visible.sync="report.dialogCusOrgOCX" :close-on-click-modal="false" width="880px" height="600px"> <CusOrgOCX :useCustomerOrg="true" :initDateType="'creationTime'" :isUnit="true" /> </el-dialog> </div></template>
<script>import moment from "moment";import { mapState, mapActions } from "vuex";import { getapi, postapi, putapi, deletapi } from "@/api/api";import { dddw, objCopy, arrayReduce, arrayExistObj, tcdate,} from "@/utlis/proFunc";import CusOrgOCX from "../../components/report/CusOrgOCX.vue";import { exportToExcel } from "../../utlis/Export2Excel";import html2canvas from "html2canvas";import printJs from "print-js";export default { components: { CusOrgOCX, }, data() { return { format: "0", flag: true, tableData: [], reducetableData: [], reportTitle: "", customerOrgName: "", medicalTimes: null, startMonth: "", endMonth: "", startDate: "", endDate: "", sumMedicalNumber: null, maleMedicalNumber: null, femaleMedicalNumber: null, otherMedicalNumber: null, reducereportTitle: "", reducecustomerOrgName: "", reducemedicalTimes: null, reducestartMonth: "", reduceendMonth: "", reducestartDate: "", reduceendDate: "", reducesumMedicalNumber: null, reducemaleMedicalNumber: null, reducefemaleMedicalNumber: null, reduceotherMedicalNumber: null, reportUrl: "", }; }, created() { // this.dictInit();
},
//挂载完成
mounted() { // this.btnQuery();
},
computed: { ...mapState(["window", "dict", "patientRegister", "report"]), }, methods: { btnQuery(isPreview) { let customerOrgs = []; if (this.report.dataCusOrgOCX.length > 0) { this.report.dataCusOrgOCX.forEach((e) => { let rd = { startDate: moment(e.startDate).format("yyyy-MM-DD"), endDate: moment(e.endDate).format("yyyy-MM-DD"), dateType: e.dateType == "summaryDate" ? "3" : e.dateType == "medicalStartDate" ? "2" : "1", };
if (e.customerOrgId) { rd.customerOrgId = e.customerOrgId; if (e.customerOrgId == this.dict.personOrgId) { rd.customerOrgRegisterId = null; rd.customerOrgGroupId = []; } else { rd.customerOrgRegisterId = e.customerOrgRegister.id; rd.customerOrgGroupId = e.customerOrgGroupIds; } } customerOrgs.push(rd); }); }
if (customerOrgs.length == 0) { this.$message.warning({ showClose: true, message: "请选择单位" }) return }
if (!this.$peisAPI) { this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" }) return }
//暂时未区分格式
// if (this.format == 0)
let ReportCode = this.format == 0 ? '0009':'0010'; let token = window.sessionStorage.getItem('token'); let user = window.sessionStorage.getItem('user');
let toOutShell = { ReportCode, token, isBuildImage: 'N', IsUploadPdf: 'N', preViewCanPrint: "Y", Parameters: [ { Name: "printer", Value: user }, { Name: "hisLog", Value: "pic/hisLog.jpg" }, { Name: 'pageFooter', Value: 'pic/peisQrCode.jpg' }, { Name: "picExtOne", Value: "pic/occGrant.jpg" }, ], BusinessCode:JSON.stringify(customerOrgs) };
console.log('toOutShell', toOutShell) if (isPreview) { this.$peisAPI.printPre(JSON.stringify(toOutShell)) .then(res => { let lres = JSON.parse(res) if (lres.code < 0) { this.$message.error({ showClose: true, message: lres.message }) } }) .catch((err) => { this.$message.error({ showClose: true, message: err }) }); } else { this.$peisAPI.print(JSON.stringify(toOutShell)) .then(res => { let lres = JSON.parse(res) if (lres.code < 0) { this.$message.error({ showClose: true, message: lres.message }) } }) .catch((err) => { this.$message.error({ showClose: true, message: err }) }); } },
summarizeRegisterCounts(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = "合计"; return; } if (index === 1) { sums[index] = data.length + "人"; return; } });
return sums; }, summarizeRegisterCount(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = "合计"; return; } const values = data.map((item) => Number(item[column.property])); if (index === 2) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); sums[index] += " 人"; } });
return sums; }, headerStyle({ row, column, rowIndex, columnIndex }) { if (rowIndex === 1) { return "left-align"; } }, changeValue(value) { if (value == 0) { this.$nextTick(() => { this.$refs.standardTableData.doLayout(); }); } else if (value == 1) { this.$nextTick(() => { this.$refs.reducetableData.doLayout(); }); } }, handleExport() { if (this.format == 0) { let name = "北京神豚软件开发有限公司体检报告"; if (this.reportTitle != "") { name = this.reportTitle; } let index = 3; let list = []; list.push(index); index += this.tableData[0].patientRegisterPositiveReports.length + 7; list.push(index); for ( let i = 0; i < this.tableData[0].positivePatientRegisterReportStandards.length - 1; i++ ) { index += this.tableData[0].positivePatientRegisterReportStandards[i] .patientRegisters.length + 4; list.push(index); } exportToExcel("#standardTableData", name, true, list); } else if (this.format == 1) { let name = "北京神豚软件开发有限公司体检报告"; if (this.reducereportTitle != "") { name = this.reducereportTitle; } let index = 3; let list = []; list.push(index); exportToExcel("#reducetableData", name, true, list); } }, onPrint() { this.flag = false; let index = ""; if (this.format == 0) { index = "imageDom0"; } else if (this.format == 1) { index = "imageDom1"; } else { index = "imageDom2"; } this.$nextTick(() => { let width = this.$refs[index].style.width; let cloneDom = this.$refs[index].cloneNode(true); let imageDom = this.$refs[index]; cloneDom.style.position = "absolute"; cloneDom.style.top = "0px"; cloneDom.style.zIndex = "-1"; cloneDom.style.width = width; imageDom.appendChild(cloneDom); html2canvas(cloneDom).then((canvas) => { // 转成图片，生成图片地址
const url = canvas.toDataURL("image/png"); printJs({ printable: url, type: "image", documentTitle: "", // 标题
style: `@media print { @page {size: auto; margin: 0 0 0 0; } body{margin:0 5px}canvas{page-break-after: always;page-break-inside: avoid;
page-break-after: avoid;page-break-before: avoid;}}`, // 去除页眉页脚
}); }); cloneDom.style.display = "none"; this.flag = true; }); }, },};</script>
<style scoped>@import "../../assets/css/global_button.css";@import "../../assets/css/global_dialog.css";@import "../../assets/css/global_table.css";@import "../../assets/css/global_form.css";@import "../../assets/css/global_input.css";@import "../../assets/css/global.css";
.query { margin-right: 10px; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #232748; font-size: 400; font-family: "NotoSansSC-Regular";}
.box { display: flex; flex-direction: column;}
::v-deep .el-table__header-wrapper th.backcolor { background-color: #f5f7fa;}
:deep .left-align .cell { text-align: left !important;}
::v-deep .el-input__inner { /*text-align: center;*/ padding-left: 5px; padding-right: 15px;}
::v-deep .el-input__icon { width: 15px; /* 输入框下拉箭头或清除图标 默认 25 */}
::v-deep .el-input-group__append { padding: 0 5px; /* 控件默认 0 20px;*/}
::v-deep .el-icon-search:before { color: #00F;}
.query:last-child { margin-right: 0;}</style>
|
