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/components/Layout.vue
+264 -65
View File
@@ -1,52 +1,119 @@
<template>
<el-container class="layout">
<el-header class="header">
<div class="logo">CTMS</div>
<div class="current-study" v-if="study.currentStudy">
<el-tag type="success" size="small">{{ study.currentStudy.name }}</el-tag>
</div>
<div class="user-info">
<StudySelector />
<span>{{ auth.user?.username }}</span>
<el-tag size="small" class="role">{{ auth.user?.role }}</el-tag>
<el-button size="small" type="danger" @click="onLogout">退出登录</el-button>
</div>
</el-header>
<el-container>
<el-aside width="220px" class="aside" v-if="isAdmin || study.currentStudy">
<el-menu router :default-active="$route.path">
<el-menu-item v-if="!isAdmin" index="/workbench">我的工作台</el-menu-item>
<template v-if="isAdmin">
<el-menu-item index="/admin/users">账号治理</el-menu-item>
<el-menu-item index="/admin/projects">项目治理</el-menu-item>
<el-menu-item index="/studies">项目列表（PM 视角）</el-menu-item>
</template>
<template v-if="study.currentStudy">
<el-menu-item index="/study/home">项目概览</el-menu-item>
<el-menu-item index="/study/milestones">伦理与启动管理</el-menu-item>
<el-menu-item index="/study/subjects">受试者</el-menu-item>
<el-menu-item index="/study/aes">不良事件</el-menu-item>
<el-menu-item index="/study/issues">风险与问题</el-menu-item>
<el-menu-item index="/study/data-queries">数据问题</el-menu-item>
<el-menu-item index="/study/verifications">数据核查</el-menu-item>
<el-sub-menu index="imp">
<template #title>药品</template>
<el-menu-item index="/study/imp/inventory">库存</el-menu-item>
<el-menu-item index="/study/imp/products">产品</el-menu-item>
<el-menu-item index="/study/imp/batches">批次</el-menu-item>
<el-menu-item index="/study/imp/transactions">交易台账</el-menu-item>
</el-sub-menu>
<el-menu-item index="/study/finance">费用</el-menu-item>
<el-menu-item index="/study/faq">知识库</el-menu-item>
<el-menu-item v-if="isAdmin || isPm" index="/study/audit-logs">审计日志</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-main>
<router-view />
</el-main>
<el-container class="layout-container">
<el-aside width="240px" class="layout-aside" v-if="isAdmin || study.currentStudy">
<div class="aside-logo">
<div class="logo-icon"></div>
<span class="logo-text">CTMS</span>
</div>
<el-menu
router
:default-active="$route.path"
class="aside-menu"
>
<el-menu-item v-if="!isAdmin" index="/workbench">
<el-icon><Monitor /></el-icon>
<span>我的工作台</span>
</el-menu-item>
<template v-if="isAdmin">
<div class="menu-divider">管理后台</div>
<el-menu-item index="/admin/users">
<el-icon><User /></el-icon>
<span>账号管理</span>
</el-menu-item>
<el-menu-item index="/admin/projects">
<el-icon><Suitcase /></el-icon>
<span>项目管理</span>
</el-menu-item>
<el-menu-item index="/studies">
<el-icon><List /></el-icon>
<span>项目列表</span>
</el-menu-item>
</template>
<template v-if="study.currentStudy">
<div class="menu-divider">当前项目</div>
<el-menu-item index="/study/home">
<el-icon><House /></el-icon>
<span>项目概览</span>
</el-menu-item>
<el-menu-item index="/study/milestones">
<el-icon><Timer /></el-icon>
<span>里程碑管理</span>
</el-menu-item>
<el-menu-item index="/study/subjects">
<el-icon><UserFilled /></el-icon>
<span>受试者</span>
</el-menu-item>
<el-menu-item index="/study/aes">
<el-icon><Warning /></el-icon>
<span>不良事件</span>
</el-menu-item>
<el-menu-item index="/study/issues">
<el-icon><InfoFilled /></el-icon>
<span>风险与问题</span>
</el-menu-item>
<el-menu-item index="/study/data-queries">
<el-icon><QuestionFilled /></el-icon>
<span>数据问题</span>
</el-menu-item>
<el-menu-item index="/study/verifications">
<el-icon><Checked /></el-icon>
<span>数据核查</span>
</el-menu-item>
<el-sub-menu index="imp">
<template #title>
<el-icon><Management /></el-icon>
<span>药品管理</span>
</template>
<el-menu-item index="/study/imp/inventory">库存</el-menu-item>
<el-menu-item index="/study/imp/products">产品</el-menu-item>
<el-menu-item index="/study/imp/batches">批次</el-menu-item>
<el-menu-item index="/study/imp/transactions">交易台账</el-menu-item>
</el-sub-menu>
<el-menu-item index="/study/finance">
<el-icon><Money /></el-icon>
<span>费用治理</span>
</el-menu-item>
<el-menu-item index="/study/faq">
<el-icon><Collection /></el-icon>
<span>知识库</span>
</el-menu-item>
<el-menu-item v-if="isAdmin || isPm" index="/study/audit-logs">
<el-icon><Memo /></el-icon>
<span>审计日志</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container class="main-container">
<el-header class="layout-header">
<div class="header-left">
<div class="breadcrumb-study" v-if="study.currentStudy">
<el-tag effect="plain" class="study-tag">{{ study.currentStudy.name }}</el-tag>
</div>
</div>
<div class="header-right">
<StudySelector />
<div class="user-profile">
<div class="user-avatar">{{ auth.user?.username?.charAt(0).toUpperCase() }}</div>
<div class="user-details">
<span class="username">{{ auth.user?.username }}</span>
<span class="user-role">{{ auth.user?.role }}</span>
</div>
<el-button link type="danger" @click="onLogout" class="logout-btn">退出</el-button>
</div>
</div>
</el-header>
<el-main class="layout-main">
<div class="content-wrapper">
<router-view />
</div>
</el-main>
</el-container>
</el-container>
</el-container>
</template>
<script setup lang="ts">
@@ -55,6 +122,11 @@ import { useRouter } from "vue-router";
import { useAuthStore } from "../store/auth";
import { useStudyStore } from "../store/study";
import StudySelector from "./StudySelector.vue";
import {
Monitor, User, Suitcase, List, House, Timer, UserFilled,
Warning, InfoFilled, QuestionFilled, Checked, Management,
Money, Collection, Memo
} from "@element-plus/icons-vue";
const auth = useAuthStore();
const study = useStudyStore();
@@ -70,32 +142,159 @@ const onLogout = () => {
</script>
<style scoped>
.layout {
min-height: 100vh;
.layout-container {
height: 100vh;
background-color: var(--ctms-bg-base);
}
.header {
.layout-aside {
background-color: #001529;
display: flex;
flex-direction: column;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.aside-logo {
height: 64px;
display: flex;
align-items: center;
padding: 0 24px;
background-color: #002140;
}
.logo-icon {
width: 24px;
height: 24px;
background-color: var(--ctms-primary);
border-radius: 4px;
margin-right: 12px;
}
.logo-text {
color: #fff;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.aside-menu {
border-right: none;
background-color: transparent;
flex: 1;
padding: 16px 0;
overflow-y: auto;
}
.menu-divider {
padding: 16px 24px 8px;
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 1px;
}
:deep(.el-menu-item) {
height: 48px;
line-height: 48px;
margin: 4px 12px;
border-radius: var(--ctms-radius);
color: rgba(255, 255, 255, 0.65) !important;
}
:deep(.el-menu-item:hover) {
color: #fff !important;
background-color: transparent !important;
}
:deep(.el-menu-item.is-active) {
color: #fff !important;
background-color: var(--ctms-primary) !important;
}
:deep(.el-sub-menu__title) {
color: rgba(255, 255, 255, 0.65) !important;
margin: 4px 12px;
}
:deep(.el-sub-menu__title:hover) {
color: #fff !important;
background-color: transparent !important;
}
.layout-header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background: #409eff;
color: #fff;
padding: 0 24px;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
height: 64px !important;
z-index: 9;
}
.logo {
font-weight: 600;
font-size: 18px;
}
.user-info {
.header-right {
display: flex;
align-items: center;
gap: 8px;
gap: 24px;
}
.role {
background: #fff;
color: #409eff;
border: none;
.user-profile {
display: flex;
align-items: center;
gap: 12px;
padding-left: 16px;
border-left: 1px solid var(--ctms-border-color);
}
.aside {
border-right: 1px solid #ebeef5;
.user-avatar {
width: 32px;
height: 32px;
background-color: var(--ctms-primary-light);
color: var(--ctms-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.user-details {
display: flex;
flex-direction: column;
}
.username {
font-size: 14px;
font-weight: 500;
color: var(--ctms-text-main);
line-height: 1.2;
}
.user-role {
font-size: 12px;
color: var(--ctms-text-secondary);
}
.logout-btn {
margin-left: 8px;
}
.study-tag {
font-weight: 500;
color: var(--ctms-primary);
border-color: var(--ctms-primary-hover);
background-color: var(--ctms-primary-light);
}
.layout-main {
padding: 0;
overflow-y: auto;
}
.content-wrapper {
padding: var(--ctms-spacing-lg);
min-height: calc(100vh - 64px);
}
</style>
frontend/src/main.ts
+1
View File
@@ -2,6 +2,7 @@ import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "./styles/main.css";
import App from "./App.vue";
import router from "./router";
frontend/src/styles/main.css
+130
View File
@@ -0,0 +1,130 @@
/**
* CTMS 全局样式系统
* 基于 8px 网格系统与医疗专业色板
*/
:root {
/* 品牌色 - 医疗蓝 */
--ctms-primary: #2f54eb;
--ctms-primary-hover: #597ef7;
--ctms-primary-active: #1d39c4;
--ctms-primary-light: #f0f5ff;
/* 语义色 */
--ctms-success: #52c41a;
--ctms-warning: #faad14;
--ctms-danger: #ff4d4f;
--ctms-info: #8c8c8c;
/* 文字颜色 - 高层级到低层级 */
--ctms-text-main: #262626;
--ctms-text-regular: #595959;
--ctms-text-secondary: #8c8c8c;
--ctms-text-disabled: #bfbfbf;
/* 中性色 & 背景 */
--ctms-bg-base: #f0f2f5;
--ctms-bg-card: #ffffff;
--ctms-border-color: #f0f0f0;
--ctms-border-color-hover: #d9d9d9;
/* 间距 - 8px 网格 */
--ctms-spacing-xs: 4px;
--ctms-spacing-sm: 8px;
--ctms-spacing-md: 16px;
--ctms-spacing-lg: 24px;
--ctms-spacing-xl: 32px;
/* 圆角 & 阴影 */
--ctms-radius: 4px;
--ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--ctms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 全局重置 */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--ctms-bg-base);
color: var(--ctms-text-main);
-webkit-font-smoothing: antialiased;
}
/* Element Plus 全局覆盖 */
/* 按钮美化 */
.el-button {
border-radius: var(--ctms-radius);
font-weight: 500;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.el-button--primary {
background-color: var(--ctms-primary);
border-color: var(--ctms-primary);
}
.el-button--primary:hover {
background-color: var(--ctms-primary-hover);
border-color: var(--ctms-primary-hover);
}
/* 卡片美化 */
.el-card {
border: none;
box-shadow: var(--ctms-shadow-sm) !important;
border-radius: var(--ctms-radius);
margin-bottom: var(--ctms-spacing-md);
}
.el-card__header {
padding: var(--ctms-spacing-md) var(--ctms-spacing-lg);
border-bottom: 1px solid var(--ctms-border-color);
font-weight: 600;
color: var(--ctms-text-main);
}
.el-card__body {
padding: var(--ctms-spacing-lg);
}
/* 表格美化 */
.el-table {
color: var(--ctms-text-regular);
}
.el-table th.el-table__cell {
background-color: #fafafa;
color: var(--ctms-text-main);
font-weight: 600;
height: 48px;
}
.el-table td.el-table__cell {
padding: 12px 0; /* 增加行高 */
}
.el-table--enable-row-hover .el-table__row:hover > td.el-table__cell {
background-color: var(--ctms-primary-light);
}
/* 表单美化 */
.el-form-item__label {
font-weight: 500;
color: var(--ctms-text-regular);
}
.el-input__inner {
border-radius: var(--ctms-radius);
}
/* 标签美化 */
.el-tag {
border-radius: 2px;
border: none;
}
.el-tag--info { background-color: #f5f5f5; color: var(--ctms-text-secondary); }
.el-tag--success { background-color: #f6ffed; color: var(--ctms-success); border: 1px solid #b7eb8f; }
.el-tag--warning { background-color: #fffbe6; color: var(--ctms-warning); border: 1px solid #ffe58f; }
.el-tag--danger { background-color: #fff1f0; color: var(--ctms-danger); border: 1px solid #ffa39e; }
frontend/src/views/Login.vue
+142 -21
View File
@@ -1,19 +1,58 @@
<template>
<div class="login-page">
<el-card class="login-card">
<h2 class="title">CTMS 登录</h2>
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px" @keyup.enter.native="onSubmit">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" autocomplete="username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" autocomplete="current-password" show-password />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loading" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</el-card>
<div class="login-container">
<div class="login-content">
<div class="login-brand">
<h1 class="brand-title">CTMS</h1>
<p class="brand-subtitle">临床试验管理系统</p>
</div>
<el-card class="login-card">
<div class="login-header">
<h2 class="form-title">用户登录</h2>
<p class="form-desc">请输入您的账号与密码以访问系统</p>
</div>
<el-form
:model="form"
ref="formRef"
:rules="rules"
label-position="top"
@keyup.enter.native="onSubmit"
>
<el-form-item label="用户名" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
autocomplete="username"
/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
autocomplete="current-password"
show-password
/>
</el-form-item>
<div class="form-footer">
<el-button
type="primary"
:loading="loading"
class="submit-btn"
@click="onSubmit"
>
登 录
</el-button>
</div>
</el-form>
</el-card>
<div class="login-footer">
<p>© 2025 Clinical Trial Management System. All Rights Reserved.</p>
</div>
</div>
</div>
</template>
@@ -56,18 +95,100 @@ const onSubmit = async () => {
</script>
<style scoped>
.login-page {
.login-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f5f7fa;
background: radial-gradient(circle at 50% 50%, #f0f2f5 0%, #e6e9f0 100%);
position: relative;
overflow: hidden;
}
.login-card {
width: 360px;
/* 装饰性背景元素，不使用外部资源 */
.login-container::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
background: var(--ctms-primary);
opacity: 0.03;
border-radius: 50%;
top: -200px;
right: -200px;
}
.title {
.login-content {
width: 400px;
z-index: 1;
}
.login-brand {
text-align: center;
margin-bottom: 16px;
margin-bottom: 40px;
}
.brand-title {
font-size: 36px;
font-weight: 700;
color: var(--ctms-primary);
letter-spacing: 2px;
margin: 0;
}
.brand-subtitle {
font-size: 16px;
color: var(--ctms-text-secondary);
margin-top: 8px;
}
.login-card {
padding: 8px;
}
.login-header {
margin-bottom: 32px;
}
.form-title {
font-size: 20px;
font-weight: 600;
color: var(--ctms-text-main);
margin: 0;
}
.form-desc {
font-size: 14px;
color: var(--ctms-text-secondary);
margin-top: 8px;
}
.submit-btn {
width: 100%;
height: 44px;
font-size: 16px;
margin-top: 16px;
}
.login-footer {
text-align: center;
margin-top: 48px;
}
.login-footer p {
font-size: 12px;
color: var(--ctms-text-disabled);
}
:deep(.el-form-item__label) {
padding-bottom: 4px;
}
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #d9d9d9 inset;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px var(--ctms-primary) inset !important;
}
</style>
frontend/src/views/SubjectDetail.vue
+163 -27
View File
@@ -1,18 +1,31 @@
<template>
<div class="page" v-if="subject">
<el-card class="mb-12">
<h3>受试者 {{ subject.subject_no }}</h3>
<p>中心：{{ siteName(subject.site_id) }}</p>
<p>
状态：
<el-tag :type="stateColor(subject.status)">{{ stateLabel(subject.status) }}</el-tag>
</p>
<div class="actions">
<div class="page-container" v-if="subject">
<!-- 头部信息卡片 -->
<div class="subject-header-card">
<div class="header-main">
<div class="subject-brand">
<div class="brand-avatar">{{ subject.subject_no?.charAt(0) }}</div>
<div class="brand-info">
<h1 class="subject-no">{{ subject.subject_no }}</h1>
<p class="site-info">{{ siteName(subject.site_id) }}</p>
</div>
</div>
<div class="subject-status">
<span class="status-label">当前状态</span>
<el-tag :type="stateColor(subject.status)" effect="dark" class="status-tag">
{{ stateLabel(subject.status) }}
</el-tag>
</div>
</div>
<div class="header-actions">
<template v-for="action in availableActions" :key="action.key">
<PermissionAction :action="permissionMap[action.key]">
<el-button
size="small"
:type="action.danger ? 'danger' : 'primary'"
:plain="!action.primary"
size="default"
class="action-btn"
@click="onAction(action)"
>
{{ action.label }}
@@ -20,12 +33,24 @@
</PermissionAction>
</template>
</div>
</el-card>
</div>
<VisitTable :visits="visits" :subject-id="subject.id" :can-edit="canVisitEdit" :on-refresh="loadVisits" />
<!-- 访视记录区块 -->
<div class="info-section">
<div class="section-header">
<div class="section-title">
<el-icon><Calendar /></el-icon>
<span>访视记录</span>
</div>
</div>
<div class="section-body">
<VisitTable :visits="visits" :subject-id="subject.id" :can-edit="canVisitEdit" :on-refresh="loadVisits" />
</div>
</div>
</div>
<div v-else class="page">
<el-skeleton rows="3" animated />
<div v-else class="loading-state">
<el-skeleton :rows="5" animated />
</div>
</template>
@@ -33,6 +58,7 @@
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import { fetchSubjects, updateSubject } from "../api/subjects";
import { fetchVisits } from "../api/visits";
import { fetchSites } from "../api/sites";
@@ -41,7 +67,7 @@ import { useAuthStore } from "../store/auth";
import PermissionAction from "../components/PermissionAction.vue";
import { usePermission } from "../utils/permission";
import VisitTable from "../components/VisitTable.vue";
import { getAvailableActions, getStateColor, getStateLabel, subjectMachine } from "../state-machine";
import { getAvailableActions, subjectMachine } from "../state-machine";
import type { ActionConfig } from "../state-machine";
import { statusDict, getDictLabel, getDictColor } from "../dictionaries";
import { evaluateAction } from "../guards/actionGuard";
@@ -62,7 +88,16 @@ const permissionMap: Record<string, string> = {
complete: "subject.complete",
drop: "subject.drop",
};
const availableActions = computed(() => getAvailableActions(subjectMachine, subject.value?.status));
// 增加 primary 属性判断以便视觉区分
const availableActions = computed(() => {
const actions = getAvailableActions(subjectMachine, subject.value?.status);
return actions.map((a: any) => ({
...a,
primary: a.key === 'enroll' || a.key === 'complete'
}));
});
const stateLabel = (v?: string | null) => getDictLabel(statusDict, v || "");
const stateColor = (v?: string | null) => getDictColor(statusDict, v || "") || "info";
@@ -71,7 +106,8 @@ const loadSubject = async () => {
try {
const subjectId = route.params.subjectId as string;
const { data } = await fetchSubjects(study.currentStudy.id, { skip: 0, limit: 1000 });
const list = data.items || data || [];
// 兼容處理 data 結構，解決類型檢查問題
const list = (data as any).items || (Array.isArray(data) ? data : []);
subject.value = list.find((s: any) => s.id === subjectId) || null;
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || "受试者加载失败");
@@ -82,7 +118,7 @@ const loadSites = async () => {
if (!study.currentStudy) return;
try {
const { data } = await fetchSites(study.currentStudy.id, { limit: 500 });
sites.value = (data as any).items || data || [];
sites.value = (data as any).items || (Array.isArray(data) ? data : []);
} catch {
sites.value = [];
}
@@ -98,7 +134,7 @@ 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;
visits.value = (data as any).items || (Array.isArray(data) ? data : []);
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || "访视加载失败");
}
@@ -168,15 +204,115 @@ onMounted(async () => {
</script>
<style scoped>
.page {
padding: 16px;
}
.actions {
.page-container {
display: flex;
gap: 8px;
margin-top: 8px;
flex-direction: column;
gap: var(--ctms-spacing-lg);
}
.mb-12 {
margin-bottom: 12px;
.subject-header-card {
background-color: #fff;
border-radius: var(--ctms-radius);
padding: 24px;
box-shadow: var(--ctms-shadow-sm);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header-main {
display: flex;
gap: 40px;
}
.subject-brand {
display: flex;
align-items: center;
gap: 16px;
}
.brand-avatar {
width: 56px;
height: 56px;
background-color: var(--ctms-primary-light);
color: var(--ctms-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
}
.subject-no {
font-size: 24px;
font-weight: 600;
color: var(--ctms-text-main);
margin: 0;
}
.site-info {
font-size: 14px;
color: var(--ctms-text-secondary);
margin-top: 4px;
}
.subject-status {
display: flex;
flex-direction: column;
gap: 8px;
}
.status-label {
font-size: 12px;
color: var(--ctms-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-tag {
font-weight: 600;
padding: 0 12px;
}
.header-actions {
display: flex;
gap: 12px;
}
.action-btn {
min-width: 88px;
}
.info-section {
background-color: #fff;
border-radius: var(--ctms-radius);
box-shadow: var(--ctms-shadow-sm);
overflow: hidden;
}
.section-header {
padding: 16px 24px;
border-bottom: 1px solid var(--ctms-border-color);
background-color: #fafafa;
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--ctms-text-main);
font-size: 16px;
}
.section-body {
padding: 24px;
}
.loading-state {
padding: 40px;
background-color: #fff;
border-radius: var(--ctms-radius);
}
</style>
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>