scout666/chat-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决搜索聊天记录组件搜索时，改变搜索关键字没有正确调用接口、处理搜索结果显示等问题

Browse Source
This commit is contained in:
wangyifeng 2025-05-21 11:41:03 +08:00
parent 41dbb8c872
commit 0ab2ce814a
7 changed files with 207 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/customModal.vue
View File

@ -80,7 +80,7 @@ const props = defineProps({
} }
}) })
const emit = defineEmits(['update:show', 'cancel', 'confirm']) const emit = defineEmits(['update:show', 'cancel', 'confirm', 'customCloseModal'])
const show = computed({ const show = computed({
get: () => props.show, get: () => props.show,
@ -111,7 +111,7 @@ const state = reactive({
const handleCloseModal = () => { const handleCloseModal = () => {
if (props.customCloseEvent) { if (props.customCloseEvent) {
emit('closeModal') emit('customCloseModal')
} else { } else {
show.value = false show.value = false
} }

3
src/components/group/GroupPanel.vue
View File

@ -740,7 +740,8 @@ const handleEditGroupNameConfirm = () => {
<UserCardModal <UserCardModal
v-model:show="state.isShowUserCardModal" v-model:show="state.isShowUserCardModal"
v-model:uid="(state.userInfo as any).erp_user_id" v-model:uid="(state.userInfo as any).user_id"
:euid="(state.userInfo as any).erp_user_id"
/> />
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

59
src/components/search/searchItem.vue
View File

@ -4,7 +4,7 @@
:class="props?.conditionType ? 'search-item-condition' : ''" :class="props?.conditionType ? 'search-item-condition' : ''"
v-if="resultName" v-if="resultName"
:style="{ :style="{
'margin': props.searchResultKey === 'talk_record_infos_receiver' ? '12px 0 0' : '', margin: props.searchResultKey === 'talk_record_infos_receiver' ? '12px 0 0' : '',
'background-color': props.isClickStay ? '#EEE9F8' : '' 'background-color': props.isClickStay ? '#EEE9F8' : ''
}" }"
> >
@ -70,6 +70,9 @@
:text="resultDetail" :text="resultDetail"
:searchText="props.searchText" :searchText="props.searchText"
/> />
<div class="searchRecordDetail-fastLocal" v-if="searchRecordDetail">
<span>定位到聊天位置</span>
</div>
</div> </div>
</div> </div>
<div class="search-item-pointer" v-if="pointerIconSrc"> <div class="search-item-pointer" v-if="pointerIconSrc">
@ -270,25 +273,25 @@ const resultDetail = computed(() => {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.search-item-avatar{ .search-item-avatar {
position: relative; position: relative;
.info-tag { .info-tag {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0px 6px; padding: 0px 6px;
border: 1px solid #000; border: 1px solid #000;
border-radius: 3px; border-radius: 3px;
flex-shrink: 0; flex-shrink: 0;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 4px; left: 4px;
span { span {
line-height: 14px; line-height: 14px;
}
} }
}
} }
.result-info { .result-info {
@ -320,10 +323,24 @@ const resultDetail = computed(() => {
} }
} }
.info-detail-searchRecordDetail { .info-detail-searchRecordDetail {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span { span {
color: #191919; color: #191919;
word-break: break-all; word-break: break-all;
} }
.searchRecordDetail-fastLocal {
display: none;
line-height: 20px;
span {
color: #46299d;
font-size: 12px;
font-weight: 400;
line-height: 17px;
}
}
} }
} }
.search-item-pointer { .search-item-pointer {
@ -339,7 +356,7 @@ const resultDetail = computed(() => {
} }
} }
} }
.search-item::after{ .search-item::after {
content: ''; content: '';
display: block; display: block;
width: 100%; width: 100%;
@ -355,5 +372,11 @@ const resultDetail = computed(() => {
} }
.search-item:hover { .search-item:hover {
background-color: #f8f8f8; background-color: #f8f8f8;
.info-detail-searchRecordDetail {
.searchRecordDetail-fastLocal {
display: block;
}
}
} }
</style> </style>

49
src/components/search/searchList.vue
View File

@ -2,6 +2,7 @@
<div class="search-list"> <div class="search-list">
<n-infinite-scroll <n-infinite-scroll
:style="{ maxHeight: props.searchResultMaxHeight }" :style="{ maxHeight: props.searchResultMaxHeight }"
:distance="47"
@load="doLoadMore" @load="doLoadMore"
> >
<div class="search-result"> <div class="search-result">
@ -19,12 +20,19 @@
searchResultKey !== 'group_infos' && searchResultKey !== 'group_infos' &&
searchResultKey !== 'group_member_infos' searchResultKey !== 'group_member_infos'
" "
:style="{ margin: props.useCustomTitle ? '0' : '' }"
> >
<div class="result-title"> <!-- <div class="result-title" v-if="!props.useCustomTitle">
<span class="text-[14px] font-regular"> <span class="text-[14px] font-regular">
{{ getResultKeysValue(searchResultKey) }} {{ getResultKeysValue(searchResultKey) }}
</span> </span>
</div> </div> -->
<slot
name="result-title"
:getResultKeysValue="getResultKeysValue"
:searchResultKey="searchResultKey"
:searchResultIndex="searchResultIndex"
></slot>
<div class="result-list"> <div class="result-list">
<div <div
class="result-list-each" class="result-list-each"
@ -144,7 +152,8 @@ const emits = defineEmits([
'toMoreResultPage', 'toMoreResultPage',
'lastIdChange', 'lastIdChange',
'clickSearchItem', 'clickSearchItem',
'clickStayItemChange' 'clickStayItemChange',
'resultTotalCount'
]) ])
const state = reactive({ const state = reactive({
@ -201,7 +210,11 @@ const props = defineProps({
searchResultMaxHeight: { searchResultMaxHeight: {
type: String, type: String,
default: '677px' default: '677px'
} //搜索结果最大高度 }, //搜索结果最大高度
useCustomTitle: {
type: Boolean,
default: false
} //是否使用自定义标题
}) })
onMounted(() => { onMounted(() => {
@ -223,6 +236,12 @@ watch(
watch( watch(
() => props.searchText, () => props.searchText,
(newVal, oldVal) => { (newVal, oldVal) => {
// 同步更新 state.searchText
state.searchText = newVal
// 清空搜索结果
state.searchResult = null
// 重置页码
state.pageNum = 1
//重置点击停留列表项 //重置点击停留列表项
state.clickStayItem = '' state.clickStayItem = ''
emits('clickStayItemChange', state.clickStayItem) emits('clickStayItemChange', state.clickStayItem)
@ -232,18 +251,6 @@ watch(
} }
) )
//输入搜索文本
const inputSearchText = (e) => {
if (e.trim() != state.searchText.trim()) {
state.pageNum = 1
state.searchResult = null // 清空搜索结果
}
state.searchText = e.trim()
if (!e.trim()) {
state.searchResult = null // 清空搜索结果
}
}
// ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览 // ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
const queryAllSearch = (doClearSearchResult) => { const queryAllSearch = (doClearSearchResult) => {
if (doClearSearchResult) { if (doClearSearchResult) {
@ -369,6 +376,7 @@ const queryAllSearch = (doClearSearchResult) => {
} else { } else {
state.hasMore = true state.hasMore = true
} }
emits('resultTotalCount', total)
// zPaging.value?.completeByTotal([data], total) // zPaging.value?.completeByTotal([data], total)
} else { } else {
state.searchResult = data state.searchResult = data
@ -534,10 +542,9 @@ const doLoadMore = (doClearSearchResult) => {
return return
} }
state.loading = true state.loading = true
queryAllSearch(doClearSearchResult) queryAllSearch(doClearSearchResult).finally(() => {
.finally(() => { state.loading = false
state.loading = false })
})
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -573,7 +580,7 @@ const doLoadMore = (doClearSearchResult) => {
// padding: 0 10px; // padding: 0 10px;
.search-result-part { .search-result-part {
margin: 18px 0 0; // margin: 18px 0 0;
.result-title { .result-title {
padding: 0 10px 5px; padding: 0 10px 5px;

2
src/utils/auth.js
View File

@ -18,7 +18,7 @@ export function isLoggedIn() {
*/ */
export function getAccessToken() { export function getAccessToken() {
// return storage.get(AccessToken) || '' // return storage.get(AccessToken) || ''
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89a542742bebcc3862e86adbcf9b360820a497764e7432d66963e70eb29f9eab5268ee8efa98eed3c981eea690d977b38b76b3a9a6b51bb685000752d9d26f98a91f4df6970ad165c5299f9eb77d0c40ed' return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89855de0ffae3adff28137845adce8c6b2c8160f779573f4e6553e86ac85dc8e689aa8970c6a4de122173f4db7bf7cdfa3ca7796d181a43b3fdf8ec549a8f33c82fbab7f0175efce75aca5cf6188ccf2a8'
} }
/** /**

2
src/views/message/inner/IndexContent.vue
View File

@ -544,7 +544,7 @@ const handleGroupNoticeModalShow = (isAdmin) => {
@confirm="handleGroupNoticeModalConfirm" @confirm="handleGroupNoticeModalConfirm"
@cancel="handleGroupNoticeModalCancel" @cancel="handleGroupNoticeModalCancel"
:customCloseEvent="state.groupNoticeEditMode === 2 ? true : false" :customCloseEvent="state.groupNoticeEditMode === 2 ? true : false"
@closeModal="handleGroupNoticeModalClose" @customCloseModal="handleGroupNoticeModalClose"
> >
<template #content> <template #content>
<div class="group-notice-modal-content"> <div class="group-notice-modal-content">

163
src/views/message/inner/IndexSider.vue
View File

@ -23,7 +23,7 @@ import {
NButton, NButton,
NPagination NPagination
} from 'naive-ui' } from 'naive-ui'
import { Search, Plus } from '@icon-park/vue-next' import { Search, Plus, Right } from '@icon-park/vue-next'
import TalkItem from './TalkItem.vue' import TalkItem from './TalkItem.vue'
import Skeleton from './Skeleton.vue' import Skeleton from './Skeleton.vue'
import { ServeClearTalkUnreadNum } from '@/api/chat' import { ServeClearTalkUnreadNum } from '@/api/chat'
@ -39,7 +39,7 @@ import { processError, processSuccess } from '@/utils/helper/message.js'
import chatAppSearchList from '@/components/search/searchList.vue' import chatAppSearchList from '@/components/search/searchList.vue'
import { ServeSeachQueryAll, ServeQueryTalkRecord, ServeUserGroupChatList } from '@/api/search' import { ServeSeachQueryAll, ServeQueryTalkRecord, ServeUserGroupChatList } from '@/api/search'
import { getUserInfoByERPUserId } from '@/api/user' import { getUserInfoByERPUserId } from '@/api/user'
import HighlightText from '@/components/search/highLightText.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
@ -103,7 +103,29 @@ const renderChatAppSearch = () => {
console.log(searchResultKey, searchText) console.log(searchResultKey, searchText)
} }
}, },
{} {
'result-title': ({ getResultKeysValue, searchResultKey, searchResultIndex }) => {
return h(
'div',
{
style: {
padding: searchResultIndex === 0 ? '6px 10px 5px' : '18px 10px 5px',
borderBottom: '1px solid #f8f8f8'
}
},
[
h(
'span',
{
class: 'text-[14px] font-regular',
style: 'line-height: 20px; color: #999999;'
},
getResultKeysValue(searchResultKey)
)
]
)
}
}
) )
} }
@ -264,7 +286,8 @@ const state = reactive({
searchDetailList: { searchDetailList: {
searchText: '', searchText: '',
apiParams: '', apiParams: '',
lastId: undefined as any lastId: undefined as any,
total: 0
} }
}) })
@ -320,14 +343,16 @@ watch(
(newVal, oldVal) => { (newVal, oldVal) => {
// 重置左侧 // 重置左侧
state.searchList.searchText = newVal state.searchList.searchText = newVal
state.searchList.apiParams = encodeURIComponent(JSON.stringify({ state.searchList.apiParams = encodeURIComponent(
talk_type: 0, JSON.stringify({
receiver_id: 0, talk_type: 0,
last_group_id: 0, receiver_id: 0,
last_member_id: 0, last_group_id: 0,
last_receiver_user_name: '', last_member_id: 0,
last_receiver_group_name: '' last_receiver_user_name: '',
})) last_receiver_group_name: ''
})
)
state.searchList.lastId = undefined state.searchList.lastId = undefined
// 重置右侧 // 重置右侧
state.searchDetailList.searchText = newVal state.searchDetailList.searchText = newVal
@ -346,8 +371,8 @@ const indexName = computed(() => dialogueStore.index_name)
// 切换会话 // 切换会话
const onTabTalk = (item: ISession, follow = false) => { const onTabTalk = (item: ISession, follow = false) => {
console.log('onTabTalk'); console.log('onTabTalk')
if (item.index_name === indexName.value) return if (item.index_name === indexName.value) return
searchKeyword.value = '' searchKeyword.value = ''
@ -578,12 +603,14 @@ const handleClickSearchItem = (searchText, searchResultKey, talk_type, receiver_
if (searchResultKey === 'general_infos') { if (searchResultKey === 'general_infos') {
// 先清空右侧 // 先清空右侧
state.isShowSearchRecordDetailInfo = false state.isShowSearchRecordDetailInfo = false
state.searchDetailList.apiParams = encodeURIComponent(JSON.stringify({ state.searchDetailList.apiParams = encodeURIComponent(
last_group_id: 0, JSON.stringify({
last_member_id: 0, last_group_id: 0,
receiver_id: receiver_id, last_member_id: 0,
talk_type: talk_type receiver_id: receiver_id,
})) talk_type: talk_type
})
)
state.searchDetailList.searchText = state.searchRecordText state.searchDetailList.searchText = state.searchRecordText
state.searchDetailList.lastId = undefined state.searchDetailList.lastId = undefined
// 再显示 // 再显示
@ -608,19 +635,52 @@ const searchListRef = ref()
const searchDetailListRef = ref() const searchDetailListRef = ref()
// lastIdChange 事件区分来源 // lastIdChange 事件区分来源
const handleSearchListLastIdChange = (last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name) => { const handleSearchListLastIdChange = (
state.searchList.lastId = { last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name } last_id,
state.searchList.apiParams = encodeURIComponent(JSON.stringify({ last_group_id,
...JSON.parse(decodeURIComponent(state.searchList.apiParams)), last_member_id,
last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name last_receiver_user_name,
})) last_receiver_group_name
) => {
state.searchList.lastId = {
last_id,
last_group_id,
last_member_id,
last_receiver_user_name,
last_receiver_group_name
}
state.searchList.apiParams = encodeURIComponent(
JSON.stringify({
...JSON.parse(decodeURIComponent(state.searchList.apiParams)),
last_id,
last_group_id,
last_member_id,
last_receiver_user_name,
last_receiver_group_name
})
)
} }
const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_id) => { const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_id) => {
state.searchDetailList.lastId = { last_id, last_group_id, last_member_id } state.searchDetailList.lastId = { last_id, last_group_id, last_member_id }
state.searchDetailList.apiParams = encodeURIComponent(JSON.stringify({ state.searchDetailList.apiParams = encodeURIComponent(
...JSON.parse(decodeURIComponent(state.searchDetailList.apiParams)), JSON.stringify({
last_id, last_group_id, last_member_id ...JSON.parse(decodeURIComponent(state.searchDetailList.apiParams)),
})) last_id,
last_group_id,
last_member_id
})
)
}
// 关闭搜索聊天记录模态框
const handleCloseSearchRecordModal = () => {
state.isShowSearchRecordModal = false
state.searchRecordText = ''
}
// 获取搜索结果总数
const getResultTotalCount = (total) => {
state.searchDetailList.total = total
} }
</script> </script>
@ -836,6 +896,8 @@ const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_
:style="state.customSearchRecordModalStyle" :style="state.customSearchRecordModalStyle"
:customCloseBtn="true" :customCloseBtn="true"
:closable="false" :closable="false"
:customCloseEvent="true"
@customCloseModal="handleCloseSearchRecordModal"
> >
<template #content> <template #content>
<div class="search-record-modal-content"> <div class="search-record-modal-content">
@ -872,6 +934,22 @@ const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_
></chatAppSearchList> ></chatAppSearchList>
</div> </div>
<div class="search-record-detail"> <div class="search-record-detail">
<div class="search-record-detail-header" v-if="state.isShowSearchRecordDetailInfo">
<HighlightText
class="text-[14px] text-[#B0B0B0] leading-[20px]"
:text="
state.searchDetailList.total +
'条与“' +
state.searchRecordText +
'”相关的搜索结果'
"
:searchText="state.searchRecordText"
/>
<div class="search-record-detail-header-btn">
<span>进入聊天</span>
<n-icon :component="Right" color="#46299D" size="14px" />
</div>
</div>
<chatAppSearchList <chatAppSearchList
ref="searchDetailListRef" ref="searchDetailListRef"
v-if="state.isShowSearchRecordDetailInfo" v-if="state.isShowSearchRecordDetailInfo"
@ -883,7 +961,8 @@ const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_
:isPagination="true" :isPagination="true"
:searchRecordDetail="true" :searchRecordDetail="true"
@lastIdChange="handleSearchDetailListLastIdChange" @lastIdChange="handleSearchDetailListLastIdChange"
:searchResultMaxHeight="'517px'" :searchResultMaxHeight="'469px'"
@resultTotalCount="getResultTotalCount"
></chatAppSearchList> ></chatAppSearchList>
</div> </div>
</div> </div>
@ -1083,6 +1162,28 @@ html[theme-mode='dark'] {
width: 578px; width: 578px;
height: 517px; height: 517px;
border: 1px solid #efeff5; border: 1px solid #efeff5;
.search-record-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px 14px 10px;
box-sizing: border-box;
.search-record-detail-header-btn {
line-height: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
cursor: pointer;
span {
line-height: 20px;
color: #46299d;
font-size: 14px;
font-weight: 400;
}
}
}
} }
} }
.search-record-empty { .search-record-empty {