修复前后端显示异常问题（受试者、中心、负责人、日期等）

frontend/src/views/ImpInventory.vue

@@ -2,8 +2,17 @@
   <div class="page">
     <el-card class="mb-12">
       <div class="filters">
-        <el-input v-model="filters.site_id" placeholder="中心ID" clearable @change="load" style="width: 200px" />
-        <el-select v-model="filters.product_id" placeholder="产品" clearable @change="load">
+        <el-select
+          v-model="filters.site_id"
+          placeholder="中心"
+          clearable
+          filterable
+          @change="load"
+          style="width: 220px"
+        >
+          <el-option v-for="s in sites" :key="s.id" :label="s.name" :value="s.id" />
+        </el-select>
+        <el-select v-model="filters.product_id" placeholder="产品" clearable @change="load" filterable>
           <el-option v-for="p in products" :key="p.id" :label="p.name" :value="p.id" />
         </el-select>
         <div class="spacer" />
@@ -12,10 +21,16 @@
     </el-card>
     <el-card>
       <el-table :data="rows" v-loading="loading" style="width: 100%">
-        <el-table-column prop="site_id" label="中心" />
-        <el-table-column prop="batch_id" label="批次" />
+        <el-table-column prop="site_id" label="中心">
+          <template #default="scope">{{ siteName(scope.row.site_id) }}</template>
+        </el-table-column>
+        <el-table-column prop="batch_id" label="批次">
+          <template #default="scope">{{ batchName(scope.row.batch_id) }}</template>
+        </el-table-column>
         <el-table-column prop="quantity_on_hand" label="当前结余" width="120" align="right" />
-        <el-table-column prop="updated_at" label="更新时间" width="180" />
+        <el-table-column prop="updated_at" label="更新时间" width="180">
+          <template #default="scope">{{ displayDateTime(scope.row.updated_at) }}</template>
+        </el-table-column>
       </el-table>
     </el-card>
   </div>
@@ -26,8 +41,11 @@ import { onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { fetchImpInventory } from "../api/impInventory";
 import { fetchImpProducts } from "../api/impProducts";
+import { fetchImpBatches } from "../api/impBatches";
+import { fetchSites } from "../api/sites";
 import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";
+import { displayDateTime } from "../utils/display";
 
 const study = useStudyStore();
 const auth = useAuthStore();
@@ -36,6 +54,8 @@ const filters = ref({ site_id: "", product_id: "" });
 const rows = ref<any[]>([]);
 const loading = ref(false);
 const products = ref<any[]>([]);
+const batches = ref<any[]>([]);
+const sites = ref<any[]>([]);
 
 const loadProducts = async () => {
   if (!study.currentStudy) return;
@@ -47,6 +67,26 @@ const loadProducts = async () => {
   }
 };
 
+const loadBatches = async () => {
+  if (!study.currentStudy) return;
+  try {
+    const { data } = await fetchImpBatches(study.currentStudy.id, { limit: 500 });
+    batches.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    batches.value = [];
+  }
+};
+
+const loadSites = async () => {
+  if (!study.currentStudy) return;
+  try {
+    const { data } = await fetchSites(study.currentStudy.id, { limit: 500 });
+    sites.value = (data as any).items || data || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
 const load = async () => {
   if (!study.currentStudy) return;
   loading.value = true;
@@ -67,11 +107,23 @@ const load = async () => {
   }
 };
 
+const siteName = (id?: string) => {
+  if (!id) return "-";
+  const found = sites.value.find((s: any) => s.id === id);
+  return found?.name || id;
+};
+
+const batchName = (id?: string) => {
+  if (!id) return "-";
+  const found = batches.value.find((b: any) => b.id === id);
+  return found?.batch_no || found?.code || id;
+};
+
 onMounted(async () => {
   if (!auth.user && auth.token) {
     await auth.fetchMe().catch(() => {});
   }
-  await loadProducts();
+  await Promise.all([loadProducts(), loadBatches(), loadSites()]);
   load();
 });
 </script>