509 lines
19 KiB
Vue
509 lines
19 KiB
Vue
<!--
|
|
* @Descripttion: (论坛帖子/T_Posts)
|
|
* @Author: (admin)
|
|
* @Date: (2025-11-16)
|
|
-->
|
|
<template>
|
|
<div>
|
|
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
|
|
<el-form-item label="用户ID" prop="userId">
|
|
<el-input v-model.number="queryParams.userId" placeholder="请输入用户ID" />
|
|
</el-form-item>
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="queryParams.title" placeholder="请输入标题" />
|
|
</el-form-item>
|
|
<el-form-item label="帖子状态" prop="status">
|
|
<el-select clearable v-model="queryParams.status" placeholder="请选择帖子状态">
|
|
<el-option v-for="item in options.liveforum_posts_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
|
|
<span class="fl">{{ item.dictLabel }}</span>
|
|
<span class="fr" style="color: var(--el-text-color-secondary);">{{ item.dictValue }}</span>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="是否已删除" prop="isDeleted">
|
|
<el-radio-group v-model="queryParams.isDeleted">
|
|
<el-radio>全部</el-radio>
|
|
<el-radio v-for="item in options.liveforum_action_bool " :key="item.dictValue" :value="item.dictValue">{{item.dictLabel}}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
|
|
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 工具区域 -->
|
|
<el-row :gutter="15" class="mb10">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" v-hasPermi="['tposts:add']" plain icon="plus" @click="handleAdd">
|
|
{{ $t('btn.add') }}
|
|
</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="success" :disabled="single" v-hasPermi="['tposts:edit']" plain icon="edit" @click="handleUpdate">
|
|
{{ $t('btn.edit') }}
|
|
</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="danger" :disabled="multiple" v-hasPermi="['tposts:delete']" plain icon="delete" @click="handleDelete">
|
|
{{ $t('btn.delete') }}
|
|
</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['tposts:export']">
|
|
{{ $t('btn.export') }}
|
|
</el-button>
|
|
</el-col>
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
|
</el-row>
|
|
|
|
<el-table
|
|
:data="dataList"
|
|
v-loading="loading"
|
|
ref="table"
|
|
border
|
|
header-cell-class-name="el-table-header-cell"
|
|
highlight-current-row
|
|
@sort-change="sortChange"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="50" align="center"/>
|
|
<el-table-column prop="id" label="id" align="center" v-if="columns.showColumn('id')"/>
|
|
<el-table-column prop="userId" label="用户ID" align="center" v-if="columns.showColumn('userId')"/>
|
|
<el-table-column prop="nickName" label="用户昵称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('nickName')"/>
|
|
<el-table-column prop="title" label="标题" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('title')"/>
|
|
<el-table-column prop="coverImage" label="封面图片" align="center" v-if="columns.showColumn('coverImage')">
|
|
<template #default="scope">
|
|
<ImagePreview :src="scope.row.coverImage"></ImagePreview>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="content" label="正文内容" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('content')"/>
|
|
<el-table-column prop="categoryId" label="分类ID" align="center" v-if="columns.showColumn('categoryId')"/>
|
|
<el-table-column prop="viewCount" label="浏览次数" align="center" v-if="columns.showColumn('viewCount')"/>
|
|
<el-table-column prop="likeCount" label="点赞数量" align="center" v-if="columns.showColumn('likeCount')"/>
|
|
<el-table-column prop="commentCount" label="评论数量" align="center" v-if="columns.showColumn('commentCount')"/>
|
|
<el-table-column prop="shareCount" label="分享次数" align="center" v-if="columns.showColumn('shareCount')"/>
|
|
<el-table-column prop="isTop" label="是否置顶" align="center" v-if="columns.showColumn('isTop')">
|
|
<template #default="scope">
|
|
<dict-tag :options=" options.liveforum_action_bool " :value="scope.row.isTop" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="isHot" label="是否热门" align="center" v-if="columns.showColumn('isHot')">
|
|
<template #default="scope">
|
|
<dict-tag :options=" options.liveforum_action_bool " :value="scope.row.isHot" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="isEssence" label="是否精华" align="center" v-if="columns.showColumn('isEssence')">
|
|
<template #default="scope">
|
|
<dict-tag :options=" options.liveforum_action_bool " :value="scope.row.isEssence" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="帖子状态" align="center" v-if="columns.showColumn('status')">
|
|
<template #default="scope">
|
|
<dict-tag :options=" options.liveforum_posts_status " :value="scope.row.status" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="publishTime" label="发布时间" :show-overflow-tooltip="true" v-if="columns.showColumn('publishTime')"/>
|
|
<el-table-column prop="isDeleted" label="是否已删除" align="center" v-if="columns.showColumn('isDeleted')">
|
|
<template #default="scope">
|
|
<dict-tag :options=" options.liveforum_action_bool " :value="scope.row.isDeleted" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="deletedAt" label="删除时间" :show-overflow-tooltip="true" v-if="columns.showColumn('deletedAt')"/>
|
|
<el-table-column prop="createdAt" label="创建时间" :show-overflow-tooltip="true" v-if="columns.showColumn('createdAt')"/>
|
|
<el-table-column prop="updatedAt" label="更新时间" :show-overflow-tooltip="true" v-if="columns.showColumn('updatedAt')"/>
|
|
<el-table-column label="操作" width="160">
|
|
<template #default="scope">
|
|
<el-button type="primary" size="small" icon="view" title="详情" @click="handlePreview(scope.row)"></el-button>
|
|
<el-button type="success" size="small" icon="edit" title="编辑" v-hasPermi="['tposts:edit']" @click="handleUpdate(scope.row)"></el-button>
|
|
<el-button type="danger" size="small" icon="delete" title="删除" v-hasPermi="['tposts:delete']" @click="handleDelete(scope.row)"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
|
|
|
<el-dialog :title="title" :lock-scroll="false" v-model="open" >
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
|
<el-row :gutter="20">
|
|
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="用户ID" prop="userId">
|
|
<el-input v-model.number="form.userId" placeholder="请输入用户ID" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="form.title" placeholder="请输入标题" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="24">
|
|
<el-form-item label="封面图片" prop="coverImage">
|
|
<UploadImage v-model="form.coverImage" :data="{ uploadType: 1 }" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="24">
|
|
<el-form-item label="正文内容" prop="content">
|
|
<el-input type="textarea" v-model="form.content" placeholder="请输入正文内容"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="分类ID" prop="categoryId">
|
|
<el-input v-model.number="form.categoryId" placeholder="请输入分类ID" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="是否置顶" prop="isTop">
|
|
<el-radio-group v-model="form.isTop">
|
|
<el-radio v-for="item in options.liveforum_action_bool" :key="item.dictValue" :value="item.dictValue">
|
|
{{item.dictLabel}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="是否热门" prop="isHot">
|
|
<el-radio-group v-model="form.isHot">
|
|
<el-radio v-for="item in options.liveforum_action_bool" :key="item.dictValue" :value="item.dictValue">
|
|
{{item.dictLabel}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="是否精华" prop="isEssence">
|
|
<el-radio-group v-model="form.isEssence">
|
|
<el-radio v-for="item in options.liveforum_action_bool" :key="item.dictValue" :value="item.dictValue">
|
|
{{item.dictLabel}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="帖子状态" prop="status">
|
|
<el-select v-model="form.status" placeholder="请选择帖子状态">
|
|
<el-option
|
|
v-for="item in options.liveforum_posts_status"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="parseInt(item.dictValue)"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="12">
|
|
<el-form-item label="发布时间" prop="publishTime">
|
|
<el-date-picker
|
|
v-model="form.publishTime"
|
|
type="datetime"
|
|
placeholder="选择日期时间"
|
|
value-format="YYYY-MM-DD HH:mm:ss">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer v-if="opertype != 3">
|
|
<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
|
|
<el-button type="primary" :loading="state.submitLoading" @click="submitForm">{{ $t('btn.submit') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="tposts">
|
|
import { listtposts,
|
|
addtposts, deltposts,
|
|
updatetposts,gettposts,
|
|
}
|
|
from '@/api/liveforum/tposts.js'
|
|
const { proxy } = getCurrentInstance()
|
|
const ids = ref([])
|
|
const loading = ref(false)
|
|
const showSearch = ref(true)
|
|
const queryParams = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
sort: 'Id',
|
|
sortType: 'desc',
|
|
userId: undefined,
|
|
title: undefined,
|
|
status: undefined,
|
|
isDeleted: undefined,
|
|
})
|
|
const columns = ref([
|
|
{ visible: true, align: 'center', type: '', prop: 'id', label: 'id' },
|
|
{ visible: true, align: 'center', type: '', prop: 'userId', label: '用户ID' },
|
|
{ visible: true, align: 'center', type: '', prop: 'nickName', label: '用户昵称' ,showOverflowTooltip: true },
|
|
{ visible: true, align: 'center', type: '', prop: 'title', label: '标题' ,showOverflowTooltip: true },
|
|
{ visible: true, align: 'center', type: 'img', prop: 'coverImage', label: '封面图片' ,showOverflowTooltip: true },
|
|
{ visible: true, align: 'center', type: '', prop: 'content', label: '正文内容' ,showOverflowTooltip: true },
|
|
{ visible: true, align: 'center', type: '', prop: 'categoryId', label: '分类ID' },
|
|
{ visible: true, align: 'center', type: '', prop: 'viewCount', label: '浏览次数' },
|
|
{ visible: true, align: 'center', type: '', prop: 'likeCount', label: '点赞数量' },
|
|
{ visible: false, align: 'center', type: '', prop: 'commentCount', label: '评论数量' },
|
|
{ visible: false, align: 'center', type: '', prop: 'shareCount', label: '分享次数' },
|
|
{ visible: false, align: 'center', type: 'dict', prop: 'isTop', label: '是否置顶' ,dictType: 'liveforum_action_bool' },
|
|
{ visible: false, align: 'center', type: 'dict', prop: 'isHot', label: '是否热门' ,dictType: 'liveforum_action_bool' },
|
|
{ visible: false, align: 'center', type: 'dict', prop: 'isEssence', label: '是否精华' ,dictType: 'liveforum_action_bool' },
|
|
{ visible: false, align: 'center', type: 'dict', prop: 'status', label: '帖子状态' ,dictType: 'liveforum_posts_status' },
|
|
{ visible: false, align: 'center', type: '', prop: 'publishTime', label: '发布时间' ,showOverflowTooltip: true },
|
|
{ visible: false, align: 'center', type: 'dict', prop: 'isDeleted', label: '是否已删除' ,dictType: 'liveforum_action_bool' },
|
|
{ visible: false, align: 'center', type: '', prop: 'deletedAt', label: '删除时间' ,showOverflowTooltip: true },
|
|
{ visible: false, align: 'center', type: '', prop: 'createdAt', label: '创建时间' ,showOverflowTooltip: true },
|
|
{ visible: false, align: 'center', type: '', prop: 'updatedAt', label: '更新时间' ,showOverflowTooltip: true },
|
|
//{ visible: false, prop: 'actions', label: '操作', type: 'slot', width: '160' }
|
|
])
|
|
const total = ref(0)
|
|
const dataList = ref([])
|
|
const queryRef = ref()
|
|
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
|
|
|
|
|
|
var dictParams = [
|
|
"liveforum_action_bool",
|
|
"liveforum_posts_status",
|
|
]
|
|
|
|
proxy.getDicts(dictParams).then((response) => {
|
|
response.data.forEach((element) => {
|
|
state.options[element.dictType] = element.list
|
|
})
|
|
})
|
|
|
|
function getList(){
|
|
loading.value = true
|
|
listtposts(queryParams).then(res => {
|
|
const { code, data } = res
|
|
if (code == 200) {
|
|
dataList.value = data.result
|
|
total.value = data.totalNum
|
|
loading.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
// 查询
|
|
function handleQuery() {
|
|
queryParams.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
// 重置查询操作
|
|
function resetQuery(){
|
|
proxy.resetForm("queryRef")
|
|
handleQuery()
|
|
}
|
|
// 多选框选中数据
|
|
function handleSelectionChange(selection) {
|
|
ids.value = selection.map((item) => item.id);
|
|
single.value = selection.length != 1
|
|
multiple.value = !selection.length;
|
|
}
|
|
// 自定义排序
|
|
function sortChange(column) {
|
|
var sort = undefined
|
|
var sortType = undefined
|
|
|
|
if (column.prop != null && column.order != null) {
|
|
sort = column.prop
|
|
sortType = column.order
|
|
|
|
}
|
|
queryParams.sort = sort
|
|
queryParams.sortType = sortType
|
|
handleQuery()
|
|
}
|
|
|
|
/*************** form操作 ***************/
|
|
const formRef = ref()
|
|
const title = ref('')
|
|
// 操作类型 1、add 2、edit 3、view
|
|
const opertype = ref(0)
|
|
const open = ref(false)
|
|
const state = reactive({
|
|
single: true,
|
|
multiple: true,
|
|
submitLoading: false,
|
|
form: {},
|
|
rules: {
|
|
userId: [{ required: true, message: "用户ID不能为空", trigger: "blur" , type: "number" }],
|
|
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
|
|
content: [{ required: true, message: "正文内容不能为空", trigger: "blur" }],
|
|
isTop: [{ required: true, message: "是否置顶不能为空", trigger: "blur" }],
|
|
isHot: [{ required: true, message: "是否热门不能为空", trigger: "blur" }],
|
|
isEssence: [{ required: true, message: "是否精华不能为空", trigger: "blur" }],
|
|
status: [{ required: true, message: "帖子状态不能为空", trigger: "change" , type: "number" }],
|
|
},
|
|
options: {
|
|
// 是否置顶 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
|
|
liveforum_action_bool: [],
|
|
// 帖子状态 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
|
|
liveforum_posts_status: [],
|
|
}
|
|
})
|
|
|
|
const { form, rules, options, single, multiple } = toRefs(state)
|
|
|
|
// 关闭dialog
|
|
function cancel(){
|
|
open.value = false
|
|
reset()
|
|
}
|
|
|
|
// 重置表单
|
|
function reset() {
|
|
form.value = {
|
|
id: null,
|
|
userId: null,
|
|
title: null,
|
|
coverImage: null,
|
|
content: null,
|
|
categoryId: null,
|
|
viewCount: null,
|
|
likeCount: null,
|
|
commentCount: null,
|
|
shareCount: null,
|
|
isTop: null,
|
|
isHot: null,
|
|
isEssence: null,
|
|
status: null,
|
|
publishTime: null,
|
|
isDeleted: null,
|
|
deletedAt: null,
|
|
createdAt: null,
|
|
updatedAt: null,
|
|
};
|
|
proxy.resetForm("formRef")
|
|
}
|
|
|
|
/**
|
|
* 查看
|
|
* @param {*} row
|
|
*/
|
|
function handlePreview(row) {
|
|
reset()
|
|
const id = row.id
|
|
gettposts(id).then((res) => {
|
|
const { code, data } = res
|
|
if (code == 200) {
|
|
open.value = true
|
|
title.value = '查看'
|
|
opertype.value = 3
|
|
form.value = {
|
|
...data,
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 添加按钮操作
|
|
function handleAdd() {
|
|
reset();
|
|
open.value = true
|
|
state.submitLoading = false
|
|
title.value = '添加论坛帖子'
|
|
opertype.value = 1
|
|
}
|
|
// 修改按钮操作
|
|
function handleUpdate(row) {
|
|
reset()
|
|
const id = row.id || ids.value
|
|
gettposts(id).then((res) => {
|
|
const { code, data } = res
|
|
if (code == 200) {
|
|
open.value = true
|
|
title.value = '修改论坛帖子'
|
|
opertype.value = 2
|
|
|
|
form.value = {
|
|
...data,
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 添加&修改 表单提交
|
|
function submitForm() {
|
|
proxy.$refs["formRef"].validate((valid) => {
|
|
if (valid) {
|
|
state.submitLoading = true
|
|
|
|
if (form.value.id != undefined && opertype.value === 2) {
|
|
updatetposts(form.value).then((res) => {
|
|
proxy.$modal.msgSuccess("修改成功")
|
|
open.value = false
|
|
getList()
|
|
})
|
|
.finally(() => {
|
|
state.submitLoading = false
|
|
})
|
|
} else {
|
|
addtposts(form.value).then((res) => {
|
|
proxy.$modal.msgSuccess("新增成功")
|
|
open.value = false
|
|
getList()
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
state.submitLoading = false
|
|
}, 800)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 删除按钮操作
|
|
function handleDelete(row) {
|
|
const Ids = row.id || ids.value
|
|
|
|
proxy
|
|
.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？', "警告", {
|
|
confirmButtonText: proxy.$t('common.ok'),
|
|
cancelButtonText: proxy.$t('common.cancel'),
|
|
type: "warning",
|
|
})
|
|
.then(function () {
|
|
return deltposts(Ids)
|
|
})
|
|
.then(() => {
|
|
getList()
|
|
proxy.$modal.msgSuccess("删除成功")
|
|
})
|
|
}
|
|
|
|
|
|
|
|
// 导出按钮操作
|
|
function handleExport() {
|
|
proxy
|
|
.$confirm("是否确认导出论坛帖子数据项?", "警告", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(async () => {
|
|
await proxy.downFile('/liveforum/tposts/export', { ...queryParams })
|
|
})
|
|
}
|
|
|
|
handleQuery()
|
|
</script>
|