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