queyue-frontend
/
luoo_manage_fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(评论举报): 新增评论举报功能

Browse Source
dev
zjb 12 months ago
parent c1cbc31f22
commit b44f6950b2
4 changed files with 633 additions and 7 deletions
Show Stats Download Patch File Download Diff File

8
src/router/index.js
Unescape View File

@ -2,7 +2,7 @@
* @Author: zhangjiabao
* @Date: 2024-01-25 11:05:17
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-04 22:53:38
* @LastEditTime: 2024-02-05 23:08:57
* @FilePath: \luoo_manage_fe\src\router\index.js
*/
import Vue from "vue";
@ -168,9 +168,9 @@ export const constantRouterMap = [
meta: { title: "评论管理" }
},
{
path: "commentCall",
name: "CommentCall",
component: () => import("@/views/common/unfinished"),
path: "commentReport",
name: "commentReport",
component: () => import("@/views/comment/commentReport"),
meta: { title: "评论举报" }
},
{

447
src/views/comment/commentReport.vue
Unescape View File

@ -0,0 +1,447 @@
<!--
* @Author: zhangjiabao
* @Date: 2024-02-01 22:15:37
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-06 00:52:18
* @FilePath: \luoo_manage_fe\src\views\comment\commentReport.vue
-->
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="card-header clearfix">
<span class="card-header-text">举报管理</span>
</div>
<el-form :inline="true" class="in-card-form">
<el-form-item>
<el-input
placeholder="评论内容"
size="medium"
v-model="queryForm.data.qf_d_content"
></el-input>
</el-form-item>
<el-form-item>
<el-select
:disabled="queryForm.typeLoading"
placeholder="举报类型"
size="medium"
v-model="queryForm.data.qf_d_type"
>
<el-option
v-for="item in queryForm.remoteData.type"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="queryForm.data.qf_d_user"
filterable
remote
reserve-keyword
placeholder="请选择用户"
:loading="queryForm.userLoading"
:remote-method="fetchUserData"
>
<el-option
v-for="item in queryForm.remoteData.user"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option
></el-select>
</el-form-item>
<el-form-item>
<el-date-picker
placeholder="评论时间"
v-model="queryForm.data.qf_d_time"
type="daterange"
:range-separator="
queryForm.data.qf_d_time.length === 0 ? null : '~'
"
:editable="false"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="评论时间"
size="medium"
style="width: 280px;"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
icon="el-icon-search"
type="primary"
size="medium"
@click="handleQueryClick"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button
icon="el-icon-refresh-left"
size="medium"
@click="handleResetClick"
>重置</el-button
>
</el-form-item>
<el-form-item style="text-align: right; flex: 1;">
<el-button
icon="el-icon-s-operation"
@click="handleTypeManageClick"
type="text"
>类型管理</el-button
>
</el-form-item>
</el-form>
<el-table
stripe
:data="table.data"
height="calc(100vh - 350px)"
v-loading="table.loading"
element-loading-text="加载中"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
border
fit
>
<el-table-column align="center" label="序号" width="95">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="index" label="编号"></el-table-column>
<el-table-column label="举报类型"></el-table-column>
<el-table-column label="举报人"></el-table-column>
<el-table-column label="举报时间"></el-table-column>
<el-table-column label="举报关联">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
@click="jumpToJournal(scope.row.journalId)"
>{{ scope.row.journalId }}</el-button
>
</template>
</el-table-column>
<el-table-column label="举报对象"></el-table-column>
<el-table-column label="举报状态"></el-table-column>
<el-table-column label="处理结果"></el-table-column>
<el-table-column label="处理人"></el-table-column>
<el-table-column label="处理时间"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
plain
icon="el-icon-video-play"
type="primary"
size="mini"
@click="handleDetailClick"
>详情</el-button
>
<el-button
plain
icon="el-icon-s-tools"
type="primary"
size="mini"
@click="handleReportHandleClick"
>处理</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
class="pagination-right"
background
layout="total, prev, pager, next, sizes"
:current-page.sync="table.page.current"
:page-size="table.page.size"
:total="table.page.total"
@size-change="handlePageSizeChange"
@current-change="handlePageCurrentChange"
>
</el-pagination>
</el-card>
<el-dialog
class="popup-dialog"
title="分类管理"
:visible="true"
v-if="typeDialog.visible"
width="40%"
top="60px"
append-to-body
:before-close="handleTypeDialogBeforeClose"
>
<CommentType
:data="queryForm.remoteData.type"
@refresh="fetchTypeData"
@add="addTypeRow"
></CommentType>
</el-dialog>
</div>
</template>
<script>
import commentApi from "@/api/comment";
import CommentType from "@/views/comment/commentType";
export default {
name: "CommentReport",
components: { CommentType },
props: {},
data() {
return {
// 查询表单
queryForm: {
userLoading: false,
typeLoading: false,
remoteData: {
type: [],
user: []
},
lastQuery: {},
data: {
qf_d_content: null,
qf_d_type: null,
qf_d_user: null,
qf_d_time: []
}
},
// 表格
table: {
loading: true,
data: [],
page: {
current: 1,
size: 10,
total: 0
}
},
typeDialog: {
visible: false
}
};
},
computed: {},
watch: {},
created() {
this.fetchData();
this.fetchTypeData();
this.fetchUserData();
},
mounted() {},
methods: {
fetchData() {
this.table.loading = true;
// commentApi
// .getList(this.table.page.current, this.table.page.size)
// .then(res => {
// if (res.code === 200) {
// this.table.data = res.data.rows;
// this.table.page.total = res.data.total;
// this.table.loading = false;
// } else {
// this.$message.error(res.message);
// this.table.data = [];
// this.table.page.total = 0;
// this.table.loading = false;
// }
// });
setTimeout(() => {
this.table.data = [];
for (let index = 0; index < 10; index++) {
this.table.data.push({
id: index,
index: index
});
}
this.table.loading = false;
this.table.page.total = 11;
}, 1000);
},
fetchTypeData() {
this.queryForm.typeLoading = true;
this.queryForm.remoteData.type = [];
setTimeout(() => {
this.queryForm.remoteData.type = [
{ id: "1", name: "恶意评论" },
{ id: "2", name: "广告" },
{ id: "3", name: "刷屏" }
];
this.queryForm.remoteData.type.push({
id: Math.random(),
name: Math.random()
});
this.queryForm.typeLoading = false;
}, 1000);
},
addTypeRow() {
this.queryForm.remoteData.type.push({
id: null,
name: ""
});
},
fetchUserData(keyword) {
if (!keyword || keyword === "") {
this.queryForm.remoteData.user = [];
this.queryForm.userLoading = false;
}
this.queryForm.userLoading = true;
setTimeout(() => {
this.queryForm.remoteData.user = [
{ id: "1", name: "name_a" },
{ id: "2", name: "name_b" },
{ id: "3", name: "name_c" },
{ id: "4", name: "name_d" }
];
this.queryForm.userLoading = false;
}, 1000);
// musicApi.getList({ keyword, state: 1 }, 1, 50).then(res => {
// if (res.code === 200) {
// this.musicDialog.remoteResult = res.data.rows;
// this.musicDialog.selectLoading = false;
// } else {
// this.musicDialog.remoteResult = [];
// this.musicDialog.selectLoading = false;
// }
// });
},
/**
* 分页组件页数变化事件
*/
handlePageCurrentChange(val) {
this.table.page.current = val;
this.fetchData();
},
/**
* 分页组件大小变化事件
*/
handlePageSizeChange(val) {
this.table.page.size = val;
this.fetchData();
},
// ************************* 按扭事件 *************************
/**
* 查询按扭点击事件
*/
handleQueryClick() {
this.table.page.current = 1;
this.table.page.total = 0;
this.fetchData(this.queryForm.data);
},
/**
* 重置点击事件
*/
handleResetClick() {
this.queryForm.data = {
qf_d_content: null,
qf_d_type: null,
qf_d_user: null,
qf_d_time: []
};
},
/**
* 详情操作
*/
handleDetailClick(row) {
this.$message.success("detail" + row.id);
// commentApi.delete(row._id).then(res => {
// if (res.code === 200) {
// this.$message.success("删除成功");
// this.fetchData();
// } else {
// this.$message.error(res.message);
// }
// });
},
handleTypeManageClick() {
this.typeDialog.visible = true;
},
/**
* 举报处理
*/
handleReportHandleClick(row) {
this.$message.success("handle" + row.id);
},
/**
* 弹窗关闭按扭点击事件
*/
handleTypeDialogBeforeClose(done) {
this.typeDialog.visible = false;
this.fetchTypeData();
done();
},
jumpToJournal(id) {
this.$router.push(`/journal/detail?id=${id}`);
}
}
};
</script>
<style scoped>
.pagination-right {
text-align: right;
margin-top: 10px;
}
.box-card {
min-height: 300px;
height: calc(100vh - 140px);
border-radius: 10px;
.el-card__header {
background-color: rgba(249, 249, 249, 1);
}
}
/deep/ .el-dialog {
border-radius: 5px;
}
.popup-dialog {
.el-dialog__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 50px;
background-color: #f5f5f5f5;
}
.el-dialog__title {
font-size: 15px;
font-weight: bolder;
}
.el-dialog__footer {
border-top: solid;
border-top-width: thin;
border-top-color: rgb(233, 233, 233);
padding: 10px 20px 10px;
}
}
.in-card-form {
height: 60px;
display: flex;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.card-header {
height: 23px;
}
.app-container {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
}
.card-header-text {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
text-align: left;
line-height: 20px;
letter-spacing: normal;
color: #333333;
}
</style>

179
src/views/comment/commentType.vue
Unescape View File

@ -0,0 +1,179 @@
<template>
<div class="app-container">
<el-table size="mini" :show-header="false" :border="false" :data="data">
<el-table-column align="center" width="80px">
<template slot-scope="scope">
<i class="el-icon-s-grid"></i>
</template>
</el-table-column>
<el-table-column align="center">
<template slot-scope="scope">
<span v-if="editRowId !== scope.row.id">{{ scope.row.name }}</span>
<span v-if="editRowId === scope.row.id">
<el-input v-model="editRowName"></el-input>
</span>
</template>
</el-table-column>
<el-table-column align="center">
<template slot-scope="scope">
<el-button
v-if="editRowId === scope.row.id"
type="text"
@click="handleSubmit(scope.row)"
>确定</el-button
>
<el-button
v-if="editRowId !== scope.row.id"
type="text"
@click="handleEdit(scope.row)"
>编辑</el-button
>
<el-popconfirm
v-if="editRowId !== scope.row.id"
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="是否确认删除分类？"
style="margin-left: 10px;"
@confirm="handleDelete(scope.row)"
>
<el-button slot="reference" type="text" size="mini">删除</el-button>
</el-popconfirm>
<el-button
v-if="editRowId === scope.row.id"
type="text"
@click="handleCancel()"
>取消</el-button
>
</template>
</el-table-column>
</el-table>
<el-button
size="mini"
type="text"
style="text-align: center; font-size: 14px; margin-top: 8px; margin-left: 40%;"
@click="handleAdd"
icon="el-icon-circle-plus-outline"
>添加新分类</el-button
>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {
data: {
type: Array,
default: []
}
},
data() {
return {
editRowId: null,
editRowName: null
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
handleSubmit(row) {
this.$message.info(row.id + " " + this.editRowName);
this.editRowId = null;
this.editRowName = null;
this.$emit("refresh");
},
handleCancel() {
if (this.editRowId === null) {
this.$emit("refresh");
}
this.editRowId = null;
this.editRowName = null;
},
handleEdit(row) {
this.editRowId = row.id;
this.editRowName = row.name;
},
handleDelete(row) {
this.$message.info(row.id);
this.$emit("refresh");
},
handleAdd() {
this.editRowId = null;
this.editRowName = null;
this.$emit("add");
}
}
};
</script>
<style scoped>
.pagination-right {
text-align: right;
margin-top: 10px;
}
.box-card {
min-height: 300px;
height: calc(100vh - 140px);
border-radius: 10px;
.el-card__header {
background-color: rgba(249, 249, 249, 1);
}
}
/deep/ .el-dialog {
border-radius: 5px;
}
.popup-dialog {
.el-dialog__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 50px;
background-color: #f5f5f5f5;
}
.el-dialog__title {
font-size: 15px;
font-weight: bolder;
}
.el-dialog__footer {
border-top: solid;
border-top-width: thin;
border-top-color: rgb(233, 233, 233);
padding: 10px 20px 10px;
}
}
.in-card-form {
height: 60px;
display: flex;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.card-header {
height: 23px;
}
.app-container {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
}
.card-header-text {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
text-align: left;
line-height: 20px;
letter-spacing: normal;
color: #333333;
}
</style>

6
src/views/comment/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: zhangjiabao
* @Date: 2024-02-01 22:15:37
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-04 22:54:30
* @LastEditTime: 2024-02-05 22:57:20
* @FilePath: \luoo_manage_fe\src\views\comment\index.vue
-->
<template>
@ -49,7 +49,7 @@
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="是否确认删除歌曲？"
title="是否确认删除评论？"
style="margin-left: 10px;"
@confirm="handleDeleteClick(scope.row)"
>
@ -85,7 +85,7 @@
import commentApi from "@/api/comment";
export default {
name: "",
name: "Comment",
components: {},
props: {},
data() {

Write Preview
Loading…
Cancel
Save