significative
2 months ago
parent
2888905c41
commit
e9dcea13a7
3 changed files with 336 additions and 19 deletions
@ -1,14 +1,172 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div class="container"> |
||||||
点赞记录 |
<el-card> |
||||||
</div> |
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
||||||
|
<el-form-item label="课程名称"> |
||||||
|
<el-input |
||||||
|
v-model="formInline.user" |
||||||
|
placeholder="请输入课程名称" |
||||||
|
clearable |
||||||
|
style="width: 300px" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="日期"> |
||||||
|
<el-date-picker |
||||||
|
v-model="formInline.date" |
||||||
|
type="date" |
||||||
|
placeholder="请选择日期" |
||||||
|
clearable |
||||||
|
style="width: 300px" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
:loading="inquireLoading" |
||||||
|
@click="handleInquire" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="danger" |
||||||
|
v-if="selectID.length" |
||||||
|
@click="deleteSelected" |
||||||
|
> |
||||||
|
批量删除 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
<el-card style="margin-top: 20px; height: calc(100vh - 200px); width: 100%"> |
||||||
|
<el-table |
||||||
|
:data="recordList" |
||||||
|
border |
||||||
|
style="width: 100%" |
||||||
|
@selection-change="selectionChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" /> |
||||||
|
<el-table-column type="index" width="55" label="序号" /> |
||||||
|
<el-table-column prop="courseName" label="课程名称" /> |
||||||
|
<el-table-column prop="number" label="点赞人数" /> |
||||||
|
<el-table-column prop="time" label="时间" /> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button type="danger" link @click="onDeleteRecord(row.id)"> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
import { reactive, ref } from 'vue' |
||||||
|
import useUserStore from '@/store/modules/user' |
||||||
|
import { ElMessageBox, ElMessage } from 'element-plus' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
|
||||||
|
const userStore = useUserStore() |
||||||
|
const formInline = reactive({ |
||||||
|
user: '', |
||||||
|
region: '', |
||||||
|
date: '', |
||||||
|
}) |
||||||
|
const inquireLoading = ref(false) |
||||||
|
function handleInquire() { |
||||||
|
inquireLoading.value = true |
||||||
|
setTimeout(() => { |
||||||
|
inquireLoading.value = false |
||||||
|
ElMessage({ |
||||||
|
type: 'success', |
||||||
|
message: '查询成功', |
||||||
|
}) |
||||||
|
}, Math.random() * 1000) |
||||||
|
} |
||||||
|
const recordList = ref([ |
||||||
|
{ |
||||||
|
courseId: 'de3100cad98f76be3176dd39aa748a9e', |
||||||
|
courseName: '离散数学及其应用', |
||||||
|
id: '1818126244841295873', |
||||||
|
img: '', |
||||||
|
number: 5, |
||||||
|
time: '2024-07-30 11:27:30', |
||||||
|
userId: '2', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '1818114181813293057', |
||||||
|
courseId: '2fa0fd63262230639d2c45a3acd9045c', |
||||||
|
courseName: '计算机导论12', |
||||||
|
userId: '2', |
||||||
|
number: 2, |
||||||
|
img: '', |
||||||
|
time: '2024-07-30 10:39:34', |
||||||
|
}, |
||||||
|
]) |
||||||
|
const params = ref({ |
||||||
|
pagesize: 10, |
||||||
|
pagenum: '1', |
||||||
|
userId: userStore.data.id, |
||||||
|
}) |
||||||
|
const total = ref(0) |
||||||
|
|
||||||
|
//删除浏览记录逻辑 |
||||||
|
const onDeleteRecord = async (ids: any) => { |
||||||
|
await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', { |
||||||
|
type: 'warning', |
||||||
|
confirmButtonText: '确认', |
||||||
|
cancelButtonText: '取消', |
||||||
|
}) |
||||||
|
} |
||||||
|
const selectID = ref([]) |
||||||
|
const selectionChange = (e: { map: (arg0: (item: any) => any) => never[] }) => { |
||||||
|
if (e) { |
||||||
|
selectID.value = e.map((item: { id: any }) => item.id) |
||||||
|
console.log(selectID.value) |
||||||
|
} |
||||||
|
} |
||||||
|
const deleteSelected = async () => { |
||||||
|
//判断数组是否为空 |
||||||
|
if (selectID.value.length === 0) { |
||||||
|
await ElMessageBox.confirm('请选择你要删除的内容', '温馨提示', { |
||||||
|
type: 'warning', |
||||||
|
confirmButtonText: '确认', |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
await ElMessageBox.confirm('你确认删除浏览记录吗？', '温馨提示', { |
||||||
|
type: 'warning', |
||||||
|
confirmButtonText: '确认', |
||||||
|
cancelButtonText: '取消', |
||||||
|
}) |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="scss" scoped> |
||||||
|
.container { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
// height: calc(100vh - 100px); |
||||||
|
.pagination { |
||||||
|
position: absolute; |
||||||
|
bottom: 20px; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-form-item) { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-scrollbar__wrap) { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue