zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

前端UI界面美化--初版

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-22 08:38:22 +08:00
parent 1e3e064871
commit 4f510871bf
6 changed files with 871 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Subjects.vue
+171 -41
View File
@@ -1,49 +1,97 @@
<template>
<div class="page">
<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="statusLabel(s)" :value="s" />
</el-select>
<div class="spacer" />
<el-button type="primary" v-if="canEdit" @click="showForm = true">新增受试者</el-button>
<div class="page-container">
<div class="page-header">
<div class="header-info">
<h1 class="page-title">受试者管理</h1>
<p class="page-subtitle">查看与维护当前项目的所有受试者信息</p>
</div>
<div class="header-actions">
<el-button type="primary" v-if="canEdit" @click="showForm = true">
<el-icon><Plus /></el-icon> 新增受试者
</el-button>
</div>
</div>
<el-card class="filter-card">
<div class="filter-layout">
<div class="filter-items">
<div class="filter-item">
<span class="filter-label">所属中心</span>
<el-select
v-model="filters.site_id"
placeholder="全部中心"
clearable
filterable
class="filter-select"
@change="loadSubjects"
>
<el-option v-for="s in sites" :key="s.id" :label="s.name || s.id" :value="s.id" />
</el-select>
</div>
<div class="filter-item">
<span class="filter-label">当前状态</span>
<el-select
v-model="filters.status"
placeholder="全部状态"
clearable
class="filter-select"
@change="loadSubjects"
>
<el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
</el-select>
</div>
</div>
<div class="filter-reset">
<el-button link @click="resetFilters">重置筛选</el-button>
</div>
</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="中心">
<el-card class="table-card" v-loading="loading">
<el-table :data="subjects" style="width: 100%" @row-click="goDetail" class="ctms-table">
<el-table-column prop="subject_no" label="受试者编号" min-width="120">
<template #default="scope">
<span class="subject-no">{{ scope.row.subject_no }}</span>
</template>
</el-table-column>
<el-table-column prop="site_id" label="中心名称" min-width="180">
<template #default="scope">
{{ siteName(scope.row.site_id) }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="120">
<template #default="scope">
<el-tag>{{ statusLabel(scope.row.status) }}</el-tag>
<el-tag :type="statusTagType(scope.row.status)" size="small">
{{ statusLabel(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="screening_date" label="筛选日期" width="140" />
<el-table-column prop="enrollment_date" label="入组日期" width="140" />
<el-table-column label="操作" width="100" fixed="right">
<template #default>
<el-button link type="primary">详细资料</el-button>
</template>
</el-table-column>
<template #empty>
<div class="empty-state">
<el-icon class="empty-icon"><Document /></el-icon>
<p>暂无符合条件的受试者</p>
</div>
</template>
</el-table>
<el-pagination
class="pagination"
layout="prev, pager, next"
:page-size="pageSize"
:current-page="page"
:total="total"
@current-change="onPageChange"
/>
<div class="pagination-container">
<el-pagination
background
layout="total, prev, pager, next, sizes"
:page-size="pageSize"
:current-page="page"
:total="total"
@current-change="onPageChange"
/>
</div>
</el-card>
<SubjectForm v-model="showForm" :sites="sites" @success="loadSubjects" />
@@ -54,6 +102,7 @@
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Plus, Document } from "@element-plus/icons-vue";
import { fetchSubjects } from "../api/subjects";
import { fetchSites } from "../api/sites";
import { useStudyStore } from "../store/study";
@@ -116,6 +165,11 @@ const loadSubjects = async () => {
}
};
const resetFilters = () => {
filters.value = { site_id: "", status: "" };
loadSubjects();
};
const onPageChange = (p: number) => {
page.value = p;
loadSubjects();
@@ -151,26 +205,102 @@ const statusLabel = (v: string) =>
DROPPED: "已脱落",
}[v] || v);
const statusTagType = (v: string) => {
const map: Record<string, string> = {
SCREENING: "info",
ENROLLED: "warning",
COMPLETED: "success",
DROPPED: "danger",
};
return map[v] || "info";
};
const siteName = (id: string) => siteMap.value[id] || id || "-";
</script>
<style scoped>
.page {
padding: 16px;
}
.filters {
.page-container {
display: flex;
gap: 8px;
flex-direction: column;
gap: var(--ctms-spacing-lg);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.spacer {
.page-title {
font-size: 24px;
font-weight: 600;
color: var(--ctms-text-main);
margin: 0;
}
.page-subtitle {
font-size: 14px;
color: var(--ctms-text-secondary);
margin-top: 4px;
}
.filter-card {
margin-bottom: 0;
}
.filter-layout {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.filter-items {
display: flex;
gap: 24px;
}
.filter-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-label {
font-size: 13px;
font-weight: 500;
color: var(--ctms-text-regular);
}
.filter-select {
width: 200px;
}
.table-card {
flex: 1;
}
.pagination {
margin-top: 12px;
text-align: right;
.subject-no {
font-weight: 600;
color: var(--ctms-primary);
}
.mb-12 {
.pagination-container {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
.empty-state {
padding: 40px 0;
color: var(--ctms-text-disabled);
}
.empty-icon {
font-size: 48px;
margin-bottom: 12px;
}
:deep(.el-table__row) {
cursor: pointer;
}
</style>