feat(reports): implement report analysis

2026-08-27 16:48:17 +08:00
parent 94a0d88f8b
commit 332fb53cfa
8 changed files with 1198 additions and 16 deletions
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { ReportTask, ReportTaskStatus } from '../types'
+
+defineProps<{
+  rows: ReportTask[]
+}>()
+
+const emit = defineEmits<{
+  view: [row: ReportTask]
+}>()
+
+const statusLabels: Record<ReportTaskStatus, string> = {
+  signed: '已签署',
+  pending: '待签署',
+  expired: '已超时',
+  void: '已作废',
+}
+
+function getStatusLabel(row: ReportTask) {
+  if (row.status === 'pending') {
+    return `${statusLabels[row.status]}·${row.method === 'pad' ? '手写板' : '短信'}`
+  }
+
+  return statusLabels[row.status]
+}
+
+function getStatusClass(status: ReportTaskStatus) {
+  return `status-${status}`
+}
+
+function formatTime(date: Date) {
+  const pad = (value: number) => String(value).padStart(2, '0')
+  return `${date.getMonth() + 1}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+</script>
+
+<template>
+  <div class="table-scroll">
+    <table class="detail-table">
+      <thead>
+        <tr>
+          <th>任务号</th>
+          <th>患者</th>
+          <th>文档</th>
+          <th>科室</th>
+          <th>方式</th>
+          <th>状态</th>
+          <th>发起时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row.id">
+          <td>{{ row.id }}</td>
+          <td>
+            <strong>{{ row.patientName }}</strong>
+            <span class="patient-id">{{ row.patientId }}</span>
+          </td>
+          <td class="document-name" :title="row.documentName">{{ row.documentName }}</td>
+          <td>{{ row.department }}</td>
+          <td>{{ row.method === 'pad' ? '✍️ 手写板' : '📱 短信' }}</td>
+          <td>
+            <span class="status-tag" :class="getStatusClass(row.status)">
+              {{ getStatusLabel(row) }}
+            </span>
+          </td>
+          <td>{{ formatTime(row.createdAt) }}</td>
+          <td>
+            <button type="button" class="view-button" @click="emit('view', row)">查看</button>
+          </td>
+        </tr>
+        <tr v-if="!rows.length">
+          <td colspan="8" class="empty-cell">暂无符合条件的签署明细</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.detail-table {
+  width: 100%;
+  min-width: 1000px;
+  font-size: 13px;
+  border-collapse: collapse;
+}
+
+.detail-table th {
+  padding: 9px 12px;
+  color: var(--mut);
+  font-size: 12.5px;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  background: #f5f9fa;
+  border-bottom: 1px solid var(--line);
+}
+
+.detail-table td {
+  padding: 9px 12px;
+  vertical-align: middle;
+  border-bottom: 1px solid #eef4f6;
+}
+
+.detail-table tbody tr:hover td {
+  background: #f7fbfc;
+}
+
+.patient-id {
+  display: block;
+  margin-top: 2px;
+  color: var(--mut);
+  font-size: 11px;
+}
+
+.document-name {
+  max-width: 230px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 2px 10px;
+  font-size: 11.5px;
+  font-weight: 700;
+  white-space: nowrap;
+  border-radius: 20px;
+}
+
+.status-signed {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.status-pending {
+  color: var(--brand);
+  background: var(--brand-l);
+}
+
+.status-expired {
+  color: var(--err);
+  background: var(--err-l);
+}
+
+.status-void {
+  color: #8a9aa3;
+  background: #eceef0;
+}
+
+.view-button {
+  padding: 4px 10px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.view-button:hover {
+  background: var(--brand-l);
+}
+
+.empty-cell {
+  padding: 40px 12px !important;
+  color: var(--mut);
+  text-align: center;
+}
+</style>