OA体制内聊天项目人员选择页面新增人名首字母分类，并增加侧边导航栏快速跳转；完全去除群聊相关接口重复注册，便于代码维护

src/api/chatSettings/index.js

@@ -1,29 +0,0 @@
-import request from '@/service/index.js'
-import qs from 'qs'
-
-// 群公告查询
-export const ServeQueryGroupNotice = (data) => {
-  return request({
-    url: '/api/v1/group/notice/list',
-    method: 'GET',
-    data,
-  })
-}
-
-// 置顶聊天会话
-export const ServeTopTalk = (data) => {
-  return request({
-    url: '/api/v1/talk/topping',
-    method: 'POST',
-    data,
-  })
-}
-
-// 免打扰聊天会话
-export const ServeDisturbTalk = (data) => {
-  return request({
-    url: '/api/v1/talk/disturb',
-    method: 'POST',
-    data,
-  })
-}

src/pages/chatSettings/components/select-member-item.vue

@@ -1,14 +1,34 @@
 <template>
-  <div class="select-member-item" @click="clickItem(props?.memberItem)">
+  <div
+    class="select-member-item"
+    @click="clickItem(props?.memberItem)"
+    :class="
+      props.itemStyle === 'card'
+        ? 'select-member-item-card'
+        : 'select-member-item-list'
+    "
+  >
     <div class="member-info">
       <slot name="left"></slot>
-      <div class="select-member-item-avatar" v-if="props?.manageType === 'silence'">
+      <div
+        class="select-member-item-avatar"
+        v-if="
+          props?.manageType === 'silence' ||
+          props?.manageType === 'searchRecord'
+        "
+      >
         <img v-if="avatarImg !== 'textImg'" :src="avatarImg" />
         <span v-if="avatarImg === 'textImg'" class="text-[24rpx] font-bold">
           {{ imgText }}
         </span>
       </div>
-      <div class="select-member-item-name" v-if="props?.manageType === 'silence'">
+      <div
+        class="select-member-item-name"
+        v-if="
+          props?.manageType === 'silence' ||
+          props?.manageType === 'searchRecord'
+        "
+      >
         <span class="text-[28rpx] font-medium">{{ nameText }}</span>
       </div>
     </div>
@@ -33,6 +53,7 @@ const emits = defineEmits(['clickItem'])
 const props = defineProps({
   memberItem: Object, //人员
   manageType: String, //管理类型
+  itemStyle: String,
 })
 onMounted(() => {})
 
@@ -69,9 +90,6 @@ const clickItem = () => {
   justify-content: space-between;
   padding: 18rpx 34rpx;
   background-color: #fff;
-  margin: 20rpx 0 0;
-  box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
-  border-radius: 8rpx;
   width: 100%;
   .member-info {
     display: flex;
@@ -112,4 +130,13 @@ const clickItem = () => {
     }
   }
 }
+
+.select-member-item-card {
+  margin: 20rpx 0 0;
+  box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
+  border-radius: 8rpx;
+}
+.select-member-item-list {
+  border-bottom: 1px solid $theme-border-color;
+}
 </style>

src/pages/chatSettings/components/settingFormItem.vue

@@ -19,7 +19,7 @@
           barIcon=""
           color="#46299D"
           unCheckedColor="#EEEEEE"
-          :defaultValue="defaultValue"
+          :modelValue="modelValue"
           @change="changeSwitch($event, props?.item)"
         ></tm-switch>
       </div>
@@ -53,7 +53,7 @@ const emits = defineEmits(['toManagePage', 'changeSwitch'])
 const toManagePage = (item) => {
   emits('toManagePage', item.label)
 }
-const defaultValue = computed(() => {
+const modelValue = computed(() => {
   let switchStatus = false
   if (
     props?.item?.label === t('chat.settings.topSession') &&

src/pages/chatSettings/groupManage/manageGroupAdmin.vue

@@ -43,7 +43,7 @@ const groupStore = useGroupStore()
 const dialogueStore = useDialogueStore()
 
 const dialogueParams = reactive({
-  adminList: computed(() => dialogueStore.getSilenceMember),
+  adminList: computed(() => dialogueStore.getAdminList),
 })
 
 const state = reactive({

src/pages/chatSettings/groupManage/selectMembers.vue

@@ -1,9 +1,23 @@
 <template>
   <div class="outer-layer select-members-page">
     <div class="root">
-      <ZPaging ref="zPaging" :show-scrollbar="false">
+      <ZPaging
+        ref="zPaging"
+        :show-scrollbar="false"
+        :use-virtual-list="true"
+        :virtual-list-col="5"
+        :refresher-enabled="false"
+        :loading-more-enabled="false"
+        @scroll="onScroll"
+      >
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <tm-navbar
+            :hideBack="false"
+            hideHome
+            title=""
+            :leftWidth="220"
+            id="topArea"
+          >
             <div class="navBar-title flex flex-col items-center justify-center">
               <span
                 class="text-[34rpx] font-medium"
@@ -17,6 +31,12 @@
               >
                 {{ $t('chat.manage.addAdmin') }}
               </span>
+              <span
+                class="text-[34rpx] font-medium"
+                v-if="state.manageType === 'searchRecord'"
+              >
+                {{ $t('search.condition.member') }}
+              </span>
             </div>
           </tm-navbar>
         </template>
@@ -27,32 +47,90 @@
               @inputSearchText="inputSearchText"
             ></customInput>
           </div>
-          <div class="member-list">
+          <div
-            <div
+            class="member-list"
-              class="member-list-each"
+            :style="{
-              v-for="(item, index) in dialogueParams?.memberList"
+              padding: state.manageType === 'searchRecord' ? '20rpx 0 0' : '',
-              :key="index"
+            }"
-            >
+          >
-              <tm-checkbox-group v-model="item.checkArr">
+            <div class="member-list-alphabet-anchor-point">
-                <selectMemberItem
+              <div
-                  :memberItem="item"
+                class="member-list-alphabet-anchor-point-each"
-                  @clickItem="handleClickItem(item)"
+                v-for="(alphabetItem, alphabetIndex) in state?.alphabet"
-                  :manageType="state.manageType"
+                :key="alphabetIndex"
+                :style="{
+                  margin: state?.alphabet?.length > 17 ? '0' : '',
+                }"
+                @click.stop="scrollToView(alphabetItem)"
+              >
+                <span
+                  class="text-[32rpx] font-regular"
+                  :style="{
+                    color:
+                      state.currentAlphabet === alphabetItem ? '#7A58DE' : '',
+                  }"
                 >
-                  <template #left>
+                  {{ alphabetItem }}
-                    <tm-checkbox
+                </span>
-                      :round="10"
+              </div>
-                      color="#46299d"
+            </div>
-                      :value="item.id"
+            <div
-                      :disabled="item.is_mute === 1"
+              class="member-list-alphabet"
-                    ></tm-checkbox>
+              v-for="(alphabetItem, alphabetIndex) in state.resultMemberList"
-                  </template>
+              :key="alphabetIndex"
-                </selectMemberItem>
+            >
-              </tm-checkbox-group>
+              <div
+                class="member-list-alphabet-key"
+                :style="{
+                  padding:
+                    state.manageType === 'searchRecord' ? '10rpx 30rpx' : '',
+                }"
+                v-if="alphabetItem?.memberList?.length > 0"
+                :id="alphabetItem.key"
+                :ref="
+                  (el) => {
+                    if (el) alphabetElementRefs[alphabetIndex] = el
+                  }
+                "
+              >
+                <span class="text-[32rpx] font-regular">
+                  {{ alphabetItem.key }}
+                </span>
+              </div>
+              <div v-if="alphabetItem?.memberList?.length > 0">
+                <div
+                  class="member-list-each"
+                  v-for="(item, index) in alphabetItem?.memberList"
+                  :key="index"
+                >
+                  <tm-checkbox-group v-model="item.checkArr">
+                    <selectMemberItem
+                      :memberItem="item"
+                      @clickItem="handleClickItem(item)"
+                      :manageType="state.manageType"
+                      :itemStyle="
+                        state.manageType === 'searchRecord' ? 'list' : 'card'
+                      "
+                    >
+                      <template
+                        #left
+                        v-if="state.manageType !== 'searchRecord'"
+                      >
+                        <tm-checkbox
+                          :round="10"
+                          color="#46299d"
+                          :value="item.id"
+                          :disabled="item.is_mute === 1"
+                        ></tm-checkbox>
+                      </template>
+                    </selectMemberItem>
+                  </tm-checkbox-group>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <template #bottom>
+        <template #bottom v-if="state.manageType !== 'searchRecord'">
           <customBtn
             :isBottom="true"
             :btnText="$t('ok')"
@@ -68,15 +146,24 @@ import customInput from '@/components/custom-input/custom-input.vue'
 import selectMemberItem from '../components/select-member-item.vue'
 import customBtn from '@/components/custom-btn/custom-btn.vue'
 import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
-import { computed, onMounted, reactive } from 'vue'
+import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
+import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 
 import { useDialogueStore } from '@/store'
 
+const zPaging = ref()
+useZPaging(zPaging)
+
 const dialogueStore = useDialogueStore()
 const state = reactive({
   searchText: '', //搜索内容
   manageType: '', //管理类型
+  alphabet: [], //A-Z列表
+  resultMemberList: [], //按A-Z整理后的人员列表
+  currentAlphabet: 'A', //当前A-Z位置
+  scrollDirection: '', //当前列表滚动方向
+  isAssign: false, //是否指定view
 })
 const dialogueParams = reactive({
   memberList: computed(() => {
@@ -90,10 +177,24 @@ const dialogueParams = reactive({
   receiverId: computed(() => dialogueStore.talk.receiver_id),
 })
 
+watch(
+  () => dialogueParams?.memberList,
+  (newMemberList) => {
+    assembleAlphabetMmeberList(newMemberList)
+  },
+  { deep: true },
+)
+
+//获取A-Z tag元素
+const alphabetElementRefs = ref([])
+//观察者
+let observer
+
 onLoad((options) => {
   console.log(options)
   if (options.manageType) {
     state.manageType = options.manageType
+    assembleAlphabetMmeberList(dialogueParams?.memberList)
   }
 })
 
@@ -101,11 +202,64 @@ onMounted(() => {
   dialogueParams.memberList.forEach((ele) => {
     ele.checkArr = []
   })
+  const options = {
+    root: null, // 使用浏览器窗口作为根容器
+    threshold: 1.0, // 当元素100%离开视口时触发
+  }
+  observer = new IntersectionObserver(handleIntersection, options)
+  nextTick(() => {
+    watch(
+      alphabetElementRefs,
+      (newAlphabetElementRefs) => {
+        if (Array.isArray(newAlphabetElementRefs)) {
+          newAlphabetElementRefs.forEach((el, index) => {
+            observeElement(el, index)
+          })
+        }
+      },
+      { immediate: true, deep: true },
+    )
+    if (alphabetElementRefs.value.length > 0) {
+      alphabetElementRefs.value.forEach((el, index) =>
+        observeElement(el, index),
+      )
+    }
+  })
 })
 
+// 观察者函数
+const handleIntersection = (entries) => {
+  if (state.isAssign) {
+    state.isAssign = false
+    return
+  }
+  entries.forEach((entry) => {
+    if (!entry.isIntersecting && state.scrollDirection === 'down') {
+      state.currentAlphabet = entry.target.id
+    } else if (entry.isIntersecting && state.scrollDirection === 'up') {
+      if (state?.alphabet?.length > 1) {
+        state?.alphabet.forEach((item, index) => {
+          if (item === entry.target.id && index > 0) {
+            state.currentAlphabet = state?.alphabet[index - 1]
+          }
+        })
+      } else {
+        state.currentAlphabet = entry.target.id
+      }
+    }
+  })
+}
+
+//观察元素
+const observeElement = (el, index) => {
+  if (el && observer) {
+    observer.observe(el)
+  }
+}
+
 //输入搜索文本
 const inputSearchText = (e) => {
-  console.log(e)
+  // console.log(e)
   state.searchText = e
 }
 
@@ -140,6 +294,60 @@ const confirmSilenceMember = () => {
     console.log(params)
   }
 }
+
+//组装A-Z排序的人员列表
+const assembleAlphabetMmeberList = (newMemberList) => {
+  if (state.manageType === 'searchRecord') {
+    const resultMemberList = ref([])
+    const alphabet = Array.from({ length: 26 }, (_, i) =>
+      String.fromCharCode(i + 65),
+    )
+    let tempAlphabet = []
+    alphabet.forEach((letter) => {
+      const matchedItems = newMemberList.filter((item) => item.key === letter)
+      if (matchedItems.length > 0) {
+        tempAlphabet.push(letter)
+      }
+      resultMemberList.value.push({
+        key: letter,
+        memberList: matchedItems.length ? matchedItems : [],
+      })
+    })
+    state.alphabet = tempAlphabet
+    state.resultMemberList = resultMemberList
+  } else {
+    state.resultMemberList = [
+      {
+        key: '',
+        memberList: newMemberList,
+      },
+    ]
+  }
+}
+
+//滚动到指定的view
+const scrollToView = (alphabet) => {
+  state.currentAlphabet = alphabet
+  state.isAssign = true
+  console.log()
+  zPaging.value?.scrollIntoViewById(
+    alphabet,
+    document.getElementById('topArea').clientHeight
+      ? document.getElementById('topArea').clientHeight - 1
+      : 80,
+  )
+}
+
+//监听列表滚动
+const onScroll = (e) => {
+  if (e.detail.deltaY < 0) {
+    state.scrollDirection = 'down'
+  } else if (e.detail.deltaY > 0) {
+    state.scrollDirection = 'up'
+  } else {
+    state.scrollDirection = ''
+  }
+}
 </script>
 <style scoped lang="scss">
 .outer-layer {
@@ -155,5 +363,39 @@ const confirmSilenceMember = () => {
     padding: 22rpx 16rpx;
     background-color: #fff;
   }
+  .member-list {
+    .member-list-alphabet-anchor-point {
+      position: fixed;
+      right: 32rpx;
+      top: 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .member-list-alphabet-anchor-point-each {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0 0 14rpx;
+        span {
+          width: 52rpx;
+          text-align: center;
+          line-height: 44rpx;
+          color: $theme-text;
+        }
+      }
+    }
+    .member-list-alphabet {
+      .member-list-alphabet-key {
+        background-color: #f3f3f3;
+        span {
+          line-height: 44rpx;
+          color: $theme-text;
+        }
+      }
+    }
+  }
 }
 </style>

src/pages/chatSettings/index.vue

@@ -58,7 +58,7 @@
                 @toManagePage="toManagePage"
               ></settingFormItem>
               <groupMemberList
-                :memberList="talkParams?.memberList"
+                :memberList="dialogueParams?.memberList"
                 :memberListsLimit="15"
               ></groupMemberList>
             </div>
@@ -158,18 +158,14 @@ import {
   useGroupStore,
 } from '@/store'
 import { onLoad } from '@dcloudio/uni-app'
-import {
+import { ServeTopTalkList, ServeSetNotDisturb } from '@/api/chat/index'
-  ServeQueryGroupNotice,
-  ServeTopTalk,
-  ServeDisturbTalk,
-} from '@/api/chatSettings/index'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 import customInput from '@/components/custom-input/custom-input.vue'
 const userStore = useUserStore()
 const talkStore = useTalkStore()
 const dialogueStore = useDialogueStore()
-const talkParams = reactive({
+const dialogueParams = reactive({
   uid: computed(() => userStore.uid),
   index_name: computed(() => dialogueStore.index_name),
   type: computed(() => dialogueStore.talk.talk_type),
@@ -180,11 +176,14 @@ const talkParams = reactive({
   num: computed(() => dialogueStore.members.length),
   memberList: computed(() => dialogueStore.members),
 })
-const topItems = computed(() => talkStore.topItems)
+const talkParams = reactive({
-const disturbItems = computed(() => talkStore.disturbItems)
+  topItems: computed(() => talkStore.topItems),
+  disturbItems: computed(() => talkStore.disturbItems),
+})
 const groupStore = useGroupStore()
 const groupParams = reactive({
   groupInfo: computed(() => groupStore.groupInfo),
+  groupNotice: computed(() => groupStore.groupNotice),
 })
 const state = reactive({
   chatGroupMembers: [], //群成员form-item
@@ -193,30 +192,29 @@ const state = reactive({
   chatSettings: [], //群聊设置
   chatManagement: [], //群聊管理
   groupId: '', //群id
-  groupNotice: [], //群公告
   sessionId: '', //会话id
 })
 
 onLoad(async (options) => {
-  console.log(talkParams)
+  console.log(dialogueParams)
   if (options.groupId) {
     console.log(options.groupId)
     state.groupId = Number(options.groupId)
-    await groupStore.setGroupInfo()
+    await groupStore.ServeGroupDetail()
+    await groupStore.ServeGetGroupNotices()
     updateGroupInfos()
-    getGroupNotice()
   }
   if (options.sessionId) {
     state.sessionId = Number(options.sessionId)
-    if (topItems.value.length > 0) {
+    if (talkParams.topItems.length > 0) {
-      topItems.value.forEach((item) => {
+      talkParams.topItems.forEach((item) => {
         if (item.id == options.sessionId) {
           state.sessionInfo = item
         }
       })
     }
-    if (disturbItems.value.length > 0) {
+    if (talkParams.disturbItems.length > 0) {
-      disturbItems.value.forEach((item) => {
+      talkParams.disturbItems.forEach((item) => {
         if (item.id == options.sessionId) {
           state.sessionInfo = item
         }
@@ -331,25 +329,6 @@ const groupType = computed(() => {
   return groupTypeMapping[groupParams?.groupInfo?.group_type]?.result_type || ''
 })
 
-//群公告查询
-const getGroupNotice = () => {
-  let params = {
-    group_id: state.groupId,
-  }
-  const resp = ServeQueryGroupNotice(params)
-  console.log(resp)
-  resp.then(({ code, data }) => {
-    console.log(data)
-    if (code == 200) {
-      state.groupNotice = data.items
-      updateGroupInfos()
-    } else {
-    }
-  })
-
-  resp.catch(() => {})
-}
-
 //更新群信息
 const updateGroupInfos = () => {
   state.chatGroupMembers = [
@@ -373,7 +352,7 @@ const updateGroupInfos = () => {
       label: t('chat.settings.groupNotice'),
       hasPointer: true,
       value: '',
-      subValue: state.groupNotice[0],
+      subValue: groupParams.groupNotice[0],
       customInfo: '',
     },
     {
@@ -439,16 +418,23 @@ const toManagePage = (label) => {
 //点击跳转到按条件搜索页
 const toSearchByConditionPage = (flag) => {
   let condition = ''
-  if (flag == 1) {
+  if (flag == 0) {
-    condition = 'date'
+    uni.navigateTo({
+      url:
+        '/pages/chatSettings/groupManage/selectMembers?manageType=searchRecord',
+    })
+  } else {
+    if (flag == 1) {
+      condition = 'date'
+    }
+    uni.navigateTo({
+      url:
+        '/pages/search/searchByCondition/index?condition=' +
+        condition +
+        '&receiver_id=' +
+        state.groupId,
+    })
   }
-  uni.navigateTo({
-    url:
-      '/pages/search/searchByCondition/index?condition=' +
-      condition +
-      '&receiver_id=' +
-      state.groupId,
-  })
 }
 
 //切换开关选择
@@ -460,14 +446,14 @@ const changeSwitch = (switchStatus, label) => {
       list_id: state.sessionId, //聊天会话的id
       type: switchStatus ? 1 : 2,
     }
-    resp = ServeTopTalk(params)
+    resp = ServeTopTalkList(params)
   } else if (label == t('chat.settings.messageNoDisturb')) {
     params = {
-      talk_type: talkParams.type, //1私聊；2群聊
+      talk_type: dialogueParams.type, //1私聊；2群聊
-      receiver_id: talkParams.receiver_id, //接收人id或群id
+      receiver_id: dialogueParams.receiver_id, //接收人id或群id
       is_disturb: switchStatus ? 1 : 0, //是否开启免打扰，0不免打扰，1免打扰
     }
-    resp = ServeDisturbTalk(params)
+    resp = ServeSetNotDisturb(params)
   }
   console.log(resp)
   resp.then(({ code, data }) => {
@@ -475,12 +461,12 @@ const changeSwitch = (switchStatus, label) => {
     if (code == 200) {
       if (label == t('chat.settings.topSession')) {
         talkStore.updateItem({
-          index_name: talkParams.index_name,
+          index_name: dialogueParams.index_name,
           is_top: switchStatus ? 1 : 2,
         })
       } else if (label == t('chat.settings.messageNoDisturb')) {
         talkStore.updateItem({
-          index_name: talkParams.index_name,
+          index_name: dialogueParams.index_name,
           is_disturb: switchStatus ? 1 : 0,
         })
       }

src/store/modules/dialogue.js

@@ -119,6 +119,7 @@ export const useDialogueStore = defineStore('dialogue', {
         remark: o.remark,
         online: false,
         value: o.nickname,
+        key: o.key
       }))
     },
 

src/store/modules/group.js

@@ -1,5 +1,9 @@
 import { defineStore } from 'pinia'
-import { ServeGroupDetail, ServeGetGroupMembers } from '@/api/group/index'
+import {
+  ServeGroupDetail,
+  ServeGetGroupMembers,
+  ServeGetGroupNotices,
+} from '@/api/group/index'
 import { useDialogueStore } from '@/store'
 
 export const useGroupStore = defineStore('group', {
@@ -7,15 +11,18 @@ export const useGroupStore = defineStore('group', {
     return {
       groupInfo: '', //群聊信息
       memberList: [], //群成员列表
+      groupNotice: [], //群公告
     }
   },
   getters: {
     //获取群聊信息
     getGroupInfo: (state) => state.groupInfo,
+    //获取群公告
+    getGroupNotice: (state) => state.groupNotice,
   },
   actions: {
     //获取群聊信息
-    async setGroupInfo() {
+    async ServeGroupDetail() {
       const dialogueStore = useDialogueStore()
       let { code, data } = await ServeGroupDetail({
         group_id: dialogueStore.talk.receiver_id,
@@ -25,5 +32,16 @@ export const useGroupStore = defineStore('group', {
         this.groupInfo = data
       }
     },
+    //群公告查询
+    async ServeGetGroupNotices() {
+      const dialogueStore = useDialogueStore()
+      let { code, data } = await ServeGetGroupNotices({
+        group_id: dialogueStore.talk.receiver_id,
+      })
+      if (code == 200) {
+        this.groupNotice = data.items
+      } else {
+      }
+    },
   },
 })

src/uni_modules/tmui/locale/zh-Hans.json

@@ -115,5 +115,6 @@
   "chat.manage.addSilenceMember": "添加禁言成员",
   "chatSettings.btn.undoSilence": "解禁",
   "silence.tag.hasDone": "已禁言",
-  "chat.manage.addAdmin": "添加管理员"
+  "chat.manage.addAdmin": "添加管理员",
+  "search.condition.member": "按群成员查找"
 }