From c28d08def0b232fd1d4b76915418d7c1da37a953 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 05 Nov 2021 13:35:40 +0800
Subject: [PATCH] 打印证件修改
---
src/views/securityGuard/securityGuard.vue | 31 ++--
src/views/securityGuard/securityCertificate.vue | 18 +-
src/views/securityGuard/certificate.vue | 315 +++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 342 insertions(+), 22 deletions(-)
diff --git a/src/views/securityGuard/certificate.vue b/src/views/securityGuard/certificate.vue
new file mode 100644
index 0000000..8be423a
--- /dev/null
+++ b/src/views/securityGuard/certificate.vue
@@ -0,0 +1,315 @@
+<template>
+ <div class="certificate_box"
+ id="certificateDom">
+
+ <div class="security_main"
+ ref="certificateBox">
+ <!-- 标题 -->
+ <div class="security_main_backImge no-print"></div>
+ <div class="security_main-title no-print">
+
+ <span style="letter-spacing: 0px">____________</span>
+ 经国家<br />保安员考试审查合格。<br />特颁此证。
+ </div>
+ <div class="security_m_l_center no-print">
+ 发证公安机关 （印章）<br />
+ 发证日期
+ 年 月
+ </div>
+ <div class="security_m_l_down no-print">证件编号</div>
+ <div class="security_m_r_a no-print">姓名</div>
+ <div class="security_m_r_b no-print">出生年月</div>
+ <div class="security_m_r_c no-print">地址</div>
+ <div class="security_m_r_d no-print">公民身份<br />号码</div>
+ <!-- 内容 -->
+ <div class="security_m_r_imgs no-print">
+ <div v-if="!data.avatar">暂无照片</div>
+ <img :src="data.avatar"
+ alt=""
+ v-else />
+ </div>
+ <div class="security_m_l_titleName widt">{{ data.realName }}</div>
+ <div class="security_m_l_titlepaperTimenian widt">
+ {{ year }}
+ </div>
+ <div class="security_m_l_titlepaperTimeyue widt">
+ {{ month }}
+ </div>
+
+ <div class="security_m_l_downsecuritynumber widt">
+ {{ data.securitynumber }}
+ </div>
+ <div class="security_m_r_o_right widt">{{ data.realName }}</div>
+ <div class="security_m_r_o_rightbirthday widt">
+ {{ data.cardid ? data.cardid.slice(6, 10) : '' }}.{{ data.cardid ? data.cardid.slice(10, 12) : '' }}.{{ data.cardid ? data.cardid.slice(12, 14) : '' }}
+ </div>
+ <div class="security_m_r_o_rightaddress security_m_r_o_l_r widt">
+ {{ data.registered }}
+ </div>
+ <div class="security_m_r_o_rightcardid">{{ data.cardid }}</div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import dictVertical from "../util/demo/dict-vertical.vue";
+import {
+ update
+} from "@/api/system/user";
+export default {
+ name: 'certificate',
+ data () {
+ return {
+ year: null,
+ month: null
+ }
+ },
+ components: { dictVertical },
+ props: ["data"],
+ created () {
+ var time = this.getNewTime()
+ this.year = time[0]
+ this.month = time[1]
+ },
+ computed: {
+ ...mapGetters(["userInfo", "permission"]),
+ },
+ methods: {
+ Print () {
+ if (this.data.registered == '' || this.data.registered == null) {
+ this.$message({ message: '请完善住址信息', type: 'warning' })
+ return
+ }
+ //更新发证时间
+ this.updateUserInfo();
+ var printDom = document.getElementById("certificateDom");
+ printDom.style.position = "fixed";
+ printDom.style.top = "-28.5%";
+ printDom.style.left = "-23%";
+ printDom.style.width = "120%";
+ printDom.style.height = "100%";
+ printDom.style.fontFamily = "SimSun";
+ this.$Print(this.$refs.certificateBox);
+ printDom.style.position = "relative";
+ printDom.style.left = "0";
+ printDom.style.width = "100%";
+ printDom.style.height = "auto";
+ },
+ getNewTime () {
+ var nowTime = new Date()
+
+ var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000)
+ var oneHoursAgoY = oneHoursAgo.getFullYear()
+ var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1
+
+ /**
+ * @return 返回1小时，2小时，3小时，4小时，24小时
+ */
+ return [oneHoursAgoY, oneHoursAgoM]
+ },
+ //更新用户发证时间
+ updateUserInfo () {
+ var nowTime = new Date()
+ var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000)
+ var oneHoursAgoY = oneHoursAgo.getFullYear()
+ var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1
+ var day = oneHoursAgo.getDay();
+ var date = oneHoursAgoY + "-" + oneHoursAgoM + "-" + day;
+ const data = {
+ id: this.data.id,
+ rtime: this.data.rtime,
+ paperTime: date
+ }
+ update(data);
+ }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+//保安证 本子
+.certificate_box {
+ width: 100%;
+ height: 90%;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font: bold 18px 'SimSun' !important;
+}
+.security_main {
+ width: 630px;
+ height: 512px;
+ // border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
+ // display: flex;
+ // align-items: center;
+ // justify-content: space-around;
+ // background-size: 100% 100%;
+ // background-repeat: no-repeat;
+ position: relative;
+}
+// 标题
+$upTop: 45px;
+$downTop: 260px; //整体高度
+//经国家保安员考试审查合格。<br />特颁此证。
+.security_main-title {
+ position: absolute;
+ top: $upTop;
+ left: 34px;
+ line-height: 45px;
+ letter-spacing: 3px;
+}
+//发证公安机关 （印章）
+.security_m_l_center {
+ position: absolute;
+ top: 270px;
+ left: 30px;
+ line-height: 40px;
+}
+//证件编号
+.security_m_l_down {
+ position: absolute;
+ top: 379px;
+ left: 32px;
+}
+
+$rightLeft: 343px;
+$rightFontSize: 18px;
+$rightWidth: 77px;
+
+$lineHigeht: 30px;
+//姓名
+.security_m_r_a {
+ position: absolute;
+ top: $downTop;
+ left: $rightLeft;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//出生年月
+.security_m_r_b {
+ position: absolute;
+ top: $downTop + $lineHigeht * 1;
+ left: $rightLeft;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//地址
+.security_m_r_c {
+ position: absolute;
+ top: $downTop + $lineHigeht * 2;
+ left: $rightLeft;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//公民身份证
+.security_m_r_d {
+ position: absolute;
+ top: 363px;
+ left: $rightLeft;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//照片
+// width: calc(358px / 22px);
+// height: calc(441px / 22px);
+.security_m_r_imgs {
+ width: calc(358px / 3);
+ height: calc(441px / 3);
+ position: absolute;
+ top: $upTop;
+ left: 421px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+// 内容
+// 抬头名字
+.security_m_l_titleName {
+ position: absolute;
+ top: 35px;
+ left: 121px;
+ line-height: 45px;
+ letter-spacing: 3px;
+}
+//发证时间
+$timeTop: 309px; //整体高度
+//年
+.security_m_l_titlepaperTimenian {
+ position: absolute;
+ top: $timeTop;
+ left: 110px;
+ line-height: 40px;
+}
+//月
+.security_m_l_titlepaperTimeyue {
+ position: absolute;
+ top: $timeTop;
+ left: 169px;
+ line-height: 40px;
+}
+//日
+.security_m_l_titlepaperTimeri {
+ position: absolute;
+ top: $timeTop;
+ left: 159px;
+ line-height: 40px;
+}
+//证件编号
+.security_m_l_downsecuritynumber {
+ position: absolute;
+ top: 379px; //整体高度
+ left: 145px;
+}
+
+//内容
+// 姓名
+$centerLeft: 458px;
+.security_m_r_o_right {
+ position: absolute;
+ top: $downTop + $lineHigeht * 0-2px;
+ left: $centerLeft;
+ // width: $rightWidth;
+}
+// 生日
+.security_m_r_o_rightbirthday {
+ position: absolute;
+ top: $downTop + $lineHigeht * 1-4px;
+ left: $centerLeft;
+ // width: $rightWidth;
+}
+// 地址
+.security_m_r_o_rightaddress {
+ position: absolute;
+ top: $downTop + $lineHigeht * 2 -6px;
+ left: $centerLeft;
+ width: 160px;
+ font: bold 16px 'SimSun' !important;
+}
+// 身份证
+.security_m_r_o_rightcardid {
+ position: absolute;
+ top: $downTop + $lineHigeht * 4 -12px;
+ left: $centerLeft;
+ // width: $rightWidth;
+}
+//背景图
+.security_main_backImge {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-image: url(/img/securityCertificate/bazsss.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+// .widt{
+// }
+</style>
diff --git a/src/views/securityGuard/securityCertificate.vue b/src/views/securityGuard/securityCertificate.vue
index a3329c1..d2934cf 100644
--- a/src/views/securityGuard/securityCertificate.vue
+++ b/src/views/securityGuard/securityCertificate.vue
@@ -62,7 +62,7 @@
import { mapGetters } from "vuex";
import dictVertical from "../util/demo/dict-vertical.vue";
import {
- update
+ update
} from "@/api/system/user";
export default {
data () {
@@ -89,7 +89,11 @@
}
//更新发证时间
this.updateUserInfo();
- var printDom = document.getElementById("securityCertificate");
+ var printDom = document.getElementById("securityCertificates");
+
+ console.log(printDom)
+
+
printDom.style.position = "fixed";
printDom.style.top = "-28.5%";
printDom.style.left = "-23%";
@@ -115,7 +119,7 @@
return [oneHoursAgoY, oneHoursAgoM]
},
//更新用户发证时间
- updateUserInfo(){
+ updateUserInfo () {
var nowTime = new Date()
var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000)
var oneHoursAgoY = oneHoursAgo.getFullYear()
@@ -123,9 +127,9 @@
var day = oneHoursAgo.getDay();
var date = oneHoursAgoY + "-" + oneHoursAgoM + "-" + day;
const data = {
- id:this.data.id,
- rtime:this.data.rtime,
- paperTime:date
+ id: this.data.id,
+ rtime: this.data.rtime,
+ paperTime: date
}
update(data);
}
@@ -282,7 +286,7 @@
$centerLeft: 458px;
.security_m_r_o_right {
position: absolute;
- top: $downTop + $lineHigeht*0-2px;
+ top: $downTop + $lineHigeht * 0-2px;
left: $centerLeft;
// width: $rightWidth;
}
diff --git a/src/views/securityGuard/securityGuard.vue b/src/views/securityGuard/securityGuard.vue
index 9eb85e9..f1260e2 100644
--- a/src/views/securityGuard/securityGuard.vue
+++ b/src/views/securityGuard/securityGuard.vue
@@ -1,5 +1,6 @@
<template>
<el-row :class="{ securityGuard: isSecurity }">
+
<el-col :span="0"
style="display: none">
<div class="box">
@@ -265,6 +266,11 @@
:upload-after="uploadAfter2">
</avue-form>
</el-dialog>
+ <div style="position: fixed; left: 99999999px; width: 100%; height: 100%;">
+ <certificate
+ ref="certificate"
+ :data="certificateObj"></certificate>
+ </div>
</basic-container>
</el-col>
</el-row>
@@ -294,6 +300,7 @@
import { getToken } from "@/util/auth";
import { securityFormPageColumn } from "./data";
import { mapState } from "vuex";
+import certificate from "./certificate.vue";
export default {
data () {
@@ -377,9 +384,8 @@
callback();
}
};
- console.log(this.userInfo, 123);
-
return {
+ certificateObj: { title: "我是头部标题", },
securityid: "",
excelBox1: false,
excelBox2: false,
@@ -977,6 +983,7 @@
},
};
},
+ components: { certificate },
watch: {
"form.tenantId" () {
if (this.form.tenantId !== "" && this.initFlag) {
@@ -1030,7 +1037,6 @@
if (!website.tenantMode) {
this.initData(website.tenantId);
}
- console.log(this.search, 111);
this.search["status"] = 1;
this.deptIds = this.userInfo.dept_id;
},
@@ -1059,7 +1065,6 @@
//行点击事件
rowClick (row) {
- // console.log(row, 111);
this.$router.push({
path: "/securityGuardDetail",
query: { row: JSON.stringify(row) },
@@ -1067,14 +1072,15 @@
},
//行点击事件
certificateClick (row) {
- // console.log(row, 111);
- this.$router.push({
- path: "/certificateOfPrint",
- query: { row: JSON.stringify(row) },
- });
+ if (row) {
+ for (var k in row) {
+ this.certificateObj[k] = row[k];
+ }
+
+ this.$refs.certificate.Print();
+ }
},
rowClickSelf (row) {
- console.log(row, "baoan");
this.$router.push({
path: "/securityUnitChild",
query: { fromSecunityGuardId: row },
@@ -1123,7 +1129,6 @@
})
.then(() => {
let cho = this.choiceList;
- console.log(this.choiceList, 14521);
let str = "";
for (let k in cho) {
str += cho[k].id;
@@ -1131,7 +1136,6 @@
str += ",";
}
}
- console.log(str, 1132);
const data = {
ids: str,
createUser: this.userInfo.user_id
@@ -1232,7 +1236,6 @@
);
},
rowDellook (row) {
- // console.log(row.reasonForLeav);
this.$alert(
row.reasonForLeav == "" ? "未填写" : row.reasonForLeav,
"离职原因",
@@ -1249,10 +1252,8 @@
inputErrorMessage: "",
})
.then(({ value }) => {
- console.log(value);
row.reasonForLeav = value;
row.status = "2";
- // console.log(update);
// return;
update(row).then((res) => {
this.$message({
--
Gitblit v1.9.3