significative
2 months ago
parent
2888905c41
commit
e9dcea13a7
3 changed files with 336 additions and 19 deletions
@ -1,14 +1,172 @@ |
||||
<template> |
||||
<div> |
||||
点赞记录 |
||||
</div> |
||||
<div class="container"> |
||||
<el-card> |
||||
<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> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
<script lang="ts" setup> |
||||
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> |
||||
|
||||
<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> |
||||
|
||||
Loading…
Reference in new issue