适应打印

liuyg

2021-08-04 db9e87b7f5f111f048e6d2221e7fea89df4f0a66

适应打印

 src/views/permit/permit.vue

@@ -1,6 +1,7 @@
<template>
    <basic-container class="permit">
        <avue-crud :option="option"
    <avue-crud
      :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
@@ -18,63 +19,68 @@
                   @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 id='licence_box'>
                <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">
                        洪公保服务
                        <span class="fontStyle">{{ licenceData.row.organizationcode }}</span>
            <span class="fontStyle">{{
              licenceData.row.organizationcode
            }}</span>
                        号
                    </div>
                    <!-- <div class="onceMain">
@@ -82,9 +88,11 @@
          <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>
@@ -92,8 +100,13 @@
                    <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(5, 7) }}</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">{{
            licenceData.row.permitime.slice(8, 10)
@@ -103,12 +116,9 @@
                </div>
            </div>

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

        </el-dialog>
    </basic-container>
</template>
@@ -645,7 +655,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;
@@ -675,7 +685,7 @@
}
.l-m-o-title {
    font-size: 1.3rem;
    width: 19%;
  width: 22%;
    text-align: justify;
    display: inline-block;
}
@@ -683,7 +693,7 @@
    font-size: 1.1rem;
    /* border: 1px solid #000; */
    display: inline-block;
    width: 80%;
  width: 77%;
}
.licence-bottom,
.l-bottom {