Vue_New/src/xt_pages/user/Informed/components/Falloutbedprint.vue

<template>
    <div style="border:1px solid gainsboro ;padding:10px">
        <div style="position: relative; left: 400px;width: 250px;margin: 20px 0;">
          <!-- <el-button type="primary">主要按钮</el-button> -->
           <el-button type="primary" style=""  @click="bianji">
                编辑
            </el-button>
         <!-- <el-button type="danger" style=""  @click="">
                删除
            </el-button> -->
            <el-button type="success" style=""  @click="printThisPage">
                打印
            </el-button>
        </div>
        <div id="print_content">
          <div class="print_page_main_content">
            <div class="content">
                
                <h2 style="text-align: center;">人脸识别知情同意书</h2>
                <!-- <div style="display: inline-block;border: 1px solid black;width: 20px;height: 20px;"></div> -->
                <div style="text-align: right;">
                  透析号：{{ patient.dialysis_no }}
                </div>
                <div style="display: flex;margin: 10px 0;">
                  <div style="flex:1">姓名：{{ patient.name }}</div>
                  <div style="flex:1">性别：
                     <span v-if="patient.gender == 1">男</span>
                     <span v-if="patient.gender == 2">女</span>
                  </div>
                  <div style="flex:1">年龄：{{ getAge(patient) }}</div>
                  <div style="flex:1">住院(门诊)号：{{ patient.admission_number }}</div>
                </div>
                <div style="border-bottom: 1px solid gainsboro;">
                  诊断：{{ patient.diagnose }}
                </div>
                <div v-html="content"></div>
                <!-- <p style="font-size: 17px;font-weight: bold;">请您仔细阅读以下内容，并自主决定是否使用人脸识别功能：</p>
                <p style="display: inline;padding: 0;">一、登录平台时，您已被提示（无论是否以界面弹窗或其他方式）注意仔细阅读本知情同意书。</p>
                <div style="display: flex; margin: 10px 0;">
                  <p style="display: inline;padding: 0;">二、</p>
                  <p style="display: inline;padding: 0;">
                    平台已提供账号密码和人脸识别等多种验证登录方式。<span style="font-weight: bold;">人脸识别不是唯一的身份识别方式或验证登录方式，</span>
                    其系为完成身份识别或快捷登录而设置，如您选择使用该功能，则需要提供您本人的人脸识别信息，否则无法实现身份识别或验证登录。
                    <span style="font-weight: bold;">您可以自主决定是否采用人脸识别进行身份识别或验证登录。</span>
                  </p>
                </div>
                <div style="display: flex; margin: 10px 0;">
                  <p style="display: inline;padding: 0;">三、</p>
                  <p style="display: inline;padding: 0;">
                    您的人脸识别信息将仅用于身份识别、验证登录之目的，不会用于任何其他目的。您的人脸识别信息将由医院负责处理
                  （含收集、存储、使用、删除等），医院将依法保护您的个人信息安全。
                  </p>
                </div>

                <p style="padding: 0;">四、知情同意 </p>
                <p style="font-size: 17px;font-weight: bold;">
                  您签署知情同意书（包括通过电子方式点击同意），或您直接选择人脸识别进行身份识别或验证登录平台系统的，即表明您已明确同意采用人脸识别进行身份识别或验证登录。
                </p>

                <p style="padding: 0;">
                  □本人已仔细阅读了知情同意书，并同意采用人脸识别方式进行身份识别或验证登录，同意医院基于载明目的处理人脸识别信息。
                </p>

                <p style="padding: 20px;display:flex;justify-content: space-between;align-items: center;">
                    <span>个人签署(适用于纸质版)：______________</span>
                </p>
                <p style="padding: 20px;display:flex;justify-content: space-between;align-items: center;">
                    <span>父母或监护人签署:______________</span>

                </p>
                <p> &nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</p> -->
            </div>
          </div>
        </div>
        <!-- 编辑 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%"
        >
          <div>
            <h2 style="text-align: center;">人脸识别知情同意书</h2>

            <div style="text-align: right;">
              透析号：{{ patient.dialysis_no }}
            </div>
            <div style="display: flex;margin: 10px 0;">
              <div style="flex:1">姓名：{{ patient.name }}</div>
              <div style="flex:1">性别：
                <span v-if="patient.gender == 1">男</span>
                  <span v-if="patient.gender == 2">女</span>
              </div>
              <div style="flex:1">年龄：
                {{ getAge(patient) }}
              </div>
              <div style="flex:1">住院(门诊)号：
                {{ patient.admission_number }}
              </div>
            </div>
            <div style="border-bottom: 1px solid gainsboro;">
              诊断：
              {{ patient.diagnose }}
            </div>
            <keep-alive>
              <editor ref="editor"
                      id="editor"
                      style="width: 100%"
                      v-bind:r_content="content">
              </editor>
            </keep-alive>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveFallOutBedPrint">保 存</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import print from "print-js";
