打印更改

shuishen

2021-08-04 4fb1d2f6540f222e21c15a05089e4764b7f06960

打印更改

 src/views/permit/permit.vue

@@ -1,7 +1,6 @@
<template>
  <basic-container class="permit">
    <avue-crud
      :option="option"
        <avue-crud :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
@@ -19,61 +18,59 @@
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      :row-style="rowStyle"
    >
                   :row-style="rowStyle">
      <template slot="menuLeft">
        <el-button
          type="danger"
                <el-button type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.permit_delete"
          @click="handleDelete"
          >删 除
                           @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="icon-zhengjian"
            <template slot-scope="{ type, size, row }"
                      slot="menu">
                <el-button icon="icon-zhengjian"
          :size="size"
          :type="type"
          class="zhengJian-icon"
          @click.stop="handleCredentials(row)"
          >附件查阅
                           @click.stop="handleCredentials(row)">附件查阅
        </el-button>
        <el-button
          icon="el-icon-edit"
                <el-button icon="el-icon-edit"
          :size="size"
          :type="type"
          @click.stop="rowDel(row)"
          v-if="row.type == '2'"
          >许可审批
                           v-if="row.type == '2'">许可审批
        </el-button>
        <el-button
          icon="el-icon-edit"
                <el-button icon="el-icon-edit"
          :size="size"
          :type="type"
          @click.stop="viewLicense(row)"
          >查看许可证
                           @click.stop="viewLicense(row)">查看许可证
        </el-button>
      </template>
      <template class="tdtype" slot-scope="{ row }" slot="type">
            <template class="tdtype"
                      slot-scope="{ row }"
                      slot="type">
        <el-tag class="dtype">
          {{ row.type == "0" ? "通过" : row.type == "1" ? "不通过" : "待审核" }}
          <i class="gz" v-if="row.type == '0'"></i>
          <i class="yj" v-if="row.type == '1'"></i>
          <i class="zc" v-if="row.type == '2'"></i>
                    <i class="gz"
                       v-if="row.type == '0'"></i>
                    <i class="yj"
                       v-if="row.type == '1'"></i>
                    <i class="zc"
                       v-if="row.type == '2'"></i>
        </el-tag>
      </template>
    </avue-crud>
    <el-dialog
      :visible.sync="dialogVisible"
        <el-dialog :visible.sync="dialogVisible"
      :before-close="handleClose"
      :modal-append-to-body="false"
      width="1005px"
      top="10vh"
    >
      <div class="licence" id="licence" v-if="dialogVisible">
                   top="10vh">
            <div id='licence_box'>
                <div class="licence"
                     id="licence"
                     v-if="dialogVisible">
        <div class="licence-head">保安服务许可证</div>
        <div class="head-tid">
          洪公保服务
@@ -85,11 +82,9 @@
          <div class="fontStyle">{{ licenceData.enterprisename }}</div>
        </div> -->
        <div class="licence-main">
          <div
            class="l-m-once"
                        <div class="l-m-once"
            v-for="(item, index, key) in licenceData.chiden"
            :key="key"
          >
                             :key="key">
            <span class="l-m-o-title"> {{ index }}: </span>
            <span class="l-m-r-once">{{ item }}</span>
          </div>
@@ -97,8 +92,7 @@
        <div class="licence-bottom">发证机关（印章）</div>
        <div class="l-bottom">
          发证日期
          <span class="l-b-t">{{ licenceData.row.permitime.slice(0, 4) }}</span
          >年
                        <span class="l-b-t">{{ licenceData.row.permitime.slice(0, 4) }}</span>年
          <span class="l-b-t">{{ licenceData.row.permitime.slice(5, 7) }}</span>
          月
          <span class="l-b-t">{{
@@ -107,9 +101,14 @@
          日
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Print">打 印</el-button>
            </div>

            <span slot="footer"
                  class="dialog-footer">
                <el-button type="primary"
                           @click="Print">打 印</el-button>
      </span>

    </el-dialog>
  </basic-container>
</template>
@@ -411,20 +410,13 @@
  methods: {
    Print() {
      //打印
      var body = document.body.innerHTML;

      var headstr = "<html><head><title></title></head><body>";
      var footstr = "</body>";
      //执行隐藏打印区域不需要打印的内容

      //此处id换为你自己的id
      var printData = document.getElementById("licence").innerHTML; //获得 div 里的所有 html 数据
      document.body.innerHTML = headstr + printData + footstr;

            let subOutputRankPrint = document.getElementById("licence_box");
            let newContent = subOutputRankPrint.innerHTML;
            let oldContent = document.body.innerHTML;
            document.body.innerHTML = newContent;
      window.print();
      //打印结束后，放开隐藏内容

      document.body.innerHTML = body;
            window.location.reload();
            document.body.innerHTML = oldContent;
    },
    handleCredentials(row) {
      this.$router.push({
@@ -653,7 +645,7 @@
  width: 960px;
  height: 648px;
  background-color: #fff !important;
  background-image: url("../../static/img/permit/服务许可背景图.png");
    background-image: url('../../static/img/permit/服务许可背景图.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;