公司许可证打印 保安员证打印

liuyg

2021-08-14 7b3e38d2c3f25e12381a4207250fd4bf18519e4e

公司许可证打印   保安员证打印

 src/views/permit/permit.vue

@@ -56,7 +56,7 @@
            :type="type"
            @click.stop="viewLicense(row)"
            v-if="row.type != '2'"
            >生成许可证
            >打印许可证
          </el-button>
        </template>
        <template class="tdtype" slot-scope="{ row }" slot="type">
@@ -72,12 +72,13 @@
      </avue-crud>
    </basic-container>

    <el-dialog
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :modal-append-to-body="false"
      width="1005px"
      top="10vh"
      class="printstyle"
    >
      <div id="licence_box">
        <div class="licence" id="licence" v-if="dialogVisible">
@@ -89,10 +90,6 @@
            }}</span>
            号
          </div>
          <!-- <div class="onceMain">
          名称：
          <div class="fontStyle">{{ licenceData.enterprisename }}</div>
        </div> -->
          <div class="licence-main">
            <div
              class="l-m-once"
@@ -125,7 +122,59 @@
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Print">打 印</el-button>
      </span>
    </el-dialog>
    </el-dialog> -->
    <div
      v-if="dialogVisible"
      class="dialogVisibles"
      :class="classStyle == 'print' ? 'printstyle' : ''"
    >
      <div
        id="licence_box"
        :class="classStyle == 'print' ? 'printstyle' : ''"
        ref="licence"
      >
        <div class="licence" id="licence" v-if="dialogVisible">
          <div class="licence-head">保安服务许可证</div>
          <div class="head-tid">
            洪公保服务
            <span class="fontStyle">{{
              licenceData.row.organizationcode
            }}</span>
            号
          </div>
          <div class="licence-main">
            <div
              class="l-m-once"
              v-for="(item, index, key) in licenceData.chiden"
              :key="key"
            >
              <span class="l-m-o-title"> {{ index }}: </span>
              <span class="l-m-r-once">{{ item }}</span>
            </div>
          </div>
          <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(8, 10)
            }}</span>
            日
          </div>
        </div>
        <span slot="footer" class="dialog-footer no-print PrintBut">
          <el-button type="primary" @click="Print">打 印</el-button>
          <el-button type="primary" @click="closePrint"> 取 消 </el-button>
        </span>
      </div>
    </div>

    <el-dialog
      title=""
@@ -149,6 +198,8 @@
export default {
  data() {
    return {
      classStyle: "print", //打印样式

      dialogVisiblecc: false, //许可证审核抽屉
      xukezData: {},

@@ -444,17 +495,9 @@
  // },
  methods: {
    Print() {
      //打印
      // let subOutputRankPrint = document.getElementById("licence_box");
      // let newContent = subOutputRankPrint.innerHTML;
      // let oldContent = document.body.innerHTML;
      // document.body.innerHTML = newContent;
      // window.print();
      // window.location.reload();
      // document.body.innerHTML = oldContent;
      this.$Print("#licence");
      // licence_box
      this.$Print(this.$refs.licence);
    },

    handleCredentials(row) {
      this.$router.push({
        path: "/attach/index",
@@ -525,6 +568,9 @@

      console.log(this.licenceData);
      this.dialogVisible = true;
    },
    closePrint() {
      this.dialogVisible = false;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
@@ -666,6 +712,17 @@

  /*padding-right: 40px !important;*/
}
#licence_box {
  position: relative;
  top: 15px;
  width: 1080px;
  height: 780px;
  background-color: #004ca7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.licence {
  width: 960px;
  height: 648px;
@@ -717,4 +774,23 @@
  font-size: 1.5rem;
  margin-top: 0.5rem;
}
.dialogVisibles {
  position: fixed;
  top: 0;
  left: -10%;
  height: 0;
  width: 120%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.printstyle {
  background-color: #fff !important;
}
.PrintBut {
  margin-top: 15px;
}
</style>

 src/views/securityGuardManagement/register.vue

@@ -139,23 +139,40 @@
      </span> -->
    </el-dialog>

    <el-dialog
      title="保安证预览"
      :visible.sync="dialogVisiblecertificates"
      width="300"
      :before-close="handleClosecertificates"
      :modal-append-to-body="false"
      center
    >
      <div id="certificatess">
        <div class="certificates-main"></div>
    <div class="baoanzheng" v-if="dialogVisiblecertificates">
      <div class="baz-main">
        <div class="baz-m-body" ref="baoanzheng">
          <div class="bmb-heard">保安员证</div>
          <!-- <img src="/img/mock/card/card-1.jpg" alt="" /> -->
          <div class="bmb-b">
            姓名：<span class="bmb-b-s">{{
              objVisiblecertificates.realName
            }}</span>
          </div>
          <div class="bmb-b">
            性别：<span class="bmb-b-s">{{
              objVisiblecertificates.sexName
            }}</span>
          </div>
          <div class="bmb-b">
            编号：<span class="bmb-b-s">{{
              objVisiblecertificates.securitynumber
            }}</span>
          </div>
          <div class="bmb-b">
            发证机关：<span class="bmb-b-s" style="margin-right: 15px"
              >南昌市公安局</span
            >发证日期：<span class="bmb-b-s">{{
              objVisiblecertificates.createTime.slice(0, 10)
            }}</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer no-print PrintBut">
          <el-button type="primary" @click="Print">打 印</el-button>
          <el-button type="primary" @click="closePrint"> 取 消 </el-button>
        </span>
      </div>
      <!-- <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
    </el-dialog>
    </div>
  </div>
</template>

@@ -192,6 +209,8 @@
    };
    return {
      dialogVisiblecertificates: false,
      objVisiblecertificates: {},

      objf: {},
      optionf: {
        column: [
@@ -786,6 +805,12 @@
    }
  },
  methods: {
    Print() {
      this.$Print(this.$refs.baoanzheng);
    },
    closePrint() {
      this.dialogVisiblecertificates = false;
    },
    close(row) {
      this.objf = {};
      this.dialogVisible = false;
@@ -981,7 +1006,8 @@
      // // $("#certificatess").jqprint();
      // console.log($);
      // this.$Print("#certificatess");
      console.log(obj);
      this.objVisiblecertificates = obj;
      console.log(this.objVisiblecertificates);
    },
    // 证件吊销事件
    handleCredentials(row) {
@@ -1045,4 +1071,74 @@
    background-size: 100% 100%;
  }
}

.baoanzheng {
  position: fixed;
  top: 0;
  left: -10%;
  height: 0;
  width: 120%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  background-color: #fff;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baz-main {
  position: relative;
  top: 15px;
  // width: 441px;
  // height: 358px;
  width: 491px;
  height: 468px;
  // background-color: #004ca7;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.baz-m-body {
  width: 461px;
  height: 308px;
  background-image: url("/img/register/bazbj.png");
  background-size: 100% 100%;
  .bmb-heard {
    font-size: 2rem;
    width: 100%;
    text-align: center;
    letter-spacing: 1rem;
    margin-bottom: 40px;
    position: relative;
    top: 20px;
  }
  img {
    width: 130px;
    height: 130px;
    border-radius: 130px;
    position: absolute;
    top: 110px;
    right: 60px;
  }
  .bmb-b {
    padding-left: 20px;
    box-sizing: border-box;
    height: 50px;
    margin-left: 10px;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    .bmb-b-s {
      display: inline-block;
      width: 110px;
      font-size: 1.1rem;
      font-weight: 600;
    }
  }
}
.PrintBut {
  margin-top: 15px;
}
</style>