Cheng Zhou
119 lines
3.2 KiB
Vue
119 lines
3.2 KiB
Vue
<template>
|
|
<div class="page">
|
|
<el-card class="mb-12">
|
|
<div class="actions">
|
|
<h3>伦理与启动管理</h3>
|
|
<PermissionAction action="milestone.create">
|
|
<el-button type="primary" @click="openCreate">新建节点</el-button>
|
|
</PermissionAction>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card>
|
|
<el-table :data="milestones" v-loading="loading" style="width: 100%">
|
|
<el-table-column prop="name" label="名称" />
|
|
<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">
|
|
<template #default="scope">
|
|
{{ statusLabel(scope.row.status) }}
|
|
</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>
|
|
</PermissionAction>
|
|
</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 } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { fetchMilestones } from "../api/milestones";
|
|
import { useStudyStore } from "../store/study";
|
|
import PermissionAction from "../components/PermissionAction.vue";
|
|
import { usePermission } from "../utils/permission";
|
|
import MilestoneForm from "../components/MilestoneForm.vue";
|
|
|
|
const study = useStudyStore();
|
|
const { can } = usePermission();
|
|
|
|
const milestones = ref<any[]>([]);
|
|
const loading = ref(false);
|
|
const showForm = ref(false);
|
|
const editingMilestone = ref<any | null>(null);
|
|
|
|
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();
|
|
});
|
|
|
|
const typeLabel = (v: string) =>
|
|
({
|
|
ETHICS_SUBMISSION: "伦理递交",
|
|
ETHICS_APPROVAL: "伦理批件",
|
|
SIV: "启动会",
|
|
FPI: "首例入组",
|
|
LPI: "末例入组",
|
|
DBL: "揭盲",
|
|
CSR: "总结报告",
|
|
}[v] || v);
|
|
|
|
const statusLabel = (v: string) =>
|
|
({
|
|
NOT_STARTED: "未开始",
|
|
IN_PROGRESS: "进行中",
|
|
DONE: "已完成",
|
|
BLOCKED: "阻塞",
|
|
}[v] || v);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
padding: 16px;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.mb-12 {
|
|
margin-bottom: 12px;
|
|
}
|
|
</style>
|