Cheng Zhou
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<div class="study-list">
|
|
<el-card>
|
|
<div class="header">
|
|
<h3>项目列表</h3>
|
|
</div>
|
|
<el-table :data="studies" style="width: 100%" v-loading="loading">
|
|
<el-table-column prop="code" label="项目编号" width="160" />
|
|
<el-table-column prop="name" label="项目名称" />
|
|
<el-table-column prop="status" label="状态" width="120" />
|
|
<el-table-column label="操作" width="140">
|
|
<template #default="scope">
|
|
<el-button type="primary" size="small" @click="enterStudy(scope.row)">进入项目</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { fetchStudies } from "../api/studies";
|
|
import { useStudyStore } from "../store/study";
|
|
import type { Study } from "../types/api";
|
|
|
|
const studies = ref<Study[]>([]);
|
|
const loading = ref(false);
|
|
const router = useRouter();
|
|
const studyStore = useStudyStore();
|
|
|
|
const loadStudies = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const { data } = await fetchStudies();
|
|
studies.value = data.items;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const enterStudy = (study: Study) => {
|
|
studyStore.setCurrentStudy(study);
|
|
router.push("/study/home");
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadStudies();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.study-list {
|
|
padding: 16px;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
</style>
|