feature: Digitization Workstation UI

2026-06-27 12:15:43 +08:00
parent 88e70b3dbe
commit e22d33b654
55 changed files with 6411 additions and 143 deletions
@@ -0,0 +1,86 @@
+<template>
+  <div class="min-h-screen lg:h-screen flex flex-col">
+    <AppHeader title="Verification">
+      <template #subtitle>
+        <span v-if="currentBatch" class="text-sm text-gray-500">
+          Batch: {{ currentBatch.id.substring(0, 8) }}...
+          | Entered by: {{ currentBatch.enteredByUserId?.substring(0, 8) }}...
+        </span>
+      </template>
+    </AppHeader>
+
+    <!-- Queue view (no batch selected) -->
+    <div v-if="!batchId" class="flex-1 p-4 sm:p-6">
+      <h2 class="text-xl font-semibold mb-4">Verification Queue</h2>
+      <p class="text-sm text-gray-500 mb-4">
+        Batches pending verification, sorted by submission time (oldest first).
+      </p>
+      <BatchList
+        :batches="batchStore.batches"
+        :loading="batchStore.loading"
+        @select="openBatch"
+      />
+    </div>
+
+    <!-- Split pane (batch selected) -->
+    <div v-else class="flex-1 split-pane">
+      <ScanViewer
+        v-if="documentUrl"
+        :url="documentUrl"
+      />
+      <div v-else class="flex items-center justify-center bg-gray-100 rounded-lg">
+        <p class="text-gray-500">Loading document...</p>
+      </div>
+
+      <VerificationForm
+        :batch="currentBatch"
+        :batch-id="batchId"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useBatchStore } from '../stores/batches'
+import { usePresignedUrl } from '../composables/usePresignedUrl'
+import AppHeader from '../components/AppHeader.vue'
+import ScanViewer from '../components/ScanViewer.vue'
+import VerificationForm from '../components/VerificationForm.vue'
+import BatchList from '../components/BatchList.vue'
+
+const props = defineProps<{ batchId?: string }>()
+
+const batchStore = useBatchStore()
+const route = useRoute()
+const router = useRouter()
+
+const batchId = computed(() => props.batchId ?? (route.params.batchId as string | undefined))
+const currentBatch = computed(() => batchStore.currentBatch)
+const { documentUrl } = usePresignedUrl(batchId)
+
+function openBatch(id: string) {
+  router.push(`/verification/${id}`)
+}
+
+watch(
+  batchId,
+  async (id) => {
+    if (id) {
+      await batchStore.getDraft(id)
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  if (!batchId.value) {
+    await batchStore.listBatches({
+      status: 'PENDING_VERIFICATION',
+      page: 1,
+      pageSize: 50,
+    })
+  }
+})
+</script>