新增艾特功能的选择界面

src/pages/chatSettings/components/selectMemberByAlphabet.vue

@@ -24,7 +24,12 @@
             padding: props?.manageType === 'searchRecord' ? '20rpx 0 0' : '',
           }"
         >
-          <div class="member-list-alphabet-anchor-point">
+          <div
+            class="member-list-alphabet-anchor-point"
+            :style="{
+              top: props?.manageType === 'mention' ? '90rpx' : '',
+            }"
+          >
             <div
               class="member-list-alphabet-anchor-point-each"
               v-for="(alphabetItem, alphabetIndex) in state?.alphabet"
@@ -55,11 +60,12 @@
               :style="{
                 padding:
                   props?.manageType === 'searchRecord' ||
-                  props?.manageType === 'removeMembers'
+                  props?.manageType === 'removeMembers' ||
+                  props?.manageType === 'mention'
                     ? '10rpx 30rpx'
                     : '',
               }"
-              v-if="alphabetItem?.memberList?.length > 0"
+              v-if="alphabetItem?.memberList?.length > 0 && alphabetItem?.key !== '0'"
               :id="alphabetItem.key"
               :ref="
                 (el) => {
@@ -85,7 +91,8 @@
                     :manageType="props?.manageType"
                     :itemStyle="
                       props?.manageType === 'searchRecord' ||
-                      props?.manageType === 'removeMembers'
+                      props?.manageType === 'removeMembers' ||
+                      props?.manageType === 'mention'
                         ? 'list'
                         : 'card'
                     "
@@ -108,7 +115,7 @@
                           !(
                             props?.manageType === 'removeMembers' &&
                             item?.is_mine
-                          )
+                          ) && props?.isMulSelect
                         "
                         :round="10"
                         :color="
@@ -166,7 +173,7 @@ import {
 } from '@/api/group/index.js'
 import { useDialogueStore, useGroupStore, useGroupTypeStore } from '@/store'
 
-const emits = defineEmits(['updateSelectedMembersNum'])
+const emits = defineEmits(['updateSelectedMembersNum', 'getSelectResult'])
 
 const zPaging = ref()
 useZPaging(zPaging)
@@ -210,6 +217,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isMulSelect: {
+    //是否开启多选
+    type: Boolean,
+    default: true,
+  },
 })
 
 const state = reactive({
@@ -237,6 +249,37 @@ watch(
   { deep: true },
 )
 
+watch(
+  () => props?.isMulSelect,
+  (newIsMulSelect) => {
+    if (props?.manageType === 'mention') {
+      if (!newIsMulSelect) {
+        state.resultMemberList.unshift({
+          key: '0',
+          memberList: [
+            {
+              avatar: '/src/static/image/chatList/groupAllMember.png',
+              erp_user_id: 0,
+              gender: 0,
+              is_mute: 0,
+              key: '0',
+              leader: 0,
+              nickname: '所有人',
+              remark: '',
+              user_id: 0,
+            },
+          ],
+        })
+      } else {
+        if (state.resultMemberList[0].key === '0') {
+          state.resultMemberList.splice(0, 1)
+        }
+      }
+    }
+  },
+  { deep: true, immediate: true },
+)
+
 //获取A-Z tag元素
 const alphabetElementRefs = ref([])
 //观察者
@@ -321,7 +364,8 @@ const handleClickItem = (item) => {
     (props?.manageType === 'silence' && item.is_mute === 1) ||
     (props?.manageType === 'admin' &&
       (item.leader === 1 || item.leader === 2)) ||
-    (props?.manageType === 'removeMembers' && item.is_mine)
+    (props?.manageType === 'removeMembers' && item.is_mine) ||
+    (props?.manageType === 'mention' && !props?.isMulSelect)
   ) {
     return
   }
@@ -350,7 +394,8 @@ const handleClickItem = (item) => {
 const assembleAlphabetMemberList = async (newMemberList) => {
   if (
     props?.manageType === 'searchRecord' ||
-    props?.manageType === 'removeMembers'
+    props?.manageType === 'removeMembers' ||
+    props?.manageType === 'mention'
   ) {
     const resultMemberList = ref([])
     const alphabet = Array.from({ length: 26 }, (_, i) =>
@@ -368,6 +413,24 @@ const assembleAlphabetMemberList = async (newMemberList) => {
       })
     })
     state.alphabet = tempAlphabet
+    if (props?.manageType === 'mention' && !props?.isMulSelect) {
+      resultMemberList.value.unshift({
+        key: '0',
+        memberList: [
+          {
+            avatar: '/src/static/image/chatList/groupAllMember.png',
+            erp_user_id: 0,
+            gender: 0,
+            is_mute: 0,
+            key: '0',
+            leader: 0,
+            nickname: '所有人',
+            remark: '',
+            user_id: 0,
+          },
+        ],
+      })
+    }
     state.resultMemberList = resultMemberList
   } else {
     if (
@@ -468,8 +531,10 @@ const scrollToView = (alphabet) => {
   console.log()
   zPaging.value?.scrollIntoViewById(
     alphabet,
-    document.getElementById('topArea').clientHeight
+    document.getElementById('topArea')?.clientHeight
       ? document.getElementById('topArea').clientHeight - 1
+      : props?.manageType === 'mention'
+      ? 140
       : 80,
   )
 }
@@ -499,6 +564,7 @@ const confirmSelectMembers = () => {
   let selectedUserIds = ''
   let itemList = dialogueParams.memberList
   let positionInfos = []
+  let selectUserInfos = []
   if (
     props?.manageType === 'admin' &&
     (groupParams.groupInfo.group_type == 2 ||
@@ -514,6 +580,7 @@ const confirmSelectMembers = () => {
       } else {
         selectedUserIds += ',' + ele.checkArr[0]
       }
+      selectUserInfos.push(ele)
     }
     if (
       ele.checkArr?.length > 0 ||
@@ -613,6 +680,8 @@ const confirmSelectMembers = () => {
         }
       })
       resp.catch(() => {})
+    } else if (props?.manageType === 'mention') {
+      emits('getSelectResult', selectUserInfos)
     }
   }
 }