OnlineEducation-student-front/src/views/forum/postinfo/index.vue

<template>
	<a-card :bordered="false">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.postId"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('forumPostInfoAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<xn-batch-delete
						v-if="hasPerm('forumPostInfoBatchDelete')"
						:selectedRowKeys="selectedRowKeys"
						@batchDelete="deleteBatchForumPostInfo"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('forumPostInfoEdit')">编辑</a>
						<a-divider type="vertical" v-if="hasPerm(['forumPostInfoEdit', 'forumPostInfoDelete'], 'and')" />
						<a-popconfirm title="确定要删除吗？" @confirm="deleteForumPostInfo(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('forumPostInfoDelete')">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'postContent'">
					<a-tooltip>
						<template #title>
							<div class="htmlContent" v-html="record.postContent"></div>
						</template>
						<div class="one-line" v-html="record.postContent"></div>
					</a-tooltip>
				</template>
				<template v-if="column.dataIndex === 'lastReplyTime'">
					<div>{{ formatDateTime(record.lastReplyTime) }}</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'">
					<a-switch
						v-model:checked="record.postStatus"
						:checkedValue="0"
						:unCheckedValue="1"
						checked-children="开"
						un-checked-children="关"
						@change="closeItem($event, record)"
					/>
				</template>
				<template v-if="column.dataIndex === 'isTop'">
					<a-switch
						v-model:checked="record.isTop"
						:checkedValue="1"
						:unCheckedValue="0"
						checked-children="是"
						un-checked-children="否"
						@change="topItem($event, record)"
					/>
				</template>
				<template v-if="column.dataIndex === 'appointUser'">
					<span v-for="(item, idx) in seltUserList(record.appointUser)">{{ item.name }},</span>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="table.refresh(true)" />
</template>

<script setup name="postinfo">
	import Form from './form.vue'
	import forumPostInfoApi from '@/api/forum/forumPostInfoApi'
	import forumApi from '@/api/forum/forumApi'
	import { parseTime } from '@/utils/exam'
	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '用户',
			dataIndex: 'userNickName'
		},
		{
			title: '帖子标题',
			dataIndex: 'postTitle',
			width: 120
		},
		{
			title: '帖子内容',
			dataIndex: 'postContent',
			width: 300,
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'postStatus'
		},
		{
			title: '是否置顶',
			dataIndex: 'isTop'
		},
		{
			title: '浏览次数',
			dataIndex: 'viewCount'
		},
		{
			title: '回复次数',
			dataIndex: 'replyCount'
		},
		{
			title: '点赞次数',
			dataIndex: 'likeCount'
		},
		{
			title: '最后回复用户',
			dataIndex: 'lastReplyUserNickName',
			width: 120
		},
		{
			title: '最后回复时间',
			dataIndex: 'lastReplyTime',
			width: 120
		},
		{
			title: '帖子类型',
			dataIndex: 'postType'
		},
		{
			title: '定向用户',
			dataIndex: 'appointUser'
		}
	]

	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
	//用户
	const usertypeOptions = ref([])
	// 操作栏通过权限判断是否显示
	if (hasPerm(['forumPostInfoEdit', 'forumPostInfoDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '150px'
		})
	}
	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 forumPostInfoApi.forumPostInfoPage(parameter).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}
	// 删除
	const deleteForumPostInfo = (record) => {
		let params = [
			{
				postId: record.postId
			}
		]
		forumPostInfoApi.forumPostInfoDelete(params).then(() => {
			table.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchForumPostInfo = (params) => {
		params = params.map((r) => {
			return {
				postId: r.id
			}
		})
		forumPostInfoApi.forumPostInfoDelete(params).then(() => {
			table.value.clearRefreshSelected()
		})
	}
	const closeItem = (event, params) => {
		forumApi
			.postinfoStatus({
				postId: params.postId,
				postStatus: event
			})
			.then((data) => {
				table.value.refresh(true)
			})
	}
	const topItem = (event, params) => {
		forumApi
			.postinfoTop({
				postId: params.postId,
				postStatus: event
			})
			.then((data) => {
				table.value.refresh(true)
			})
	}
	const getUserList = () => {
		forumApi.allUserList().then((data) => {
			usertypeOptions.value = data.map((r) => {
				return {
					label: r.name,
					value: r.id,
					...r
				}
			})
		})
	}
	getUserList()
	const seltUserList = (str) => {
		return usertypeOptions.value.filter((r) => {
			if (str && str.includes(r.id)) {
				return r
			}
		})
	}
</script>
<style scoped lang="less">
	.htmlContent {
		max-height: 400px;
		overflow-x: auto;
		:deep(img) {
			max-width: 100% !important;
		}
	}

	.one-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>