UI界面模拟shadcn admin效果

This commit is contained in:
Cheng Zhou
2025-12-25 15:47:47 +08:00
parent 148fa6ad9a
commit a1a4964cd2
25 changed files with 1061 additions and 636 deletions
+33 -33
View File
@@ -1,21 +1,38 @@
<template>
<div class="page">
<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="statusLabel(s)" :value="s" />
</el-select>
<el-select v-model="filters.seriousness" placeholder="严重性" clearable @change="loadAes">
<el-option v-for="s in seriousnessOptions" :key="s" :label="seriousnessLabel(s)" :value="s" />
</el-select>
<el-switch v-model="filters.overdue" active-text="仅逾期" @change="loadAes" />
<div class="spacer" />
<div class="ctms-page">
<div class="ctms-page-header">
<div>
<h1 class="ctms-page-title">不良事件</h1>
</div>
<div class="ctms-page-actions">
<el-button type="primary" v-if="canCreate" @click="showForm = true">新建不良事件</el-button>
</div>
</div>
<el-card class="ctms-filter-card">
<div class="ctms-filter-row">
<div class="ctms-filter-item">
<span class="ctms-filter-label">状态</span>
<el-select v-model="filters.status" placeholder="全部" clearable @change="loadAes">
<el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
</el-select>
</div>
<div class="ctms-filter-item">
<span class="ctms-filter-label">严重性</span>
<el-select v-model="filters.seriousness" placeholder="全部" clearable @change="loadAes">
<el-option v-for="s in seriousnessOptions" :key="s" :label="seriousnessLabel(s)" :value="s" />
</el-select>
</div>
<div class="ctms-filter-item">
<span class="ctms-filter-label">仅逾期</span>
<el-switch v-model="filters.overdue" @change="loadAes" />
</div>
<div class="ctms-filter-spacer" />
</div>
</el-card>
<el-card>
<el-table :data="aes" v-loading="loading" style="width: 100%" @row-click="goDetail">
<el-card class="ctms-table-card">
<el-table :data="aes" v-loading="loading" class="ctms-table" style="width: 100%" @row-click="goDetail">
<el-table-column prop="term" label="事件" />
<el-table-column label="受试者" width="200">
<template #default="scope">
@@ -34,12 +51,13 @@
<el-tag :type="scope.row.is_overdue ? 'danger' : 'info'">{{ statusLabel(scope.row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="140">
<el-table-column label="操作" width="120" align="right">
<template #default="scope">
<el-button
v-if="showClose(scope.row)"
type="danger"
size="small"
link
@click.stop="onClose(scope.row)"
>
关闭 AE
@@ -48,7 +66,7 @@
</el-table-column>
</el-table>
<el-pagination
class="pagination"
class="ctms-pagination"
layout="prev, pager, next"
:page-size="pageSize"
:current-page="page"
@@ -244,22 +262,4 @@ onMounted(async () => {
</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>