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

liuyg

2021-08-14 7b3e38d2c3f25e12381a4207250fd4bf18519e4e

 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>