|
|
@@ -136,64 +136,97 @@
|
|
|
</el-tooltip>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+
|
|
|
+ <!-- 空状态插槽 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="empty-container">
|
|
|
+ <el-empty :image-size="120" description="暂无学生数据">
|
|
|
+ <template #image>
|
|
|
+ <el-icon size="120" color="#c0c4cc">
|
|
|
+ <Picture />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ <template #description>
|
|
|
+ <span class="empty-description">暂无学生数据</span>
|
|
|
+ </template>
|
|
|
+ </el-empty>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
<!-- 卡片视图 -->
|
|
|
<div v-else class="card-view-container">
|
|
|
- <div class="card-scroll-container">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col v-for="item in studentList" :key="item.id" :span="6" class="mb-6">
|
|
|
- <el-card shadow="hover" class="student-card" @dblclick="handleDetail(item)">
|
|
|
- <div class="card-header">
|
|
|
- <div class="student-photo">
|
|
|
- <el-avatar
|
|
|
- :size="100"
|
|
|
- :src="item.photoUrl"
|
|
|
- :icon="!item.photoUrl ? (item.gender === '0' ? 'Male' : 'Female') : undefined"
|
|
|
- :class="{
|
|
|
- 'male-placeholder': !item.photoUrl && item.gender === '0',
|
|
|
- 'female-placeholder': !item.photoUrl && item.gender === '1'
|
|
|
- }"
|
|
|
- >
|
|
|
- <template v-if="!item.photoUrl">
|
|
|
- <div
|
|
|
- class="no-photo-placeholder"
|
|
|
- :class="{ 'male-placeholder': item.gender === '0', 'female-placeholder': item.gender === '1' }"
|
|
|
- >
|
|
|
- <el-icon size="96" small :color="item.gender === '0' ? '#409eff' : '#e91e63'">
|
|
|
- <Male v-if="item.gender === '0'" />
|
|
|
- <Female v-else />
|
|
|
- </el-icon>
|
|
|
- <span class="no-photo-text">{{ item.gender === '0' ? '男生' : '女生' }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-avatar>
|
|
|
+ <div v-loading="loading" class="card-scroll-container">
|
|
|
+ <!-- 有数据时显示卡片列表 -->
|
|
|
+ <div v-if="studentList && studentList.length > 0">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col v-for="item in studentList" :key="item.id" :span="6" class="mb-6">
|
|
|
+ <el-card shadow="hover" class="student-card" @dblclick="handleDetail(item)">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="student-photo">
|
|
|
+ <el-avatar
|
|
|
+ :size="100"
|
|
|
+ :src="item.photoUrl"
|
|
|
+ :icon="!item.photoUrl ? (item.gender === '0' ? 'Male' : 'Female') : undefined"
|
|
|
+ :class="{
|
|
|
+ 'male-placeholder': !item.photoUrl && item.gender === '0',
|
|
|
+ 'female-placeholder': !item.photoUrl && item.gender === '1'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template v-if="!item.photoUrl">
|
|
|
+ <div
|
|
|
+ class="no-photo-placeholder"
|
|
|
+ :class="{ 'male-placeholder': item.gender === '0', 'female-placeholder': item.gender === '1' }"
|
|
|
+ >
|
|
|
+ <el-icon size="96" small :color="item.gender === '0' ? '#409eff' : '#e91e63'">
|
|
|
+ <Male v-if="item.gender === '0'" />
|
|
|
+ <Female v-else />
|
|
|
+ </el-icon>
|
|
|
+ <span class="no-photo-text">{{ item.gender === '0' ? '男生' : '女生' }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-avatar>
|
|
|
+ </div>
|
|
|
+ <div class="student-info">
|
|
|
+ <h3 class="student-name">{{ item.name }}</h3>
|
|
|
+ <p class="student-no">{{ item.studentNo }}</p>
|
|
|
+ <el-tag :type="getStatusType(item.studentStatus)" size="small">
|
|
|
+ {{ getStudentStatusLabel(item.studentStatus) }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="student-info">
|
|
|
- <h3 class="student-name">{{ item.name }}</h3>
|
|
|
- <p class="student-no">{{ item.studentNo }}</p>
|
|
|
- <el-tag :type="getStatusType(item.studentStatus)" size="small">
|
|
|
- {{ getStudentStatusLabel(item.studentStatus) }}
|
|
|
- </el-tag>
|
|
|
+ <div class="card-content">
|
|
|
+ <p><strong>院系：</strong>{{ item.collegeName || '未设置' }}</p>
|
|
|
+ <p><strong>专业：</strong>{{ item.majorName || '未设置' }}</p>
|
|
|
+ <p><strong>班级：</strong>{{ item.className || '未设置' }}</p>
|
|
|
+ <p><strong>手机：</strong>{{ item.phone || '未设置' }}</p>
|
|
|
+ <p><strong>入学年份：</strong>{{ item.enrollmentYear || '未设置' }}</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="card-content">
|
|
|
- <p><strong>院系：</strong>{{ item.collegeName || '未设置' }}</p>
|
|
|
- <p><strong>专业：</strong>{{ item.majorName || '未设置' }}</p>
|
|
|
- <p><strong>班级：</strong>{{ item.className || '未设置' }}</p>
|
|
|
- <p><strong>手机：</strong>{{ item.phone || '未设置' }}</p>
|
|
|
- <p><strong>入学年份：</strong>{{ item.enrollmentYear || '未设置' }}</p>
|
|
|
- </div>
|
|
|
- <div class="card-hint">
|
|
|
- <el-text type="primary" size="small">
|
|
|
- <el-icon class="mr-1"><View /></el-icon>
|
|
|
- 双击查看详情
|
|
|
- </el-text>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="card-hint">
|
|
|
+ <el-text type="primary" size="small">
|
|
|
+ <el-icon class="mr-1"><View /></el-icon>
|
|
|
+ 双击查看详情
|
|
|
+ </el-text>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 无数据时显示空状态 -->
|
|
|
+ <div v-else-if="!loading" class="card-empty-container">
|
|
|
+ <el-empty :image-size="160" description="暂无学生数据">
|
|
|
+ <template #image>
|
|
|
+ <el-icon size="160" color="#c0c4cc">
|
|
|
+ <Picture />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ <template #description>
|
|
|
+ <span class="empty-description">暂无学生数据</span>
|
|
|
+ </template>
|
|
|
+ </el-empty>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 卡片视图分页 -->
|
|
|
@@ -1229,6 +1262,48 @@ onMounted(() => {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
+/* 空状态容器样式 */
|
|
|
+.empty-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 400px;
|
|
|
+ padding: 40px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-empty-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 400px;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 40px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-description {
|
|
|
+ color: #909399;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-empty-container .empty-description {
|
|
|
+ color: #909399;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空状态图标和文字的间距优化 */
|
|
|
+.empty-container :deep(.el-empty__description),
|
|
|
+.card-empty-container :deep(.el-empty__description) {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-container :deep(.el-empty__image),
|
|
|
+.card-empty-container :deep(.el-empty__image) {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
/* 响应式布局 */
|
|
|
@media (max-width: 1200px) {
|
|
|
.left-panel {
|
|
|
@@ -1293,5 +1368,22 @@ onMounted(() => {
|
|
|
.card-content {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
+ /* 移动端空状态样式调整 */
|
|
|
+ .empty-container,
|
|
|
+ .card-empty-container {
|
|
|
+ min-height: 300px;
|
|
|
+ padding: 20px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-description,
|
|
|
+ .card-empty-container .empty-description {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-container :deep(.el-empty__image) .el-icon,
|
|
|
+ .card-empty-container :deep(.el-empty__image) .el-icon {
|
|
|
+ font-size: 100px !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
