Commit 3350ab36 by lijiabin

【需求 20331】 feat: 优化搜索框、等页面

parent 6cd51081
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
clearable clearable
/> />
<el-button type="primary" @click="handleSearch">搜索</el-button> <el-button type="primary" class="rounded-lg" @click="handleSearch">搜索</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
@change="(e) => changeSort(e as number)" @change="(e) => changeSort(e as number)"
> >
<el-radio-button <el-radio-button
class="rounded-lg!"
v-for="sort in sortOptions" v-for="sort in sortOptions"
:key="sort.value" :key="sort.value"
:label="sort.label" :label="sort.label"
......
...@@ -47,12 +47,11 @@ ...@@ -47,12 +47,11 @@
> >
<!-- 如果有评论的话 就展示 最热的 没有的话 说明没有评论 就展示内容 --> <!-- 如果有评论的话 就展示 最热的 没有的话 说明没有评论 就展示内容 -->
<template v-if="item.cultureCommentListVo?.hiddenName"> <template v-if="item.cultureCommentListVo?.hiddenName">
{{ item.cultureCommentListVo?.hiddenName }}{{ {{ item.cultureCommentListVo?.hiddenName }}
item.cultureCommentListVo?.content <span v-html="parseEmoji(item.cultureCommentListVo?.content)"></span>
}}
</template> </template>
<template v-else> <template v-else>
{{ item.content }} <p v-html="parseEmoji(item.content)"></p>
</template> </template>
</p> </p>
<!-- 展开/收起按钮 靠右边布局 --> <!-- 展开/收起按钮 靠右边布局 -->
...@@ -246,6 +245,7 @@ import type { ArticleItemDto } from '@/api/article/types' ...@@ -246,6 +245,7 @@ import type { ArticleItemDto } from '@/api/article/types'
import { useQuestionStore } from '@/stores/question' import { useQuestionStore } from '@/stores/question'
import ActionMore from '@/components/common/ActionMore/index.vue' import ActionMore from '@/components/common/ActionMore/index.vue'
import CommentDialog from '@/components/common/CommentDialog/index.vue' import CommentDialog from '@/components/common/CommentDialog/index.vue'
import { parseEmoji } from '@/utils/emoji'
const { fetchUserQestionNum } = useQuestionStore() const { fetchUserQestionNum } = useQuestionStore()
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
clearable clearable
/> />
<el-button type="primary" @click="handleSearch">搜索</el-button> <el-button type="primary" class="rounded-lg" @click="handleSearch">搜索</el-button>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
clearable clearable
/> />
<el-button type="primary" @click="handleSearch">搜索</el-button> <el-button type="primary" class="rounded-lg" @click="handleSearch">搜索</el-button>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -11,7 +11,15 @@ ...@@ -11,7 +11,15 @@
:name="tab.value" :name="tab.value"
/> />
</el-tabs> </el-tabs>
<div class="absolute right-0 top-2.5 z-1000"> <div class="absolute right-0 top-2.5 z-1000 flex items-center gap-2">
<el-select v-model="searchType" @change="refresh" class="w-25!" size="small">
<el-option
v-for="tab in [{ label: '全部', value: 'ALL' }, ...articleTypeListOptions]"
:key="tab.value"
:label="tab.label"
:value="tab.value"
/>
</el-select>
<el-icon <el-icon
size="15" size="15"
class="cursor-pointer hover:rotate-180 transition-all duration-300" class="cursor-pointer hover:rotate-180 transition-all duration-300"
...@@ -121,11 +129,11 @@ ...@@ -121,11 +129,11 @@
import { getAuditList, auditArticle } from '@/api' import { getAuditList, auditArticle } from '@/api'
import { usePageSearch } from '@/hooks' import { usePageSearch } from '@/hooks'
import { auditTypeListOptions, articleTypeListOptions } from '@/constants/options' import { auditTypeListOptions, articleTypeListOptions } from '@/constants/options'
import dayjs from 'dayjs'
import { AuditStatusEnum } from '@/constants' import { AuditStatusEnum } from '@/constants'
import type { AuditArticleDto, AuditListItemDto } from '@/api' import type { AuditArticleDto, AuditListItemDto } from '@/api'
import type { TabPaneName } from 'element-plus' import type { TabPaneName } from 'element-plus'
import { ArticleTypeEnum } from '@/constants' import { ArticleTypeEnum } from '@/constants'
import dayjs from 'dayjs'
const toggleTab = (key: TabPaneName) => { const toggleTab = (key: TabPaneName) => {
searchParams.value.isAudit = key as AuditStatusEnum searchParams.value.isAudit = key as AuditStatusEnum
...@@ -133,12 +141,30 @@ const toggleTab = (key: TabPaneName) => { ...@@ -133,12 +141,30 @@ const toggleTab = (key: TabPaneName) => {
} }
// State // State
const searchType = computed({
get() {
if (searchParams.value.type === '') {
return 'ALL'
}
return searchParams.value.type
},
set(value) {
if (value === 'ALL') {
searchParams.value.type = ''
} else {
searchParams.value.type = value
}
},
})
const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch( const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
getAuditList, getAuditList,
{ {
defaultParams: { defaultParams: {
isAudit: AuditStatusEnum.UNAUDITED, isAudit: AuditStatusEnum.UNAUDITED,
type: '',
}, },
immediate: false,
}, },
) )
...@@ -171,4 +197,7 @@ const handleView = (item: AuditListItemDto) => { ...@@ -171,4 +197,7 @@ const handleView = (item: AuditListItemDto) => {
const openArticleDetail = (id: number) => { const openArticleDetail = (id: number) => {
window.open(`/auditArticle/${id}`) window.open(`/auditArticle/${id}`)
} }
onActivated(() => {
refresh()
})
</script> </script>
...@@ -156,16 +156,6 @@ ...@@ -156,16 +156,6 @@
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import EditUserInfo from './components/editUserInfo.vue' import EditUserInfo from './components/editUserInfo.vue'
import SelfCollect from './components/selfCollect.vue'
import SelfPraise from './components/selfPraise.vue'
import SelfPublish from './components/selfPublish.vue'
import SelfDraft from './components/selfDraft.vue'
import SelfCase from './components/selfCase.vue'
import SelfTask from './components/selfTask.vue'
import SelfComment from './components/selfComment.vue'
import SelfAudit from './components/selfAudit.vue'
import SelfAnswer from './components/selfAnswer.vue'
import SelfComplaint from './components/selfComplaint.vue'
import { generateLoginKey, hasOfficialAccount } from '@/api' import { generateLoginKey, hasOfficialAccount } from '@/api'
import type { OfficialAccountItemDto } from '@/api/user/types' import type { OfficialAccountItemDto } from '@/api/user/types'
import { wxLogin } from '@/utils/wxUtil' import { wxLogin } from '@/utils/wxUtil'
...@@ -189,7 +179,9 @@ const getThirdLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => { ...@@ -189,7 +179,9 @@ const getThirdLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => {
console.log(route.fullPath, '三级路由用户信息页面') console.log(route.fullPath, '三级路由用户信息页面')
return route.path return route.path
} }
const componentRef = useTemplateRef<InstanceType<typeof SelfPublish>>('componentRef') const componentRef = useTemplateRef<{
refresh: () => void
}>('componentRef')
const editUserInfoRef = useTemplateRef<InstanceType<typeof EditUserInfo>>('editUserInfoRef') const editUserInfoRef = useTemplateRef<InstanceType<typeof EditUserInfo>>('editUserInfoRef')
const userStore = useUserStore() const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore) const { userInfo } = storeToRefs(userStore)
...@@ -200,56 +192,54 @@ const menuUserItems = [ ...@@ -200,56 +192,54 @@ const menuUserItems = [
path: 'selfPublish', path: 'selfPublish',
label: '我的帖子', label: '我的帖子',
icon: () => <IEpUser />, icon: () => <IEpUser />,
component: SelfPublish,
tab: '发布', tab: '发布',
}, },
{ {
path: 'selfDraft', path: 'selfDraft',
label: '我的草稿', label: '我的草稿',
icon: () => <IEpDocument />, icon: () => <IEpDocument />,
component: SelfDraft,
tab: '草稿', tab: '草稿',
}, },
{ {
path: 'selfCollect', path: 'selfCollect',
label: '我的收藏', label: '我的收藏',
icon: () => <IEpStar />, icon: () => <IEpStar />,
component: SelfCollect,
tab: '收藏', tab: '收藏',
}, },
{ {
path: 'selfPraise', path: 'selfPraise',
label: '我的点赞', label: '我的点赞',
icon: () => <IEpPointer />, icon: () => <IEpPointer />,
component: SelfPraise,
tab: '点赞', tab: '点赞',
}, },
{ {
path: 'selfCase', path: 'selfCase',
label: '我的案例库', label: '我的案例库',
icon: () => <IEpCollection />, icon: () => <IEpCollection />,
component: SelfCase,
tab: '案例库', tab: '案例库',
}, },
{ {
path: 'selfTask', path: 'selfTask',
label: '我的任务', label: '我的任务',
icon: () => <IEpFinished />, icon: () => <IEpFinished />,
component: SelfTask,
tab: '任务', tab: '任务',
}, },
{ {
path: 'selfActivity',
label: '参与活动',
icon: () => <IEpPointer />,
tab: '活动',
},
{
path: 'selfComment', path: 'selfComment',
label: '评论回复', label: '评论回复',
icon: () => <IEpChatDotRound />, icon: () => <IEpChatDotRound />,
component: SelfComment,
tab: '评论回复', tab: '评论回复',
}, },
{ {
path: 'selfAnswer', path: 'selfAnswer',
label: '回答问题(问吧)', label: '回答问题(问吧)',
icon: () => <IEpChatLineSquare />, icon: () => <IEpChatLineSquare />,
component: SelfAnswer,
tab: '回答问题', tab: '回答问题',
}, },
] ]
...@@ -260,14 +250,12 @@ const menuOfficialItems = [ ...@@ -260,14 +250,12 @@ const menuOfficialItems = [
path: 'selfAudit', path: 'selfAudit',
label: '审核列表', label: '审核列表',
icon: () => <IEpUser />, icon: () => <IEpUser />,
component: SelfAudit,
tab: '审核列表', tab: '审核列表',
}, },
{ {
path: 'selfComplaint', path: 'selfComplaint',
label: '举报列表', label: '举报列表',
icon: () => <IEpWarning />, icon: () => <IEpWarning />,
component: SelfComplaint,
tab: '举报列表', tab: '举报列表',
}, },
] ]
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
clearable clearable
/> />
<el-button type="primary" @click="handleSearch">搜索</el-button> <el-button type="primary" class="rounded-lg" @click="handleSearch">搜索</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<el-radio-group <el-radio-group
size="default" size="default"
v-model="searchParams.sortLogic" v-model="searchParams.sortLogic"
@change="(val: number) => changeSort(val)" @change="(val) => changeSort(val as number)"
> >
<el-radio-button <el-radio-button
v-for="sort in sortOptions" v-for="sort in sortOptions"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment