伦理与启动管理-简单优化

frontend/src/views/Milestones.vue

@@ -10,48 +10,89 @@
     </el-card>
 
     <el-card>
-      <el-table :data="milestones" v-loading="loading" style="width: 100%">
-        <el-table-column prop="name" label="名称" />
+      <el-table :data="milestones" v-loading="loading" style="width: 100%" @row-click="goDetail">
+        <el-table-column prop="name" label="名称" min-width="160">
+          <template #default="scope">
+            <el-link type="primary" @click.stop="goDetail(scope.row)">{{ scope.row.name || "—" }}</el-link>
+          </template>
+        </el-table-column>
         <el-table-column label="类型" width="160">
           <template #default="scope">
             {{ typeLabel(scope.row.type) }}
           </template>
         </el-table-column>
-        <el-table-column prop="planned_date" label="计划日期" width="140" />
-        <el-table-column prop="actual_date" label="实际日期" width="140" />
-        <el-table-column label="状态" width="140">
+        <el-table-column label="中心" width="180">
           <template #default="scope">
-            {{ statusLabel(scope.row.status) }}
+            {{ siteName(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="负责人" width="160">
+          <template #default="scope">
+            {{ ownerName(scope.row.owner_id) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="计划日期" width="140">
+          <template #default="scope">
+            {{ scope.row.planned_date || "—" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="实际日期" width="140">
+          <template #default="scope">
+            {{ scope.row.actual_date || "—" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="140">
+          <template #default="scope">
+            <el-tag :type="statusColor(scope.row.status)">
+              {{ statusLabel(scope.row.status) }}
+            </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="owner_id" label="负责人" width="160" />
         <el-table-column label="操作" width="120">
           <template #default="scope">
             <PermissionAction action="milestone.create">
-              <el-button type="primary" link size="small" @click="openEdit(scope.row)">编辑</el-button>
+              <el-button type="primary" link size="small" @click.stop="openEdit(scope.row)">编辑</el-button>
             </PermissionAction>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
 
-    <MilestoneForm v-model="showForm" :milestone="editingMilestone" @success="loadMilestones" />
+    <MilestoneForm
+      v-model="showForm"
+      :milestone="editingMilestone"
+      :sites="sites"
+      :members="members"
+      :users="users"
+      @success="loadMilestones"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { fetchMilestones } from "../api/milestones";
+import { fetchSites } from "../api/sites";
+import { listMembers } from "../api/members";
+import { fetchUsers } from "../api/users";
 import { useStudyStore } from "../store/study";
 import PermissionAction from "../components/PermissionAction.vue";
-import { usePermission } from "../utils/permission";
 import MilestoneForm from "../components/MilestoneForm.vue";
+import {
+  getMilestoneStatusColor,
+  getMilestoneStatusLabel,
+  getMilestoneTypeLabel,
+} from "../dictionaries/milestone.dict";
 
 const study = useStudyStore();
-const { can } = usePermission();
+const router = useRouter();
 
 const milestones = ref<any[]>([]);
+const sites = ref<any[]>([]);
+const members = ref<any[]>([]);
+const users = ref<any[]>([]);
 const loading = ref(false);
 const showForm = ref(false);
 const editingMilestone = ref<any | null>(null);
@@ -69,6 +110,35 @@ const loadMilestones = async () => {
   }
 };
 
+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 loadMembers = async () => {
+  if (!study.currentStudy) return;
+  try {
+    const { data } = await listMembers(study.currentStudy.id, { limit: 500 });
+    members.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    members.value = [];
+  }
+};
+
+const loadUsers = async () => {
+  try {
+    const { data } = await fetchUsers({ limit: 500 });
+    users.value = (data as any).items || data || [];
+  } catch {
+    users.value = [];
+  }
+};
+
 const openCreate = () => {
   editingMilestone.value = null;
   showForm.value = true;
@@ -81,26 +151,32 @@ const openEdit = (row: any) => {
 
 onMounted(() => {
   loadMilestones();
+  loadSites();
+  loadMembers();
+  loadUsers();
 });
 
-const typeLabel = (v: string) =>
-  ({
-    ETHICS_SUBMISSION: "伦理递交",
-    ETHICS_APPROVAL: "伦理批件",
-    SIV: "启动会",
-    FPI: "首例入组",
-    LPI: "末例入组",
-    DBL: "揭盲",
-    CSR: "总结报告",
-  }[v] || v);
+const typeLabel = (v: string) => getMilestoneTypeLabel(v);
+const statusLabel = (v: string) => getMilestoneStatusLabel(v);
+const statusColor = (v: string) => getMilestoneStatusColor(v);
 
-const statusLabel = (v: string) =>
-  ({
-    NOT_STARTED: "未开始",
-    IN_PROGRESS: "进行中",
-    DONE: "已完成",
-    BLOCKED: "阻塞",
-  }[v] || v);
+const siteName = (row: any) => {
+  const id = row?.site_id || row?.center_id;
+  const name = id ? sites.value.find((s: any) => s.id === id)?.name : row?.site_name;
+  return name || "—";
+};
+
+const ownerName = (ownerId: string) => {
+  if (!ownerId) return "未指定";
+  const member = members.value.find((m: any) => m.user_id === ownerId);
+  const user = users.value.find((u: any) => u.id === ownerId);
+  return user?.username || member?.username || ownerId || "未指定";
+};
+
+const goDetail = (row: any) => {
+  if (!row?.id) return;
+  router.push({ name: "StudyMilestoneDetail", params: { milestoneId: row.id } });
+};
 </script>
 
 <style scoped>