quguang_front_wzysg_HZ/src/components/H5form/consent-book保存pdf另一个版本.vue

<template>
  <div>
    <h5formButton
      ref="h5formButtonRef"
      :archive-case-c-r-f-item="archiveCaseCRFItem"
      :get-save-eidt-title="saveEidtTitle"
      :edit-save-button-show="(positionName.join().includes('医生') || positionName.join().includes('护士')) ? true : false"
    />
    <!-- jsPDF配置：font-family:SimHei;width:210mm;transform-origin: left top; -->
    <div
      id="printH5"
      class="consentBook formTablePrint form-setclass"
      style="page-break-after:always;height:100%;margin:0 auto;font-size:16px;"
    >
      <!-- v-if="currentUrl.includes('192')" -->
      <p v-if="currentUrl.includes('192')" style="color:#000000;font-size:32px;text-align:center;">
        温州医科大学附属眼视光医院</p>
      <p style="color:#000000;font-size:32px;margin:10px 0 30px 0;text-align:center;">
        角膜营养不良基因检测知情同意书</p>
      <el-form ref="form" :model="formListValue" :disabled="saveEidtTitle==='编辑' ? true : false">
        <div class="consentBook-content left">
          <div class="flex">
            <div>
              <p style="font-weight: 700;font-size: 16px;">【检 测 项 目】 角膜营养不良基因检测</p>
              <p style="font-weight: 700;font-size: 16px;">【样 品 类 型】末端血</p>
              <p style="font-weight: 700;font-size: 16px;">【检 测 方 法】PCR / Sanger 测序技术</p>
              <p style="font-weight: 700;font-size: 16px;">【检 测 需 知】</p>
            </div>
            <div style="width:200px;text-align:center">
              <img src="@/assets/img/tyscode.png" alt="" width="120px">
              <p>扫码观看科普视频</p>
            </div>
          </div>
          <p style="word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;white-space:normal">1、临床意义：角膜营养不良是一类与家族遗传有关的角膜病，可使角膜变浑浊，视力下降，药物治疗无效，严重者需行角膜移植术，早期可无任何体征，常规临床检测无法确诊。屈光手术可能会激发部分角膜营养不良的发生，术前基因筛查有助于排除病症，提高手术安全性。</p>
          <p style="word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;white-space:normal">2、由于受检基因和受检位点数量以及变异位点报出形式的限制性，本检测阴性结果不能完全排除受检者临床表型与遗传因素有相关性。</p>
          <p style="word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;white-space:normal">3、本检测只对本次受检样品负责，检测结果仅用于辅助临床诊断或科研参考，不能作为最终临床诊断依据。请接到报告后，向临床医师进行专业的遗传咨询。</p>
          <p>4、在极少数情况下如果样本出现质量问题，需要重新采集标本，受检者需积极配合，检测报告需向后顺延。</p>
          <p>5、检测机构在收到检测样品及检测费后即行检测。</p>
        </div>
        <div class="left title margin-bottom-10">【受检者知情同意】</div>
        <div class="left">
          <p>1、本人已阅读并充分了解本项检测服务之目的、方法、效益及风险。</p>
          <p>2、本人充分了解本项检测服务有其技术局限性，且明白该检测的准确率并非百分之百。</p>
          <p>3、在隐去所有个人相关信息后，本人授权对检测结果、样本及预后追踪信息，进行将来的医学</p>
          <p>研究分析使用。</p>
        </div>
        <!-- <div class="left margin-top-10 margin-bottom-10">
          <span>（若未勾选则视为同意）</span>
          <el-radio-group v-model="formListValue.agree">
            <el-radio label="同意">同意</el-radio>
            <el-radio label="不同意">
              不同意（若不同意，将依样本销毁标准流程处理）
            </el-radio>
          </el-radio-group>
        </div> -->
        <div class="sign-title margin-top-20">患者意见</div>
        <div class="table">
          <div class="yifang">
            <div class="left">
              <el-radio-group v-model="formListValue.agree">
                <div><el-radio :label="3">我已充分了解上述样本采集的知情内容。为了屈光手术更加安全，我<span style="font-weight:700;font-size:20px;color:red;"> 同意接受 </span>角膜营养不良基因检测。</el-radio></div>
                <div class="margin-top-10"><el-radio :label="6">我对上述情况已完全知晓。虽然手术可能会激发部分角膜营养不良的发生，我仍愿意承担以上风险。我<span style="font-weight:700;font-size:20px;color:red;"> 不接受 </span>角膜营养不良基因检测。</el-radio></div>
              </el-radio-group>
            </div>
          </div>
          <div class="sign-title margin-top-20">签字栏</div>
          <div class="left huanfang">
            <div class="margin-top-10">
              <div>
                <span>患者签字：</span>
                <img :src="formListValue.sign1" alt="" width="90px">
                <!-- <span v-if="!formListValue.sign2 && saveEidtTitle==='保存'" class="sign" @click="singHandle('sign2')">点击签字</span> -->
              </div>
              <div class="margin-top-20 flex-2">
                <span>与患者关系：</span>
                <el-radio-group v-model="formListValue.patientGxCheck">
                  <el-radio v-for="(item,index) in gxList" :key="index" :label="item">{{ item }}</el-radio>
                </el-radio-group>
                <div v-show="formListValue.patientGxCheck==='其他法定监护人'" class="width-180">
                  <el-input v-model="formListValue.patientGxInput" placeholder="" />
                </div>
              </div>
              <span v-if="formListValue.sign2">
                <img
                  :src="formListValue.sign2"
                  alt=""
                  width="90px"
                  @click="singHandle('sign2')"
                >
                <i
                  v-show="saveEidtTitle==='保存'"
                  class="el-icon-circle-close"
                  style="font-size:20px;cursor:pointer;"
                  @click="imageRemoveClick('sign2')"
                />
              </span>
            </div>
            <div class=" margin-top-20 width-inner-200">
              <span>日 期：</span>
              <el-date-picker
                v-model="formListValue.sign2Time"
                value-format="yyyy-MM-dd HH:mm:ss"
                class="margin-right-6"
                type="datetime"
                placeholder="日期"
              />
            </div>
          </div>

        </div>
      </el-form>
    </div>
    <!-- ------------------------------------打印------------------------------------------------- -->
    <div
      id="printA4"
      class="patientBlPosition"
      style="
      page-break-after:always;width:500px;font-family:SimHei;margin: 0 auto;"
    >
      <p style="color:#000000;font-size:25px;text-align:center;">
        温州医科大学附属眼视光医院</p>
      <p style="color:#000000;font-size:25px;margin:5px 0 10px 0;text-align:center;">
        角膜营养不良基因检测知情同意书</p>
      <el-form ref="form" :model="formListValue" :disabled="saveEidtTitle==='编辑' ? true : false">
        <div class="consentBook-content left">
          <p style="font-weight: 700;font-size: 12px;">【检 测 项 目】 角膜营养不良基因检测</p>
          <p style="font-weight: 700;font-size: 12px;">【样 品 类 型】末端血</p>
          <p style="font-weight: 700;font-size: 12px;">【检 测 方 法】PCR / Sanger 测序技术</p>
          <p style="font-weight: 700;font-size: 12px;">【检 测 需 知】</p>
          <p style="font-size: 12px">1、临床意义：角膜营养不良是一类与家族遗传有关的角膜病，可使角膜变浑浊，视力下降，药物治疗无效，严重者需行角膜移植术，早期可无任何体征，常规临床检测无法确诊。屈光手术可能会激发部分角膜营养不良的发生，术前基因筛查有助于排除病症，提高手术安全性。</p>
          <p style="font-size: 12px">2、由于受检基因和受检位点数量以及变异位点报出形式的限制性，本检测阴性结果不能完全排除受检者临床表型与遗传因素有相关性。</p>
          <p style="font-size: 12px">3、本检测只对本次受检样品负责，检测结果仅用于辅助临床诊断或科研参考，不能作为最终临床诊断依据。请接到报告后，向临床医师进行专业的遗传咨询。</p>
          <p style="font-size: 12px">4、在极少数情况下如果样本出现质量问题，需要重新采集标本，受检者需积极配合，检测报告需向后顺延。</p>
          <p style="font-size: 12px">5、检测机构在收到检测样品及检测费后即行检测。</p>
        </div>
        <div style="text-align: left;font-weight: 700;font-size: 12px;margin-top:5px;margin-bottom: 5px;">【受检者知情同意】</div>
        <div style="text-align: left;">
          <p style="font-size: 12px">1、本人已阅读并充分了解本项检测服务之目的、方法、效益及风险。</p>
          <p style="font-size: 12px">2、本人充分了解本项检测服务有其技术局限性，且明白该检测的准确率并非百分之百。</p>
          <p style="font-size: 12px">3、在隐去所有个人相关信息后，本人授权对检测结果、样本及预后追踪信息，进行将来的医学</p>
          <p style="font-size: 12px">研究分析使用。</p>
        </div>
        <div
          style="
          font-size: 18px;
          font-weight: 700;
          text-align: center;
          margin-bottom: 5px;
          margin-top: 5px;
        "
        >患者意见</div>
        <div>
          <div
            style="
          margin-bottom:10px;
          padding: 12px;
          border: 1px solid #000;"
          >
            <div style="text-align: left;">
              <p style="font-size: 12px">为了屈光手术更加安全，我已充分了解上述样本采集的知情内容。</p>
              <p style="font-size: 12px"><b>我同意</b>做角膜营养不良基因检测。</p>
            </div>
            <div
              style="
              display: flex;
              justify-content: flex-end;
              font-size:12px;
            "
            >
              <div
                style="
                  width:260px;
                  text-align: left;
                "
              >
                <div
                  style="
                    display: flex;
                    align-items: center;
                  "
                >
                  <div>
                    <span>签字：</span>
                    <span
                      v-if="!formListValue.sign1 && saveEidtTitle==='保存'"
                      style="
                      cursor: pointer;
                      color: #46a1ff;
                      font-weight: 400;"
                      @click="singHandle('sign1')"
                    >点击签字</span>
                  </div>
                  <span v-if="formListValue.sign1">
                    <img
                      :src="formListValue.sign1"
                      alt=""
                      width="90px"
                      @click="singHandle('sign1')"
                    >
                    <i
                      v-show="saveEidtTitle==='保存'"
                      class="el-icon-circle-close"
                      style="font-size:20px;cursor:pointer;"
                      @click="imageRemoveClick('sign1')"
                    />
                  </span>
                </div>
                <div
                  class="width-inner-200"
                  style=" margin-top: 5px;"
                >
                  <span>日 期：{{ formListValue.sign1Time }}</span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="huanfang"
            style="
            text-align: left;
            padding: 12px;
            border: 1px solid #000;"
          >
            <span>
              <p style="font-size: 12px">1、我对上述情况已完全知晓。虽然手术可能会激发部分角膜营养不良的发生，我仍愿意承担以上风险，<b>不接受</b>角膜营养不良基因检测。</p>
            </span>
            <div
              style="
              display: flex;
              justify-content: flex-end;
              font-size:12px;
            "
            >
              <div
                style="
                width:260px;
                text-align: left;
              "
              >
                <div
                  style="
                  display: flex;
                  align-items: center;
                  margin-top: 10px;
                "
                >
                  <div>
                    <span>签字：</span>
                    <span
                      v-if="!formListValue.sign2 && saveEidtTitle==='保存'"
                      style="
                      cursor: pointer;
                      color: #46a1ff;
                      font-weight: 400;
                      "
                      @click="singHandle('sign2')"
                    >点击签字</span>
                  </div>
                  <span v-if="formListValue.sign2">
                    <img
                      :src="formListValue.sign2"
                      alt=""
                      width="90px"
                      @click="singHandle('sign2')"
                    >
                    <i
                      v-show="saveEidtTitle==='保存'"
                      class="el-icon-circle-close"
                      style="font-size:20px;cursor:pointer;"
                      @click="imageRemoveClick('sign2')"
                    />
                  </span>
                </div>
                <div
                  class="width-inner-200"
                >
                  <span>日 期：{{ formListValue.sign2Time }}</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </el-form>
    </div>
    <div class="saveInfo">
      <span class="padding-right-10">保存人：{{ formListValue.createName ? formListValue.createName : '-' }}</span>
      <span>保存时间：{{ formListValue.createDate ? formListValue.createDate : '-' }}</span>
    </div>
  </div>
