|
|
<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-option label="Word格式" value="2" /> </el-select> </div> <div class="query"> <el-button @click="btnQuery" 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 == 0" ref="imageDom0"> <div style="background-color: #fff; padding: 15px; border-radius: 8px" > <el-table border :height=" flag ? window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 25 : '' " :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.details" border show-summary :summary-method="summarizeRegisterCounts" :header-cell-class-name="headerStyle" > <el-table-column label="人员阳性结果清单"> <el-table-column :label="`${ scope.row.patientRegisterPositiveReports .startDate || '' } 至 ${ scope.row.patientRegisterPositiveReports.endDate || '' } 男性： ${scope.row.patientRegisterPositiveReports.maleCount} 女性： ${ scope.row.patientRegisterPositiveReports.femaleCount } `"
> <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.details " border :header-cell-class-name="headerStyle" style="margin-top: 15px" > <el-table-column label="阳性结果人员清单"> <el-table-column :label="`${ scope.row.patientRegisterPositiveReports .startDate || '' } 至 ${ scope.row.patientRegisterPositiveReports.endDate || '' } 男性： ${scope.row.patientRegisterPositiveReports.maleCount} 女性： ${ scope.row.patientRegisterPositiveReports.femaleCount } `"
> <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.details" border :header-cell-class-name="headerStyle" show-summary :summary-method="summarizeRegisterCount" style="margin-top: 15px" > <el-table-column label="疾病人数统计"> <el-table-column :label="`${ scope.row.patientRegisterPositiveReports .startDate || '' } 至 ${ scope.row.patientRegisterPositiveReports.endDate || '' } 男性： ${scope.row.patientRegisterPositiveReports.maleCount} 女性： ${ scope.row.patientRegisterPositiveReports.femaleCount } `"
> <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 == 1" ref="imageDom1"> <div style="background-color: #fff; padding: 15px; border-radius: 8px" > <el-table border :height=" flag ? window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 25 : '' " :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.details" border show-summary :summary-method="summarizeRegisterCounts" :header-cell-class-name="headerStyle" > <el-table-column label="人员阳性结果清单"> <el-table-column :label="`${ scope.row.patientRegisterPositiveReports .startDate || '' } 至 ${ scope.row.patientRegisterPositiveReports.endDate || '' } 男性： ${scope.row.patientRegisterPositiveReports.maleCount} 女性： ${ scope.row.patientRegisterPositiveReports.femaleCount } `"
> <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.details " border :header-cell-class-name="headerStyle" show-summary :summary-method="summarizeRegisterCount" style="margin-top: 15px" > <el-table-column label="阳性结果人员清单"> <el-table-column :label="`${ scope.row.patientRegisterPositiveReports .startDate || '' } 至 ${ scope.row.patientRegisterPositiveReports.endDate || '' } 男性： ${scope.row.patientRegisterPositiveReports.maleCount} 女性： ${ scope.row.patientRegisterPositiveReports.femaleCount } `"
> <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.details" border :header-cell-class-name="headerStyle" show-summary :summary-method="summarizeRegisterCount" style="margin-top: 15px" > <el-table-column label="疾病人数统计"> <el-table-column :label="`${ scope.row.patientRegisterPositiveReports .startDate || '' } 至 ${ scope.row.patientRegisterPositiveReports.endDate || '' } 男性： ${scope.row.patientRegisterPositiveReports.maleCount} 女性： ${ scope.row.patientRegisterPositiveReports.femaleCount } `"
> <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 == 2" 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 - 25) + '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() { let body = {}, 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); }); }
body.customerOrgs = customerOrgs; if (this.completeFlag) body.completeFlag = this.completeFlag; body.isAudit = this.classification;
if (this.format == 0) { postapi( "/api/customerreport/getunitphysicalexaminationreportstandard", body ).then((res) => { if (res.code != -1) { this.tableData = []; this.tableData.push(res.data); this.reportTitle = res.data.reportTitle; this.customerOrgName = res.data.customerOrgName; this.medicalTimes = res.data.medicalTimes; this.startMonth = res.data.startMonth; this.endMonth = res.data.endMonth; this.startDate = res.data.startDate; this.endDate = res.data.endDate; this.sumMedicalNumber = res.data.sumMedicalNumber; this.maleMedicalNumber = res.data.maleMedicalNumber; this.femaleMedicalNumber = res.data.femaleMedicalNumber; this.otherMedicalNumber = res.data.otherMedicalNumber; } }); } else if (this.format == 1) { postapi( "/api/customerreport/getunitphysicalexaminationreportreduce", body ).then((res) => { if (res.code != -1) { this.reducetableData = []; this.reducetableData.push(res.data); this.reducereportTitle = res.data.reportTitle; this.reducecustomerOrgName = res.data.customerOrgName; this.reducemedicalTimes = res.data.medicalTimes; this.reducestartMonth = res.data.startMonth; this.reduceendMonth = res.data.endMonth; this.reducestartDate = res.data.startDate; this.reduceendDate = res.data.endDate; this.reducesumMedicalNumber = res.data.sumMedicalNumber; this.reducemaleMedicalNumber = res.data.maleMedicalNumber; this.reducefemaleMedicalNumber = res.data.femaleMedicalNumber; this.reduceotherMedicalNumber = res.data.otherMedicalNumber; } }); } else { postapi( "/api/customerreport/getunitphysicalexaminationreportexportword", body ).then((res) => { if (res.code != -1) { const sysConfig = JSON.parse( window.sessionStorage.getItem("sysConfig") ); this.reportUrl = sysConfig.apiurl + res.data.reportUrl; } }); } }, 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.details.length + 7; list.push(index); for ( let i = 0; i < this.tableData[0].positivePatientRegisterReportStandards.details .length - 1; i++ ) { index += this.tableData[0].positivePatientRegisterReportStandards.details[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>
|
