Skip to content

C
cust_web
Commit 4c54b1e7 authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改动态

parent 95429c71
Hide whitespace changes
Inline Side-by-side
Showing with 564 additions and 7 deletions
src/api/contentManagement/opmArticle.js 0 → 100644
View file @ 4c54b1e7
import request from '@/utils/request'
import Qs from 'qs'
/**
* 1. 列表查询
* 2. 查询详细信息
* 3. 新增
* 4. 修改
* 5. 逻辑删除
* 6. 导出
*
*/
// 1. 查询动态表列表
export function listOpmArticle(query) {
return request({
url: '/opmarticle/list',
method: 'get',
params: query
})
}
// 2. 查询动态表详细信息
export function getOpmArticle(businessId) {
return request({
url: '/opmarticle/detail/' + businessId,
method: 'get'
})
}
// 3. 新增动态表
export function addOpmArticle(data) {
data = Qs.stringify(data)
return request({
url: '/opmarticle/add',
method: 'post',
data: data
})
}
// 4. 修改动态表
export function updateOpmArticle(data) {
const businessId = data.businessId
data = Qs.stringify(data)
return request({
url: '/opmarticle/update/' + businessId,
method: 'put',
data
})
}
// 5. 逻辑删除动态表
export function delOpmArticle(businessId) {
return request({
url: '/opmarticle/deleteLogical/' + businessId,
method: 'delete'
})
}
// 6. 导出动态表
export function exportOpmArticle(query) {
return request({
url: '/opmarticle/export',
method: 'get',
params: query,
responseType: 'blob'
})
}
src/views/controlPlatform/control.vue
View file @ 4c54b1e7
......@@ -126,9 +126,9 @@
:data="tableList"
>
<el-table-column type="index" label="序号" width="55" />
<el-table-column label="发布人" prop="userName" />
<el-table-column label="话题" prop="leaveTitle" />
<el-table-column label="发布时间" prop="leaveDate" />
<el-table-column label="发布人" prop="createUser" />
<el-table-column label="话题" prop="topic" />
<el-table-column label="发布时间" prop="createDate" />
<el-table-column
label="操作"
width="150"
......
src/views/operationsManagement/article/index.vue
View file @ 4c54b1e7
<template>
<div>
动态管理
<!-- 话题管理 -->
<div class="app-container">
<div v-show="showSwitch.courseContent" class="courseContent">
<div class="search">
<el-form ref="queryForm" style="padding: 30px 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="话题名称 :" prop="topic">
<el-input
v-model.trim="queryParams.topic"
placeholder="请输入话题名称"
clearable
:maxlength="30"
size="small"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="审核状态:" prop="examStatus">
<el-select v-model="queryParams.examStatus" placeholder="请选择审核状态" style="width: 150px">
<el-option
v-for="item in examStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="评论数:" prop="commentCount">
<el-input
v-model="queryParams.commentCount"
placeholder="请输入最低评论数"
clearable
:maxlength="30"
size="small"
style="width: 170px"
/>
</el-form-item>
<el-form-item label="点赞数:" prop="likeCount">
<el-input
v-model="queryParams.likeCount"
placeholder="请输入最低点赞数"
clearable
:maxlength="30"
size="small"
style="width: 170px"
/>
</el-form-item>
<el-form-item label="发布时间:" prop="createDate">
<el-date-picker
v-model="dateRange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleChangeTime"
/>
</el-form-item>
<el-form-item>
<!-- //查询按钮-->
<el-button
:class="commonField.queryClass"
:type="commonField.typePrimary"
:icon="commonField.queryIcon"
:size="commonField.smallSize"
@click="loadData"
>{{ commonField.queryName }}</el-button>
<!-- //重置按钮-->
<el-button
:class="commonField.resetClass"
:icon="commonField.resetIcon"
:size="commonField.smallSize"
@click="resetQuery"
>{{ commonField.resetName }}</el-button>
</el-form-item>
</el-form>
</div><div style="padding:5px 10px">
<div class="tableTitle">动态列表</div>
<el-table v-loading="fullscreenLoading" :data="tableData" border sortable="true" style="text-align: left;">
<span slot="empty">{{ tableDataTips }}</span>
<el-table-column align="center" prop="id" label="序号" min-width="55px">
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="topic" label="话题名称" min-width="200" show-overflow-tooltip />
<el-table-column align="center" prop="examStatus" label="审核状态" min-width="200" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.examStatus === '0' ? '待审核' : scope.row.examStatus === '1' ? '已通过' : '已驳回' }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="commentCount" label="评论数" min-width="150" show-overflow-tooltip />
<el-table-column align="center" prop="likeCount" label="点赞数" min-width="150" show-overflow-tooltip />
<el-table-column align="center" prop="remarks" label="备注" min-width="200" show-overflow-tooltip />
<el-table-column align="center" prop="memCode" label="创建者" min-width="200" show-overflow-tooltip />
<el-table-column align="center" prop="createDate" label="发布时间" min-width="200" show-overflow-tooltip />
<el-table-column align="center" label="操作" min-width="150">
<template slot-scope="scope">
<el-button
v-has-permi="hasDetailPerm"
:class="commonField.resetPasClass"
:type="commonField.typeParent"
:size="commonField.size"
@click="handleView(scope.row)"
>详情</el-button>
<el-button
v-show="scope.row.examStatus !== '1'"
:class="commonField.resetPasClass"
:type="commonField.typeParent"
:size="commonField.size"
@click="handleExam(scope.row)"
>审核</el-button>
<el-button
:class="commonField.resetPasClass"
:type="commonField.typeParent"
:size="commonField.size"
@click="removeCourse(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:key="pageKey"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="loadData"
/>
<footer />
</div>
<!-- 详情弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="deviceFormRef" :model="form" label-position="right" label-width="auto">
<el-row :gutter="20">
<el-col :span="24">
<span style="font-size: 20px;font-weight: bold;padding-left: 20px">内容：</span>
<div style="font-size: 15px;padding-left: 20px;padding-bottom: 20px;padding-top: 10px" class="content">{{ form.content }}</div>
</el-col>
<el-col :span="24">
<span style="font-size: 20px;font-weight: bold;padding-left: 20px">图片：</span>
<img style="padding-left: 20px;padding-top: 10px;padding-bottom: 20px" :src="form.path" alt="Avatar" class="avatar">
</el-col>
<el-col :span="12">
<span style="font-size: 15px;padding-left: 20px">评论数：{{ form.commentCount }}</span>
</el-col>
<el-col :span="12">
<span style="font-size: 15px;padding-left: 20px">点赞数：{{ form.likeCount }}</span>
</el-col>
</el-row>
</el-form>
<div class="commentsSection">
<h3>评论</h3>
<ul v-if="form.comments" class="commentTree">
<li v-for="(comment, index) in form.comments" :key="index" class="commentItem">
<div style="display: flex; justify-content: space-between; align-items: center;" class="commentHeader">
<div style="display: flex; align-items: center;padding-bottom: 10px">
<img :src="comment.path" alt="Avatar" class="avatar">
<div style="padding-left: 10px;">
<strong>{{ comment.memCode }}:</strong>
<span style="padding-left: 10px">{{ comment.content }}</span>
</div>
</div>
<el-button v-if="isEdit" type="text" @click="deleteComment(index)">删除</el-button>
</div>
<ul v-if="comment.children && comment.children.length > 0" class="replies">
<li v-for="(reply, replyIndex) in comment.children" :key="replyIndex" class="replyItem">
<div style="display: flex; justify-content: space-between; align-items: center;" class="commentHeader">
<div style="display: flex; align-items: center;">
<img :src="reply.path" alt="Avatar" class="avatar">
<div style="padding-left: 10px;">
<strong>{{ reply.memCode }}:</strong>
<span style="padding-left: 10px">{{ reply.content }}</span>
</div>
</div>
<el-button v-if="isEdit" type="text" @click="deleteReply(index, replyIndex)">删除</el-button>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div slot="footer" class="dialog-footer">
<el-button v-if="!isEdit" class="cancelBtn" @click="cancel">取 消</el-button>
<el-button v-if="isEdit" class="cancelBtn" @click="cancel">驳 回</el-button>
<el-button v-if="isEdit" class="cancelBtn" type="primary" @click="cancel">通 过</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import commonField from '@/utils/commonField'
import { parseTime } from '@/utils'
import { getDataCache, setDataCache } from '@/assets/js/filterData'
import { delOpmArticle, getOpmArticle, listOpmArticle, updateOpmArticle } from '@/api/contentManagement/opmArticle'
export default {
name: 'Index'
name: 'Index',
data() {
return {
pageKey: 0,
open: false,
title: '',
hasAddPerm: ['sys:topic:add'],
hasUpdatePerm: ['sys:topic:update'],
hasDetailPerm: ['sys:topic:query'],
// 显示开关
showSwitch: {
courseContent: true,
curCat: false
},
// 新增课程
form: {},
// 表格
tableData: [],
// 日期范围
dateRange: [],
queryParams: {
page: 1,
rows: 10,
examStatus: '0',
flag: ''
},
isEdit: false,
examStatusOptions: [
{
label: '待审核',
value: '0'
},
{
label: '已通过',
value: '1'
},
{
label: '已驳回',
value: '2'
}
],
// pagination
total: 0,
fullscreenLoading: false,
tableDataTips: '加载中',
rules: {}
}
},
computed: {
commonField() {
return commonField
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
beforeRouteEnter(to, from, next) {
next(vm => {
if (from.path === '/contentManagement/topic/info/detail' ||
from.path === '/contentManagement/topic/info/index' ||
from.path === '/contentManagement/topic/info/update') {
vm.queryParams.page = JSON.parse(getDataCache(vm.$route.path)).page
setTimeout(() => {
vm.loadData()
}, 500)
}
})
},
created() {
},
mounted: function() {
this.loadData()
},
methods: {
// 日期格式转换
replace(time) {
return parseTime(time, '{y}/{m}/{d}/{h}:{i}')
},
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.businessId !== undefined) {
updateOpmArticle(this.form).then(response => {
this.msgSuccess('修改成功')
this.loadData()
this.cancel()
})
}
}
})
},
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {}
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
page: 1,
rows: 10,
examStatus: '0',
flag: ''
}
this.dateRange = []
this.loadData()
},
handleChangeTime() {
if (this.dateRange && this.dateRange !== '' && this.dateRange !== undefined && this.dateRange.length > 0) {
this.queryParams.beginTime = this.dateRange[0]
this.queryParams.endTime = this.dateRange[1]
} else {
this.queryParams.beginTime = ''
this.queryParams.endTime = ''
}
},
/** 查询话题管理列表 */
loadData() {
this.loading = true
listOpmArticle(this.queryParams).then(
response => {
// 处理分页数据里的url
this.tableData = response.data
this.total = response.total
this.loading = false
}
)
},
/** 详情按钮操作 */
handleView(row) {
this.reset()
const id = row.businessId
getOpmArticle(id).then(response => {
this.form = response.data
this.open = true
this.isEdit = false
this.title = '动态详情'
this.getComment()
})
},
/** 审核按钮操作 */
handleExam(row) {
this.reset()
const id = row.businessId
getOpmArticle(id).then(response => {
this.form = response.data
this.open = true
this.title = '动态审核'
this.isEdit = true
this.getComment()
})
},
getComment() {
// 创建一个映射表，用于快速查找每个评论
const commentMap = new Map()
// 保存顶级评论（parentId 为 null 的评论）
const rootComments = []
// 首先填充映射表
this.form.articleCommentDTOList.forEach(comment => {
comment.children = [] // 为每个评论添加 children 属性
commentMap.set(comment.businessId, comment)
})
// 再次遍历评论列表，这次是为了设置父子关系
this.form.articleCommentDTOList.forEach(comment => {
if (comment.parentId === null) {
// 如果是顶级评论，直接添加到 rootComments
rootComments.push(comment)
} else {
// 否则找到父评论并添加到其 children 数组中
const parentComment = commentMap.get(comment.parentId)
if (parentComment) {
parentComment.children.push(comment)
}
}
})
this.form.comments = rootComments
console.log('11111', this.form.comments)
},
/** 删除按钮操作 */
removeCourse(row) {
const id = row.businessId
this.$confirm('是否确认操作？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return delOpmArticle(id)
}).then(() => {
this.loadData()
this.$message({
message: '删除成功',
type: 'success'
})
})
},
deleteComment() {
this.$confirm('是否确认删除评论？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loadData()
this.$message({
message: '删除成功',
type: 'success'
})
})
},
deleteReply() {
this.$confirm('是否确认删除评论？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loadData()
this.$message({
message: '删除成功',
type: 'success'
})
})
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.app-container {
font-size: 18px;
padding: 0;
::v-deep .el-table td:nth-child(2) .cell {
margin: 10px;
height: 45px;
}
}
::v-deep.avatar {
width: 200px;
height: 178px;
display: block;
}
.commentsSection {
margin-top: 20px;
padding: 0 20px;
h3 {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.commentTree {
list-style-type: none;
padding-left: 0;
.commentItem {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
}
.commentContent {
margin-bottom: 5px;
}
.replies {
list-style-type: none;
padding-left: 20px;
.replyItem {
margin-bottom: 5px;
padding: 5px;
border: 1px solid #eee;
border-radius: 5px;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
}
}
.el-input {
margin-top: 5px;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment