Compare commits
No commits in common. '16b0f84bbfd660642ff7012bab2b6172bf1d7cf9' and '4c838107c305b56f9adb349231ab2da76ae08164' have entirely different histories.
16b0f84bbf
...
4c838107c3
7 changed files with 224 additions and 470 deletions
@ -1,276 +0,0 @@ |
|||||||
<script setup> |
|
||||||
// import router from '@/router' |
|
||||||
import { ref } from 'vue' |
|
||||||
|
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus' |
|
||||||
import { useRouter } from 'vue-router' |
|
||||||
import useUserStore from '@/store/modules/user' |
|
||||||
import { onMounted } from 'vue' |
|
||||||
//导入接口 |
|
||||||
import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService' |
|
||||||
const total = ref(0) |
|
||||||
const userStore = useUserStore() |
|
||||||
const recordList = ref([]) |
|
||||||
const selectedIds = ref([]) |
|
||||||
const loading = ref(false) |
|
||||||
const showCheckbox = ref(false) |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
userStore.getUserInfo() |
|
||||||
}) |
|
||||||
const params = ref({ |
|
||||||
// pagesize: '10', |
|
||||||
// pagenum: '1', |
|
||||||
userId: userStore.data.id, |
|
||||||
}) |
|
||||||
console.log(userStore.data.id) |
|
||||||
//获取浏览记录列表 |
|
||||||
const getrecordList = async () => { |
|
||||||
loading.value = true |
|
||||||
// const res = await getRecordListService(params.value) |
|
||||||
const res = await LearningRecordsControllerService.courseLearningRecords( |
|
||||||
params.value.userId, |
|
||||||
params.value.pagenum, |
|
||||||
params.value.pagesize, |
|
||||||
) |
|
||||||
console.log(res) |
|
||||||
recordList.value = res.data.records |
|
||||||
//获取总的浏览记录 |
|
||||||
total.value = res.data.total |
|
||||||
loading.value = false |
|
||||||
} |
|
||||||
getrecordList() |
|
||||||
//处理分页逻辑 |
|
||||||
const onSizeChange = (size) => { |
|
||||||
// console.log('当前每页条数', size) |
|
||||||
//只要是每页条数变化了，那么原来正在访问的当前页面就没有意义了，数据已经不在原来的页面 |
|
||||||
//重新从第一页渲染 |
|
||||||
params.value.pagenum = 1 |
|
||||||
params.value.pagesize = size |
|
||||||
//基于最新的当前页和每页条数渲染数据 |
|
||||||
getrecordList() |
|
||||||
} |
|
||||||
const onCurrentChange = (page) => { |
|
||||||
recordList.value.pagenum = page |
|
||||||
getrecordList() |
|
||||||
} |
|
||||||
|
|
||||||
//删除浏览记录逻辑 |
|
||||||
const onDeleteRecord = async (ids) => { |
|
||||||
await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', { |
|
||||||
type: 'warning', |
|
||||||
confirmButtonText: '确认', |
|
||||||
cancelButtonText: '取消', |
|
||||||
}) |
|
||||||
//await DelRecordService(ids) |
|
||||||
console.log('hello') |
|
||||||
|
|
||||||
await LearningRecordsControllerService.deleteCourseRecords(ids) |
|
||||||
|
|
||||||
// console.log(ids) |
|
||||||
ElMessage({ type: 'success', message: '删除成功' }) |
|
||||||
getrecordList() |
|
||||||
} |
|
||||||
//多选框的显示隐藏 |
|
||||||
const toggleCheckbox = () => { |
|
||||||
showCheckbox.value = !showCheckbox.value |
|
||||||
if (showCheckbox.value) { |
|
||||||
showCheckbox.value = [] |
|
||||||
} |
|
||||||
} |
|
||||||
//批量删除 |
|
||||||
//点击复选框时的 change 事件来调用 toggleSelection 方法， |
|
||||||
//以切换复选框的选中状态，并将对应的 id 添加到 selectedIds 数组中或从中移除。 |
|
||||||
const toggleSelection = (id) => { |
|
||||||
if (selectedIds.value.includes(id)) { |
|
||||||
selectedIds.value = selectedIds.value.filter((recordId) => recordId !== id) |
|
||||||
} else { |
|
||||||
selectedIds.value.push(id) |
|
||||||
} |
|
||||||
console.log(selectedIds) |
|
||||||
} |
|
||||||
//我们首先检查 selectedIds 数组是否为空，如果为空，则弹出提示框提醒用户选择要删除的项。 |
|
||||||
//如果 selectedIds 数组不为空，在删除之前会弹出确认框，再次确认是否要删除选中项。 |
|
||||||
//如果确认删除，则根据 selectedIds 数组来过滤 record 数组，并重置 selectedIds 数组。 |
|
||||||
const deleteSelected = async () => { |
|
||||||
//判断数组是否为空 |
|
||||||
if (selectedIds.value.length === 0) { |
|
||||||
await ElMessageBox.confirm('请选择你要删除的内容', '温馨提示', { |
|
||||||
type: 'warning', |
|
||||||
confirmButtonText: '确认', |
|
||||||
}) |
|
||||||
return |
|
||||||
} |
|
||||||
await ElMessageBox.confirm('你确认删除浏览记录吗？', '温馨提示', { |
|
||||||
type: 'warning', |
|
||||||
confirmButtonText: '确认', |
|
||||||
cancelButtonText: '取消', |
|
||||||
}) |
|
||||||
|
|
||||||
// 调用已封装好的删除接口进行删除操作 |
|
||||||
await LearningRecordsControllerService.deleteCourseRecords(selectedIds.value) |
|
||||||
.then(() => { |
|
||||||
recordList.value = recordList.value.filter( |
|
||||||
(item) => !selectedIds.value.includes(item.id), |
|
||||||
) |
|
||||||
selectedIds.value = [] |
|
||||||
}) |
|
||||||
.catch((error) => { |
|
||||||
console.error('删除失败:', error) |
|
||||||
}) |
|
||||||
ElMessage({ type: 'success', message: '删除成功' }) |
|
||||||
getrecordList() |
|
||||||
} |
|
||||||
//跳转页面 |
|
||||||
const router = useRouter() |
|
||||||
const goToAnotherPage = (address, courseId) => { |
|
||||||
router.push({ |
|
||||||
path: address, |
|
||||||
query: { |
|
||||||
courseId: courseId, |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
// |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="record"> |
|
||||||
<div class="content"> |
|
||||||
<!-- 头部 --> |
|
||||||
<div class="header"> |
|
||||||
<el-button type="primary" plain>浏览记录</el-button> |
|
||||||
<el-button type="danger" plain style="float: right" @click="deleteSelected"> |
|
||||||
批量删除 |
|
||||||
</el-button> |
|
||||||
<el-button type="primary" plain @click="toggleCheckbox" style="float: right"> |
|
||||||
管理 |
|
||||||
</el-button> |
|
||||||
</div> |
|
||||||
<!-- 中间 --> |
|
||||||
<div class="record-list"> |
|
||||||
<ul v-if="recordList.length > 0"> |
|
||||||
<li v-for="record in recordList" :key="record.id" v-loading="loading"> |
|
||||||
<input style="display: flex" type="checkbox" :value="record.id" @change="toggleSelection(record.id)" |
|
||||||
v-if="showCheckbox" /> |
|
||||||
|
|
||||||
<img class="img" :src="record.img" @click="goToAnotherPage(record.address)" style="margin-bottom: 10px" /> |
|
||||||
|
|
||||||
<div style=" |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
flex-grow: 1; |
|
||||||
margin-top: 10px; |
|
||||||
margin-bottom: 10px; |
|
||||||
"> |
|
||||||
<p> |
|
||||||
{{ record.courseName }} |
|
||||||
</p> |
|
||||||
<el-icon @click="onDeleteRecord(record.id)"> |
|
||||||
<Delete /> |
|
||||||
</el-icon> |
|
||||||
</div> |
|
||||||
<div style=" |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
flex-grow: 1; |
|
||||||
margin-top: 10px; |
|
||||||
"> |
|
||||||
<p>{{ record.time }}</p> |
|
||||||
<p>学习人数:{{ record.number }}</p> |
|
||||||
</div> |
|
||||||
<div style="display: flex;margin: 10px 0;"> |
|
||||||
<el-button @click=" |
|
||||||
goToAnotherPage( |
|
||||||
'/myCourseStudyManagement/learningProcess1', |
|
||||||
record.courseId, |
|
||||||
) |
|
||||||
">知识点学习记录</el-button> |
|
||||||
<el-button @click=" |
|
||||||
goToAnotherPage( |
|
||||||
'/myCourseStudyManagement/learningProcess2', |
|
||||||
record.courseId, |
|
||||||
) |
|
||||||
">资源学习记录</el-button> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<el-empty v-else description="暂时没有浏览记录" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 分页 --> |
|
||||||
<div class="example-pagination-block"> |
|
||||||
<el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize" |
|
||||||
:page-sizes="[5, 10, 15, 20]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total" |
|
||||||
@current-change="onCurrentChange" @size-change="onSizeChange" |
|
||||||
style="margin-top: 20px; justify-content: flex-end" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.record { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
min-height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.example-pagination-block { |
|
||||||
position: sticky; |
|
||||||
bottom: 0; |
|
||||||
margin: 0 auto; |
|
||||||
/* text-align: center; */ |
|
||||||
} |
|
||||||
|
|
||||||
.record-list { |
|
||||||
margin: 10px 0; |
|
||||||
} |
|
||||||
|
|
||||||
ul { |
|
||||||
width: 100%; |
|
||||||
list-style-type: none; |
|
||||||
padding: 10; |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: start; |
|
||||||
|
|
||||||
text-align: center; |
|
||||||
|
|
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(auto-fill, 272px); |
|
||||||
justify-content: space-around; |
|
||||||
} |
|
||||||
|
|
||||||
li { |
|
||||||
/* margin-bottom: 30px; */ |
|
||||||
transition: filter 0.3s; |
|
||||||
/* 添加过渡动画 */ |
|
||||||
/* flex: 1 0 20%; */ |
|
||||||
width: calc(20% - 20px); |
|
||||||
width: 250px; |
|
||||||
width: 100%; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
/* margin: 0 15px; */ |
|
||||||
padding: 10px; |
|
||||||
box-sizing: border-box; |
|
||||||
|
|
||||||
transition: box-shadow 0.3s; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
li:hover { |
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); |
|
||||||
} |
|
||||||
|
|
||||||
.img { |
|
||||||
display: block; |
|
||||||
width: 250px; |
|
||||||
height: 250px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue