You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

317 lines
8.5 KiB

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<template>
<div>
<el-card shadow="never" class="search-card">
<FormSearch
:fields="searchFormFields"
:loading="loading"
:show-create="false"
:show-delete="true"
:disabled-delete="selectedRow.length === 0"
:default-search="search"
@onSearch="onSearch"
@onCreate="onCreate"
@onDelete="batchDelete"
>
<template slot="buttons">
<el-dropdown
:disabled="selectedRow.length === 0"
@command="checkComment"
>
<el-button type="primary">
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="1"></el-dropdown-item>
<el-dropdown-item :command="2"></el-dropdown-item>
<el-dropdown-item :command="0"></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</FormSearch>
</el-card>
<el-card shadow="never" class="mgt-20px">
<TableList
:loading="loading"
:table-data="comments"
:fields="tableListFields"
:show-actions="true"
:show-view="false"
:show-edit="true"
:show-delete="true"
:show-select="true"
:actions-min-width="160"
@selectRow="selectRow"
@editRow="editRow"
@deleteRow="deleteRow"
/>
</el-card>
<el-card shadow="never" class="mgt-20px">
<div class="text-right">
<el-pagination
background
:current-page="search.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="search.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
>
</el-pagination>
</div>
</el-card>
<el-dialog
:close-on-click-modal="false"
v-if="comment.id > 0"
title="评论编审"
:visible.sync="formCommentVisible"
width="640px"
>
<FormCommentCheck
ref="formComment"
:comment="comment"
@success="formCommentSuccess"
/>
</el-dialog>
</div>
</template>
<script>
import {
listComment,
deleteComment,
getComment,
checkComment,
} from '~/api/comment'
import TableList from '~/components/TableList.vue'
import FormSearch from '~/components/FormSearch.vue'
import { parseQueryIntArray, genLinkHTML } from '~/utils/utils'
export default {
components: { TableList, FormSearch },
layout: 'admin',
data() {
return {
loading: false,
formCommentVisible: false,
search: {
wd: '',
page: 1,
status: [],
size: 10,
order: 'id desc',
},
comments: [],
total: 0,
searchFormFields: [],
tableListFields: [],
selectedRow: [],
comment: { id: 0 },
}
},
head() {
return {
title: `评论管理 - ${this.settings.system.sitename}`,
}
},
computed: {
settings() {
return this.$store.state.setting.settings
},
},
watch: {
'$route.query': {
immediate: true,
handler() {
this.search = {
...this.search,
...this.$route.query,
page: parseInt(this.$route.query.page) || 1,
size: parseInt(this.$route.query.size) || 10,
...parseQueryIntArray(this.$route.query, ['status']),
}
this.listComment()
},
},
},
async created() {
this.initSearchForm()
this.initTableListFields()
},
methods: {
async listComment() {
this.loading = true
const res = await listComment(this.search)
if (res.status === 200) {
this.comments = (res.data.comment || []).map((item) => {
item.username = item.user.username
item.document_title_html = genLinkHTML(
item.document_title,
`/document/${item.document_id}`
)
item.username_html = genLinkHTML(
item.username,
`/user/${item.user_id}`
)
return item
})
this.total = res.data.total
} else {
this.$message.error(res.data.message)
}
this.loading = false
},
handleSizeChange(val) {
this.search.size = val
this.$router.push({
query: this.search,
})
},
handlePageChange(val) {
this.search.page = val
this.$router.push({
query: this.search,
})
},
onSearch(search) {
this.search = { ...this.search, ...search, page: 1 }
if (
location.pathname + location.search ===
        this.$router.resolve({
          query: this.search,
        }).href
) {
this.listComment()
} else {
this.$router.push({
query: this.search,
})
}
},
onCreate() {
this.comment = { id: 0 }
this.formCommentVisible = true
this.$nextTick(() => {
this.$refs.commentForm.reset()
})
},
async editRow(row) {
const res = await getComment({ id: row.id })
if (res.status === 200) {
this.comment = res.data
this.formCommentVisible = true
} else {
this.$message.error(res.data.message)
}
},
formCommentSuccess() {
this.formCommentVisible = false
this.listComment()
},
async checkComment(cmd) {
const res = await checkComment({
id: this.selectedRow.map((item) => item.id),
status: cmd,
})
if (res.status === 200) {
this.$message.success('')
this.listComment()
return
}
this.$message.error(res.data.message || '')
},
batchDelete() {
this.$confirm(
`您确定要删除选中的【${this.selectedRow.length}条】评论吗?删除之后不可恢复!`,
'',
{
confirmButtonText: '',
cancelButtonText: '',
type: 'warning',
}
)
.then(async () => {
const ids = this.selectedRow.map((item) => item.id)
const res = await deleteComment({ id: ids })
if (res.status === 200) {
this.$message.success('')
this.listComment()
} else {
this.$message.error(res.data.message)
}
})
.catch(() => {})
},
deleteRow(row) {
this.$confirm(`您确定要删除该评论吗?删除之后不可恢复!`, '', {
confirmButtonText: '',
cancelButtonText: '',
type: 'warning',
})
.then(async () => {
const res = await deleteComment({ id: row.id })
if (res.status === 200) {
this.$message.success('')
this.listComment()
} else {
this.$message.error(res.data.message)
}
})
.catch(() => {})
},
selectRow(rows) {
this.selectedRow = rows
},
initSearchForm() {
this.searchFormFields = [
{
type: 'text',
label: '',
name: 'wd',
placeholder: '',
},
{
type: 'select',
label: '',
name: 'status',
placeholder: '',
multiple: true,
options: [
{ label: '', value: 2 },
{ label: '', value: 1 },
{ label: '', value: 0 },
],
},
]
},
initTableListFields() {
this.tableListFields = [
{ prop: 'id', label: 'ID', width: 80, type: 'number', fixed: 'left' },
{
prop: 'status',
label: '',
width: 80,
type: 'enum',
fixed: 'left',
enum: {
2: { label: '', value: 2, type: 'danger' },
1: { label: '', value: 1, type: 'success' },
0: { label: '', value: 0 },
},
},
{
prop: 'document_title_html',
label: '',
minWidth: 150,
type: 'html',
},
{ prop: 'content', label: '', minWidth: 150 },
{ prop: 'username_html', label: '', minWidth: 150, type: 'html' },
{ prop: 'created_at', label: '', width: 160, type: 'datetime' },
{ prop: 'updated_at', label: '', width: 160, type: 'datetime' },
]
},
},
}
</script>
<style></style>