OnlineEducation-back-front/src/views/forum/index.vue

<template>
	<a-card :bordered="false">
		<a-space>
			<a-input-search
				v-model:value="searchFormState.postTitle"
				placeholder="请输入名称关键词"
				enter-button
				allowClear
				@search="onSearch"
			/>
			<a-select
				v-model:value="typeValue"
				show-search
				placeholder="所有分类"
				style="width: 200px"
				:options="typeOptions"
				:filter-option="filterOption"
				@change="handleChange"
			></a-select>
			<a-select
				v-model:value="typeValueEx"
				allowClear
				placeholder="请选择"
				style="width: 200px"
				:options="typeOptionsEx"
				@change="handleChangeEx"
			></a-select>
			<a-radio-group v-model:value="searchFormState.sortOrder" button-style="solid">
				<a-radio-button
					v-for="module in moduleTypeList"
					:key="module.id"
					:value="module.id"
					@click="moduleClock(module.id)"
				>
					{{ module.title }}
				</a-radio-button>
			</a-radio-group>
			<a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.sortOrder)">
				<template #icon><plus-outlined /></template>
				创建新主题
			</a-button>
		</a-space>
		<s-table ref="table" :columns="columns" :data="loadData" :row-key="(record) => record.id" :custom-row="customRow">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'postTitle'">
					<div class="forum-list-title">{{ record.postTitle }}</div>
					<div class="forum-list-type">{{ record.typeName }}</div>
					<div class="forum-list-content one-line" v-html="record.postContent"></div>
				</template>
				<template v-if="column.dataIndex === 'lastReplyUserAvatar'">
					<a-tooltip :title="record.lastReplyUserNickName" placement="top">
						<a-avatar :src="record.lastReplyUserAvatar"></a-avatar>
					</a-tooltip>
				</template>
				<template v-if="column.dataIndex === 'lastReplyTime'">
					<div>{{ formatDateTime(record.lastReplyTime) }}</div>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="table.refresh(true)" />
</template>

<script setup name="forumList">
	import forumApi from '@/api/forum/forumApi'
	import Form from './form.vue'
	import { parseTime } from '@/utils/exam'
	import { useRoute, useRouter } from 'vue-router'
	const route = useRoute()
	const router = useRouter()
	const formRef = ref()
	let searchFormState = reactive({
		sortOrder: 0,
		postTitle: '',
		postType: route.query.postType ?? null
	})
	const table = ref(null)
	const moduleTypeList = ref([
		{
			title: '最新',
			id: 0
		},
		{
			title: '热门',
			id: 1
		}
	])
	const columns = [
		{
			title: '主题',
			dataIndex: 'postTitle'
		},
		{
			title: '最后回复人',
			dataIndex: 'lastReplyUserAvatar',
			align: 'center',
			width: 100
		},
		{
			title: '回复量',
			dataIndex: 'replyCount',
			align: 'center',
			width: 100
		},
		{
			title: '浏览量',
			dataIndex: 'viewCount',
			align: 'center',
			width: 100
		},
		{
			title: '最后回复时间',
			dataIndex: 'lastReplyTime',
			align: 'center',
			width: 120
		}
	]
	const typeValue = ref('所有分类')
	const typeOptions = ref([])
	const handleChange = (value) => {
		exType.value = false
		typeValueEx.value = ''
		searchFormState.typeId = value
		table.value.refresh(true)
	}
	const filterOption = (input, option) => {
		return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}
	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
	// 查询
	const onSearch = () => {
		typeValueEx.value = ''
		exType.value = false
		table.value.refresh(true)
	}
	function customRow(record) {
		return {
			onClick: () => itemSelect(record)
		}
	}
	function itemSelect(record) {
		router.push({
			path: '/forum/detail',
			query: {
				postId: record.postId,
				postType: route.query.postType ?? ''
			}
		})
	}
	function getTypeList() {
		forumApi.forumTypeList().then((data) => {
			typeOptions.value = data.map((r) => {
				return {
					label: r.typeName,
					value: r.typeId,
					...r
				}
			})
		})
	}
	getTypeList()

	const typeValueEx = ref('')
	const exType = ref(false)
	const typeOptionsEx = ref([
		{
			label: '我发布的',
			value: 1
		},
		{
			label: '我回复的',
			value: 2
		},
		{
			label: '关于我的',
			value: 3
		},
		{
			label: '我点赞的',
			value: 4
		}
	])
	const handleChangeEx = (value) => {
		if (value) {
			exType.value = true
		} else {
			exType.value = false
			typeValueEx.value = ''
		}

		table.value.refresh(true)
	}
	const loadData = (parameter) => {
		if (exType.value) {
			return forumApi.moreList(Object.assign(parameter, {postExtend:typeValueEx.value})).then((data) => {
				if (data) {
					return data
				} else {
					return []
				}
			})
		} else {
			return forumApi.forumList(Object.assign(parameter, searchFormState)).then((data) => {
				if (data) {
					return data
				} else {
					return []
				}
			})
		}
	}
	// 切换应用标签查询菜单列表
	const moduleClock = (value) => {
		exType.value = false
		typeValueEx.value = ''
		searchFormState.sortOrder = value
		table.value.refresh(true)
	}
</script>
<style scoped>
	.forum-list-title {
		font-size: 16px;
		font-weight: bold;
	}

	.forum-list-type {
		font-size: 12px;
	}

	.forum-list-content {
		font-size: 14px;
		color: #696969;
	}

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