vue2框架配置路由设计打印单

业务效果:

查询出列表后，点击申请单按钮，弹出申请表格，可进行打印

后端实现

控制器、服务层等省略，关联查出数据提供接口给前端即可

<!--获取详细信息(用于申请单打印)--><select id="selectXxxxDetail" parameterType="String" resultType="xxxVo">SELECTc.`name` AS xxx,c.xxx,c.xxxAS xxx,c.xxxAS xxx,c.xxxAS xxx,ca.xxxAS xxx,vr.xxx,b.xxx,bm.xxx,v.xxx,dd.xxxas xxx,v.xxx,v.xxx,v.xxx,v.xxx,de.xxx,d.xxxFROMxxx  vrLEFT JOIN xxx  rr ON rr.xxx  = vr.xxx  LEFT JOIN xxx  v ON v.id = rr.xxx  _idLEFT JOIN xxx  c ON c.id = rr.xxx  LEFT JOIN xxx  ca ON ca.id = rr.xxx  LEFT JOIN xxx  b ON b.id = v.xxx  LEFT JOIN xxx  bm ON bm.id = v.xxx  LEFT JOIN xxx  cf ON cf.id = rr.xxx  LEFT JOIN xxx  bc ON bc.id = v.xxx  LEFT JOIN xxx  bd ON bd.xxxid = bc.xxx  LEFT JOIN sys_dict_data dd ON dd.xxx  = v.xxx  LEFT JOIN sys_user u ON u.user_name = vr.create_byLEFT JOIN sys_dept d ON d.dept_id = u.dept_idLEFT JOIN xxx  dm ON dm.user_id = u.user_idLEFT JOIN xxx   de ON de.id = dm.xxx  WHEREvr.id = #{id}</select>

前端实现

1.首先在配置跳转路由

具体配置项:

javascript">  {path: '/xxxxxxForm',component: (resolve) => require(['@/views/xxx/xxxxx/xxxxxxForm'], resolve),hidden: true,meta: { title: 'xxxx申请表' }},

2.这个配置申请单的数据查询接口到js

分析：因为这个表格的数据要比当前业务表的数据要集成得多，所以需要重新写接口关联查询进行获取，通过VO接收后给到前端

javascript">// 获取车辆补证详情信息详细信息(用于申请单打印)
export function getReissuecertDetail(id) {return request({url: '/ddc/vehicleTransactReissuecert/getReissuecertDetail/' + id,method: 'get'})
}

3.页面加“申请单”按钮，及配置跳转的处理逻辑

4.表格页面代码：


<!-- 超级飞侠申请表 -->
<template><div :visible.sync="openView.open" class="app-container"><div id="main-div"><p class="bold-large-text" style="text-align: center">超级飞侠申请表</p><table class="table table-bordered"   valign="center" style="table-layout: fixed"><tr><td colspan="12">入伍信息</td></tr><tr><td colspan="2" rowspan="4" >申请人</td><td colspan="2" >姓名/名称</td><td colspan="3" >{{formData.xxxName}}</td><td colspan="2" >个人类型</td><td colspan="3" ><div v-if="formData.xxxtype==='1'">个人</div><div v-if="formData.xxxtype==='2'">组织</div></td></tr><tr><td colspan="2" >身份证号</td><td colspan="3" >{{ formData.xxxIdcard }}</td><td colspan="2" >手机号码</td><td colspan="3" >{{ formData.xxxMobilephone }}</td></tr><tr><td colspan="2" >户籍地址</td><td colspan="8" >{{ formData.xxxPermanentaddress }}</td></tr><tr><td colspan="2" >现居住地址</td><td colspan="8" >{{ formData.xxxResidenceaddress }}</td></tr><tr>...</tr><tr><td colspan="6" rowspan="5"  class="signature-cell"><div align='left'><br>*申请人签字：</div><div align='right'><br><br>时间 _____年_____月_____日</div></td><td colspan="6" rowspan="5"  class="signature-cell"><div align='left'><br>*经办人签字：</div><div align='right'><br><br>时间 _____年_____月_____日</div></td></tr></table></div><div style="float: right;"><el-button ref="printClick" type="primary" @click="printer">打 印</el-button><el-button @click="close">取 消</el-button></div></div>
</template><script>
import {getxxxDetail
} from "@/api/ccc/xxx";
import printJS from 'print-js';const printer = () => {printJS({printable: 'main-div',type: 'html',popTitle:"超级飞侠入伍管理系统",style: `h2{ text-align: center;font-size: 14px;}table{width: 95%;border-collapse: collapse;font-size: 8px; }th, td {border: 1px solid #000000;text-align: center;}.div-text-left { text-align: left; margin-bottom: 10px;}.bold-large-text { text-align: center; font-weight: bold; font-size: 30px; }.divText { text-align: right;}`,scanStyles: true,})
}
export default {name: "txxxForm",data() {return {printer,baseURL: process.env.VUE_APP_BASE_API,//车辆转移登记数据formData: {},// 弹出层标题title: "",// 是否显示弹出层open: false,// 是否显示详细弹出层openView: false,// 表单参数form: {},};},created() {//根据changeId加载数据const xxxId = this.$route.query.xxxId;console.log(xxxId)this.loadData(xxxId);},methods: {close() {window.close();},dialogVisible() {this.$store.dispatch("xxxForm", this.$route)},/** 根据changeId查询查验单信息 */loadData(xxxId) {getxxxDetail(xxxId).then(response => {this.formData = response.data;});},}
};
</script><style rel="stylesheet/scss" lang="scss">
#main-div {display: table;width: 700px;max-width: 100%;margin: 0 auto;
}
.table {width: 100%;border-collapse: collapse;text-align: center;
}
.table td, .table th {padding: 8px;border: 1px solid rgb(50, 66, 74);
}
.kuang {font-size: 30px; /* 调整方框大小 */text-align: center;
}
.bold-large-text {font-size: 24px;font-weight: bold;text-align: center;
}
@media print {.signature-cell {text-align: left !important; /* 确保打印时文字居左 */line-height: 1.5; /* 调整行高 */padding-top: 10px; /* 上边距 */}.div-text-left {text-align: left;margin-bottom: 20px;}
}
</style>