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

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

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-18 16:24:57 +08:00
parent 1ebc706242
commit a4ad087a0a
14 changed files with 366 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/members.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { apiDelete, apiGet, apiPatch, apiPost } from "./axios";
import type { StudyMember } from "../types/api";
export const listMembers = (studyId: string) =>
apiGet<StudyMember[]>(`/api/v1/studies/${studyId}/members/`);
export const listMembers = (studyId: string, params?: Record<string, any>) =>
apiGet<StudyMember[] | { items: StudyMember[] }>(`/api/v1/studies/${studyId}/members/`, { params });
export const addMember = (studyId: string, payload: { user_id: string; role_in_study: string; is_active?: boolean }) =>
apiPost<StudyMember>(`/api/v1/studies/${studyId}/members/`, payload);
frontend/src/components/MilestoneForm.vue
+50 -6
View File
@@ -6,7 +6,17 @@
</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-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="中心" prop="site_id">
<el-select v-model="form.site_id" placeholder="请选择中心" filterable>
<el-option v-for="s in sites" :key="s.id" :label="s.name || s.id" :value="s.id" />
</el-select>
</el-form-item>
<el-form-item label="负责人" prop="owner_id">
<el-select v-model="form.owner_id" placeholder="请选择负责人" filterable>
<el-option v-for="m in memberOptions" :key="m.value" :label="m.label" :value="m.value" />
</el-select>
</el-form-item>
<el-form-item label="计划日期" prop="planned_date">
@@ -17,7 +27,7 @@
</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-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="notes">
@@ -37,10 +47,14 @@ import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { createMilestone, updateMilestone } from "../api/milestones";
import { useStudyStore } from "../store/study";
import { milestoneStatusOptions, milestoneTypeOptions } from "../dictionaries/milestone.dict";
interface Props {
modelValue: boolean;
milestone?: Record<string, any>;
sites?: any[];
members?: any[];
users?: any[];
}
const props = defineProps<Props>();
@@ -53,12 +67,14 @@ const visible = computed({
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 types = milestoneTypeOptions;
const statuses = milestoneStatusOptions;
const form = reactive({
name: "",
type: "",
site_id: "",
owner_id: "",
planned_date: "",
actual_date: "",
status: "NOT_STARTED",
@@ -68,6 +84,8 @@ const form = reactive({
const rules: FormRules = {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
type: [{ required: true, message: "请选择类型", trigger: "change" }],
site_id: [{ required: true, message: "请选择中心", trigger: "change" }],
owner_id: [{ required: true, message: "请选择负责人", trigger: "change" }],
planned_date: [{ required: true, message: "请选择计划日期", trigger: "change" }],
};
@@ -75,12 +93,32 @@ const submitting = ref(false);
const isEdit = computed(() => !!props.milestone);
const memberOptions = computed(() => {
const userMap = (props.users || []).reduce<Record<string, string>>((acc, cur: any) => {
if (cur?.id) acc[cur.id] = cur.username || cur.id;
return acc;
}, {});
const memberList = (props.members || []).filter((m: any) => m.is_active !== false);
if (memberList.length) {
return memberList.map((m: any) => ({
value: m.user_id,
label: userMap[m.user_id] || m.username || m.user_id,
}));
}
return (props.users || []).map((u: any) => ({
value: u.id,
label: u.username || u.id,
}));
});
watch(
() => props.milestone,
(val) => {
if (val) {
form.name = val.name || "";
form.type = val.type || "";
form.site_id = val.site_id || "";
form.owner_id = val.owner_id || "";
form.planned_date = val.planned_date || "";
form.actual_date = val.actual_date || "";
form.status = val.status || "NOT_STARTED";
@@ -88,6 +126,8 @@ watch(
} else {
form.name = "";
form.type = "";
form.site_id = "";
form.owner_id = "";
form.planned_date = "";
form.actual_date = "";
form.status = "NOT_STARTED";
@@ -111,10 +151,14 @@ const onSubmit = async () => {
}
submitting.value = true;
try {
const payload = {
...form,
actual_date: form.actual_date || null,
};
if (isEdit.value && props.milestone) {
await updateMilestone(study.currentStudy.id, props.milestone.id, form);
await updateMilestone(study.currentStudy.id, props.milestone.id, payload);
} else {
await createMilestone(study.currentStudy.id, form);
await createMilestone(study.currentStudy.id, payload);
}
ElMessage.success("提交成功");
emit("success");
frontend/src/dictionaries/milestone.dict.ts
+41
View File
@@ -0,0 +1,41 @@
import { createDict, getDictColor, getDictLabel } from "./utils";
import type { Dict } from "./types";
export const milestoneTypeDict: Record<string, string> = {
ETHICS_SUBMISSION: "伦理递交",
ETHICS_APPROVAL: "伦理批件",
SITE_INITIATION: "中心启动",
SIV: "启动会",
FPI: "首例入组",
LPI: "末例入组",
DBL: "揭盲",
CSR: "总结报告",
};
const milestoneStatusItems = [
{ value: "NOT_STARTED", label: "未开始", color: "info", order: 1 },
{ value: "IN_PROGRESS", label: "进行中", color: "warning", order: 2 },
{ value: "DONE", label: "已完成", color: "success", order: 3 },
{ value: "COMPLETED", label: "已完成", color: "success", order: 3 },
{ value: "BLOCKED", label: "受阻", color: "danger", order: 4 },
];
export const milestoneStatusDict: Dict = createDict(milestoneStatusItems);
export const milestoneTypeOptions = Object.entries(milestoneTypeDict).map(([value, label]) => ({
value,
label,
}));
export const milestoneStatusOptions = ["NOT_STARTED", "IN_PROGRESS", "DONE", "BLOCKED"].map((value) => ({
value,
label: getDictLabel(milestoneStatusDict, value) || value,
color: getDictColor(milestoneStatusDict, value),
}));
export const getMilestoneTypeLabel = (value?: string | null) => milestoneTypeDict[value || ""] || value || "—";
export const getMilestoneStatusLabel = (value?: string | null) =>
getDictLabel(milestoneStatusDict, value) || value || "—";
export const getMilestoneStatusColor = (value?: string | null) => getDictColor(milestoneStatusDict, value) || "info";
frontend/src/router/index.ts
+7
View File
@@ -7,6 +7,7 @@ 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 MilestoneDetail from "../views/MilestoneDetail.vue";
import Subjects from "../views/Subjects.vue";
import SubjectDetail from "../views/SubjectDetail.vue";
import MyWorkbench from "../views/workbench/MyWorkbench.vue";
@@ -68,6 +69,12 @@ const routes: RouteRecordRaw[] = [
component: Milestones,
meta: { title: "里程碑", requiresStudy: true },
},
{
path: "study/milestones/:milestoneId",
name: "StudyMilestoneDetail",
component: MilestoneDetail,
meta: { title: "节点详情", requiresStudy: true },
},
{
path: "study/subjects",
name: "StudySubjects",
frontend/src/views/MilestoneDetail.vue
+158
View File
@@ -0,0 +1,158 @@
<template>
<div class="page" v-if="milestone">
<el-card class="mb-12">
<div class="header">
<div>
<h3>节点详情</h3>
<p class="subtitle">{{ milestone.name }}</p>
</div>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="名称">{{ milestone.name || "—" }}</el-descriptions-item>
<el-descriptions-item label="类型">{{ typeLabel(milestone.type) }}</el-descriptions-item>
<el-descriptions-item label="中心">{{ siteName(milestone) }}</el-descriptions-item>
<el-descriptions-item label="负责人">{{ ownerName(milestone.owner_id) }}</el-descriptions-item>
<el-descriptions-item label="计划日期">{{ milestone.planned_date || "—" }}</el-descriptions-item>
<el-descriptions-item label="实际日期">{{ milestone.actual_date || "—" }}</el-descriptions-item>
<el-descriptions-item label="当前状态">
<el-tag :type="statusColor(milestone.status)">{{ statusLabel(milestone.status) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ milestone.notes || "—" }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-tabs>
<el-tab-pane label="评论">
<CommentList
v-if="milestone.id"
:study-id="studyId"
entity-type="milestones"
:entity-id="milestone.id"
:can-comment="true"
/>
</el-tab-pane>
<el-tab-pane label="附件">
<AttachmentList
v-if="milestone.id"
:study-id="studyId"
entity-type="milestones"
:entity-id="milestone.id"
/>
</el-tab-pane>
</el-tabs>
</div>
<div v-else class="page">
<el-skeleton rows="4" animated />
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } 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 { useAuthStore } from "../store/auth";
import CommentList from "../components/CommentList.vue";
import AttachmentList from "../components/attachments/AttachmentList.vue";
import {
getMilestoneStatusColor,
getMilestoneStatusLabel,
getMilestoneTypeLabel,
} from "../dictionaries/milestone.dict";
const route = useRoute();
const study = useStudyStore();
const auth = useAuthStore();
const milestone = ref<any | null>(null);
const studyId = computed(() => study.currentStudy?.id || "");
const sites = ref<any[]>([]);
const members = ref<any[]>([]);
const users = ref<any[]>([]);
const loadMilestone = async () => {
if (!study.currentStudy) return;
try {
const { data } = await fetchMilestones(study.currentStudy.id);
const list = data.items || data || [];
milestone.value = list.find((item: any) => item.id === route.params.milestoneId) || null;
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || "节点加载失败");
}
};
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 typeLabel = (v: string) => getMilestoneTypeLabel(v);
const statusLabel = (v: string) => getMilestoneStatusLabel(v);
const statusColor = (v: string) => getMilestoneStatusColor(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 || "未指定";
};
onMounted(async () => {
if (!auth.user && auth.token) {
await auth.fetchMe().catch(() => {});
}
await Promise.all([loadSites(), loadMembers(), loadUsers(), loadMilestone()]);
});
</script>
<style scoped>
.page {
padding: 16px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.subtitle {
margin: 4px 0 0;
color: #666;
}
.mb-12 {
margin-bottom: 12px;
}
</style>
frontend/src/views/Milestones.vue
+104 -28
View File
@@ -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>
frontend/src/views/Tasks.vue
+1 -1
View File
@@ -143,7 +143,7 @@ const loadMilestones = async () => {
const loadMembers = async () => {
if (!study.currentStudy) return;
try {
const { data } = await listMembers(study.currentStudy.id);
const { data } = await listMembers(study.currentStudy.id, { limit: 500 });
members.value = Array.isArray(data) ? data : data.items || [];
} catch {
members.value = [];
frontend/src/views/admin/ProjectMembers.vue
+2 -2
View File
@@ -122,8 +122,8 @@ const loadMembers = async () => {
if (!projectId.value) return;
loading.value = true;
try {
const { data } = await listMembers(projectId.value);
members.value = data as any;
const { data } = await listMembers(projectId.value, { limit: 500 });
members.value = Array.isArray(data) ? data : data.items || [];
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || "成员列表加载失败");
} finally {