parent
c0c926b2da
commit
da7bb8bd57
@ -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>
|
||||
<div>
|
||||
评论管理
|
||||
</div>
|
||||
</template>
|
||||
<el-main>
|
||||
<!-- 表格 -->
|
||||
<el-table :height="tableHeight" :data="tableList" border stripe>
|
||||
<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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in new issue