1

src/xt_pages/outpatientTool/signPrint.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="main-contain">
+        <div class="position">
+        <bread-crumb :crumbs="crumbs"></bread-crumb>
+        <el-row style="float:right;">
+            <el-col :span="24">
+            <el-button size="small" icon="el-icon-printer" type="primary" @click="printAction">打印</el-button>
+            </el-col>
+        </el-row>
+        </div>
+        <div class="app-container" style="background-color: white;" v-show="show">
+            <div id="sign" class="signPrint">
+                <div style="display:flex;margin-bottom:10px;">
+                    <div style="margin-left:15px;">
+                        <div>C</div>
+                        <div>09-15</div>
+                        <div>09-15</div>
+                    </div>
+                    <div style="width:100px;">
+                        <img src="" alt="">
+                    </div>
+                </div>
+                <div>6821737912312983</div>
+                <div style="display:flex;">
+                    <div style="padding-left:20px;">哈顺利到家啦收到了空间</div>
+                    <div style="font-size:24px;">哈顺</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+import { getSchedualDoctors } from '@/api/advice'
+import { parseTime } from '@/utils'
+import print from 'print-js'
+const moment = require('moment')
+export default {
+    components:{
+        BreadCrumb
+    },
+    data(){
+        return{
+            crumbs: [
+                { path: false, name: '标签打印' },
+                { path: false, name: '打印' }
+            ],
+        }
+    },
+    methods:{
+        printAction: function() {
+            const style = '@media print { .sign{width:960px;margin: 0 auto;text-align: center;border-collapse: collapse;}.order_title_panl {text-align: center;.main_title {font-size: 18px;line-height: 40px;font-weight: 500;}}.dialysisTable tr{padding: 10px 0;}.dialysisTable th {color: #000;padding: 0;margin: 0;height: 30px;}.dialysisTable tr td {padding: 12px 0;}.subadvice_content {text-align: left;padding-left: 25px !important;padding-right: 5px !important;}.advice_content {text-align: left;padding-left: 5px !important;padding-right: 5px !important;padding: 15px 5px !important;} }'
+
+            printJS({
+            printable: 'sign',
+            type: 'html',
+            documentTitle: '  ',
+            style: style,
+            scanStyles: false
+            })
+        },
+    
+    },
+    created(){
+    }
+}
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.signPrint{
+    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
+    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+    margin-bottom: 20px;
+    padding: 20px 10px;
+}
+.sign{
+    width:960px;
+    margin: 0 auto;
+    text-align: center;
+    border-collapse: collapse;
+}
+</style>
+