OnlineEducation-teacher-front/src/views/forum/reportinfo/index.vue

<template>
	<a-card :bordered="false">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.reportId"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('forumReportInfoAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<xn-batch-delete
						v-if="hasPerm('forumReportInfoBatchDelete')"
						:selectedRowKeys="selectedRowKeys"
						@batchDelete="deleteBatchForumReportInfo"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('forumReportInfoEdit')">编辑</a>
						<a-divider type="vertical" v-if="hasPerm(['forumReportInfoEdit', 'forumReportInfoDelete'], 'and')" />
						<a-popconfirm title="确定要删除吗？" @confirm="deleteForumReportInfo(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('forumReportInfoDelete')">删除</a-button>
						</a-popconfirm>
						<a-divider type="vertical" v-if="hasPerm(['forumReportInfoDelete', 'forumReportInfoAudit'], 'and')" />
						<a @click="showModal(record)" v-if="hasPerm('forumReportInfoAudit')">审核</a>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'reportReasonType'">
					<div v-if="record.reportReasonType == 0">垃圾广告</div>
					<div v-if="record.reportReasonType == 1">色情内容</div>
					<div v-if="record.reportReasonType == 2">人身攻击</div>
					<div v-if="record.reportReasonType == 3">政治敏感</div>
					<div v-if="record.reportReasonType == 4">其他</div>
				</template>
				<template v-if="column.dataIndex === 'reportStatus'">
					<div v-if="record.reportStatus == 0">待处理</div>
					<div v-if="record.reportStatus == 1">已关闭帖子</div>
					<div v-if="record.reportStatus == 2">已驳回</div>
				</template>
				<template v-if="column.dataIndex === 'postType'">
					<div v-if="record.postType == 0">普通帖子</div>
					<div v-if="record.postType == 1">技术支持</div>
					<div v-if="record.postType == 2">内容纠错</div>
				</template>
				<template v-if="column.dataIndex === 'postStatus'">
					<div v-if="record.postStatus == 0">正常</div>
					<div v-if="record.postStatus == 1">关闭</div>
				</template>
				<template v-if="column.dataIndex === 'evidenceScreenshot'">
					<a-image
						:width="50"
						:height="50"
						:src="sysConfig.FILE_URL + record.evidenceScreenshot"
						fallback="data:image/png;base64,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"
					/>
				</template>
				<template v-if="column.dataIndex === 'postTitle'">
					<a @click="jumpDetail(record)">{{ record.postTitle }}</a>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="table.refresh(true)" />
	<a-modal v-model:visible="openAudit" title="审核" @ok="auditFun">
		<a-select v-model:value="reportStatus" placeholder="请选择" style="width: 100%" :options="statusType"></a-select>
	</a-modal>
</template>

<script setup name="reportinfo">
	import Form from './form.vue'
	import forumReportInfoApi from '@/api/forum/forumReportInfoApi'
	import forumApi from '@/api/forum/forumApi'
	import { message } from 'ant-design-vue'
	import sysConfig from '@/config/index'
	import { useRoute, useRouter } from 'vue-router'
	const router = useRouter()
	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '帖子标题',
			dataIndex: 'postTitle'
		},
		{
			title: '帖子类型',
			dataIndex: 'postType'
		},
		{
			title: '帖子状态',
			dataIndex: 'postStatus'
		},
		{
			title: '举报人',
			dataIndex: 'userNickname'
		},
		{
			title: '举报原因类型',
			dataIndex: 'reportReasonType'
		},
		{
			title: '举报信息描述',
			dataIndex: 'reportDetail'
		},
		{
			title: '证据图片',
			dataIndex: 'evidenceScreenshot'
		},
		{
			title: '举报处理状态',
			dataIndex: 'reportStatus'
		}
	]
	// 操作栏通过权限判断是否显示
	if (hasPerm(['forumReportInfoEdit', 'forumReportInfoDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '200px'
		})
	}
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		return forumReportInfoApi.forumReportInfoPage(parameter).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}
	// 删除
	const deleteForumReportInfo = (record) => {
		let params = [
			{
				reportId: record.reportId
			}
		]
		forumReportInfoApi.forumReportInfoDelete(params).then(() => {
			table.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchForumReportInfo = (params) => {
		params = params.map((r) => {
			return {
				reportId: r.id
			}
		})
		forumReportInfoApi.forumReportInfoDelete(params).then(() => {
			table.value.clearRefreshSelected()
		})
	}
	//状态
	const statusType = ref([
		{
			label: '关闭帖子',
			value: 1
		},
		{
			label: '驳回举报',
			value: 2
		}
	])
	const reportStatus = ref()
	const itemData = ref({})
	const openAudit = ref(false)
	const showModal = (event) => {
		itemData.value = event
		openAudit.value = true
	}
	const auditFun = (event) => {
		if (!reportStatus.value) {
			message.warning('请选择处理方式')
			return
		}
		forumApi
			.reportinfoAudit({
				reportId: itemData.value.reportId,
				reportStatus: reportStatus.value
			})
			.then((data) => {
				openAudit.value = false
				table.value.refresh(true)
			})
	}
	const jumpDetail = (event) => {
		router.push({
			path: '/forum/detail',
			query: {
				postId: event.postId,
			}
		})
	}
</script>