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/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 {