UI界面模拟shadcn admin效果
This commit is contained in:
+33
-33
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user