feat(signing): 接入工作台任务操作与审计

clinical-web/src/views/workbench/signing/components/TaskAuditTimeline.vue

@@ -1,49 +1,34 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { SigningTaskEvent } from '@/api/workbench/types'
 
-import type { SigningTaskRecord } from '@/api/workbench/types'
-
-const props = defineProps<{
-  task: SigningTaskRecord
+defineProps<{
+  events: SigningTaskEvent[]
+  loading: boolean
+  error: boolean
 }>()
-
-const events = computed(() => {
-  const result = [
-    {
-      time: props.task.updatedAt,
-      text: `张文静发起签署任务（${props.task.method === 'pad' ? '手写板' : '线上短信'}）`,
-    },
-  ]
-
-  if (props.task.status === 'signing') {
-    result.push({ time: props.task.updatedAt, text: '已打开签名采集，等待患者完成签名' })
-  }
-
-  if (props.task.signedAt) {
-    result.push({
-      time: props.task.signedAt,
-      text: `患者 ${props.task.patientName} 完成签名，系统自动合成并双留存`,
-    })
-  }
-
-  if (props.task.status === 'void') {
-    result.push({
-      time: props.task.updatedAt,
-      text: `任务已作废${props.task.voidReason ? `，原因：${props.task.voidReason}` : ''}，全程可审计`,
-    })
-  }
-
-  return result
-})
 </script>
 
 <template>
   <section class="audit-card">
     <strong>操作留痕</strong>
-    <ol class="audit-list">
-      <li v-for="event in events" :key="`${event.time}-${event.text}`">
+
+    <div v-if="loading" class="audit-state">正在加载操作留痕…</div>
+    <div v-else-if="error" class="audit-state audit-state--error">
+      操作留痕加载失败，请稍后刷新重试
+    </div>
+    <div v-else-if="!events.length" class="audit-state">暂无操作留痕</div>
+
+    <ol v-else class="audit-list">
+      <li v-for="event in events" :key="event.id">
         <time>{{ event.time }}</time>
-        <span>{{ event.text }}</span>
+        <span class="audit-event-content">
+          <span>{{ event.text }}</span>
+          <small v-if="event.attemptNo || event.reason">
+            <template v-if="event.attemptNo">第 {{ event.attemptNo }} 次</template>
+            <template v-if="event.attemptNo && event.reason"> · </template>
+            <template v-if="event.reason">{{ event.reason }}</template>
+          </small>
+        </span>
       </li>
     </ol>
   </section>
@@ -62,6 +47,16 @@ const events = computed(() => {
   font-size: 12px;
 }
 
+.audit-state {
+  padding: 8px 0 1px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.audit-state--error {
+  color: var(--err);
+}
+
 .audit-list {
   display: flex;
   flex-direction: column;
@@ -83,4 +78,15 @@ const events = computed(() => {
   flex-shrink: 0;
   color: var(--mut);
 }
+
+.audit-event-content {
+  display: inline-flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.audit-event-content small {
+  color: var(--mut);
+  font-size: 11px;
+}
 </style>