Step F6：AE & 风险/问题管理（PV）
This commit is contained in:
Cheng Zhou
+148
-2
@@ -1,13 +1,159 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>不良事件</h2></el-card>
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-select v-model="filters.status" placeholder="状态" clearable @change="loadAes">
|
||||
<el-option v-for="s in statuses" :key="s" :label="s" :value="s" />
|
||||
</el-select>
|
||||
<el-select v-model="filters.seriousness" placeholder="严重性" clearable @change="loadAes">
|
||||
<el-option label="SERIOUS" value="SERIOUS" />
|
||||
<el-option label="NON_SERIOUS" value="NON_SERIOUS" />
|
||||
</el-select>
|
||||
<el-switch v-model="filters.overdue" active-text="仅逾期" @change="loadAes" />
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canCreate" @click="showForm = true">新建 AE</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table :data="aes" v-loading="loading" style="width: 100%" @row-click="goDetail">
|
||||
<el-table-column prop="term" label="事件" />
|
||||
<el-table-column prop="subject_id" label="受试者ID" width="200" />
|
||||
<el-table-column prop="seriousness" label="严重性" width="140" />
|
||||
<el-table-column prop="onset_date" label="发生日期" width="140" />
|
||||
<el-table-column prop="report_due_date" label="报告截止" width="140" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.is_overdue ? 'danger' : 'info'">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<AeForm v-model="showForm" :subjects="subjects" @success="loadAes" />
|
||||
</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 { fetchAes } from "../api/aes";
|
||||
import { fetchSubjects } from "../api/subjects";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import AeForm from "../components/AeForm.vue";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const aes = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
const subjects = ref<any[]>([]);
|
||||
|
||||
const statuses = ["NEW", "FOLLOW_UP", "CLOSED"];
|
||||
|
||||
const filters = ref({
|
||||
status: "",
|
||||
seriousness: "",
|
||||
overdue: false,
|
||||
});
|
||||
|
||||
const showForm = ref(false);
|
||||
|
||||
const canCreate = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "CRA" || role === "PV";
|
||||
});
|
||||
|
||||
const loadAes = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = { skip: (page.value - 1) * pageSize, limit: pageSize };
|
||||
if (filters.value.status) params.status = filters.value.status;
|
||||
if (filters.value.seriousness) params.seriousness = filters.value.seriousness;
|
||||
if (filters.value.overdue) params.overdue = true;
|
||||
const { data } = await fetchAes(study.currentStudy.id, params);
|
||||
const mapOverdue = (list: any[]) =>
|
||||
list.map((item) => ({
|
||||
...item,
|
||||
is_overdue:
|
||||
item.is_overdue ??
|
||||
(item.report_due_date && item.status !== "CLOSED" && new Date() > new Date(item.report_due_date)),
|
||||
}));
|
||||
if (Array.isArray(data)) {
|
||||
aes.value = mapOverdue(data);
|
||||
total.value = data.length;
|
||||
} else {
|
||||
const items = data.items || [];
|
||||
aes.value = mapOverdue(items);
|
||||
total.value = data.total || aes.value.length;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "AE 加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
loadAes();
|
||||
};
|
||||
|
||||
const loadSubjects = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchSubjects(study.currentStudy.id, { skip: 0, limit: 500 });
|
||||
subjects.value = data.items || data || [];
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
const goDetail = (row: any) => {
|
||||
router.push(`/study/aes/${row.id}`);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadSubjects();
|
||||
loadAes();
|
||||
});
|
||||
</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>
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="page" v-if="issue">
|
||||
<el-card class="mb-12">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3>Issue 详情</h3>
|
||||
<p>{{ issue.title }}</p>
|
||||
</div>
|
||||
<el-button v-if="canEdit" type="danger" size="small" @click="closeIssue">关闭</el-button>
|
||||
</div>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="类别">{{ issue.category }}</el-descriptions-item>
|
||||
<el-descriptions-item label="等级">{{ issue.level }}</el-descriptions-item>
|
||||
<el-descriptions-item label="截止日期">{{ issue.due_date }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">{{ issue.status }}</el-descriptions-item>
|
||||
<el-descriptions-item label="描述">{{ issue.description }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-tabs>
|
||||
<el-tab-pane label="评论">
|
||||
<CommentList :study-id="studyId" entity-type="issues" :entity-id="issue.id" :can-comment="true" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="附件">
|
||||
<AttachmentList :study-id="studyId" entity-type="issues" :entity-id="issue.id" :can-upload="canEdit" />
|
||||
</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, ElMessageBox } from "element-plus";
|
||||
import { fetchIssues, updateIssue } from "../api/issues";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import CommentList from "../components/CommentList.vue";
|
||||
import AttachmentList from "../components/AttachmentList.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const issue = ref<any | null>(null);
|
||||
const studyId = computed(() => study.currentStudy?.id || "");
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "PV";
|
||||
});
|
||||
|
||||
const load = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchIssues(study.currentStudy.id, { skip: 0, limit: 500 });
|
||||
const list = data.items || data || [];
|
||||
issue.value = list.find((item: any) => item.id === route.params.issueId);
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "Issue 加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
const closeIssue = async () => {
|
||||
await ElMessageBox.confirm("确认将 Issue 关闭？", "提示");
|
||||
if (!study.currentStudy || !issue.value) return;
|
||||
try {
|
||||
await updateIssue(study.currentStudy.id, issue.value.id, { status: "CLOSED" });
|
||||
ElMessage.success("已关闭");
|
||||
load();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "更新失败");
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-select v-model="filters.status" placeholder="状态" clearable @change="loadIssues">
|
||||
<el-option v-for="s in statuses" :key="s" :label="s" :value="s" />
|
||||
</el-select>
|
||||
<el-select v-model="filters.level" placeholder="等级" clearable @change="loadIssues">
|
||||
<el-option v-for="l in levels" :key="l" :label="l" :value="l" />
|
||||
</el-select>
|
||||
<el-select v-model="filters.category" placeholder="类别" clearable @change="loadIssues">
|
||||
<el-option v-for="c in categories" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
<el-switch v-model="filters.overdue" active-text="仅逾期" @change="loadIssues" />
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canCreate" @click="showForm = true">新建 Issue</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table :data="issues" v-loading="loading" style="width: 100%" @row-click="goDetail">
|
||||
<el-table-column prop="title" label="标题" />
|
||||
<el-table-column prop="level" label="等级" width="120" />
|
||||
<el-table-column prop="category" label="类别" width="140" />
|
||||
<el-table-column prop="due_date" label="截止日期" width="140" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.is_overdue ? 'danger' : 'info'">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<IssueForm v-model="showForm" @success="loadIssues" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchIssues } from "../api/issues";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import IssueForm from "../components/IssueForm.vue";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const issues = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
|
||||
const statuses = ["OPEN", "MITIGATING", "CLOSED"];
|
||||
const levels = ["LOW", "MEDIUM", "HIGH", "CRITICAL"];
|
||||
const categories = ["RISK", "ISSUE", "PROTOCOL_DEVIATION"];
|
||||
|
||||
const filters = ref({
|
||||
status: "",
|
||||
level: "",
|
||||
category: "",
|
||||
overdue: false,
|
||||
});
|
||||
|
||||
const showForm = ref(false);
|
||||
|
||||
const canCreate = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "PV";
|
||||
});
|
||||
|
||||
const loadIssues = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = { skip: (page.value - 1) * pageSize, limit: pageSize };
|
||||
if (filters.value.status) params.status = filters.value.status;
|
||||
if (filters.value.level) params.level = filters.value.level;
|
||||
if (filters.value.category) params.category = filters.value.category;
|
||||
if (filters.value.overdue) params.overdue = true;
|
||||
const { data } = await fetchIssues(study.currentStudy.id, params);
|
||||
const mapOverdue = (list: any[]) =>
|
||||
list.map((item) => ({
|
||||
...item,
|
||||
is_overdue:
|
||||
item.is_overdue ?? (item.due_date && item.status !== "CLOSED" && new Date() > new Date(item.due_date)),
|
||||
}));
|
||||
if (Array.isArray(data)) {
|
||||
issues.value = mapOverdue(data);
|
||||
total.value = data.length;
|
||||
} else {
|
||||
const list = data.items || [];
|
||||
issues.value = mapOverdue(list);
|
||||
total.value = data.total || issues.value.length;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "Issue 加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
loadIssues();
|
||||
};
|
||||
|
||||
const goDetail = (row: any) => {
|
||||
router.push(`/study/issues/${row.id}`);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
loadIssues();
|
||||
});
|
||||
</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