消息人头列表增加输入框内容过滤功能

src/components/shared/message/MessageHeadList.vue

@@ -1,13 +1,7 @@
 <template>
-  <div class="message-list p-base scroll-y-auto">
-    <template v-if="!!(messageList || []).length">
-      <!-- <div
-        v-for="message in messageList"
-        :key="message.id"
-        class="radius-base fill-blank p-base m-b-mini relative message-item"
-        :class="{ active: currentMessage?.sendUserId === message.sendUserId, 'un-read': message.unReadCount > 0 }"
-        @click="checkMessage(message)"
-      > -->
+  <div class="message-list p-base flex direction-column">
+    <el-input v-model="filterText" placeholder="输入评卷员账号或名称筛选" clearable style="margin-bottom: 10px" />
+    <div v-if="!!(messageList || []).length" class="scroll-y-auto flex-1">
       <div
         v-for="message in messageList"
         :key="message.id"
@@ -24,7 +18,7 @@
 
         <pre class="message-content">{{ transHtmlContent(message.content) }}</pre>
       </div>
-    </template>
+    </div>
     <div v-else class="none-msg-box">
       <div class="center-box">
         <svg-icon name="none_message" style="font-size: 120px"></svg-icon>
@@ -34,7 +28,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
+import { ElInput } from 'element-plus'
 import useFetch from '@/hooks/useFetch'
 import bus from '@/utils/bus'
 import { transHtmlContent } from '@/utils/common'
@@ -42,12 +37,19 @@ import dayjs from 'dayjs'
 import SvgIcon from '@/components/common/SvgIcon.vue'
 import useMainStore from '@/store/main'
 const mainStore = useMainStore()
-
+const filterText = ref('')
 const emits = defineEmits(['leftMsgClick'])
 const props = defineProps<{ curMsg: any; mode: string; replyUserId: any }>()
 
 const currentMessage = ref<any>()
-const { fetch: getMessageList, result: messageList } = useFetch('getMessageList')
+// const { fetch: getMessageList, result: messageList } = useFetch('getMessageList')
+const { fetch: getMessageList, result: originMessageList } = useFetch('getMessageList')
+const messageList = computed(() => {
+  return (originMessageList.value || []).filter((message: any) => {
+    let name: string = mainStore?.myUserInfo?.id == message.sendUserId ? message.receiveUserName : message.sendUserName
+    return name?.includes(filterText.value)
+  })
+})
 const checkMessage = (msg: any) => {
   currentMessage.value = msg
   bus.emit('clickChangeMsg', msg)
@@ -59,7 +61,6 @@ const isActiveMessage = (message1: any, message2: any) => {
   return otherUserId1 && otherUserId1 === otherUserId2
 }
 getMessageList().then((result) => {
-  //   currentMessage.value = result?.[0]
   if (props.mode !== 'view' && !props.replyUserId) {
     return
   }
@@ -73,16 +74,12 @@ getMessageList().then((result) => {
     currentMessage.value = target
     bus.emit('clickChangeMsg', target)
   }
-  //   if (result[0]) {
-  //     bus.emit('clickChangeMsg', result[0])
-  //   }
 })
 watch(
   () => mainStore.newMsgs,
   () => {
     getMessageList().then((res) => {
       if (res && Array.isArray(res)) {
-        // let find = res.find((item) => item.sendUserId == currentMessage.value?.sendUserId)
         let find = res.find((item) => isActiveMessage(item, currentMessage.value))
         if (!!find) {
           currentMessage.value = find

src/components/shared/message/MessageList.vue

@@ -1,30 +1,6 @@
 <template>
   <div class="flex overflow-hidden message-list-modal">
     <slot></slot>
-    <!-- <div class="message-list p-base scroll-y-auto">
-      <template v-if="!!(messageList || []).length">
-        <div
-          v-for="message in messageList"
-          :key="message.id"
-          class="radius-base fill-blank p-base m-b-mini relative message-item"
-          :class="{ active: currentMessage?.sendUserId === message.sendUserId, 'un-read': message.unReadCount > 0 }"
-          @click="checkMessage(message)"
-        >
-          <div class="flex items-center m-b-base message-title">
-            <div class="message-send-user">{{ message.sendUserName }}</div>
-            <div class="m-l-auto message-send-time">{{ dayjs(message.sendTime).format('HH:mm') }}</div>
-          </div>
-        
-          <pre class="message-content">{{ transHtmlContent(message.content) }}</pre>
-        </div>
-      </template>
-      <div v-else class="none-msg-box">
-        <div class="center-box">
-          <svg-icon name="none_message" style="font-size: 120px"></svg-icon>
-          <p class="tip">暂无消息</p>
-        </div>
-      </div>
-    </div> -->
     <div class="message-info-container">
       <div class="flex direction-column message-info">
         <div class="flex items-center p-base message-info-header">