style:房产打印

@@ -22,6 +22,7 @@
     "node-sass": "^4.14.1",
     "node-sass": "^4.14.1",
     "normalize.css": "7.0.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "nprogress": "0.2.0",
+    "qrcode": "^1.5.3",
     "vue": "2.6.10",
     "vue": "2.6.10",
     "vue-json-editor": "^1.4.3",
     "vue-json-editor": "^1.4.3",
     "vue-quill-editor": "^3.0.6",
     "vue-quill-editor": "^3.0.6",

@@ -108,24 +108,28 @@
     </div>
     </div>
     <!-- 打印模板需要此模块 -->
     <!-- 打印模板需要此模块 -->
     <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false">
     <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false">
-      <embed id="LODOP_EM" type="application/x-print-lodop" width=820 height=450 pluginspage="install_lodop32.exe" />
+      <embed id="LODOP_EM" type="application/x-print-lodop" width=700 height=500 pluginspage="install_lodop32.exe" />
     </object>
     </object>
+    <printView ref="printContent" />
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
   import store from '@/store/index.js'
   import store from '@/store/index.js'
   import { datas } from "./addjtfcdata";
   import { datas } from "./addjtfcdata";
   import { getLodop } from "@/utils/LodopFuncs"
   import { getLodop } from "@/utils/LodopFuncs"
+  import printView from "./printView.vue";
   import { getIdCardInfo } from '@/utils/operation.js'
   import { getIdCardInfo } from '@/utils/operation.js'
   import { getPrintTemplateByCode } from "@/api/system";
   import { getPrintTemplateByCode } from "@/api/system";
   import { addJtfcCxjgXx, getJtfcInfo, printJtcfInfo } from "@/api/sqcx";
   import { addJtfcCxjgXx, getJtfcInfo, printJtcfInfo } from "@/api/sqcx";
-  import { log } from 'bpmn-js-token-simulation';
   export default {
   export default {
+    components: {
+      printView
+    },
     props: {
     props: {
       formData: {
       formData: {
         type: Object,
         type: Object,
-        default: () => { },
-      },
+        default: () => { }
+      }
     },
     },
     data () {
     data () {
       return {
       return {
@@ -428,16 +432,15 @@
       },
       },
       //打开打印预览
       //打开打印预览
       openPrintPrew () {
       openPrintPrew () {
-        //根据编号获取对应信息
-        getPrintTemplateByCode({ tmpno: 'jtfcdys' }).then(res => {
-          if (res.code == 200) {
-            let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
-            LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent); //装载模板
-            LODOP.PREVIEW();
+        let lodop = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
+        // 获取页面的HTML内容
+        const pageHtml = this.$refs.printContent.$el.innerHTML;
+        lodop.ADD_PRINT_HTM(20, 20, "100%", "100%", pageHtml);
+        lodop.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true); // 打印页面宽度自适应
+        lodop.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%"); // 打印页面缩放比例
+        lodop.PREVIEW();
       }
       }
-        })
     }
     }
-    },
   };
   };
 </script>
 </script>
 <style scoped lang="scss">
 <style scoped lang="scss">

+<!--
+ * @Description: 不动产查询证明打印模板
+ * @Autor: renchao
+ * @LastEditTime: 2023-06-28 11:27:37
+-->
+<template>
+  <div class="printView" style="width:100%;padding:20px">
+    <h1 style="color: red;
+      text-align: center;
+      font-size: 38px;">城固县不动产登记交易服务中心</h1>
+    <hr style=" margin-top: 20px;
+      margin-bottom: 10px;
+      height: 1px;
+      width:100%;
+      border: none;
+      background-color: red;">
+    <h2 style="font-size: 36px;
+      text-align: center;">不动产登记信息查询证明</h2>
+    <h5 style=" text-align: center;
+      margin-top: 20px;
+      font-size: 18px;">查询证明编号: LS201803050045</h5>
+    <p style="text-indent: 2em;
+      margin-top: 15px;
+      line-height: 24px;
+      font-size: 18px;">根据《不动产登记暂行条例》和《不动产登记资料查询暂行办法》
+      有关规定，经线上查询不动产登记信息系统，权利人： 杜林
+      ，证件号：612322197805120010，截止2022年10月17日 13时15分13秒
+      ，名下不动产登记信息查询结果如下：</p>
+    <table style=" border-collapse: collapse;
+      width: 100%;
+      margin-top: 20px;margin-left:20px">
+      <thead>
+        <tr>
+          <th style="background-color: #f2f2f2;
+      text-align: center;">权利人</th>
+          <th style="background-color: #f2f2f2;
+      text-align: center;">证号</th>
+          <th style="background-color: #f2f2f2;
+      text-align: center;">坐落</th>
+          <th style="background-color: #f2f2f2;
+      text-align: center;">面积</th>
+          <th style="background-color: #f2f2f2;
+      text-align: center;">共有人</th>
+          <th style="background-color: #f2f2f2;
+      text-align: center;">状态</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in tableData" :key="item.id">
+          <td style="border: 1px solid #ccc;
+      text-align: center;
+      padding: 8px;
+      text-align: left;">{{ item.id }}</td>
+          <td style="border: 1px solid #ccc;
+      text-align: center;
+      padding: 8px;
+      text-align: left;">{{ item.name }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <h6 style="font-size: 28px;
+      margin-top: 20px;
+      font-weight: 100;">特此证明。</h6>
+    <div>
+      <img :src="qrcodeImage" alt="QR Code">
+    </div>
+    <ul style="text-align: right;
+      line-height: 26px;
+      font-size: 18px;">
+      <li style="list-style: none;">城固县不动产登记交易服务中心</li>
+      <li style="list-style: none;">2022年10月17日</li>
+    </ul>
+    <ol style="margin-left: 20px;
+      line-height: 26px;">
+      <p>说明：</p>
+      <li>该查询结果仅显示权利人在当前查询时间点不动产（房产）登记有关情况（“/”表示未查询到不动产登记信息）；</li>
+      <li>该查询结果包含权利人不动产预告登记信息。查询范围为本市中心城区及开发区内的不动产登记信息；</li>
+      <li>本次查询由系统终端自动检索，因数据采集处理误差而造成查询结果于实际登记信息不相符的，以我中心登记簿记载信息为准；</li>
+      <li>查询人应当妥善保管不动产登记查询结果，因操作不当，导致查询结果泄露，有关责任概由查询人承担。</li>
+    </ol>
+  </div>
+</template>
+<script>
+  import QRCode from 'qrcode';
+  export default {
+    data () {
+      return {
+        qrcodeImage: '',
+        text: '22222222',
+        tableData: [
+
+        ]
+      }
+    },
+    mounted () {
+      this.generateQRCode()
+    },
+    methods: {
+      generateQRCode () {
+        QRCode.toDataURL(this.text)
+          .then(url => {
+            this.qrcodeImage = url
+          })
+          .catch(error => {
+            console.error(error);
+          })
+      }
+    }
+  }
+</script>
\ No newline at end of file

@@ -41,10 +41,10 @@
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
-import table from "@/utils/mixin/table";
-import { datas, sendThis } from "./jtfcdata";
-import { getSqcxPage } from "@/api/sqcx";
-export default {
+  import table from "@/utils/mixin/table";
+  import { datas, sendThis } from "./jtfcdata";
+  import { getSqcxPage } from "@/api/sqcx";
+  export default {
     name: "jtfc",
     name: "jtfc",
     mixins: [table],
     mixins: [table],
     mounted () {
     mounted () {
@@ -90,10 +90,11 @@ export default {
         this.$popupDialog("家庭房产查询", "sqcx/jtfc/components/addjtfc", {
         this.$popupDialog("家庭房产查询", "sqcx/jtfc/components/addjtfc", {
           sqcxBsm: row.bsmSqcx
           sqcxBsm: row.bsmSqcx
         })
         })
+        // this.$popupDialog("模板", "sqcx/jtfc/components/printView", {})
+      }
     }
     }
   }
   }
-}
 </script>
 </script>
 <style scoped lang="scss">
 <style scoped lang="scss">
-@import "~@/styles/public.scss";
+  @import "~@/styles/public.scss";
 </style>
 </style>