import Editor from '@/components/Editor'
import { getPatientDetailInformedconsent,saveFallOutBedPrint  } from '@/api/patient'
import { jsGetAge, uParseTime } from "@/utils/tools";
const content=`<p style="font-size: 17px;font-weight: bold;padding-left: 2em;">请您仔细阅读以下内容，并自主决定是否使用人脸识别功能：</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px '>
  <span style='position: absolute;top: 0;left: 0;'>一、</span>登录平台时，您已被提示（无论是否以界面弹窗或其他方式）注意仔细阅读本知情同意书。
</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'>
  <span style='position: absolute;top: 0;left: 0;'>二、</span> 平台已提供账号密码和人脸识别等多种验证登录方式。<span style="font-weight: bold;">人脸识别不是唯一的身份识别方式或验证登录方式，</span>其系为完成身份识别或快捷登录而设置，如您选择使用该功能，则需要提供您本人的人脸识别信息，否则无法实现身份识别或验证登录。<span style="font-weight: bold;">您可以自主决定是否采用人脸识别进行身份识别或验证登录。</span>
</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'>
  <span style='position: absolute;top: 0;left: 0;'>三、</span>您的人脸识别信息将仅用于身份识别、验证登录之目的，不会用于任何其他目的。您的人脸识别信息将由医院负责处理（含收集、存储、使用、删除等），医院将依法保护您的个人信息安全。
</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'>
  <span style='position: absolute;top: 0;left: 0;'>四、</span>知情同意
</p>
<p style="font-size: 17px;font-weight: bold;padding-left: 2em;">您签署知情同意书（包括通过电子方式点击同意），或您直接选择人脸识别进行身份识别或验证登录平台系统的，即表明您已明确同意采用人脸识别进行身份识别或验证登录。</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'><span style='display:inline-block;width:15px;height:15px;border:1px solid black;'></span>本人已仔细阅读了知情同意书，并同意采用人脸识别方式进行身份识别或验证登录，同意医院基于载明目的处理人脸识别信息。</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'>1.您已阅读并理解有关血液透析的相关信息。</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'>2.医生对以上问题已经向您作了充分的解释。</p>
<p style='position: relative;padding-left: 2em;margin-top: 10px;margin-bottom: 4px'>3.您授权并同意医生为患者施行血液透析治疗</p>
<p style="padding:10px 20px;display:flex;justify-content: space-between;align-items: center;">
    <span>个人签署(适用于纸质版)：______________</span>
</p>
<p style="padding:10px 20px;display:flex;justify-content: space-between;align-items: center;">
    <span>父母或监护人签署:______________</span>
</p>
<p style="padding:0 20px;display:flex;justify-content: space-between;align-items: center;">
    <span>_______年____月____日</span>
</p>`
export default{
  props: {
    patient_id: {
        type: Number,
    },
    listPrint:{
      type:Object,
    }
   },
   components:{
    Editor
   },
   data(){
    return{
      patient:{},
      content:content,
      dialogVisible:false,
    }
   },

   created(){
     console.log("list_printwoowowowo",this.listPrint)
     if(this.listPrint!=null&& this.listPrint.id >0){
       this.content =""
       this.content = this.listPrint.content
     }
     this.getlist()
   },
    methods:{
      getlist(){
        getPatientDetailInformedconsent(this.patient_id).then(response=>{
          if(response.data.state == 1){
            var patient =  response.data.data.patients
            console.log("patinet",patient)
            this.patient =patient
          }
        })
       },
      printThisPage(){
          const style = '@media print {.content p{font-size: 16px;font-family: 新宋体; padding-left: 20px; margin-bottom: 5px;}}'
          printJS({
              printable: 'print_content',
              type: 'html',
              documentTitle: '  ',
              style: style,
              scanStyles: false
          })
      },
      getAge: function(val) {
        if (val.id_card_no == undefined) {
          return false
        }
        var thisLen = val.id_card_no.length
        var birth = ''
        if (thisLen == 15) {
          birth = '19' + val.id_card_no.substr(6, 6)
        } else {
          birth = val.id_card_no.substr(6, 8)
        }
        var birthtwo =
          birth.substr(0, 4) +
          '-' +
          birth.substr(4, 2) +
          '-' +
          birth.substr(6, 2)

        var age = jsGetAge(birthtwo, '-')
        return age
      },
      bianji(){
        this.dialogVisible =true
      },
      show(val){
       
       if(val!=null){
        console.log("valw233223",val)
         if(val.content!=""){
           this.content = ""
           this.content = val.content
         }
         
       }
     },
      saveFallOutBedPrint(){
          var params = {
            patient_id:this.patient_id,
            content:this.$refs.editor.content,
          }
        console.log("paramswoowow",params)
        saveFallOutBedPrint(params).then(response=>{
           if(response.data.state ==1){
              var list = response.data.data.list
              this.$message.success("保存成功!")
             
              this.dialogVisible = false

              this.$emit("getFallOutBedPrintList","");
            

           }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
// .print_page_main_content {
//     background-color: white;
//     width: 960px;
//     padding: 0 0 0 0;
//     page-break-after: always;
//   }
*{
    // margin: 0;
    // padding: 0;
    border: 0;
}
    .content{
        p{
          font-size: 16px;
          font-family: '新宋体';
          line-height: 22px;
          padding-left: 20px;
          margin-bottom: 5px;
          text-align: justify;
        }
    }
input[type="checkbox"]{
    box-sizing: border-box;
    /* padding: 0; */
    -webkit-appearance: checkbox;
}
.check-box{
  display: block;
}
.check-box::before{
  display: inline-block;
  content: '';
  width: 15px;
  height: 15px;
  border: 1px solid black;
}
</style>