</template>
<script>
import signGet from '@/mixins/signGet'
import publicFile from '@/mixins/publicFile'
import h5formButton from '@/components/H5formOhter/h5formButton'
import signNSV from '@/mixins/sign-NSV'
import htmlToPdfToBlob from '@/mixins/htmlToPdfToBlob'
export default {
  components: {
    h5formButton
  },
  mixins: [signGet, publicFile, signNSV, htmlToPdfToBlob],
  props: {
    archiveCaseCRFItem: {
      type: Object,
      default: () => { }
    },
    currentUrl: {
      type: String,
      default: ''
    },
    formContent: {
      default: () => {}
    },
    operaId: {
      type: String,
      default: ''
    },
    pageTitle: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    patientInfoObj: {
      type: Object,
      default: () => { }
    },
    userData: {
      type: Object,
      default: () => { }
    },
    roleList: {
      type: Array,
      default: () => []
    },
    positionName: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      saveEidtTitle: '编辑',
      formListValue: {
        formName: '基因检测同意书',
        createName: '',
        createDate: '',
        // 同意
        agree: '',
        // 与患者关系
        patientGxCheck: '本人',
        patientGxInput: '',
        // 签字1
        sign1: '',
        sign1Time: ''
      },
      gxList: ['本人', '父亲', '母亲', '其他法定监护人']
    }
  },
  computed: {
    consentBook: {
      get() {
        return this.$store.getters.consentBook
      }
    }
  },
  watch: {
    consentBook: {
      handler(value) {
        console.log(value)
        value.sign1 ? this.formListValue.sign1 = value.sign1 : ''
      },
      deep: true,
      immediate: true
    },
    formContent: {
      handler(value) {
        console.log(Object.values(value).length)
        // Object.values(value).length === Object.values(this.formListValue).length ? this.formListValue = value : ''
      },
      deep: true
    }
  },
  destroyed() {
    console.log('基因检测同意书destroyed')
    // this.$parent.deleteErmUpdating(this.archiveCaseCRFItem.id)
  },
  methods: {
    init() {
      this.getInfo()
    },
    //   签名
    singHandle(text) {
      const value = {
        text: text,
        pageName: 'consentBook'
      }
      // this.$store.commit('beginSign', value)
      this.initPlugin(text)
      // const loading = this.$loading({
      //   lock: true,
      //   text: '签字加载中请稍等',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(255, 255, 255, 0.7)'
      // })
      // setTimeout(() => {
      //   loading.close()
      //   this.beginSign(text)
      // }, 1000)
    },
    // 获取表单
    async getInfo() {
      const { data: res } = await this.$http.get('/quguang/informed/consent/getInformedConsentInfo', {
        params: {
          formId: this.archiveCaseCRFItem.id,
          formName: this.archiveCaseCRFItem.formName,
          formDate: this.archiveCaseCRFItem.formDate,
          patientIdNumber: this.archiveCaseCRFItem.patientIdNumber,
          patientId: this.patientId
        }
      })
      if (res.code === 0) {
        this.$emit('load')
        if (this.archiveCaseCRFItem.id === res.data.formId) {
          // console.log(res.data)
          Object.keys(res.data).forEach((item) => {
            // console.log(res.data)
            // 如果data中没有定义这个字段，就自动加进去
            this.formListValue[item] || typeof this.formListValue[item] === 'boolean' ? '' : this.formListValue[item] = ''
            // 如果不为空就赋值上去
            if ((res.data[item] && res.data[item] !== 'false' && res.data[item] !== 'true') || typeof res.data[item] === 'number') {
              this.formListValue[item] = res.data[item]
            }
            if (res.data[item] && typeof res.data[item] !== 'number') {
              res.data[item].includes('[') || res.data[item] === 'false' || res.data[item] === 'true' ? this.formListValue[item] = JSON.parse(res.data[item]) : ''
            }
          })
          this.formListValue.sign1Time ? '' : this.formListValue.sign1Time = this.$moment().format('YYYY-MM-DD HH:mm:ss')
          this.formListValue.sign2Time ? '' : this.formListValue.sign2Time = this.$moment().format('YYYY-MM-DD HH:mm:ss')
          console.log(this.formListValue)
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 保存表单
    async saveAllForm() {
      // if(this.formListValue.sign1 && this.formListValue.sign2 ) {
      //   return this.$message.error('您的签名存在问题，不能同时进行签名操作！请修改后再保存！')
      // }
      // if(!this.formListValue.sign1 && !this.formListValue.sign2 ) {
      //   return this.$message.error('您还没有签名，暂不能保存，请签名后再保存！')
      // }
      const formvalue = JSON.parse(JSON.stringify(this.formListValue))
      Object.keys(formvalue).forEach(item => {
        if (Array.isArray(formvalue[item])) {
          formvalue[item] = JSON.stringify(formvalue[item])
        }
      })
      const { data: res } = await this.$http.post('/quguang/informed/consent/saveInformedConsent', formvalue)
      if (res.code === 0) {
        this.saveEidtTitle = '编辑'
        this.$message({
          message: '您已保存成功',
          type: 'success'
        })
        this.loading = this.$loading({
          lock: true,
          text: '转存PDF中请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        this.exportPDF({
          // html2pdf配置
          paperSize: 'A4', // 纸张格式
          customOrientation: 'portrait', // 纸张方向
          customMargin: [10, 10, 0, 10], // 页边距
          customElementId: 'printH5',
          isHtml2canvas: true,
          isCurrentPageLoad: true // CA发送后端接口是否使用loading

          // jsPDF配置
          // paperSize: 'A4', // 纸张格式
          // customOrientation: 'portrait',
          // customMargin: [30, 40],
          // isTransform: 'scale(0.9)',
          // customElementId: 'printH5'
        })
        this.getInfo()
        this.pageTitle === '手术列表' ? this.$emit('closeDialog') : ''
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>
<style lang="scss">
.consentBook {
  background: #fff;
  padding: 10px 0 50px 20px;
  .consentBook-content {
    text-align: left;
    .indent{
        text-indent: 2em;
    }
    p {
      margin:3px 0;
    }
  }
    .title {
        font-weight: 700;
        font-size: 16px;
    }
  .sign {
      cursor: pointer;
      color: #46a1ff;
      font-weight: 400;
    }
     .opera-icon {
      // display: none;
      font-size: 20px;
    }
    .sign-title {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px;
    }
    .yifang,.huanfang {
        margin-bottom:20px;
        padding: 12px;
        border: 1px solid #000;
    }
    .yifang-title,.huanfang-title {
        font-size: 20px;
    }
    .sign-right-father {
        display: flex;
        justify-content: flex-end;
    }
    .sign-right-huanfang {
        width:260px;
        text-align: left;
    }
    .sign-right-yuanfang {
        width: 260px;
        text-align: left;
    }
  .el-input__inner {
    text-align: left;
  }
  .el-radio {
    margin-right: 8px;
  }
  .el-input__prefix {
    display: none;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width:190px;
  }
  .el-input__suffix {
    top: -7px;
  }
  .zdfa {
    .el-checkbox {
      display: block;
    }
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    z-index: 1;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background: #000;
  }
  .el-input__icon {
    line-height: 100% !important;
  }
  .el-input__suffix {
    top: -2px !important;
    right:-8px;
  }
}
</style>