打印工单，构建一个iframe

<template>
  <div class="wrap-order purchase-pritn" id="wrap-order">
    <el-button type="primary" class="noprint printBtn" @click="printOrder">打印工单</el-button>
    <div class="order-content">
      <div class="container">
        <p style="text-align: center" class="order-title">医疗设备（10万元以上）购置申请论证表</p>
        <div style="display: flex;justify-content: space-between" class="mt20 contenttt">
          <div>
            <el-checkbox disabled v-model="detail.nursingReview">是否护理部审核</el-checkbox>
          </div>
          <div>
            <span class="apply-time">填报日期：</span>
            <span>{{detail.applicantDate && convertDate(detail.applicantDate, 'yyyy-MM-dd')}}</span>
          </div>
        </div>
        <table class="table mt10">
          <tr>
            <td colspan="2">
              <span>所属科室：</span>
              <span class="font14">{{detail.applyDepartName}}</span>
            </td>
            <td colspan="3">
              <span>科主任：</span>
              <span class="font14">{{detail.directorName}}</span>
            </td>
          </tr>
          <tr>
            <td>设备名称</td>
            <td>数量</td>
            <td>推荐品牌</td>
            <td>预算单价(万元)</td>
            <td>预算总价(万元)</td>
          </tr>
          <tr v-for="(item, index) in equs" class="font14">
            <td :rowspan="equs.length" v-if="index===0" >
              <span>{{item.name}}</span>
            </td>
            <td :rowspan="equs.length" v-if="index===0">
              {{equs.length}}
            </td>
            <td>
              <span>{{item.brand}}</span>
            </td>
            <td>
              <span>{{item.budgetUnitPrice}}</span>
            </td>
            <td>
              <span>{{item.totalBudgetPrice}}</span>
            </td>
          </tr>
          <tr>
            <td :colspan="5">
              <p>本单位现有同类仪器设备 <span>{{detail.exceedApply.similarCount}}</span> &nbsp;台。 设备使用绩效情况。</p>
              <p class="font14 height100">{{detail.equAnalysis}}</p>
            </td>
          </tr>
          <tr>
            <td :colspan="3">
              <p>收费标准、医保情况：</p>
              <div style="display: flex;justify-content: space-between" class="mt20">
                <div style="display: flex;justify-content: space-between">
                  <p>项目编码：</p><span class="font14">{{detail.exceedApply.projectCode}}</span>
                </div>
                <div style="display: flex;justify-content: space-between">
                  <p>收费：</p><span class="font14">{{detail.exceedApply.cost}}</span>
                </div>
              </div>
              <div style="display: flex;justify-content: space-between" class="mt20">
                <span>医保分类：</span>
                <el-radio disabled v-model="detail.exceedApply.medicalInsuranceType" label="2">（甲）</el-radio>
                <el-radio disabled v-model="detail.exceedApply.medicalInsuranceType" label="1">（亿）</el-radio>
                <el-radio disabled v-model="detail.exceedApply.medicalInsuranceType" label="2">（丙）</el-radio>
              </div>
            </td>
            <td :colspan="2">
              <p>材料收费：</p>
              <p class="mt10 font14">{{detail.exceedApply.materialCost}}</p>
            </td>
          </tr>
          <tr>
            <td :colspan="5">
              <p>申购仪器设备在单位医疗、教学、科研工作中的作用：</p>
              <p class="mt10 font14 height200">{{detail.exceedApply.effect}}</p>
            </td>
          </tr>
          <tr class="page-break">
            <td :colspan="5">
              <p>申购仪器设备的经济效益预测：</p>
              <ul>
                <li>1、使用年限：<span class="font14">{{detail.exceedApply.serviceLife}}</span>年</li>
                <li>2、每周使用频率： <span class="font14">{{detail.exceedApply.weeklyFrequency}}</span></li>
                <li>3、每单次收费： <span class="font14">{{detail.exceedApply.singlePrice}}</span></li>
                <li>4、年经济效益： <span class="font14">{{detail.exceedApply.annualBenefit}}</span></li>
                <li>5、年维修，消耗费用估计： <span class="font14">{{detail.exceedApply.annualConsume}}</span></li>
                <li>6、年净收入： <span class="font14">{{detail.exceedApply.annualNI}}</span></li>
              </ul>
            </td>
          </tr>
          <tr>
            <td :colspan="5">
              <p>配套条件：</p>
              <ul>
                <li>1、房屋、水、电等条件： <span class="font14">{{detail.exceedApply.condition}}</span></li>
                <li>2、排污、放射等问题的解决：<span class="font14">{{detail.exceedApply.solution}}</span></li>
                <li>3、有何特殊要求：<span class="font14">{{detail.exceedApply.requirement}}</span></li>
              </ul>
            </td>
          </tr>
          <tr>
            <td :colspan="5">
              <p>使用科室的人员配备、培训情况，能否保证设备正常进行：</p>
              <p class="mt10 font14">{{detail.exceedApply.situation}}</p>
            </td>
          </tr>
          <tr>
            <td :colspan="5">
              <p>维修技术力量的保证或维修途径：</p>
              <p class="mt10 font14">{{detail.exceedApply.techSupport}}</p>
            </td>
          </tr>
          <tr>
            <td :colspan="5">
              <p>资金来源、贷款仪器设备能否偿还：</p>
              <p class="mt10 font14">{{detail.exceedApply.fundSource}}</p>
            </td>
          </tr>
          <tr class="no-page-break">
            <td :colspan="5" class="box">
              <p class="box-title">财务科意见：</p>
              <p class="mt10 font14">{{detail.financeRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.financeSign" class="imgwidth">
                <span>{{detail.financeSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">医保科意见：</p>
              <p class="mt10 font14">{{detail.medicalInsuranceRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.medicalInsuranceSign" class="imgwidth">
                <span>{{detail.medicalInsuranceSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">{{detail.nursingReview ? '护理部意见：': '医务科意见：'}}</p>
              <p class="mt10 font14">{{detail.medicalCareRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.medicalCareSign" class="imgwidth">
                <span>{{detail.medicalCareSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">医学装备科意见：</p>
              <p class="mt10 font14">{{detail.medicalEquRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.medicalEquSign" class="imgwidth">
                <span>{{detail.medicalEquSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">设备分管领导意见：</p>
              <p class="mt10 font14">{{detail.chargeLeaderRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.chargeLeaderSign" class="imgwidth">
                <span>{{detail.chargeLeaderSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">领导审批意见：</p>
              <p class="mt10 font14">{{detail.leaderRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.leaderSign" class="imgwidth">
                <span>{{detail.leaderSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">设备管理委员会意见：</p>
              <p class="mt10 font14">{{detail.managementRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.managementSign" class="imgwidth">
                <span>{{detail.managementSignDate}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="5" class="box">
              <p class="box-title">院长意见：</p>
              <p class="mt10 font14">{{detail.deanRemark}}</p>
              <div class="sign-part">
                <span>签字:</span>
                <img :src="detail.deanSign" class="imgwidth">
                <span>{{detail.deanSignDate}}</span>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from '@/untils/dataOpts'
import BenefitBar from '@/components/benefit/benefitBar.vue'
import BenefitAnalysisBar from '@/components/benefit/benefitAnalysisBar.vue'
export default {
  components: {
    BenefitBar,
    BenefitAnalysisBar
  },
  data () {
    return {
      showRecord: false,
      nowTime: '',
      reportInfo: {
        usageDate: '0-0',
        normalValue: [],
        usingValue: []
      },
      detail: {
        canEdit: false,
        departName: '', // 科室名称
        applyDepartId: '', // 科室
        directorName: '', // 科室主任
        applicantDate: '', // 申请时间
        applyReason: '', // 申请理由
        nursingReview: false,
        exceedApply: {
          id: '',
          similarCount: '', // 同类仪器个数
          projectCode: '', // 项目编码
          cost: '', // 收费
          medicalInsuranceType: '', // 医保分类枚举
          materialCost: '', // 收费
          effect: '', // 申购仪器设备在单位医疗、教学、科研工作中的作用
          serviceLife: '', // 使用年限
          weeklyFrequency: '', // 每周使用频率
          singlePrice: '', // 每单次收费
          annualBenefit: '', // 年经济效益
          annualConsume: '', // 年维修，消耗费用估计
          annualNI: '', // 年净收入
          condition: '', // 房屋、木、电等条件
          solution: '', // 排污、放射等问题的解决
          requirement: '', // 有何特殊要求
          situation: '', // 使用科室的人员配备、培训情况、是否能保证设备正常进行
          techSupport: '', // 维修技术力量的保证或维修途径
          fundSource: '' // 资金来源、贷款仪器设备能否偿还
        },
        equAnalysis: '', // 设备绩效情况
        financeSignDate: '', // 财务科签字日期
        medicalInsuranceSignDate: '', // 医保科签字日期
        medicalCareSignDate: '', // 医务科/护理部签字日期
        medicalEquSignDate: '', // 医学装备科签字日期
        chargeLeaderSignDate: '', // 设备分管领导签字日期
        leaderSignDate: '', // 领导签字日期
        managementSignDate: '', // 设备管理委员会签字日期
        deanSignDate: '', // 院长签字日期
        financeRemark: '', // 财务科意见
        medicalInsuranceRemark: '', // 医保科意见
        medicalCareRemark: '', // 医务科/护理部意见
        medicalEquRemark: '', // 医学装备科意见
        chargeLeaderRemark: '', // 设备分管领导意见
        leaderRemark: '', // 领导意见
        managementRemark: '', // 设备管理委员会意见
        deanRemark: '', // 院长意见
        financeSign: '', // 财务科签字
        medicalInsuranceSign: '', // 医保科签字
        medicalCareSign: '', // 医务科/护理部签字
        medicalEquSign: '', // 医学装备科签字
        chargeLeaderSign: '', // 设备分管领导签字
        leaderSign: '', // 领导签字
        managementSign: '', // managementSign;
        deanSign: '' // 院长签字
      },
      equs: []
    }
  },
  computed: {
    id () {
      return this.$route.params.id
    }
  },
  methods: {
    printOrder () {
      const printContentHtml = document.getElementById('wrap-order').innerHTML
      const iframe = document.createElement('iframe')
      iframe.setAttribute('style', 'position:absolute;width:0;height:0;left:-500px;top:-500px;')
      document.body.appendChild(iframe)
      const doc = iframe.contentWindow.document
      doc.write('<style>' +
        'div, p, ul {list-style: none;margin: 0;padding: 0;}' +
        '.wrap-order {display: block;width: 850px;margin: 0 auto;}' +
        '.order-content {width: 100%;margin-bottom: 40px;}' +
        '.order-title {display: block;text-align: center;font-size: 26px;font-weight: 600;}' +
        '.container {margin-left: 1cm;margin-right: 1cm}' +
        '.contenttt {margin-top: 0.5cm}' +
        'table {display: table;width: 100%; border-collapse: collapse;}' +
        'table th,  table td {border-top:1px solid #000;border-right: 1px solid #000;height: 26px;}' +
        'table th {font-weight: normal;}' +
        '.imgwidth {width: 100pt!important;height: 30pt   }' +
        '.height100{height: 100pt!important;}' +
        '.height200{height: 200pt!important;}' +
        'th,td { line-height: 1cm !important;  border: 1px solid; /* 使用em单位设置行高 */}' +
        '.sign-part{' +
        '  margin-left: 48%;' +
        '  margin-top: 2px;' +
        '}' +
        '@page {margin: 0}' +
        '@media print {' +
        '  .noprint,.topBar{ display: none!important; }' +
        '}' +
        '</style>')
      doc.write('<div>' + printContentHtml + '</div>')
      document.querySelector('.printBtn').innerHTML = '工单打印中...'
      setTimeout(() => {
        document.querySelector('.printBtn').innerHTML = '打印工单'
        this.isComplete = true
        iframe.contentDocument.close()
        iframe.contentWindow.print()
        document.body.removeChild(iframe)
      }, 1000)
    },
    convertDate (time, form = 'yyyy-MM-dd') {
      return time ? formatDate(new Date(time), form) : ''
    },
    message (msg, type) {
      this.$message({
        message: msg,
        type: type
      })
    },
    closeOptList () {},
    getDetailById () {
      // todo
      this.$api.getPurchaseTable({id: this.id}).then(res => {
        let result = JSON.parse(JSON.stringify(res.data.data))
        result.departName = res.data.data.applyDepartName
        this.detail = result
        this.equs = result.procurementApplyEquDTOS
      })
    }
  },
  watch: {
  },
  beforeMount () {
    this.$emit('navChange', true)
    document.title = '购置申请论证表'
    this.nowTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    this.getDetailById()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@media print {
  .noprint,.topBar{ display: none!important; }
  /* .wrap-order { width: 100%!important;} */
}

</style>
<style scoped>
@page {
  margin: 0;
}
.purchase-pritn {
  width: 820px; /*px*/
  margin: 0 auto;
}
.order-content {
  padding: 50px; /*px*/
  margin: 20px 0;  /*px*/
  background: #fff;
}
@media print {

  .purchase-pritn {
    width: 720px; /*px*/
  }
  body{
    height: auto !important;
    font-size: 14pt!important;
    background: #0549c9 !important; /* 调试样式，打印时可见 */
  }
  .order-content {
    padding: 0!important;  /*px*/
    margin: 0;  /*px*/
  }
  th, td {
    line-height: 1cm !important; /* 使用em单位设置行高 */
  }
  .font14{
    font-size: 12pt !important;
  }
  /* 确保打印时分页 */
  .page-break {
    page-break-before: always!important;
    background: #c4c43a !important; /* 调试样式，打印时可见 */
  }
  .imgwidth{
    width: 100pt!important;
  }
  .height100{
    height: 100pt!important;
  }
  .height200{
    height: 200pt!important;
  }
}
</style>
<style lang="less" scoped>
.table{
  width: 100%;
  border-collapse: collapse;
  tr{
    position: relative;
  }
  td{
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid;
    padding: 2px 5px;
  }
}
.sign-part{
  margin-left: 50%;
  margin-top: 2px;
}
.font14{
  font-size: 16px;
}
.imgwidth{
  width: 100px;
}
.height100{
  height: 100px;
}
.height200{
  height: 200px;
}
</style>