GoCo/OL-LearnPlatform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善添加，编辑证书和相关页面，功能

Browse Source
This commit is contained in:
QDKF 2025-09-02 18:39:38 +08:00
parent adeaf086c4
commit f888b0b458
1 changed files with 179 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/views/teacher/certificate/CertificateManagement.vue
View File

@ -20,38 +20,39 @@
</div>
</div>
<!-- 证书网格展示 -->
<div class="certificate-grid">
<div v-for="certificate in filteredCertificates" :key="certificate.id" class="certificate-card" @click="viewCertificateDetail(certificate)">
<div class="certificate-thumbnail">
<img :src="certificate.thumbnail" :alt="certificate.name" class="certificate-image" />
<!-- 证书网格展示 -->
<div class="certificate-grid">
<div v-for="certificate in filteredCertificates" :key="certificate.id" class="certificate-card"
@click="viewCertificateDetail(certificate)">
<div class="certificate-thumbnail">
<img :src="certificate.thumbnail" :alt="certificate.name" class="certificate-image" />
</div>
<div class="certificate-info">
<div class="certificate-name">{{ certificate.name }}</div>
<div class="certificate-category">证书分类: {{ certificate.category }}</div>
</div>
<div class="file-menu">
<button class="file-menu-btn" @click.stop="toggleFileMenu(certificate.id)">
<img src="/images/teacher/more.png" alt="更多操作" class="more-icon" />
</button>
<div v-if="activeFileMenu === certificate.id" class="file-menu-dropdown">
<div class="menu-item" @click.stop="downloadCertificate(certificate)">
<img src="/images/teacher/download.png" alt="下载" class="menu-icon" />
<span>下载</span>
</div>
<div class="menu-item" @click.stop="editCertificate(certificate)">
<img src="/images/teacher/edit.png" alt="编辑" class="menu-icon" />
<span>编辑</span>
</div>
<div class="menu-item" @click.stop="deleteCertificate(certificate)">
<img src="/images/teacher/delete.png" alt="删除" class="menu-icon" />
<span>删除</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="certificate-info">
<div class="certificate-name">{{ certificate.name }}</div>
<div class="certificate-category">证书分类: {{ certificate.category }}</div>
</div>
<div class="file-menu">
<button class="file-menu-btn" @click.stop="toggleFileMenu(certificate.id)">
<img src="/images/teacher/more.png" alt="更多操作" class="more-icon" />
</button>
<div v-if="activeFileMenu === certificate.id" class="file-menu-dropdown">
<div class="menu-item" @click.stop="downloadCertificate(certificate)">
<img src="/images/teacher/download.png" alt="下载" class="menu-icon" />
<span>下载</span>
</div>
<div class="menu-item" @click.stop="editCertificate(certificate)">
<img src="/images/teacher/edit.png" alt="编辑" class="menu-icon" />
<span>编辑</span>
</div>
<div class="menu-item" @click.stop="deleteCertificate(certificate)">
<img src="/images/teacher/delete.png" alt="删除" class="menu-icon" />
<span>删除</span>
</div>
</div>
</div>
</div>
</div>
<!-- 添加证书模态框 -->
<div v-if="showAddModal" class="modal-overlay" @click="closeAddModal">
@ -65,12 +66,45 @@
</div>
</div>
</div>
<!-- 删除确认对话框 -->
<n-modal v-model:show="showDeleteModal" :mask-closable="false" preset="dialog" title="删除确认" positive-text="确定删除"
negative-text="取消" @positive-click="confirmDelete" @negative-click="cancelDelete">
<div class="delete-confirm-content">
<div class="delete-icon">
<n-icon size="48" color="#ff4d4f">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
</n-icon>
</div>
<div class="delete-message">
<p class="message-title">确定要删除证书吗？</p>
<p class="message-content">删除"{{ certificateToDelete?.name }}"后无法恢复，请谨慎操作。</p>
</div>
<div class="delete-warning">
<n-alert type="warning" :show-icon="false">
<template #icon>
<n-icon size="16" color="#faad14">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</svg>
</n-icon>
</template>
<span class="warning-text">此操作不可逆，请确认后再执行。</span>
</n-alert>
</div>
</div>
</n-modal>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMessage } from 'naive-ui'
import { useMessage, NModal, NIcon, NAlert } from 'naive-ui'
import { useRouter, useRoute } from 'vue-router'
const message = useMessage()
@ -162,18 +196,13 @@ const filteredCertificates = computed(() => {
return filtered
})
// 方法
const addCertificate = () => {
message.info('添加证书功能正在开发中...')
// 从当前路径中提取课程ID
// const currentPath = route.path;
// const courseIdMatch = currentPath.match(/\/course-editor\/(\d+)/);
// const courseId = courseIdMatch ? courseIdMatch[1] : '1';
// 跳转到添加证书页面
// const targetPath = `/teacher/course-editor/${courseId}/certificate/add`;
// router.push(targetPath);
const currentPath = route.path;
const courseIdMatch = currentPath.match(/\/course-editor\/(\d+)/);
const courseId = courseIdMatch ? courseIdMatch[1] : '1';
const targetPath = `/teacher/course-editor/${courseId}/certificate/add`;
router.push(targetPath);
}
const closeAddModal = () => {
@ -217,14 +246,33 @@ const editCertificate = (certificate: any) => {
}
const deleteCertificate = (certificate: any) => {
if (confirm(`确定要删除证书 "${certificate.name}" 吗？`)) {
const index = certificates.value.findIndex((c: any) => c.id === certificate.id)
// 设置要删除的证书信息
certificateToDelete.value = certificate
showDeleteModal.value = true
activeFileMenu.value = null
}
// 删除确认对话框状态
const showDeleteModal = ref(false)
const certificateToDelete = ref<any>(null)
// 确认删除
const confirmDelete = () => {
if (certificateToDelete.value) {
const index = certificates.value.findIndex((c: any) => c.id === certificateToDelete.value.id)
if (index > -1) {
certificates.value.splice(index, 1)
message.success('删除成功')
}
certificateToDelete.value = null
}
activeFileMenu.value = null
showDeleteModal.value = false
}
// 取消删除
const cancelDelete = () => {
certificateToDelete.value = null
showDeleteModal.value = false
}
const viewCertificateDetail = (certificate: any) => {
@ -235,10 +283,10 @@ const viewCertificateDetail = (certificate: any) => {
const courseIdMatch = currentPath.match(/\/course-editor\/(\d+)/);
const courseId = courseIdMatch ? courseIdMatch[1] : '1';
console.log('提取的课程ID:', courseId);
const targetPath = `/teacher/course-editor/${courseId}/certificate/detail/${certificate.id}`;
console.log('目标路径:', targetPath);
router.push(targetPath);
}
@ -544,6 +592,90 @@ document.addEventListener('click', closeFileMenu)
padding: 20px;
}
/* 删除确认对话框样式 */
.delete-confirm-content {
padding: 20px 0;
text-align: center;
}
.delete-icon {
margin-bottom: 16px;
display: flex;
justify-content: center;
}
.delete-message {
margin-bottom: 20px;
}
.message-title {
font-size: 16px;
font-weight: 500;
color: #333;
margin: 0 0 8px 0;
line-height: 1.5;
}
.message-content {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.5;
}
.delete-warning {
margin-top: 16px;
}
.warning-text {
font-size: 13px;
color: #faad14;
}
/* 自定义naive-ui对话框样式 */
:deep(.n-dialog) {
border-radius: 8px;
}
:deep(.n-dialog__header) {
padding: 20px 24px 0;
border-bottom: none;
}
:deep(.n-dialog__title) {
font-size: 18px;
font-weight: 600;
color: #333;
}
:deep(.n-dialog__content) {
padding: 0 24px 20px;
}
:deep(.n-dialog__action) {
padding: 0 24px 20px;
border-top: 1px solid #f0f0f0;
}
:deep(.n-button--primary-type) {
background-color: #ff4d4f;
border-color: #ff4d4f;
}
:deep(.n-button--primary-type:hover) {
background-color: #ff7875;
border-color: #ff7875;
}
:deep(.n-button--default-type) {
border-color: #d9d9d9;
color: #666;
}
:deep(.n-button--default-type:hover) {
border-color: #40a9ff;
color: #40a9ff;
}
/* 响应式设计 */
@media (max-width: 1400px) {
.certificate-grid {