新增历史聊天记录查询弹窗;接入erp的v-loadmore指令,用于实现PC端的触底加载更多;继续优化搜索模块的联动逻辑

This commit is contained in:
wangyifeng 2025-05-15 18:56:41 +08:00
parent ed0737b5e3
commit 814eb44358
10 changed files with 559 additions and 388 deletions

2
env/.env.test vendored
View File

@ -3,6 +3,8 @@ ENV = 'development'
VITE_BASE=/
VUE_APP_PREVIEW=false
VITE_BASE_API=http://172.16.100.93:8503
# VITE_BASE_API=http://192.168.88.21:9503
VITE_EPR_BASEURL=http://114.218.158.24:9020
VITE_SOCKET_API=ws://172.16.100.93:8504
# VITE_SOCKET_API=ws://192.168.88.21:9504
VUE_APP_WEBSITE_NAME="Lumen IM"

View File

@ -17,7 +17,7 @@ import customModal from '@/components/common/customModal.vue'
const userStore = useUserStore()
const { showUserInfoModal } = useInject()
const emit = defineEmits(['close', 'to-talk'])
const emit = defineEmits(['close', 'to-talk', 'handleSearchRecordByConditionModalShow'])
const props = defineProps({
gid: {
type: Number,
@ -200,6 +200,10 @@ const showChatSettingOperateModal = (type: string) => {
break
}
}
const showSearchRecordByConditionModal = () => {
emit('handleSearchRecordByConditionModalShow', true)
}
</script>
<template>
<section class="el-container is-vertical section">
@ -220,7 +224,7 @@ const showChatSettingOperateModal = (type: string) => {
<main class="el-main main me-scrollbar me-scrollbar-thumb">
<div class="info-box" v-if="talkType === 1">
<div class="b-box b-box-bottomBorder">
<div class="b-box b-box-bottomBorder" @click="showSearchRecordByConditionModal">
<div class="block">
<div class="title">查找聊天记录</div>
<img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />

View File

@ -3,7 +3,10 @@
class="search-item"
:class="props?.conditionType ? 'search-item-condition' : ''"
v-if="resultName"
:style="props.searchResultKey === 'talk_record_infos_receiver' ? 'margin: 12px 0 0' : ''"
:style="{
'margin': props.searchResultKey === 'talk_record_infos_receiver' ? '12px 0 0' : '',
'background-color': props.isClickStay ? '#EEE9F8' : ''
}"
>
<div class="search-item-avatar">
<avatarModule
@ -101,7 +104,11 @@ const props = defineProps({
conditionType: {
type: Number,
default: 0
} //
}, //
isClickStay: {
type: Boolean,
default: false
} //
})
// -
const keyMapping = {
@ -259,9 +266,9 @@ const resultDetail = computed(() => {
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 11px 0 12px;
border-bottom: 1px solid #f8f8f8;
padding: 11px 10px 12px;
cursor: pointer;
position: relative;
.search-item-avatar{
position: relative;
@ -332,6 +339,17 @@ const resultDetail = computed(() => {
}
}
}
.search-item::after{
content: '';
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 10px;
width: calc(100% - 20px);
background-color: #f8f8f8;
}
.search-item-condition {
border: 0;
}

View File

@ -34,6 +34,11 @@
:searchItem="item"
:searchText="state.searchText"
:searchRecordDetail="props.searchRecordDetail"
:isClickStay="
props.useClickStay &&
typeof state.clickStayItem === 'string' &&
state.clickStayItem === `${item.talk_type}_${item.receiver_id}`
"
></searchItem>
</div>
</div>
@ -129,14 +134,21 @@
import searchItem from './searchItem.vue'
import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
const emits = defineEmits(['toMoreResultPage', 'lastIdChange', 'clickSearchItem'])
const emits = defineEmits([
'toMoreResultPage',
'lastIdChange',
'clickSearchItem',
'clickStayItemChange',
'doLoadMore'
])
const state = reactive({
searchText: '', //
searchResultList: [], //
searchResult: null, //
pageNum: 1, //
uid: 1496 //id
uid: 12303, //id
clickStayItem: '' //item
})
const props = defineProps({
@ -174,23 +186,35 @@ const props = defineProps({
hideFirstRecord: {
type: Boolean,
default: false
} ///
}, ///
useClickStay: {
type: Boolean,
default: false
} //使
})
onMounted(() => {
if (props.searchText) {
state.searchText = props.searchText
queryAllSearch(1, 10)
queryAllSearch()
}
})
//
watch(
() => [props.searchResultPageSize, props.searchText],
([newPageSize, newText], [oldPageSize, oldText]) => {
console.log(newPageSize, newText, oldPageSize, oldText)
if (newPageSize !== oldPageSize || newText !== oldText) {
queryAllSearch(1, newPageSize)
}
() => props.searchResultPageSize,
(newVal, oldVal) => {
queryAllSearch()
}
)
//
watch(
() => props.searchText,
(newVal, oldVal) => {
queryAllSearch()
state.clickStayItem = ''
emits('clickStayItemChange', state.clickStayItem)
}
)
@ -199,380 +223,166 @@ const inputSearchText = (e) => {
if (e.trim() != state.searchText.trim()) {
state.pageNum = 1
state.searchResult = null //
emits('lastIdChange', 0, 0, 0)
emits('lastIdChange', 0, 0, 0, '', '')
}
state.searchText = e.trim()
if (!e.trim()) {
state.searchResult = null //
emits('lastIdChange', 0, 0, 0)
emits('lastIdChange', 0, 0, 0, '', '')
}
// zPaging.value?.reload()
queryAllSearch()
}
// ES-
const queryAllSearch = (pageNum, searchResultPageSize) => {
const queryAllSearch = () => {
let params = {
key: state.searchText, //
size: searchResultPageSize
size: props.searchResultPageSize
}
if (props.apiParams) {
let apiParams = JSON.parse(decodeURIComponent(props.apiParams))
params = Object.assign({}, params, apiParams)
}
const data = {
user_infos: [
{
id: 127,
mobile: '17706200252',
nickname: '测试-王溢韬',
avatar:
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
created_at: '2025-03-28 11:33:13',
erp_user_id: 18282
},
{
id: 103,
mobile: '13814969538',
nickname: '王静测试',
avatar: '',
created_at: '2025-03-27 14:44:23',
erp_user_id: 2639
},
{
id: 57,
mobile: '13862027511',
nickname: '王西',
avatar:
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
created_at: '2025-03-27 14:44:23',
erp_user_id: 18229
}
],
user_count: 9,
group_infos: null,
group_member_infos: [
{
id: 79,
group_id: 1,
group_name: '泰丰国际',
group_type: 4,
group_avatar: '',
group_num: 103,
user_id: 103,
user_name: '王静',
user_card: '',
created_at: '2025-03-27 14:44:24'
},
{
id: 55,
group_id: 1,
group_name: '泰丰国际',
group_type: 4,
group_avatar: '',
group_num: 103,
user_id: 57,
user_name: '王西',
user_card: '',
created_at: '2025-03-27 14:44:24'
},
{
id: 35,
group_id: 1,
group_name: '泰丰国际',
group_type: 4,
group_avatar: '',
group_num: 103,
user_id: 37,
user_name: '王雯婷',
user_card: '',
created_at: '2025-03-27 14:44:24'
}
],
group_count: 9,
general_infos: [
{
receiver_id: 40,
receiver_name: '孙志远',
receiver_avatar:
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
group_num: 0,
talk_type: 1,
count: 3,
group_type: 0
},
{
receiver_id: 2,
receiver_name: '吹牛个人群',
receiver_avatar: '',
group_num: 4,
talk_type: 2,
count: 2,
group_type: 3
},
{
receiver_id: 3,
receiver_name: '丰链30自己人',
receiver_avatar:
'https://e-cdn.fontree.cn/fonchain-main/prod/image/default/fonchain-chat/3d273326-d2a5-4ad4-a974-32d020c6b3f9.jpg?width=1080&height=2412',
group_num: 8,
talk_type: 2,
count: 2,
group_type: 3
}
],
record_count: 3
}
if ((data.user_infos || []).length > 0) {
;(data.user_infos || []).forEach((item) => {
item.group_type = 0
})
}
if ((data.group_infos || []).length > 0) {
;(data.group_infos || []).forEach((item) => {
item.group_type = item.type
item.groupTempType = 'group_infos'
})
}
if ((data.group_member_infos || []).length > 0) {
;(data.group_member_infos || []).forEach((item) => {
item.groupTempType = 'group_member_infos'
})
}
if ((data.talk_record_infos || []).length > 0) {
let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
if (receiverInfo.talk_type === 1) {
//
if (receiverInfo.user_id === state.uid) {
//
}
if (receiverInfo.receiver_id === state.uid) {
//
let temp_id = receiverInfo.receiver_id
let temp_name = receiverInfo.receiver_name
let temp_avatar = receiverInfo.receiver_avatar
receiverInfo.receiver_id = receiverInfo.user_id
receiverInfo.receiver_name = receiverInfo.user_name
receiverInfo.receiver_avatar = receiverInfo.user_avatar
receiverInfo.user_id = temp_id
receiverInfo.user_name = temp_name
receiverInfo.user_avatar = temp_avatar
}
}
state.first_talk_record_infos = Object.assign({}, state.first_talk_record_infos, receiverInfo)
;(data.talk_record_infos || []).forEach((item) => {
item.group_type = 0
})
}
let tempGeneral_infos = Array.isArray(data.general_infos)
? [...data.general_infos]
: data.general_infos
delete data.general_infos
data.combinedGroup = (data.group_infos || []).concat(data.group_member_infos || [])
data.general_infos = tempGeneral_infos
const resp = props.apiRequest(params)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
if ((data.user_infos || []).length > 0) {
;(data.user_infos || []).forEach((item) => {
item.group_type = 0
})
}
if ((data.group_infos || []).length > 0) {
;(data.group_infos || []).forEach((item) => {
item.group_type = item.type
item.groupTempType = 'group_infos'
})
}
if ((data.group_member_infos || []).length > 0) {
;(data.group_member_infos || []).forEach((item) => {
item.groupTempType = 'group_member_infos'
})
}
if ((data.talk_record_infos || []).length > 0) {
let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
if (receiverInfo.talk_type === 1) {
//
if (receiverInfo.user_id === state.uid) {
//
}
if (receiverInfo.receiver_id === state.uid) {
//
let temp_id = receiverInfo.receiver_id
let temp_name = receiverInfo.receiver_name
let temp_avatar = receiverInfo.receiver_avatar
receiverInfo.receiver_id = receiverInfo.user_id
receiverInfo.receiver_name = receiverInfo.user_name
receiverInfo.receiver_avatar = receiverInfo.user_avatar
receiverInfo.user_id = temp_id
receiverInfo.user_name = temp_name
receiverInfo.user_avatar = temp_avatar
}
}
state.first_talk_record_infos = Object.assign(
{},
state.first_talk_record_infos,
receiverInfo
)
;(data.talk_record_infos || []).forEach((item) => {
item.group_type = 0
})
}
//
let isEmpty = true
let dataKeys = Object.keys(data)
let paginationKey = ''
dataKeys.forEach((item) => {
if (Array.isArray(data[item]) && data[item].length > 0) {
paginationKey = item
isEmpty = false
let tempGeneral_infos = Array.isArray(data.general_infos)
? [...data.general_infos]
: data.general_infos
delete data.general_infos
data.combinedGroup = (data.group_infos || []).concat(data.group_member_infos || [])
data.general_infos = tempGeneral_infos
//
let isEmpty = true
let dataKeys = Object.keys(data)
let paginationKey = ''
dataKeys.forEach((item) => {
if (Array.isArray(data[item]) && data[item].length > 0) {
paginationKey = item
isEmpty = false
}
})
if (isEmpty) {
if (state.pageNum === 1) {
//
state.searchResult = null
// zPaging.value?.complete([])
} else {
//
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
}
} else {
if (props.isPagination) {
if (state.pageNum === 1) {
//
state.searchResult = data
} else {
//
if (
paginationKey &&
Array.isArray((state?.searchResult && state?.searchResult[paginationKey]) || [])
) {
data[paginationKey] = state.searchResult[paginationKey].concat(data[paginationKey])
}
state.searchResult = data
}
emits(
'lastIdChange',
data.last_id,
data.last_group_id,
data.last_member_id,
data.last_receiver_user_name,
data.last_receiver_group_name
)
let total = data.count
if (props.searchRecordDetail) {
if (state?.first_talk_record_infos?.talk_type === 1) {
total = data.user_record_count
} else if (state?.first_talk_record_infos?.talk_type === 2) {
total = data.group_record_count
}
}
// zPaging.value?.completeByTotal([data], total)
} else {
state.searchResult = data
// zPaging.value?.complete([data])
}
}
state.pageNum = state.pageNum + 1
} else {
if (state.pageNum === 1) {
//
state.searchResult = null
// zPaging.value?.complete([])
} else {
//
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
}
}
})
if (isEmpty) {
if (pageNum === 1) {
//
resp.catch(() => {
if (state.pageNum === 1) {
//
state.searchResult = null
// zPaging.value?.complete([])
} else {
//
//
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
}
} else {
if (props.isPagination) {
if (pageNum === 1) {
//
state.searchResult = data
} else {
//
if (
paginationKey &&
Array.isArray((state?.searchResult && state?.searchResult[paginationKey]) || [])
) {
data[paginationKey] = state.searchResult[paginationKey].concat(data[paginationKey])
}
state.searchResult = data
}
emits(
'lastIdChange',
data.last_id,
data.last_group_id,
data.last_member_id,
data.last_receiver_user_name,
data.last_receiver_group_name
)
let total = data.count
if (props.searchRecordDetail) {
if (state?.first_talk_record_infos?.talk_type === 1) {
total = data.user_record_count
} else if (state?.first_talk_record_infos?.talk_type === 2) {
total = data.group_record_count
}
}
// zPaging.value?.completeByTotal([data], total)
} else {
state.searchResult = data
// zPaging.value?.complete([data])
}
}
// const resp = props.apiRequest(params)
// resp.then(({ code, data }) => {
// console.log(data)
// if (code == 200) {
// if ((data.user_infos || []).length > 0) {
// ;(data.user_infos || []).forEach((item) => {
// item.group_type = 0
// })
// }
// if ((data.group_infos || []).length > 0) {
// ;(data.group_infos || []).forEach((item) => {
// item.group_type = item.type
// item.groupTempType = 'group_infos'
// })
// }
// if ((data.group_member_infos || []).length > 0) {
// ;(data.group_member_infos || []).forEach((item) => {
// item.groupTempType = 'group_member_infos'
// })
// }
// if ((data.talk_record_infos || []).length > 0) {
// let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
// if (receiverInfo.talk_type === 1) {
// //
// if (receiverInfo.user_id === state.uid) {
// //
// }
// if (receiverInfo.receiver_id === state.uid) {
// //
// let temp_id = receiverInfo.receiver_id
// let temp_name = receiverInfo.receiver_name
// let temp_avatar = receiverInfo.receiver_avatar
// receiverInfo.receiver_id = receiverInfo.user_id
// receiverInfo.receiver_name = receiverInfo.user_name
// receiverInfo.receiver_avatar = receiverInfo.user_avatar
// receiverInfo.user_id = temp_id
// receiverInfo.user_name = temp_name
// receiverInfo.user_avatar = temp_avatar
// }
// }
// state.first_talk_record_infos = Object.assign(
// {},
// state.first_talk_record_infos,
// receiverInfo,
// )
// ;(data.talk_record_infos || []).forEach((item) => {
// item.group_type = 0
// })
// }
// let tempGeneral_infos = Array.isArray(data.general_infos)
// ? [...data.general_infos]
// : data.general_infos
// delete data.general_infos
// data.combinedGroup = (data.group_infos || []).concat(
// data.group_member_infos || [],
// )
// data.general_infos = tempGeneral_infos
// //
// let isEmpty = true
// let dataKeys = Object.keys(data)
// let paginationKey = ''
// dataKeys.forEach((item) => {
// if (Array.isArray(data[item]) && data[item].length > 0) {
// paginationKey = item
// isEmpty = false
// }
// })
// if (isEmpty) {
// if (pageNum === 1) {
// //
// state.searchResult = null
// // zPaging.value?.complete([])
// } else {
// //
// // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
// }
// } else {
// if (props.isPagination) {
// if (pageNum === 1) {
// //
// state.searchResult = data
// } else {
// //
// if (
// paginationKey &&
// Array.isArray(
// (state?.searchResult && state?.searchResult[paginationKey]) || [],
// )
// ) {
// data[paginationKey] = state.searchResult[paginationKey].concat(
// data[paginationKey],
// )
// }
// state.searchResult = data
// }
// emits(
// 'lastIdChange',
// data.last_id,
// data.last_group_id,
// data.last_member_id,
// data.last_receiver_user_name,
// data.last_receiver_group_name,
// )
// let total = data.count
// if (props.searchRecordDetail) {
// if (state?.first_talk_record_infos?.talk_type === 1) {
// total = data.user_record_count
// } else if (state?.first_talk_record_infos?.talk_type === 2) {
// total = data.group_record_count
// }
// }
// // zPaging.value?.completeByTotal([data], total)
// } else {
// state.searchResult = data
// // zPaging.value?.complete([data])
// }
// }
// } else {
// if (pageNum === 1) {
// //
// state.searchResult = null
// // zPaging.value?.complete([])
// } else {
// //
// // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
// }
// }
// })
// resp.catch(() => {
// if (pageNum === 1) {
// //
// state.searchResult = null
// // zPaging.value?.complete([])
// } else {
// //
// // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
// }
// })
})
}
//
@ -659,6 +469,12 @@ const toMoreResultPage = (searchResultKey) => {
//
const clickSearchItem = (searchResultKey, searchItem) => {
console.log(searchResultKey, searchItem)
if (props.useClickStay) {
state.clickStayItem = searchItem.talk_type + '_' + searchItem.receiver_id
} else {
state.clickStayItem = ''
}
emits('clickStayItemChange', state.clickStayItem)
let talk_type = searchItem.talk_type
let receiver_id = searchItem.receiver_id
if (searchResultKey === 'user_infos') {
@ -695,6 +511,16 @@ const clickSearchItem = (searchResultKey, searchItem) => {
encodeURIComponent(JSON.stringify(searchItem))
)
}
//
const doLoadMore = () => {
queryAllSearch()
}
// doLoadMore
defineExpose({
doLoadMore
})
</script>
<style lang="scss" scoped>
.search-list {
@ -717,7 +543,7 @@ const clickSearchItem = (searchResultKey, searchItem) => {
}
.search-result {
width: 100%;
padding: 0 10px;
// padding: 0 10px;
display: flex;
flex-direction: row;
align-items: flex-start;
@ -726,13 +552,13 @@ const clickSearchItem = (searchResultKey, searchItem) => {
.search-result-list {
width: 100%;
// padding: 0 9px;
// padding: 0 10px;
.search-result-part {
margin: 18px 0 0;
.result-title {
padding: 0 0 5px;
padding: 0 10px 5px;
border-bottom: 1px solid #f8f8f8;
span {
line-height: 20px;
@ -740,7 +566,7 @@ const clickSearchItem = (searchResultKey, searchItem) => {
}
}
.result-has-more {
padding: 10px 0;
padding: 10px;
border-bottom: 1px solid #f8f8f8;
cursor: pointer;
span {

View File

@ -1,6 +1,6 @@
import dropsize from './dropsize'
import focus from './focus'
import loading from './loading'
import dropsize from './dropsize.js'
import focus from './focus.js'
import loading from './loading.js'
const directives = {
dropsize,

View File

@ -0,0 +1,118 @@
import { Local } from "@/utils/erpStorage.js";
import {debounce} from 'lodash-es'
import { setupDirective as setupCustomDirectives } from '@/directive/index.ts'
// 缓存按钮权限列表的key
const BTN_PERMISSION_KEY = 'ruleBtn';
// 工具函数: 获取权限列表
const getPermissionList = () => Local.get(BTN_PERMISSION_KEY) || [];
// 工具函数: 安全地移除DOM元素
const safeRemoveElement = (el) => {
el.style.display = 'none';
requestAnimationFrame(() => el.parentNode?.removeChild(el));
};
export default (app) => {
// 防抖函数
const directives = {
// 禁止输入空格
'no-space': {
mounted(el) {
const input = el.tagName === 'INPUT' ? el : el.querySelector('input');
if (!input) return;
const handleInput = debounce((e) => {
const value = e.target.value;
const trimmedValue = value.replace(/\s/g, '');
if (value !== trimmedValue) {
e.target.value = trimmedValue;
// 创建一次性的input事件
const inputEvent = new InputEvent('input', { bubbles: true });
e.target.dispatchEvent(inputEvent);
}
}, 100);
input.addEventListener('input', handleInput);
// 存储清理函数
el._cleanup = () => input.removeEventListener('input', handleInput);
},
unmounted(el) {
// 清理事件监听
el._cleanup?.();
}
},
// 上拉加载更多
'loadmore': {
mounted(el, binding) {
const handleScroll = debounce(() => {
const { scrollHeight, scrollTop, clientHeight } = el;
const threshold = 50; // 提前触发的距离
const isNearBottom = scrollHeight - scrollTop - clientHeight <= threshold;
if (isNearBottom && typeof binding.value === 'function') {
binding.value();
}
}, 200);
el.addEventListener('scroll', handleScroll, { passive: true });
el._cleanup = () => el.removeEventListener('scroll', handleScroll);
},
unmounted(el) {
el._cleanup?.();
}
},
// 按钮权限控制
'permission': {
mounted(el, binding) {
if (!binding.value) return;
const btnList = getPermissionList();
const hasPermission = btnList.includes(binding.value);
if (!hasPermission) {
safeRemoveElement(el);
}
}
}
};
// 注册指令
Object.entries(directives).forEach(([name, directive]) => {
app.directive(name, directive);
});
// 权限检查函数
const hasPermission = (permissions) => {
const permissionList = getPermissionList();
if (!permissionList.length) return false;
const requiredPermissions = Array.isArray(permissions) ? permissions : [permissions];
return requiredPermissions.some(permission => permissionList.includes(permission));
};
// 缓存代理以提高性能
// 注册全局权限检查方法
app.config.globalProperties.$hadRule = new Proxy(hasPermission, {
// 创建缓存Map
cache: new Map(),
// 代理函数调用
apply(target, thisArg, args) {
// 将参数序列化作为缓存key
const key = JSON.stringify(args);
// 如果缓存中存在,直接返回缓存结果
if (this.cache.has(key)) {
return this.cache.get(key);
}
// 如果缓存中不存在,执行原函数并缓存结果
const result = target.apply(thisArg, args);
this.cache.set(key, result);
return result;
}
});
// 注册 src/directive 里的 loading、dropsize、focus 等指令
setupCustomDirectives(app)
};

View File

@ -5,3 +5,8 @@ export * from './naive-ui'
export * from './sms-lock'
export * from './ws-socket'
export * from './pinia'
import directive from './directive'
export function setupDirective(app) {
directive(app)
}

View File

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

View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { reactive, computed, watch } from 'vue'
import { NDrawer } from 'naive-ui'
import { NDrawer, NCard } from 'naive-ui'
import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
import PanelHeader from './panel/PanelHeader.vue'
import PanelContent from './panel/PanelContent.vue'
@ -8,6 +8,7 @@ import PanelFooter from './panel/PanelFooter.vue'
import GroupPanel from '@/components/group/GroupPanel.vue'
import GroupNotice from '@/components/group/GroupNotice.vue'
import UploadsModal from '@/components/base/UploadsModal.vue'
import customModal from '@/components/common/customModal.vue'
const userStore = useUserStore()
const dialogueStore = useDialogueStore()
@ -31,8 +32,14 @@ const talkParams = reactive({
const state = reactive({
//
isShowGroupAside: false,
isShowGroupNotice: false
isShowGroupNotice: false,
isShowSearchRecordByConditionModal: false,//
customSearchRecordByConditionModalStyle: {
width: '997px',
height: '740px',
backgroundColor: '#F9F9FD'
},//
searchRecordByConditionText: ''//
})
const events = {
@ -137,12 +144,123 @@ const onPanelHeaderEvent = (eventType: string) => {
:gid="talkParams.receiver_id"
@close="state.isShowGroupAside = false"
:talkType="talkParams.type"
@handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
/>
</n-drawer>
<customModal
v-model:show="state.isShowSearchRecordByConditionModal"
title="与“{{ talkParams.username }}”的聊天记录"
:style="state.customSearchRecordByConditionModalStyle"
:customCloseBtn="true"
:closable="false"
>
<template #content>
<div class="search-record-modal-searchArea">
<n-card style="padding: 0 12px;">
<div class="search-record-input">
<span class="search-record-input-title">搜索</span>
<n-input
type="text"
v-model:value="state.searchRecordByConditionText"
placeholder="请输入"
clearable
>
<template #clear-icon>
<img src="@/assets/image/icon/close-btn-grey-line.png" alt="close" />
</template>
</n-input>
</div>
<div class="search-area-condition">
<span>文件</span>
<span>图片与视频</span>
<span>日期</span>
<span>群成员</span>
</div>
</n-card>
</div>
<div class="search-record-modal-content">
<n-card style="padding: 0 12px;">
<div class="search-record-card" v-if="state.searchRecordByConditionText">
</div>
<div class="search-record-empty" v-if="!state.searchRecordByConditionText">
<img src="@/assets/image/chatList/search-empty.png" alt="" />
<span>无内容</span>
</div>
</n-card>
</div>
</template>
</customModal>
</template>
<style lang="less" scoped>
.drawer-target {
overflow: hidden;
}
.search-record-modal-searchArea{
box-sizing: border-box;
width: 100%;
padding: 0 12px;
:deep(.n-card) {
border: 0;
box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
}
:deep(.n-card__content){
padding: 27px 12px 0;
}
.search-record-input {
display: flex;
align-items: center;
justify-content: center;
.search-record-input-title {
width: 78px;
}
}
.search-area-condition {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 22px 0 11px;
span{
font-size: 14px;
color: #46299D;
font-weight: 400;
line-height: 20px;
margin: 0 62px 0 0;
cursor: pointer;
}
}
}
.search-record-modal-content {
box-sizing: border-box;
width: 100%;
padding: 0 12px;
margin: 18px 0 0;
:deep(.n-card) {
border: 0;
box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
}
.search-record-card {
}
.search-record-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 455px;
box-sizing: border-box;
img {
width: 160px;
height: 104px;
}
span {
font-size: 14px;
color: #999;
font-weight: 400;
margin: 13px 0 0;
}
}
}
</style>

View File

@ -93,14 +93,6 @@ const renderChatAppSearch = () => {
last_receiver_group_name: '' //
})
)
state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
JSON.stringify({
last_group_id: 0,
last_member_id: 0,
receiver_id: 40,
talk_type: 1
})
)
state.isShowSearchRecordModal = true
}
console.log(searchResultKey, searchText)
@ -247,7 +239,8 @@ const state = reactive({
}, //
searchRecordText: '', //
ServeQueryTalkRecordParams: '', //
ServeQueryTalkRecordDetailParams: '' //
ServeQueryTalkRecordDetailParams: '', //
isShowSearchRecordDetailInfo: false //
})
const items = computed((): ISession[] => {
@ -460,6 +453,85 @@ const handleGroupChatListPaginationSize = (value) => {
console.log(value, 'value')
state.groupChatListPageSize = value
}
//
const handleClickSearchItem = (searchText, searchResultKey, talk_type, receiver_id, res) => {
console.log(searchText, searchResultKey, talk_type, receiver_id)
const result = JSON.parse(decodeURIComponent(res))
console.log(result)
if (searchResultKey === 'general_infos') {
state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
JSON.stringify({
last_group_id: 0, //id
last_member_id: 0, //id
receiver_id: receiver_id, //
talk_type: talk_type //12
})
)
searchDetailListRef.value?.doLoadMore()
}
}
//item
const handleClickStayItemChange = (item) => {
if (item) {
state.isShowSearchRecordDetailInfo = true
} else {
state.isShowSearchRecordDetailInfo = false
}
}
// ref
const searchListRef = ref()
// ref
const searchDetailListRef = ref()
//
const loadMoreRecordList = () => {
searchListRef.value?.doLoadMore()
}
//
const loadMoreRecordDetail = () => {
searchDetailListRef.value?.doLoadMore()
}
const handleMoreRecordLastIdChange = (
last_id,
last_group_id,
last_member_id,
last_receiver_user_name,
last_receiver_group_name
) => {
let idChanges = {
last_id,
last_group_id,
last_member_id,
last_receiver_user_name,
last_receiver_group_name
}
state.ServeQueryTalkRecordParams = encodeURIComponent(
JSON.stringify(
Object.assign({}, JSON.parse(decodeURIComponent(state.ServeQueryTalkRecordParams)), idChanges)
)
)
}
const handleRecordDetailLastIdChange = (last_id, last_group_id, last_member_id) => {
let idChanges = {
last_id,
last_group_id,
last_member_id
}
state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
JSON.stringify(
Object.assign(
{},
JSON.parse(decodeURIComponent(state.ServeQueryTalkRecordDetailParams)),
idChanges
)
)
)
}
</script>
<template>
@ -692,26 +764,34 @@ const handleGroupChatListPaginationSize = (value) => {
</n-input>
</div>
<div class="search-record-card" v-if="state.searchRecordText">
<div class="search-record-list">
<div class="search-record-list" v-loadmore="loadMoreRecordList">
<chatAppSearchList
ref="searchListRef"
:searchResultPageSize="10"
:listLimit="false"
:apiRequest="ServeQueryTalkRecord"
:apiParams="state.ServeQueryTalkRecordParams"
:searchText="state.searchRecordText || '王'"
:searchText="state.searchRecordText"
:isPagination="true"
searchResultKey="general_infos"
@clickSearchItem="handleClickSearchItem"
:useClickStay="true"
@clickStayItemChange="handleClickStayItemChange"
@lastIdChange="handleMoreRecordLastIdChange"
></chatAppSearchList>
</div>
<div class="search-record-detail">
<div class="search-record-detail" v-loadmore="loadMoreRecordDetail">
<chatAppSearchList
ref="searchDetailListRef"
v-if="state.isShowSearchRecordDetailInfo"
:searchResultPageSize="10"
:listLimit="false"
:apiRequest="ServeQueryTalkRecord"
:apiParams="state.ServeQueryTalkRecordDetailParams"
:searchText="state.searchRecordText || '王'"
:searchText="state.searchRecordText"
:isPagination="true"
:searchRecordDetail="true"
@lastIdChange="handleRecordDetailLastIdChange"
></chatAppSearchList>
</div>
</div>