cmc-oa/oa-ui/src/views/flowable/form/components/technicalPrint.vue

<template>
  <div>
    <div id="printTechnical">
      <h2 class="text-center title">技术交底记录表</h2>
      <table border="1">
        <tr>
          <td :colspan="1" class="fontbold">项目名称</td>
          <td :colspan="4">{{ form.projectName }}</td>
          <td :colspan="2" class="fontbold">项目编号</td>
          <td :colspan="2">{{ form.projectNumber }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">承担部门</td>
          <td :colspan="4">{{ getDeptNames(form.undertakingDept) }}</td>
          <td :colspan="2" class="fontbold">项目负责人</td>
          <td :colspan="2">{{ getUserName(form.projectLeader) }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">接受交底人</td>
          <td :colspan="8">{{ getUserName(form.disclosureAccepter) }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">技术交底内容</td>
          <td :colspan="8" style="white-space: pre-wrap;">{{ form.content }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">技术交底意见</td>
          <td :colspan="4">{{ form.disclosureComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.disclosurer) }}</span></td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.disclosureTime }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">接受交底意见</td>
          <td :colspan="4">{{ form.acceptComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">
            签名：<span class="auditor">{{ getUserName(form.disclosureAccepter) }}</span>
          </td>
          <td :colspan="2" style="text-align:left;width:240px;">日期：{{ form.acceptTime }}</td>
        </tr>
      </table>
    </div>
    <div class="text-center mt20">
      <el-button type="primary" v-print="print">确认打印</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      settleSum: {},
      deptSettleList: [],
      deductionsList: [],
      actualSumSettle: '',
      undertakingDept: [],
      print: {
        id: 'printTechnical',
        popTitle: '技术交底记录表', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
}
</script>

<style lang="scss" scoped>
table {
  /*边框*/
  /* border: 1px solid black; */
  width: 90%;
  // text-align: center;
  border-collapse: collapse;
  margin: 0 auto;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
    // line-height: 30px;
  }
}

.header {
  font-family: '黑体';
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
}

.bg {
  background-color: #eee;
  -webkit-print-color-adjust: exact;
}

.title {
  font-family: '黑体';
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.fontbold {
  font-weight: bold;
  min-width: 150px;
  text-align: center;
}

.conment-width {
  // max-width: 200px;
}


@page {
  size: auto;
  /* 去除页脚 */
  margin-bottom: 0;
  // 横向A4
  // size:A4 landscape;
}

@media print {
  #print table {
    width: 100%;
  }
}
</style>