xh-medical-sign-web/clinical-web/src/views/workbench/signing/components/SigningDocumentPreview.vue

<script setup lang="ts">
import type { SigningTaskRecord } from '@/api/workbench/types'

defineProps<{
  task: SigningTaskRecord
}>()
</script>

<template>
  <article class="paper-preview">
    <div v-if="task.status === 'void'" class="void-stamp">已 作 废</div>
    <h2>{{ task.documentName }}</h2>
    <p class="paper-number">编号：{{ task.id }} · 就诊号：{{ task.visitNo }}</p>

    <p class="paper-meta">
      患者：<strong>{{ task.patientName }}</strong
      >（{{ task.sex }}，{{ task.age }}岁） · 患者 ID：{{ task.patientId }}
    </p>
    <p class="paper-meta">
      就诊信息：{{ task.visitType }} · {{ task.department }} · {{ task.visitDate }}
      <span v-if="task.visitType === '住院'" class="current-badge">在院</span>
    </p>

    <p>
      医务人员已就本项检查/治疗的适应证、禁忌证、医疗风险、替代方案及可能出现的不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。
    </p>
    <p>
      本人自愿接受上述检查/治疗，并同意在相关医疗文书中签署确认。所签署文件将作为医疗过程留痕依据，签署过程采用电子方式完成，签名图片与文档原件一并存档。
    </p>

    <div class="notice-block">
      <strong>签署须知：</strong>
      请仔细阅读全部内容后签名；签名图片将合成至本文档签名域；文档与签名原图双留存，可随时查验；如对内容有疑问，请先向医务人员咨询。
    </div>

    <div class="signature-grid">
      <div class="signature-field">
        <span>患者 / 授权委托人签名：</span>
        <div class="signature-box">
          <img v-if="task.signatureDataUrl" :src="task.signatureDataUrl" alt="患者签名" />
          <span v-else>{{ task.status === 'void' ? '—' : '未签署' }}</span>
        </div>
      </div>
      <div class="signature-field">
        <span>日期：</span>
        <div class="signature-box signature-box--date">
          <span>{{ task.signedAt ?? '—' }}</span>
        </div>
      </div>
      <div class="signature-field">
        <span>经治医师：</span>
        <div class="signature-box signature-box--doctor">
          <span>刘明辉</span>
        </div>
      </div>
    </div>
  </article>
</template>

<style scoped>
.paper-preview {
  position: relative;
  min-height: 560px;
  padding: 34px 44px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.9;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh);
}

.paper-preview h2 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: 2px;
  text-align: center;
}

.paper-number {
  margin: 0 0 18px;
  color: var(--mut);
  font-size: 12px;
  text-align: center;
}

.paper-preview p {
  margin: 0 0 6px;
  text-align: justify;
  text-indent: 2em;
}

.paper-preview .paper-meta {
  color: var(--mut);
  text-indent: 0;
}

.paper-meta strong {
  color: var(--ink);
}

.current-badge {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  color: var(--err);
  font-size: 10px;
  line-height: 1.5;
  background: var(--err-l);
  border-radius: 4px;
}

.notice-block {
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 12.5px;
  background: #fafcfd;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.notice-block strong {
  font-size: 12.5px;
}

.signature-grid {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 22px;
}

.signature-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--mut);
  font-size: 12.5px;
}

.signature-box {
  display: flex;
  min-width: 200px;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--ink);
}

.signature-box img {
  max-width: 190px;
  max-height: 60px;
}

.signature-box span {
  color: var(--mut);
  font-size: 12px;
}

.signature-box--date {
  min-width: 150px;
}

.signature-box--doctor {
  min-width: 120px;
}

.void-stamp {
  position: absolute;
  top: 34px;
  right: 44px;
  padding: 4px 12px;
  color: rgb(208 83 79 / 70%);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  border: 2.5px solid rgb(208 83 79 / 55%);
  border-radius: 8px;
  transform: rotate(-14deg);
}

@media (max-width: 700px) {
  .paper-preview {
    padding: 26px 24px;
  }

  .void-stamp {
    top: 24px;
    right: 24px;
  }
}
</style>