391 lines
12 KiB
Vue
391 lines
12 KiB
Vue
<template>
|
||
<div class="rating-topic-container">
|
||
<el-alert
|
||
v-if="!queryForm.categoryId"
|
||
:closable="false"
|
||
show-icon
|
||
style="margin-bottom: 20px"
|
||
title="选择类别后可以置顶话题"
|
||
type="info"
|
||
/>
|
||
|
||
<vab-query-form>
|
||
<vab-query-form-left-panel>
|
||
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">创建话题</el-button>
|
||
</vab-query-form-left-panel>
|
||
<vab-query-form-left-panel>
|
||
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||
<el-form-item>
|
||
<el-select
|
||
v-model="queryForm.categoryId"
|
||
v-loadmore="loadMoreCategories"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择分类"
|
||
style="width: 200px"
|
||
@change="queryData"
|
||
>
|
||
<el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select v-model="queryForm.status" clearable placeholder="请选择状态" @change="queryData">
|
||
<el-option label="审核中" :value="1" />
|
||
<el-option label="已通过" :value="2" />
|
||
<el-option label="已拒绝" :value="3" />
|
||
<el-option label="禁用" :value="4" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入评价主题" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</vab-query-form-left-panel>
|
||
</vab-query-form>
|
||
|
||
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
|
||
<el-table-column align="left" label="评价主题" min-width="200" width="200">
|
||
<template #default="{ row }">
|
||
<div class="topic-info-cell" style="cursor: pointer" @click="handleViewItems(row)">
|
||
<div class="topic-details">
|
||
<div class="topic-title">{{ row.title }}</div>
|
||
<div v-if="row.description" class="topic-desc" :title="row.description">{{ row.description }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" label="状态" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag v-if="row.status === 1" type="warning">审核中</el-tag>
|
||
<el-tag v-else-if="row.status === 2" type="success">已审通过</el-tag>
|
||
<el-tag v-else-if="row.status === 3" type="danger">已拒绝</el-tag>
|
||
<el-tag v-else-if="row.status === 4" type="info">禁用</el-tag>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="left" label="用户信息" min-width="200" width="300">
|
||
<template #default="{ row }">
|
||
<user-info v-if="row.user" :user="row.user" :user-id="row.userId" />
|
||
<span v-else>系统创建</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="left" label="互动统计" width="180">
|
||
<template #default="{ row }">
|
||
<div class="stat-cell">
|
||
<div class="stat-row">
|
||
<span class="stat-label">
|
||
<i class="el-icon-view" />
|
||
浏览数：
|
||
</span>
|
||
<span class="stat-value">{{ row.viewCount }}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">
|
||
<i class="el-icon-user" />
|
||
参与人数：
|
||
</span>
|
||
<span class="stat-value">{{ row.participantCount }}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">
|
||
<i class="el-icon-star-on" />
|
||
评价人数：
|
||
</span>
|
||
<span class="stat-value">{{ row.scoreCount }}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">
|
||
<i class="el-icon-chat-dot-round" />
|
||
评论人数：
|
||
</span>
|
||
<span class="stat-value">{{ row.commentCount }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="left" label="热门分数" prop="hotScore" width="100" />
|
||
|
||
<el-table-column align="left" label="创建时间" prop="createdAt" width="160">
|
||
<template #default="{ row }">
|
||
{{ formatTime(row.createdAt) }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" label="操作" width="200">
|
||
<template #default="{ row }">
|
||
<el-button type="text" @click="handleViewItems(row)">查看评分项</el-button>
|
||
|
||
<template v-if="queryForm.categoryId">
|
||
<el-button v-if="!row.isPinned" style="color: #e6a23c" type="text" @click="handleTogglePin(row, true)">置顶</el-button>
|
||
<el-button v-else style="color: #909399" type="text" @click="handleTogglePin(row, false)">取消置顶</el-button>
|
||
</template>
|
||
|
||
<el-button v-if="row.status !== 4" style="color: #f56c6c" type="text" @click="handleDisable(row)">禁用</el-button>
|
||
<el-button v-if="row.status === 4" style="color: #67c23a" type="text" @click="handleEnable(row)">启用</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
background
|
||
:current-page="queryForm.pageNo"
|
||
:layout="layout"
|
||
:page-size="queryForm.pageSize"
|
||
:total="total"
|
||
@current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange"
|
||
/>
|
||
|
||
<topic-edit ref="edit" @fetch-data="fetchData" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getList, pinnedTopic } from '@/api/rating/topic'
|
||
import { getList as getCategoryList } from '@/api/rating/topicCategory'
|
||
import { reviewTopic } from '@/api/rating/topicOperate'
|
||
import { formatTime } from '@/utils'
|
||
import { getThumbUrl } from '@/utils/blessing'
|
||
import TopicEdit from './components/TopicEdit'
|
||
import UserInfo from '@/components/UserInfo'
|
||
|
||
export default {
|
||
name: 'RatingTopicIndex',
|
||
components: { TopicEdit, UserInfo },
|
||
directives: {
|
||
loadmore: {
|
||
bind(el, binding) {
|
||
setTimeout(() => {
|
||
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
|
||
if (SELECTWRAP_DOM) {
|
||
SELECTWRAP_DOM.addEventListener('scroll', function () {
|
||
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 2
|
||
if (condition) {
|
||
binding.value()
|
||
}
|
||
})
|
||
}
|
||
}, 0)
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
list: [],
|
||
listLoading: true,
|
||
layout: 'total, sizes, prev, pager, next, jumper',
|
||
total: 0,
|
||
elementLoadingText: '正在加载...',
|
||
queryForm: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
keyword: '',
|
||
status: '',
|
||
categoryId: '',
|
||
},
|
||
categoryList: [],
|
||
categoryQuery: { pageNo: 1, pageSize: 20 },
|
||
categoryTotal: 0,
|
||
fetchingCategories: false,
|
||
}
|
||
},
|
||
created() {
|
||
if (this.$route.query.topicId) {
|
||
this.queryForm.keyword = this.$route.query.topicId
|
||
}
|
||
this.fetchCategoryList()
|
||
this.fetchData()
|
||
},
|
||
methods: {
|
||
formatTime,
|
||
getThumbUrl,
|
||
async fetchCategoryList() {
|
||
if (this.fetchingCategories) return
|
||
this.fetchingCategories = true
|
||
try {
|
||
const { data } = await getCategoryList(this.categoryQuery)
|
||
this.categoryList = this.categoryList.concat(data.list || [])
|
||
this.categoryTotal = data.totalCount || 0
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
this.fetchingCategories = false
|
||
}
|
||
},
|
||
loadMoreCategories() {
|
||
if (this.categoryList.length >= this.categoryTotal || this.fetchingCategories) return
|
||
this.categoryQuery.pageNo += 1
|
||
this.fetchCategoryList()
|
||
},
|
||
handleAdd() {
|
||
this.$refs['edit'].showEdit()
|
||
},
|
||
handleSizeChange(val) {
|
||
this.queryForm.pageSize = val
|
||
this.fetchData()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.queryForm.pageNo = val
|
||
this.fetchData()
|
||
},
|
||
queryData() {
|
||
this.queryForm.pageNo = 1
|
||
this.fetchData()
|
||
},
|
||
async fetchData() {
|
||
this.listLoading = true
|
||
try {
|
||
const params = { ...this.queryForm }
|
||
if (!params.categoryId) delete params.categoryId
|
||
const { data } = await getList(params)
|
||
this.list = data.list
|
||
this.total = data.totalCount
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
this.listLoading = false
|
||
}
|
||
},
|
||
handleViewItems(row) {
|
||
this.$router.push({
|
||
path: '/rating/topic-item',
|
||
query: { topicId: row.id },
|
||
})
|
||
},
|
||
async handleTogglePin(row, isPinned) {
|
||
try {
|
||
const { msg } = await pinnedTopic(row.id, isPinned)
|
||
this.$baseMessage(msg || (isPinned ? '置顶成功' : '已取消置顶'), 'success')
|
||
this.fetchData()
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
},
|
||
handleDisable(row) {
|
||
this.$confirm('确定要禁用该话题吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(async () => {
|
||
try {
|
||
const { msg } = await reviewTopic({
|
||
topicId: row.id,
|
||
userId: this.$store.state.user.userId || '',
|
||
status: 4,
|
||
type: 'topic',
|
||
})
|
||
this.$baseMessage(msg || '已禁用', 'success')
|
||
this.fetchData()
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
handleEnable(row) {
|
||
this.$confirm('确定要启用该话题吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
})
|
||
.then(async () => {
|
||
try {
|
||
const { msg } = await reviewTopic({
|
||
topicId: row.id,
|
||
userId: this.$store.state.user.userId || '',
|
||
status: 2,
|
||
type: 'topic',
|
||
})
|
||
this.$baseMessage(msg || '已启用', 'success')
|
||
this.fetchData()
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.rating-topic-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.topic-info-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.topic-cover,
|
||
.topic-cover-placeholder {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 4px;
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.topic-cover-placeholder {
|
||
background-color: #f0f2f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #909399;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.topic-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.topic-title {
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 4px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.topic-desc {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.stat-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.stat-row {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.stat-label {
|
||
color: #909399;
|
||
width: 90px;
|
||
}
|
||
|
||
.stat-value {
|
||
color: #606266;
|
||
}
|
||
</style>
|