Step F5：受试者 & 访视管理
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="page" v-if="subject">
|
||||
<el-card class="mb-12">
|
||||
<h3>受试者 {{ subject.subject_no }}</h3>
|
||||
<p>中心：{{ subject.site_id }}</p>
|
||||
<p>状态：{{ subject.status }}</p>
|
||||
<div v-if="canEdit" class="actions">
|
||||
<el-button size="small" type="primary" @click="setStatus('ENROLLED')">标记入组</el-button>
|
||||
<el-button size="small" type="success" @click="setStatus('COMPLETED')">标记完成</el-button>
|
||||
<el-button size="small" type="danger" @click="setStatus('DROPPED')">标记脱落</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<VisitTable :visits="visits" :subject-id="subject.id" :can-edit="canEdit" :on-refresh="loadVisits" />
|
||||
</div>
|
||||
<div v-else class="page">
|
||||
<el-skeleton rows="3" animated />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { fetchSubjects, updateSubject } from "../api/subjects";
|
||||
import { fetchVisits } from "../api/visits";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import VisitTable from "../components/VisitTable.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const subject = ref<any | null>(null);
|
||||
const visits = ref<any[]>([]);
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "CRA";
|
||||
});
|
||||
|
||||
const loadSubject = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const subjectId = route.params.subjectId as string;
|
||||
const { data } = await fetchSubjects(study.currentStudy.id, { skip: 0, limit: 1000 });
|
||||
const list = data.items || data || [];
|
||||
subject.value = list.find((s: any) => s.id === subjectId) || null;
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "受试者加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
const loadVisits = async () => {
|
||||
if (!study.currentStudy || !route.params.subjectId) return;
|
||||
try {
|
||||
const { data } = await fetchVisits(study.currentStudy.id, route.params.subjectId as string);
|
||||
visits.value = data.items || data;
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "访视加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
const setStatus = async (status: string) => {
|
||||
await ElMessageBox.confirm(`确认将受试者状态设置为 ${status}？`, "提示");
|
||||
if (!study.currentStudy || !subject.value) return;
|
||||
const payload: Record<string, any> = { status };
|
||||
if (status == "ENROLLED") payload.enrollment_date = new Date().toISOString().slice(0, 10);
|
||||
if (status == "COMPLETED") payload.completion_date = new Date().toISOString().slice(0, 10);
|
||||
if (status == "DROPPED") payload.drop_reason = "Dropped";
|
||||
try {
|
||||
await updateSubject(study.currentStudy.id, subject.value.id, payload);
|
||||
ElMessage.success("状态已更新");
|
||||
await loadSubject();
|
||||
await loadVisits();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "更新失败");
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadSubject();
|
||||
await loadVisits();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,152 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>受试者</h2></el-card>
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-select
|
||||
v-model="filters.site_id"
|
||||
placeholder="中心"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 200px"
|
||||
@change="loadSubjects"
|
||||
>
|
||||
<el-option v-for="s in sites" :key="s.id" :label="s.name || s.id" :value="s.id" />
|
||||
</el-select>
|
||||
<el-select v-model="filters.status" placeholder="状态" clearable @change="loadSubjects">
|
||||
<el-option v-for="s in statuses" :key="s" :label="s" :value="s" />
|
||||
</el-select>
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canEdit" @click="showForm = true">新增受试者</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table :data="subjects" v-loading="loading" style="width: 100%" @row-click="goDetail">
|
||||
<el-table-column prop="subject_no" label="受试者编号" />
|
||||
<el-table-column prop="site_id" label="中心ID" />
|
||||
<el-table-column prop="status" label="状态" width="120" />
|
||||
<el-table-column prop="screening_date" label="筛选日期" width="140" />
|
||||
<el-table-column prop="enrollment_date" label="入组日期" width="140" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<SubjectForm v-model="showForm" :sites="sites" @success="loadSubjects" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchSubjects } from "../api/subjects";
|
||||
import { fetchSites } from "../api/sites";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import SubjectForm from "../components/SubjectForm.vue";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const subjects = ref<any[]>([]);
|
||||
const sites = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
|
||||
const statuses = ["SCREENING", "ENROLLED", "COMPLETED", "DROPPED"];
|
||||
|
||||
const filters = ref({
|
||||
site_id: "",
|
||||
status: "",
|
||||
});
|
||||
|
||||
const showForm = ref(false);
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "CRA";
|
||||
});
|
||||
|
||||
const loadSubjects = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
skip: (page.value - 1) * pageSize,
|
||||
limit: pageSize,
|
||||
};
|
||||
if (filters.value.site_id) params.site_id = filters.value.site_id;
|
||||
if (filters.value.status) params.status = filters.value.status;
|
||||
const { data } = await fetchSubjects(study.currentStudy.id, params);
|
||||
if (Array.isArray(data)) {
|
||||
subjects.value = data;
|
||||
total.value = data.length;
|
||||
} else {
|
||||
subjects.value = data.items || [];
|
||||
total.value = data.total || subjects.value.length;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "受试者加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
loadSubjects();
|
||||
};
|
||||
|
||||
const goDetail = (row: any) => {
|
||||
router.push(`/study/subjects/${row.id}`);
|
||||
};
|
||||
|
||||
const loadSites = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchSites(study.currentStudy.id);
|
||||
sites.value = data.items || data;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadSites();
|
||||
loadSubjects();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user