父组件
<a-button @click="printTable" type="primary">打印</a-button>
引入打印组件
<printTable ref="printRef" id="printTable" class="printTable" />
//js逻辑
printTable() {
if(this.selectedRowKeys.length===0) {
this.$message.warning('请选择需要打印的调查问卷')
return;
}
this.$refs.printRef.getPrintInfo(this.selectedRowKeys.join(","), this.printInfo, this.info);
},
//内置浏览器打印事件
printInfo() {
let divContents = document.getElementById("printTable").innerHTML;
let a = window.open("zymls", "", "height=900, width=900");
a.document.write('<html">');
a.document.write("<body >");
a.document.write(divContents);
a.document.write("</body></html>");
a.document.close();
//通过a.onload函数等待加载完毕数据展示后再进行打印
a.onload=function(){
a.print();
}
},
子组件
<template>
<div class="print-content" style="font-size: 18px">
<div v-for="(itemData, ind) in tableAllData" :key="ind" style="margin-bottom: 1000px">
<h2 style="text-align: center">调查问卷打印模板</h2>
<div
v-if="itemData"
style="
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px;
"
>
<div>姓名: {{ itemData.customerName }}</div>
<div>电话:{{ itemData.customerMobile }}</div>
<div style="padding-right: 40px">
意向加盟区域: {{ areaList.province_list[itemData.intentionProvince] }}-{{
areaList.city_list[itemData.intentionCity]
}}
</div>
</div>
<template v-if="itemData">
<table
class="print-table"
border="1"
cellpadding="0"
cellspacing="0"
style="width: 100%; margin-bottom: 30px"
v-for="(item, index) in itemData.interviewInfoList"
:key="index"
>
<div>
<tr align="center">
<td rowspan="6">
<img :src="item.storeImg" style="width: 180px; height: 260px" mode="widthFix" />
</td>
<td width="280px">门店名称:</td>
<td colspan="2">{{ item.storeName }}</td>
<td width="280px">蹲点时段:</td>
<td colspan="2">{{ item.crouchingPeriod }}</td>
</tr>
<tr align="center">
<td width="150px" >门店面积:</td>
<td width="150px" >{{ item.storeArea }}</td>
<td width="150px" >招牌宽度:</td>
<td width="150px" >{{ item.signboardWidth }}</td>
<td width="150px" >店员人数:</td>
<td width="150px" >{{ item.clerkNumber }}</td>
</tr>
<tr align="center">
<td width="280px" >员工工资:</td>
<td width="150px" >{{ item.clerkSalary }}</td>
<td width="280px" >周边人流:</td>
<td width="150px" >{{ item.traffic }}</td>
<td width="250px" >平均客单:</td>
<td width="150px" >{{ item.averageCosts }}</td>
</tr>
<tr>
<td colspan="6" width="100%" height="20px"></td>
</tr>
<tr align="center">
<td width="400px" >预估日营业额:</td>
<td width="150px" >{{ item.dailySales }}</td>
<td width="400px" >预估月营业额:</td>
<td width="150px" >{{ item.monthSales }}</td>
<td width="150px" >转让费:</td>
<td width="150px" >{{ item.transferFee }}</td>
</tr>
<tr align="center">
<td width="300px" colspan="2">时段进店年人数:</td>
<td width="100px" >{{ item.pepoleNumber }}</td>
<td width="150px" >水电费:</td>
<td style="padding: 5px" colspan="2">{{ item.electricityCost }}</td>
</tr>
<tr align="center">
<td width="150px" style="padding: 5px">位置优势有哪些:</td>
<td align="left" colspan="7" width="100%" style="padding: 5px">
{{ item.locationAdvantage }}
</td>
</tr>
<tr align="center">
<td width="150px" style="padding: 5px">位置缺点有哪些:</td>
<td align="left" width="100%" colspan="7" style="padding: 5px">
{{ item.locationDisadvantage }}
</td>
</tr>
<tr align="center">
<td width="150px" style="padding: 5px">门店经营管理看法:</td>
<td align="left" width="100%" colspan="7" style="padding: 5px">
{{ item.managerView }}
</td>
</tr>
<tr align="center">
<td width="150px" style="padding: 5px">备注:</td>
<td align="left" width="100%" colspan="7" style="padding: 5px">{{ item.note }}</td>
</tr>
</div>
</table>
</template>
<div style="margin: 30px"></div>
<div v-if="itemData">
<table class="print-table" cellpadding="0" cellspacing="0" style="width: 100%">
<div v-for="(item, index) in itemData.upfacQuestionLists" :key="index">
<tr>
<td width="100%" style="padding: 10px">{{ item.question }}</td>
</tr>
<tr>
<td width="100%" style="padding: 10px">{{ item.answer }}</td>
</tr>
</div>
</table>
</div>
</div>
</div>
</template>
<script>
import { getDetailBatch } from "@/api/questionnaire.js";
import { areaList } from "@/utils/area";
export default {
props: {
facQuestion: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
areaList,
tableAllData: [], //所有整合数据
current: 0,
infoData: [],
intentionProvince: [],
intentionCity: [],
};
},
mounted() {
window.addEventListener("afterprint", (event) => {
this.current = this.current + 1;
});
},
methods: {
getPrintInfo(ids, callback, info) {
this.infoData = info;
getDetailBatch({ ids: ids })
.then((res) => {
if (res.data.code === 0) {
this.tableAllData = res.data.data.map((elem) => {
let obj = {};
//处理问题答案
obj.upfacQuestionLists = [];
elem.facQuestionList.forEach((item1) => {
const foundItem = elem.facQuestionAnswerList.find(
(item2) => item2.questionType === item1.questionType
);
// 如果找到了相同questionType，则将问题答案合并为一个对象
if (foundItem) {
obj.upfacQuestionLists.push({
question: item1.question,
questionType: item1.questionType,
answer: foundItem.answer,
});
}
});
//招商管理信息
obj.interviewInfoList = [];
obj.interviewInfoList = elem.interviewInfoList;
obj.customerMobile = elem.customerMobile;
obj.customerName = elem.customerName;
obj.intentionCity = elem.intentionCity;
obj.intentionProvince = elem.intentionProvince;
return obj;
});
}
})
.catch((err) => {})
.finally(() => {
callback();
});
},
},
};
</script>
<style lang="scss" scoped>
td {
padding: 15px 10px;
line-height: 24px;
}
.info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding: 10px 40px;
}
</style>
