再次重构从聊天app接入的按条件查询聊天记录组件，去除了按群成员查询、按日期查询的特异化，统一调用history接口，根据不同的场景处理参数，并处理空页面和分页等。处理不同交互场景下需要重置搜索条件的情况。目前按日期查询待接入，其他已完成
This commit is contained in:
parent
69e95e5c4d
commit
efb410b657
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -70,6 +70,7 @@ declare module 'vue' {
|
||||
RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SearchByCondition: typeof import('./src/components/search/searchByCondition.vue')['default']
|
||||
SearchItem: typeof import('./src/components/search/searchItem.vue')['default']
|
||||
SearchList: typeof import('./src/components/search/searchList.vue')['default']
|
||||
SysGroupAdminMessage: typeof import('./src/components/talk/message/system/SysGroupAdminMessage.vue')['default']
|
||||
|
||||
2
env/.env.test
vendored
2
env/.env.test
vendored
@ -3,6 +3,8 @@ ENV = 'development'
|
||||
VITE_BASE=/
|
||||
VUE_APP_PREVIEW=false
|
||||
VITE_BASE_API=http://114.218.158.24:8503
|
||||
# VITE_BASE_API=http://192.168.88.21:9503
|
||||
VITE_EPR_BASEURL=http://114.218.158.24:9020
|
||||
VITE_SOCKET_API=ws://114.218.158.24:8504
|
||||
# VITE_SOCKET_API=ws://192.168.88.21:9504
|
||||
VUE_APP_WEBSITE_NAME=""
|
||||
@ -236,6 +236,8 @@ const handleModalConfirm = (closeLoading) => {
|
||||
closeLoading()
|
||||
window['$message'].error(err.message)
|
||||
})
|
||||
} else if (state.chatSettingOperateType == 'quit'){
|
||||
//退出群聊
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="outer-layer search-by-condition-page">
|
||||
<n-infinite-scroll style="height: 455px;" :distance="10">
|
||||
<n-infinite-scroll style="height: 455px;" :distance="40" @load="loadMore">
|
||||
<div class="root">
|
||||
<div v-if="state.condition === 'dateTimePicker'" class="search-by-date">
|
||||
<n-date-picker
|
||||
@ -10,6 +10,7 @@
|
||||
:first-day-of-week="6"
|
||||
:is-date-disabled="dateDisabled"
|
||||
:actions="['clear', 'confirm']"
|
||||
@confirm="onDatePickConfirm"
|
||||
/>
|
||||
<!-- <tm-time-picker
|
||||
:show="state.showMonthPicker"
|
||||
@ -62,10 +63,17 @@
|
||||
state.condition === 'imgAndVideo' ||
|
||||
state.condition === 'file' ||
|
||||
state.condition === 'link' ||
|
||||
state.condition === 'member'
|
||||
state.condition === 'member' ||
|
||||
state.condition === 'all' ||
|
||||
state.condition === 'date'
|
||||
"
|
||||
:style="{
|
||||
padding: state.condition === 'imgAndVideo' ? '20px 38px' : ''
|
||||
padding:
|
||||
state.searchResultList.length > 0
|
||||
? state.condition === 'imgAndVideo'
|
||||
? '20px 38px'
|
||||
: ''
|
||||
: '0'
|
||||
}"
|
||||
>
|
||||
<!-- <div
|
||||
@ -117,7 +125,14 @@
|
||||
padding: state.condition === 'imgAndVideo' ? '' : ''
|
||||
}"
|
||||
>
|
||||
<div class="condition-result-member" v-if="state.condition === 'member'">
|
||||
<div
|
||||
class="condition-result-member"
|
||||
v-if="
|
||||
state.condition === 'member' ||
|
||||
state.condition === 'all' ||
|
||||
state.condition === 'date'
|
||||
"
|
||||
>
|
||||
<searchItem
|
||||
@click="toDialogueByMember(item)"
|
||||
:searchResultKey="'search_by_member_condition'"
|
||||
@ -216,7 +231,7 @@
|
||||
<span
|
||||
class="text-[14px] font-regular"
|
||||
v-if="state.condition === 'file'"
|
||||
style="color: #999999;"
|
||||
style="color: #999999; flex-shrink: 0; margin: 0 0 0 20px;"
|
||||
>
|
||||
{{ item.dateTime }}
|
||||
</span>
|
||||
@ -236,7 +251,11 @@
|
||||
<span class="text-[12px] font-regular" v-if="state.condition === 'file'">
|
||||
{{ item?.nickname }}
|
||||
</span>
|
||||
<span class="text-[12px] font-regular" v-if="state.condition === 'file'">
|
||||
<span
|
||||
class="text-[12px] font-regular"
|
||||
v-if="state.condition === 'file'"
|
||||
style="flex-shrink: 0; margin: 0 0 0 20px;"
|
||||
>
|
||||
{{ item?.extra?.fileSize }}
|
||||
</span>
|
||||
</div>
|
||||
@ -278,6 +297,10 @@
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
<div class="search-record-empty" v-if="state.searchResultList.length === 0">
|
||||
<img src="@/assets/image/chatList/search-empty.png" alt="" />
|
||||
<span>无内容</span>
|
||||
</div>
|
||||
</n-infinite-scroll>
|
||||
</div>
|
||||
</template>
|
||||
@ -304,6 +327,8 @@ import { parseTime } from '@/utils/datetime'
|
||||
import { fileFormatSize, fileSuffix } from '@/utils/strings'
|
||||
import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
|
||||
|
||||
const emits = defineEmits(['clearSearchMemberByAlphabet'])
|
||||
|
||||
const dialogueStore = useDialogueStore()
|
||||
// 当前对话参数
|
||||
const dialogueParams = reactive({
|
||||
@ -318,6 +343,16 @@ const props = defineProps({
|
||||
//搜索条件
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
searchMemberItem: {
|
||||
//搜索的群成员
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
searchRecordByConditionText: {
|
||||
//搜索关键字文本
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
@ -338,7 +373,10 @@ const state = reactive({
|
||||
cursor: 0, //上次查询的游标
|
||||
msg_type: 0, //查询的消息类型
|
||||
group_member_id: 0, //群成员id
|
||||
flatList: [] // 用于存储扁平化的数据
|
||||
flatList: [], // 用于存储扁平化的数据
|
||||
selectedDateTime: '', //选中的日期时间戳格式
|
||||
isLoadingChatRecord: false, // 添加加载状态标志
|
||||
hasNoMoreResults: false // 是否没有更多结果
|
||||
})
|
||||
|
||||
const videoContext = ref()
|
||||
@ -518,8 +556,6 @@ const getDArray = (selectedMonth) => {
|
||||
//输入搜索内容
|
||||
const inputSearchText = (e) => {
|
||||
state.searchText = e
|
||||
state.cursor = 0
|
||||
queryAllSearch()
|
||||
}
|
||||
|
||||
//点击取消搜索
|
||||
@ -546,28 +582,32 @@ const queryAllSearch = () => {
|
||||
limit: 10, //数据行数
|
||||
no_limit: '', //1不限制
|
||||
direction: 'up', //down向下查最新，up向上查老数据
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
start_time: state.selectedDateTime
|
||||
? parseTime(new Date(state.selectedDateTime), '{y}-{m}-{d}')
|
||||
: '',
|
||||
end_time: state.selectedDateTime
|
||||
? parseTime(new Date(state.selectedDateTime), '{y}-{m}-{d}')
|
||||
: '',
|
||||
group_member_user_id: state.group_member_id, //群成员id，当查询群历史消息的时候，需要指定群成员的时候送
|
||||
file_name: state.msg_type === 6 ? state.searchText : ''
|
||||
file_name: props?.searchRecordByConditionText
|
||||
}
|
||||
console.log(params)
|
||||
const resp = ServeFindTalkRecords(params)
|
||||
console.log(resp)
|
||||
resp.then(({ code, data }) => {
|
||||
resp
|
||||
.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 200) {
|
||||
// 当cursor为0时，清空searchResultList
|
||||
let dateList = state.cursor === 0 ? [] : state.searchResultList
|
||||
let noMore = false
|
||||
if (data?.items?.length > 0) {
|
||||
data.items.forEach((item) => {
|
||||
item.dateTime = parseTime(item?.created_at, '{m}/{d}')
|
||||
if (item?.extra) {
|
||||
if (item?.extra && typeof item.extra === 'object') {
|
||||
item.extra.fileSize = fileFormatSize(item?.extra?.size)
|
||||
item.extra.typeText = item?.extra?.name ? fileSuffix(item?.extra?.name) : ''
|
||||
item.extra.file_avatar = fileTypeAvatar(item?.extra?.typeText)
|
||||
console.log(item.extra.type)
|
||||
// console.log(item.extra.type)
|
||||
}
|
||||
let year = new Date(item.created_at).getFullYear()
|
||||
let month = new Date(item.created_at).getMonth() + 1
|
||||
@ -597,8 +637,6 @@ const queryAllSearch = () => {
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
noMore = true
|
||||
}
|
||||
|
||||
// 保存分组数据用于显示
|
||||
@ -615,6 +653,11 @@ const queryAllSearch = () => {
|
||||
// zPaging.value?.completeByNoMore(state.flatList, noMore)
|
||||
}
|
||||
state.cursor = data?.cursor
|
||||
if (data?.cursor === 0) {
|
||||
state.hasNoMoreResults = true
|
||||
} else {
|
||||
state.hasNoMoreResults = false
|
||||
}
|
||||
} else {
|
||||
if (state.cursor === 0) {
|
||||
state.searchResultList = []
|
||||
@ -623,6 +666,9 @@ const queryAllSearch = () => {
|
||||
// zPaging.value?.complete([])
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.isLoadingChatRecord = false // 无论成功失败，都重置加载状态
|
||||
})
|
||||
|
||||
resp.catch(() => {
|
||||
if (state.cursor === 0) {
|
||||
@ -630,6 +676,7 @@ const queryAllSearch = () => {
|
||||
state.flatList = []
|
||||
}
|
||||
// zPaging.value?.complete([])
|
||||
state.isLoadingChatRecord = false // 发生错误时也要重置加载状态
|
||||
})
|
||||
}
|
||||
|
||||
@ -699,22 +746,56 @@ const toDialogueByMember = async (msgInfo) => {
|
||||
})
|
||||
}
|
||||
|
||||
//点击选择日期确认
|
||||
const onDatePickConfirm = (datePicker) => {
|
||||
console.log(datePicker)
|
||||
state.selectedDateTime = datePicker
|
||||
resetSearchConditions('dateTimePicker')
|
||||
queryAllSearch()
|
||||
}
|
||||
|
||||
//重置部分搜索条件
|
||||
const resetSearchConditions = (newVal) => {
|
||||
state.cursor = 0
|
||||
state.searchResultList = []
|
||||
state.flatList = []
|
||||
if (newVal !== 'member') {
|
||||
state.group_member_id = 0
|
||||
emits('clearSearchMemberByAlphabet')
|
||||
}
|
||||
}
|
||||
|
||||
//触底加载更多数据
|
||||
const loadMore = () => {
|
||||
if (state.isLoadingChatRecord || state.hasNoMoreResults) return // 如果正在加载中，或者没有更多结果，直接返回
|
||||
state.isLoadingChatRecord = true
|
||||
queryAllSearch()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props?.conditionType,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal, oldVal)
|
||||
state.condition = newVal
|
||||
if (newVal) {
|
||||
resetSearchConditions(newVal)
|
||||
if (newVal === 'member') {
|
||||
//没选日期前，也等同于倒序查询全部
|
||||
state.showPageTitle = true
|
||||
state.pageTitle = '按群成员查找'
|
||||
// state.group_member_id = options.groupMemberId
|
||||
state.msg_type = 0
|
||||
queryAllSearch()
|
||||
} else if (newVal === 'dateTimePicker') {
|
||||
state.showPageTitle = true
|
||||
state.pageTitle = '按日期查找'
|
||||
state.msg_type = 0
|
||||
ServeQueryTalkDate(parseTime(state.nowDate, '{y}{m}'))
|
||||
getDArray(parseTime(state.nowDate, '{y}-{m}'))
|
||||
queryAllSearch()
|
||||
} else if (newVal === 'date') {
|
||||
//没选日期前，也等同于倒序查询全部
|
||||
state.msg_type = 0
|
||||
queryAllSearch()
|
||||
} else if (newVal === 'imgAndVideo') {
|
||||
state.showPageTitle = true
|
||||
state.pageTitle = '图片与视频'
|
||||
@ -744,6 +825,10 @@ watch(
|
||||
)
|
||||
state.msg_type = 14
|
||||
queryAllSearch()
|
||||
} else if (newVal === 'all') {
|
||||
//查询全部，即重置所有条件
|
||||
state.msg_type = 0
|
||||
queryAllSearch()
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -752,6 +837,29 @@ watch(
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props?.searchMemberItem,
|
||||
(newVal, oldVal) => {
|
||||
const memberItem = newVal ? JSON.parse(decodeURIComponent(newVal)) : ''
|
||||
state.group_member_id = memberItem?.user_id
|
||||
resetSearchConditions('member')
|
||||
queryAllSearch()
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props?.searchRecordByConditionText,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal, oldVal)
|
||||
resetSearchConditions(state.condition)
|
||||
queryAllSearch()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.search-by-date {
|
||||
@ -963,11 +1071,6 @@ body:deep(.round-3) {
|
||||
}
|
||||
}
|
||||
}
|
||||
.condition-dimensionality-each:nth-child(1) {
|
||||
.condition-each-result-attachments {
|
||||
padding: 0 0 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -990,4 +1093,23 @@ body:deep(.round-3) {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -334,6 +334,7 @@ const resultDetail = computed(() => {
|
||||
.searchRecordDetail-fastLocal {
|
||||
display: none;
|
||||
line-height: 20px;
|
||||
flex-shrink: 0;
|
||||
span {
|
||||
color: #46299d;
|
||||
font-size: 12px;
|
||||
|
||||
@ -14,7 +14,8 @@ interface Params {
|
||||
interface SpecialParams extends Params {
|
||||
msg_id?: string
|
||||
cursor?: number
|
||||
direction?: 'up' | 'down'
|
||||
direction?: 'up' | 'down',
|
||||
sort_sequence?: string
|
||||
}
|
||||
|
||||
interface LoadOptions {
|
||||
@ -201,9 +202,9 @@ export const useTalkRecord = (uid: number) => {
|
||||
loadConfig.status = 2
|
||||
return
|
||||
}
|
||||
dialogueStore.clearDialogueRecord()
|
||||
// dialogueStore.clearDialogueRecord()
|
||||
const items = (data.items || []).map((item: ITalkRecord) => formatTalkRecord(uid, item))
|
||||
dialogueStore.unshiftDialogueRecord(items.reverse())
|
||||
dialogueStore.unshiftDialogueRecord(contextParams.direction === 'down' ? items : items.reverse())
|
||||
loadConfig.status = items.length >= contextParams.limit ? 1 : 2
|
||||
loadConfig.cursor = data.cursor
|
||||
nextTick(() => {
|
||||
@ -255,6 +256,7 @@ export const useTalkRecord = (uid: number) => {
|
||||
specifiedMsg: {
|
||||
...loadConfig.specialParams,
|
||||
direction: 'up',
|
||||
sort_sequence: '',
|
||||
cursor: getMinSequence()
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,6 +54,8 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
groupInfo: {} ,
|
||||
// 群成员列表
|
||||
members: [],
|
||||
// 群成员列表按字母分组
|
||||
membersByAlphabet: {},
|
||||
|
||||
// 对话记录
|
||||
items: {
|
||||
@ -101,6 +103,7 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
// }
|
||||
|
||||
this.members = []
|
||||
this.membersByAlphabet = []
|
||||
if (data.talk_type == 2) {
|
||||
this.updateGroupMembers()
|
||||
this.getGroupInfo()
|
||||
@ -126,6 +129,17 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
online: false,
|
||||
value: o.nickname
|
||||
}))
|
||||
const groupMap = {};
|
||||
data.sortItems.forEach(member => {
|
||||
const alpha = (member.key || member.nickname?.[0] || '#').toUpperCase();
|
||||
if (!groupMap[alpha]) groupMap[alpha] = [];
|
||||
groupMap[alpha].push(member);
|
||||
});
|
||||
const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
|
||||
this.membersByAlphabet = alphabets.map(alpha => ({
|
||||
alphabet: alpha,
|
||||
members: groupMap[alpha] || []
|
||||
})).filter(group => group.members.length > 0);
|
||||
},
|
||||
|
||||
// 清空对话记录
|
||||
|
||||
@ -18,7 +18,7 @@ export function isLoggedIn() {
|
||||
*/
|
||||
export function getAccessToken() {
|
||||
// return storage.get(AccessToken) || ''
|
||||
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89eb1ea28c6224649ca60080b7243593f7462085111e3bd3868564aa9a65a16e171ba833d4955a4555f3376cb64b66eb2304dafb03f182fe1719d09e84d345954edbf75b17358196e1378893c8c97b56a6'
|
||||
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b895d12a77cebc3f489ae40e22c7fcd041709d942706b8ab6959f87300e0708cf1f6267ffc75eec184c873b180677744fb7af1a18227c61e570dd36542a83d608f51f3a124414eee16ad11c8b5d3aefd6bc'
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -58,7 +58,7 @@ export function fileFormatSize(value) {
|
||||
return '0'
|
||||
}
|
||||
|
||||
let unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
let unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
let index = 0
|
||||
let srcsize = parseFloat(value)
|
||||
index = Math.floor(Math.log(srcsize) / Math.log(1000))
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive, computed, watch } from 'vue'
|
||||
import { NDrawer, NCard, NTag } from 'naive-ui'
|
||||
import { NDrawer, NCard, NTag, NInput } from 'naive-ui'
|
||||
import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
|
||||
import PanelHeader from './panel/PanelHeader.vue'
|
||||
import PanelContent from './panel/PanelContent.vue'
|
||||
@ -16,9 +16,31 @@ import avatarModule from '@/components/avatar-module/index.vue'
|
||||
const userStore = useUserStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
const uploadsStore = useUploadsStore()
|
||||
console.log('dialogueStore',dialogueStore);
|
||||
console.log('dialogueStore', dialogueStore)
|
||||
|
||||
const members = computed(() => dialogueStore.members)
|
||||
const membersByAlphabet = computed(() => {
|
||||
if (state.searchMemberByAlphabet) {
|
||||
// 过滤分组，并且只保留匹配成员
|
||||
return (
|
||||
(dialogueStore.membersByAlphabet as any)
|
||||
.map((group: any) => {
|
||||
// 只保留匹配的成员
|
||||
const filteredMembers = group.members.filter(
|
||||
(member) => member.nickname && member.nickname.includes(state.searchMemberByAlphabet)
|
||||
)
|
||||
return {
|
||||
...group,
|
||||
members: filteredMembers
|
||||
}
|
||||
})
|
||||
// 只保留有成员的分组
|
||||
.filter((group) => group.members.length > 0)
|
||||
)
|
||||
}
|
||||
return dialogueStore.membersByAlphabet
|
||||
})
|
||||
|
||||
const isShowEditor = computed(() => dialogueStore.isShowEditor)
|
||||
|
||||
// 当前对话参数
|
||||
@ -46,8 +68,8 @@ const state = reactive({
|
||||
backgroundColor: '#F9F9FD'
|
||||
}, //按条件搜索记录弹窗样式
|
||||
searchRecordByConditionText: '', //按条件搜索记录文本
|
||||
conditionTag: '', //当前条件标签
|
||||
conditionType: '', //当前条件类型
|
||||
conditionTag: 'all', //当前条件标签
|
||||
conditionType: 'all', //当前条件类型
|
||||
isShowGroupNoticeModal: false, //是否显示群公告模态框
|
||||
customGroupNoticeModalStyle: {
|
||||
width: '997px',
|
||||
@ -81,7 +103,10 @@ const state = reactive({
|
||||
content: ''
|
||||
}, //群公告信息
|
||||
isAdmin: false, //当前登录用户是否是该群管理员
|
||||
groupNoticeContentChange: '' //群公告内容变化
|
||||
groupNoticeContentChange: '', //群公告内容变化
|
||||
searchMemberByAlphabet: '', //群成员搜索文本
|
||||
searchMemberItem: '', //群成员搜索item
|
||||
showMemberListByAlphabetPopover: false // 控制群成员弹窗显示
|
||||
})
|
||||
|
||||
const events = {
|
||||
@ -118,7 +143,7 @@ const changeConditionTag = (tag) => {
|
||||
} else if (tag === 'member') {
|
||||
state.conditionTag = '群成员'
|
||||
} else {
|
||||
state.conditionTag = ''
|
||||
state.conditionTag = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
@ -370,13 +395,38 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
state.isShowGroupNoticeModal = true
|
||||
getGroupNotices()
|
||||
}
|
||||
//点击群成员类型搜索聊天记录下的群成员item
|
||||
const handleMemberItemClick = (memberItem) => {
|
||||
state.searchMemberItem = encodeURIComponent(JSON.stringify(memberItem))
|
||||
state.showMemberListByAlphabetPopover = false // 关闭弹窗
|
||||
state.searchMemberByAlphabet = ''
|
||||
}
|
||||
//清空按A-Z排序下搜索群成员关键字
|
||||
const clearSearchMemberByAlphabet = () => {
|
||||
state.searchMemberByAlphabet = ''
|
||||
}
|
||||
|
||||
// 搜索记录模态框关闭事件
|
||||
const handleSearchRecordByConditionModalClose = () => {
|
||||
state.isShowSearchRecordByConditionModal = false
|
||||
resetSearchRecordByCondition()
|
||||
}
|
||||
|
||||
// 重置搜索记录模态框
|
||||
const resetSearchRecordByCondition = () => {
|
||||
state.searchRecordByConditionText = ''
|
||||
state.conditionType = 'all'
|
||||
state.conditionTag = 'all'
|
||||
state.searchMemberItem = ''
|
||||
state.showMemberListByAlphabetPopover = false
|
||||
state.searchMemberByAlphabet = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="drawer-container" class="el-container is-vertical">
|
||||
<!-- 头部区域 -->
|
||||
<header class="el-header bdr-b">
|
||||
|
||||
<PanelHeader
|
||||
:type="talkParams.type"
|
||||
:username="talkParams.username"
|
||||
@ -468,6 +518,8 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
:style="state.customSearchRecordByConditionModalStyle"
|
||||
:customCloseBtn="true"
|
||||
:closable="false"
|
||||
:customCloseEvent="true"
|
||||
@customCloseModal="handleSearchRecordByConditionModalClose"
|
||||
>
|
||||
<template #content>
|
||||
<div class="search-record-modal-searchArea">
|
||||
@ -484,7 +536,11 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
<img src="@/assets/image/icon/close-btn-grey-line.png" alt="close" />
|
||||
</template>
|
||||
<template #prefix>
|
||||
<n-tag closable v-if="state.conditionTag" @close="changeConditionTag('')">
|
||||
<n-tag
|
||||
closable
|
||||
v-if="state.conditionTag && state.conditionTag !== 'all'"
|
||||
@close="changeConditionTag('all')"
|
||||
>
|
||||
{{ state.conditionTag }}
|
||||
</n-tag>
|
||||
</template>
|
||||
@ -500,16 +556,58 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
<historyRecord conditionType="dateTimePicker" v-if="state.conditionType === 'date'" />
|
||||
</n-popover>
|
||||
<n-popover
|
||||
v-model:show="state.showMemberListByAlphabetPopover"
|
||||
trigger="click"
|
||||
placement="bottom-start"
|
||||
style="height: 505px; padding: 0;"
|
||||
style="width: 290px; height: 505px; padding: 0;"
|
||||
v-if="talkParams.type === 2"
|
||||
>
|
||||
<template #trigger>
|
||||
<span @click="changeConditionTag('member')">群成员</span>
|
||||
</template>
|
||||
<div>
|
||||
<text>这里是memberList</text>
|
||||
<div class="member-list-by-alphabet-container">
|
||||
<n-input
|
||||
placeholder="请输入群成员"
|
||||
style="margin: 0 0 17px;"
|
||||
v-model:value="state.searchMemberByAlphabet"
|
||||
/>
|
||||
<n-scrollbar style="height: 430px;">
|
||||
<div
|
||||
class="member-list-by-alphabet"
|
||||
v-for="(alphabetMembersItem, alphabetMembersIndex) in membersByAlphabet"
|
||||
:key="alphabetMembersIndex"
|
||||
>
|
||||
<div class="member-list-each-alphabet-header">
|
||||
<span>{{ (alphabetMembersItem as any).alphabet }}</span>
|
||||
</div>
|
||||
<div class="member-list-each-alphabet">
|
||||
<div
|
||||
class="member-item-each-alphabet"
|
||||
v-for="(memberItem, memberItemIndex) in (alphabetMembersItem as any).members"
|
||||
:key="memberItemIndex"
|
||||
@click="handleMemberItemClick(memberItem)"
|
||||
>
|
||||
<avatarModule
|
||||
:mode="1"
|
||||
:avatar="memberItem.avatar"
|
||||
:userName="memberItem.nickname"
|
||||
:groupType="0"
|
||||
:customStyle="{
|
||||
width: '38px',
|
||||
height: '38px'
|
||||
}"
|
||||
:customTextStyle="{
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
lineHeight: '17px'
|
||||
}"
|
||||
></avatarModule>
|
||||
<span>{{ memberItem.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
@ -517,18 +615,13 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
</div>
|
||||
<div class="search-record-modal-content">
|
||||
<n-card>
|
||||
<div
|
||||
class="search-record-card"
|
||||
v-if="state.searchRecordByConditionText || state.conditionType"
|
||||
>
|
||||
<historyRecord :conditionType="state.conditionType" />
|
||||
</div>
|
||||
<div
|
||||
class="search-record-empty"
|
||||
v-if="!state.searchRecordByConditionText && !state.conditionType"
|
||||
>
|
||||
<img src="@/assets/image/chatList/search-empty.png" alt="" />
|
||||
<span>无内容</span>
|
||||
<div class="search-record-card">
|
||||
<historyRecord
|
||||
:conditionType="state.conditionType"
|
||||
:searchMemberItem="state.searchMemberItem"
|
||||
@clearSearchMemberByAlphabet="clearSearchMemberByAlphabet"
|
||||
:searchRecordByConditionText="state.searchRecordByConditionText"
|
||||
/>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
@ -677,24 +770,6 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-notice-modal-content {
|
||||
.group-notice-text-area {
|
||||
@ -772,4 +847,43 @@ const handleGroupNoticeModalShow = (isAdmin) => {
|
||||
color: #1f2225;
|
||||
}
|
||||
}
|
||||
|
||||
.member-list-by-alphabet-container {
|
||||
padding: 12px;
|
||||
width: 290px;
|
||||
.member-list-by-alphabet {
|
||||
.member-list-each-alphabet-header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.member-list-each-alphabet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
.member-item-each-alphabet {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user