Compare commits
2 Commits
4c838107c3
...
16b0f84bbf
| Author | SHA1 | Date |
|---|---|---|
JayChou
|
16b0f84bbf | 3 months ago |
|
JayChou
|
04c007302f | 3 months ago |
7 changed files with 470 additions and 224 deletions
@ -0,0 +1,276 @@ |
||||
<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