You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
837 lines
29 KiB
837 lines
29 KiB
<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>
|