评论管理
This commit is contained in:
235
src/views/components/courseList/commont.vue
Normal file
235
src/views/components/courseList/commont.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="query"
|
||||
@keyup.enter.native="getList()"
|
||||
style="position: relative;"
|
||||
>
|
||||
<el-form-item label="评论内容">
|
||||
<el-input
|
||||
style="width: 100%;"
|
||||
v-model="query.content"
|
||||
placeholder="请输入评论内容"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 120px;">
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getList();
|
||||
"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-button type="text"
|
||||
@click="changeDefalutExpand()"
|
||||
style="position: absolute;right: 0;"
|
||||
:style="`color:${defaultExpand?'#17B3A3':'#333'}`"
|
||||
>{{ !defaultExpand ? "收起" : "展开" }}全部评论
|
||||
<i class="el-icon-s-comment" ></i
|
||||
></el-button>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<el-table
|
||||
row-key="id"
|
||||
v-if="refreshTable"
|
||||
:default-expand-all="defaultExpand"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 100px)"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column fixed prop="createTime" label="日期" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-tooltip placement="top" v-if="scope.row.user">
|
||||
<div slot="content">
|
||||
<div>
|
||||
<p v-if="scope.row.user.nickname && scope.row.user.name">
|
||||
昵称：{{ scope.row.user.nickname }}
|
||||
<span v-if="scope.row.user.name"
|
||||
> ( 姓名：{{
|
||||
scope.row.user.name
|
||||
}}
|
||||
)</span
|
||||
>
|
||||
</p>
|
||||
<p v-else-if="scope.row.user.name">
|
||||
姓名：{{ scope.row.user.name }}
|
||||
</p>
|
||||
<p v-if="scope.row.user.email">
|
||||
邮箱：{{ scope.row.user.email }}
|
||||
</p>
|
||||
<p v-if="scope.row.user.tel">
|
||||
手机号：{{ scope.row.user.tel }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img
|
||||
:src="scope.row.user ? scope.row.user.avatar : ''"
|
||||
alt=""
|
||||
v-if="scope.row.user && scope.row.user.avatar"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="avatar" v-else></div>
|
||||
|
||||
<span></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="content" label="评论内容">
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.content"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
style="color: red;cursor: pointer;"
|
||||
@click="deleteHandle(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
style="padding: 30px 0; text-align: center;"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["courseId"],
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
query: {
|
||||
content: ""
|
||||
},
|
||||
pageIndex: 1,
|
||||
defaultExpand: false,
|
||||
refreshTable: true,
|
||||
pageSize: 10,
|
||||
totalPage: 0
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
changeDefalutExpand() {
|
||||
this.refreshTable = false;
|
||||
this.$nextTick(() => {
|
||||
this.refreshTable = true;
|
||||
this.defaultExpand = !this.defaultExpand;
|
||||
});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
init() {
|
||||
this.getList();
|
||||
},
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
"/master/courseGuestbook/getCourseGuestbookList"
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
limit: this.pageSize,
|
||||
page: this.pageIndex,
|
||||
type: 0, //类型0课程1章节
|
||||
courseId: this.courseId,
|
||||
|
||||
chapterId: "",
|
||||
content: this.query.content //内容
|
||||
})
|
||||
}).then(res => {
|
||||
console.log("res at line 68:", res);
|
||||
|
||||
if (res.data.code == 0 && res.data.page.records.length > 0) {
|
||||
this.tableData = res.data.page.records ? res.data.page.records : [];
|
||||
this.totalPage = res.data.page.total;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.totalPage = 0;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
// console.log(row, "row" , res.data.resList,this.resList);
|
||||
});
|
||||
},
|
||||
|
||||
deleteHandle(id) {
|
||||
this.$confirm("请确认是否删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
`/master/courseGuestbook/delCourseGuestbook`
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
id: id
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
background-color: #f0f0f0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user