解决搜索聊天记录组件搜索时，改变搜索关键字没有正确调用接口、处理搜索结果显示等问题
This commit is contained in:
parent
41dbb8c872
commit
0ab2ce814a
@ -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
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
@ -270,7 +273,7 @@ const resultDetail = computed(() => {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.search-item-avatar{
|
||||
.search-item-avatar {
|
||||
position: relative;
|
||||
.info-tag {
|
||||
display: flex;
|
||||
@ -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 {
|
||||
@ -339,7 +356,7 @@ const resultDetail = computed(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-item::after{
|
||||
.search-item::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -355,5 +372,11 @@ const resultDetail = computed(() => {
|
||||
}
|
||||
.search-item:hover {
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.info-detail-searchRecordDetail {
|
||||
.searchRecordDetail-fastLocal {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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'
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user