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

业务效果:

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

后端实现

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

<!--获取详细信息(用于申请单打印)-->
    <select id="selectXxxxDetail" parameterType="String" resultType="xxxVo">
    SELECT
       c.`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.xxx
    FROM
       xxx  vr
    LEFT JOIN xxx  rr ON rr.xxx  = vr.xxx  
    LEFT JOIN xxx  v ON v.id = rr.xxx  _id
    LEFT 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_by
    LEFT JOIN sys_dept d ON d.dept_id = u.dept_id
    LEFT JOIN xxx  dm ON dm.user_id = u.user_id
    LEFT JOIN xxx   de ON de.id = dm.xxx  
    WHERE
       vr.id = #{id}
    </select>

前端实现

1.首先在配置跳转路由

具体配置项: 

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

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

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

// 获取车辆补证详情信息详细信息(用于申请单打印)
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>