Step F4：任务（Task）& 里程碑（Milestone）管理页面

2025-12-16 21:13:18 +08:00
parent 582655a66d
commit 4f35769056
26 changed files with 275 additions and 1 deletions
@@ -0,0 +1,88 @@
+<template>
+  <div class="page">
+    <el-card class="mb-12">
+      <div class="actions">
+        <h3>里程碑</h3>
+        <el-button type="primary" v-if="canEdit" @click="openCreate">新增里程碑</el-button>
+      </div>
+    </el-card>
+
+    <el-card>
+      <el-table :data="milestones" v-loading="loading" style="width: 100%">
+        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="type" label="类型" width="160" />
+        <el-table-column prop="planned_date" label="计划日期" width="140" />
+        <el-table-column prop="actual_date" label="实际日期" width="140" />
+        <el-table-column prop="status" label="状态" width="140" />
+        <el-table-column prop="owner_id" label="负责人" width="160" />
+        <el-table-column label="操作" width="120" v-if="canEdit">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="openEdit(scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <MilestoneForm v-model="showForm" :milestone="editingMilestone" @success="loadMilestones" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from "vue";
+import { ElMessage } from "element-plus";
+import { fetchMilestones } from "../api/milestones";
+import { useStudyStore } from "../store/study";
+import { useAuthStore } from "../store/auth";
+import MilestoneForm from "../components/MilestoneForm.vue";
+
+const study = useStudyStore();
+const auth = useAuthStore();
+
+const milestones = ref<any[]>([]);
+const loading = ref(false);
+const showForm = ref(false);
+const editingMilestone = ref<any | null>(null);
+
+const canEdit = computed(() => auth.user?.role === "ADMIN" || auth.user?.role === "PM");
+
+const loadMilestones = async () => {
+  if (!study.currentStudy) return;
+  loading.value = true;
+  try {
+    const { data } = await fetchMilestones(study.currentStudy.id);
+    milestones.value = data.items || data;
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "里程碑加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const openCreate = () => {
+  editingMilestone.value = null;
+  showForm.value = true;
+};
+
+const openEdit = (row: any) => {
+  editingMilestone.value = row;
+  showForm.value = true;
+};
+
+onMounted(() => {
+  loadMilestones();
+});
+</script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mb-12 {
+  margin-bottom: 12px;
+}
+</style>