|
|
@@ -1,64 +1,58 @@
|
|
|
<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>
|
|
|
+ <div style="display: flex; justify-content: center">
|
|
|
+ <a-card :bordered="false" style="width: 1200px" class="formMount">
|
|
|
+ <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-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.type)"
|
|
|
+ >
|
|
|
+ {{ 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>
|
|
|
- <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)" />
|
|
|
+ </s-table>
|
|
|
+ <Form ref="formRef" @successful="table.refresh(true)" />
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="forumList">
|
|
|
@@ -78,11 +72,39 @@
|
|
|
const moduleTypeList = ref([
|
|
|
{
|
|
|
title: '最新',
|
|
|
- id: 0
|
|
|
+ id: 0,
|
|
|
+ type: 1,
|
|
|
+ state: 0
|
|
|
},
|
|
|
{
|
|
|
title: '热门',
|
|
|
- id: 1
|
|
|
+ id: 1,
|
|
|
+ type: 1,
|
|
|
+ state: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '我发布的',
|
|
|
+ id: 2,
|
|
|
+ type: 2,
|
|
|
+ state: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '我回复的',
|
|
|
+ id: 3,
|
|
|
+ type: 2,
|
|
|
+ state: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于我的',
|
|
|
+ id: 4,
|
|
|
+ type: 2,
|
|
|
+ state: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '我点赞的',
|
|
|
+ id: 5,
|
|
|
+ type: 2,
|
|
|
+ state: 4
|
|
|
}
|
|
|
])
|
|
|
const columns = [
|
|
|
@@ -119,7 +141,6 @@
|
|
|
const typeOptions = ref([])
|
|
|
const handleChange = (value) => {
|
|
|
exType.value = false
|
|
|
- typeValueEx.value = ''
|
|
|
searchFormState.typeId = value
|
|
|
table.value.refresh(true)
|
|
|
}
|
|
|
@@ -132,7 +153,6 @@
|
|
|
}
|
|
|
// 查询
|
|
|
const onSearch = () => {
|
|
|
- typeValueEx.value = ''
|
|
|
exType.value = false
|
|
|
table.value.refresh(true)
|
|
|
}
|
|
|
@@ -163,39 +183,12 @@
|
|
|
}
|
|
|
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) => {
|
|
|
+ let postExtend = moduleTypeList.value.filter((r) => r.id == searchFormState.sortOrder)[0]?.state
|
|
|
+ return forumApi.moreList(Object.assign(parameter, { postExtend: postExtend })).then((data) => {
|
|
|
if (data) {
|
|
|
return data
|
|
|
} else {
|
|
|
@@ -213,13 +206,34 @@
|
|
|
}
|
|
|
}
|
|
|
// 切换应用标签查询菜单列表
|
|
|
- const moduleClock = (value) => {
|
|
|
+ const moduleClock = (value, t) => {
|
|
|
exType.value = false
|
|
|
- typeValueEx.value = ''
|
|
|
searchFormState.sortOrder = value
|
|
|
+ if (t == 2) {
|
|
|
+ exType.value = true
|
|
|
+ }
|
|
|
table.value.refresh(true)
|
|
|
}
|
|
|
-
|
|
|
+ // 触底函数
|
|
|
+ const onReachBottom = () => {
|
|
|
+ window.addEventListener('scroll', onBottom())
|
|
|
+ }
|
|
|
+ // 触底相应函数
|
|
|
+ const onBottom = () => {
|
|
|
+ // 获取可视高度
|
|
|
+ let clientHeight = document.documentElement.clientHeight
|
|
|
+ // 获取滚动高度
|
|
|
+ let scrollTop = document.documentElement.scrollTop
|
|
|
+ // 滚动条高度
|
|
|
+ let scrollHeight = document.documentElement.scrollHeight
|
|
|
+ if (clientHeight + scrollTop + 180 > scrollHeight) {
|
|
|
+ console.log('触底了')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onReachBottom()
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ window.removeEventListener('mousemove', onBottom())
|
|
|
+ })
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.forum-list-title {
|
canghailong