zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-16 21:13:18 +08:00
parent 582655a66d
commit 4f35769056
26 changed files with 275 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/milestones.ts
+11
View File
@@ -0,0 +1,11 @@
import { apiGet, apiPost, apiPatch } from "./axios";
import type { ApiListResponse } from "../types/api";
export const fetchMilestones = (studyId: string) =>
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/milestones/`);
export const createMilestone = (studyId: string, payload: Record<string, any>) =>
apiPost(`/api/v1/studies/${studyId}/milestones/`, payload);
export const updateMilestone = (studyId: string, milestoneId: string, payload: Record<string, any>) =>
apiPatch(`/api/v1/studies/${studyId}/milestones/${milestoneId}`, payload);
frontend/src/api/tasks.ts
+11
View File
@@ -0,0 +1,11 @@
import { apiGet, apiPost, apiPatch } from "./axios";
import type { ApiListResponse } from "../types/api";
export const fetchTasks = (studyId: string, params?: Record<string, any>) =>
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/tasks/`, { params });
export const createTask = (studyId: string, payload: Record<string, any>) =>
apiPost(`/api/v1/studies/${studyId}/tasks/`, payload);
export const updateTask = (studyId: string, taskId: string, payload: Record<string, any>) =>
apiPatch(`/api/v1/studies/${studyId}/tasks/${taskId}`, payload);
frontend/src/components/Layout.vue
+2
View File
@@ -17,6 +17,8 @@
<el-menu router :default-active="$route.path">
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/study/home">项目首页</el-menu-item>
<el-menu-item index="/study/milestones">里程碑</el-menu-item>
<el-menu-item index="/study/tasks">任务</el-menu-item>
</el-menu>
</el-aside>
<el-main>
frontend/src/components/MilestoneForm.vue
+129
View File
@@ -0,0 +1,129 @@
<template>
<el-dialog :title="isEdit ? '编辑里程碑' : '新增里程碑'" v-model="visible" width="520px" @close="onClose">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择">
<el-option v-for="item in types" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="计划日期" prop="planned_date">
<el-date-picker v-model="form.planned_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item label="实际日期" prop="actual_date">
<el-date-picker v-model="form.actual_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择">
<el-option v-for="item in statuses" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="notes">
<el-input v-model="form.notes" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="onClose">取消</el-button>
<el-button type="primary" :loading="submitting" @click="onSubmit">提交</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { createMilestone, updateMilestone } from "../api/milestones";
import { useStudyStore } from "../store/study";
interface Props {
modelValue: boolean;
milestone?: Record<string, any>;
}
const props = defineProps<Props>();
const emit = defineEmits(["update:modelValue", "success"]);
const formRef = ref<FormInstance>();
const study = useStudyStore();
const visible = computed({
get: () => props.modelValue,
set: (v: boolean) => emit("update:modelValue", v),
});
const types = ["ETHICS_SUBMISSION", "ETHICS_APPROVAL", "SIV", "FPI", "LPI", "DBL", "CSR"];
const statuses = ["NOT_STARTED", "IN_PROGRESS", "DONE", "BLOCKED"];
const form = reactive({
name: "",
type: "",
planned_date: "",
actual_date: "",
status: "NOT_STARTED",
notes: "",
});
const rules: FormRules = {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
type: [{ required: true, message: "请选择类型", trigger: "change" }],
planned_date: [{ required: true, message: "请选择计划日期", trigger: "change" }],
};
const submitting = ref(false);
const isEdit = computed(() => !!props.milestone);
watch(
() => props.milestone,
(val) => {
if (val) {
form.name = val.name || "";
form.type = val.type || "";
form.planned_date = val.planned_date || "";
form.actual_date = val.actual_date || "";
form.status = val.status || "NOT_STARTED";
form.notes = val.notes || "";
} else {
form.name = "";
form.type = "";
form.planned_date = "";
form.actual_date = "";
form.status = "NOT_STARTED";
form.notes = "";
}
},
{ immediate: true }
);
const onClose = () => {
visible.value = false;
};
const onSubmit = async () => {
if (!formRef.value) return;
await formRef.value.validate(async (valid) => {
if (!valid) return;
if (!study.currentStudy) {
ElMessage.error("未选择项目");
return;
}
submitting.value = true;
try {
if (isEdit.value && props.milestone) {
await updateMilestone(study.currentStudy.id, props.milestone.id, form);
} else {
await createMilestone(study.currentStudy.id, form);
}
ElMessage.success("提交成功");
emit("success");
onClose();
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || "提交失败");
} finally {
submitting.value = false;
}
});
};
</script>
frontend/src/router/index.ts
+7
View File
@@ -7,6 +7,7 @@ import Login from "../views/Login.vue";
import StudyList from "../views/StudyList.vue";
import StudyHome from "../views/StudyHome.vue";
import Tasks from "../views/Tasks.vue";
import Milestones from "../views/Milestones.vue";
import Subjects from "../views/Subjects.vue";
import Aes from "../views/Aes.vue";
import DataQueries from "../views/DataQueries.vue";
@@ -44,6 +45,12 @@ const routes: RouteRecordRaw[] = [
component: Tasks,
meta: { title: "任务", requiresStudy: true },
},
{
path: "study/milestones",
name: "StudyMilestones",
component: Milestones,
meta: { title: "里程碑", requiresStudy: true },
},
{
path: "study/subjects",
name: "StudySubjects",
frontend/src/views/Milestones.vue
+88
View File
@@ -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>
frontend/src/views/StudyHome.vue
+5 -1
View File
@@ -52,6 +52,7 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElAlert } from "element-plus";
import { useRouter } from "vue-router";
import { useAuthStore } from "../store/auth";
import { useStudyStore } from "../store/study";
import { fetchFinanceSummary, fetchMyTodoTasks, fetchOverdueAesCount, fetchOverdueQueriesCount, fetchProgress } from "../api/dashboard";
@@ -60,6 +61,7 @@ import QuickActions from "../components/QuickActions.vue";
const auth = useAuthStore();
const study = useStudyStore();
const router = useRouter();
const progress = ref<any>(null);
const financeSummary = ref<any>(null);
@@ -89,7 +91,9 @@ const formatPercent = (v?: number | null) => {
};
const goTasks = () => {
window.location.hash = "#"; // placeholder
if (study.currentStudy) {
router.push("/study/tasks");
}
};
const loadData = async () => {