@ -0,0 +1,6 @@
|
|||||||
|
//列表参数类型
|
||||||
|
export type CommentListParm = {
|
||||||
|
currentPage:number;
|
||||||
|
pageSize:number;
|
||||||
|
total:number; //分页的总条数
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import http from "../../http";
|
||||||
|
import type { CommentListParm } from "./CommentModel";
|
||||||
|
|
||||||
|
//列表
|
||||||
|
export const getListApi = (parm:CommentListParm)=>{
|
||||||
|
return http.get("/wxapi/comment/pcCommentList",parm)
|
||||||
|
}
|
||||||
|
//删除
|
||||||
|
export const deleteApi = (commentId:string)=>{
|
||||||
|
return http.delete(`/wxapi/comment/${commentId}`)
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
import type { CommentListParm } from "../../api/comment/CommentModel";
|
||||||
|
import { reactive ,ref,onMounted,nextTick} from "vue";
|
||||||
|
import {getListApi,deleteApi} from '../../api/comment/index'
|
||||||
|
import useInstance from "@/hooks/useInstance";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
export default function useCommentTable(){
|
||||||
|
const {global} = useInstance()
|
||||||
|
//表格高度
|
||||||
|
const tableHeight = ref(0)
|
||||||
|
//接收表格数据
|
||||||
|
const tableList = ref([])
|
||||||
|
//列表查询的参数
|
||||||
|
const listParm = reactive<CommentListParm>({
|
||||||
|
currentPage:1,
|
||||||
|
pageSize:10,
|
||||||
|
total:0
|
||||||
|
})
|
||||||
|
//列表
|
||||||
|
const getList = async()=>{
|
||||||
|
let res = await getListApi(listParm)
|
||||||
|
if(res && res.code == 200){
|
||||||
|
tableList.value = res.data.records;
|
||||||
|
listParm.total = res.data.total;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//删除
|
||||||
|
const deleteBtn = async(commentId:string)=>{
|
||||||
|
const confirm = await global.$myconfirm('确定删除吗？')
|
||||||
|
if(confirm){
|
||||||
|
let res = await deleteApi(commentId)
|
||||||
|
if(res && res.code == 200){
|
||||||
|
ElMessage.success(res.msg)
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//搜索
|
||||||
|
const searchBtn = ()=>{
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
//重置
|
||||||
|
const resetBtn = ()=>{
|
||||||
|
listParm.currentPage = 1;
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
//页容量改变时触发
|
||||||
|
const sizeChange = (size:number)=>{
|
||||||
|
listParm.pageSize = size;
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
//页数改变触发
|
||||||
|
const currentChange = (page:number)=>{
|
||||||
|
listParm.currentPage = page;
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
getList()
|
||||||
|
nextTick(()=>{
|
||||||
|
tableHeight.value = window.innerHeight - 180
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
listParm,
|
||||||
|
getList,
|
||||||
|
searchBtn,
|
||||||
|
resetBtn,
|
||||||
|
tableList,
|
||||||
|
sizeChange,
|
||||||
|
currentChange,
|
||||||
|
tableHeight,
|
||||||
|
deleteBtn
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,13 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<el-main>
|
||||||
评论管理
|
<!-- 表格 -->
|
||||||
</div>
|
<el-table :height="tableHeight" :data="tableList" border stripe>
|
||||||
</template>
|
<el-table-column label="名称" prop="goodsName"></el-table-column>
|
||||||
|
<el-table-column label="商品图片" prop="goodsImage">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-image
|
||||||
|
:src="scope.row.goodsImage.split(',')[0]"
|
||||||
|
style="height: 60px; width: 60px; border-radius: 50%"
|
||||||
|
></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="昵称" prop="nickName"></el-table-column>
|
||||||
|
<el-table-column label="头像" prop="avatarUrl">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-image
|
||||||
|
:src="imgUrl+scope.row.avatarUrl"
|
||||||
|
style="height: 60px; width: 60px; border-radius: 50%"
|
||||||
|
></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="时间" prop="createTime"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="220" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button :icon="Delete" @click="deleteBtn(scope.row.commentId)" type="danger" size="default">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-pagination
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
:current-page.sync="listParm.currentPage"
|
||||||
|
:page-sizes="[10,20, 40, 80, 100]"
|
||||||
|
:page-size="listParm.pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="listParm.total" background>
|
||||||
|
</el-pagination>
|
||||||
|
|
||||||
|
</el-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import { Delete } from "@element-plus/icons-vue";
|
||||||
|
import useCommentTable from "../../compositions/comment/useCommentTable";
|
||||||
|
const imgUrl = ref('http://localhost:8089/')
|
||||||
|
//表格业务
|
||||||
|
const { listParm, deleteBtn, tableList,sizeChange ,currentChange,tableHeight} = useCommentTable();
|
||||||
|
|
||||||
<script setup lang="ts">
|
</script>
|
||||||
|
|
||||||
</script>
|
<style scoped></style>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue