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({
get: () => props.show,
@ -111,7 +111,7 @@ const state = reactive({
const handleCloseModal = () => {
if (props.customCloseEvent) {
emit('closeModal')
emit('customCloseModal')
} else {
show.value = false
}

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

@ -740,7 +740,8 @@ const handleEditGroupNameConfirm = () => {
<UserCardModal
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>
<style lang="less" scoped>

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

@ -4,7 +4,7 @@
:class="props?.conditionType ? 'search-item-condition' : ''"
v-if="resultName"
: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' : ''
}"
>
@ -70,6 +70,9 @@
:text="resultDetail"
:searchText="props.searchText"
/>
<div class="searchRecordDetail-fastLocal" v-if="searchRecordDetail">
<span>定位到聊天位置</span>
</div>
</div>
</div>
<div class="search-item-pointer" v-if="pointerIconSrc">
@ -320,10 +323,24 @@ const resultDetail = computed(() => {
}
}
.info-detail-searchRecordDetail {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span {
color: #191919;
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 {
@ -355,5 +372,11 @@ const resultDetail = computed(() => {
}
.search-item:hover {
background-color: #f8f8f8;
.info-detail-searchRecordDetail {
.searchRecordDetail-fastLocal {
display: block;
}
}
}
</style>

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

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

2
src/utils/auth.js
View File

@ -18,7 +18,7 @@ export function isLoggedIn() {
*/
export function getAccessToken() {
// 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"
@cancel="handleGroupNoticeModalCancel"
:customCloseEvent="state.groupNoticeEditMode === 2 ? true : false"
@closeModal="handleGroupNoticeModalClose"
@customCloseModal="handleGroupNoticeModalClose"
>
<template #content>
<div class="group-notice-modal-content">

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

@ -23,7 +23,7 @@ import {
NButton,
NPagination
} 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 Skeleton from './Skeleton.vue'
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 { ServeSeachQueryAll, ServeQueryTalkRecord, ServeUserGroupChatList } from '@/api/search'
import { getUserInfoByERPUserId } from '@/api/user'
import HighlightText from '@/components/search/highLightText.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
@ -103,7 +103,29 @@ const renderChatAppSearch = () => {
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: {
searchText: '',
apiParams: '',
lastId: undefined as any
lastId: undefined as any,
total: 0
}
})
@ -320,14 +343,16 @@ watch(
(newVal, oldVal) => {
// 重置左侧
state.searchList.searchText = newVal
state.searchList.apiParams = encodeURIComponent(JSON.stringify({
state.searchList.apiParams = encodeURIComponent(
JSON.stringify({
talk_type: 0,
receiver_id: 0,
last_group_id: 0,
last_member_id: 0,
last_receiver_user_name: '',
last_receiver_group_name: ''
}))
})
)
state.searchList.lastId = undefined
// 重置右侧
state.searchDetailList.searchText = newVal
@ -346,7 +371,7 @@ const indexName = computed(() => dialogueStore.index_name)
// 切换会话
const onTabTalk = (item: ISession, follow = false) => {
console.log('onTabTalk');
console.log('onTabTalk')
if (item.index_name === indexName.value) return
@ -578,12 +603,14 @@ const handleClickSearchItem = (searchText, searchResultKey, talk_type, receiver_
if (searchResultKey === 'general_infos') {
// 先清空右侧
state.isShowSearchRecordDetailInfo = false
state.searchDetailList.apiParams = encodeURIComponent(JSON.stringify({
state.searchDetailList.apiParams = encodeURIComponent(
JSON.stringify({
last_group_id: 0,
last_member_id: 0,
receiver_id: receiver_id,
talk_type: talk_type
}))
})
)
state.searchDetailList.searchText = state.searchRecordText
state.searchDetailList.lastId = undefined
// 再显示
@ -608,19 +635,52 @@ const searchListRef = ref()
const searchDetailListRef = ref()
// lastIdChange 事件区分来源
const handleSearchListLastIdChange = (last_id, last_group_id, last_member_id, 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({
const handleSearchListLastIdChange = (
last_id,
last_group_id,
last_member_id,
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
}))
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) => {
state.searchDetailList.lastId = { last_id, last_group_id, last_member_id }
state.searchDetailList.apiParams = encodeURIComponent(JSON.stringify({
state.searchDetailList.apiParams = encodeURIComponent(
JSON.stringify({
...JSON.parse(decodeURIComponent(state.searchDetailList.apiParams)),
last_id, last_group_id, last_member_id
}))
last_id,
last_group_id,
last_member_id
})
)
}
// 关闭搜索聊天记录模态框
const handleCloseSearchRecordModal = () => {
state.isShowSearchRecordModal = false
state.searchRecordText = ''
}
// 获取搜索结果总数
const getResultTotalCount = (total) => {
state.searchDetailList.total = total
}
</script>
@ -836,6 +896,8 @@ const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_
:style="state.customSearchRecordModalStyle"
:customCloseBtn="true"
:closable="false"
:customCloseEvent="true"
@customCloseModal="handleCloseSearchRecordModal"
>
<template #content>
<div class="search-record-modal-content">
@ -872,6 +934,22 @@ const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_
></chatAppSearchList>
</div>
<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
ref="searchDetailListRef"
v-if="state.isShowSearchRecordDetailInfo"
@ -883,7 +961,8 @@ const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_
:isPagination="true"
:searchRecordDetail="true"
@lastIdChange="handleSearchDetailListLastIdChange"
:searchResultMaxHeight="'517px'"
:searchResultMaxHeight="'469px'"
@resultTotalCount="getResultTotalCount"
></chatAppSearchList>
</div>
</div>
@ -1083,6 +1162,28 @@ html[theme-mode='dark'] {
width: 578px;
height: 517px;
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 {