聊天窗口的”+“可以邀请进群

src/components/card/GroupCard.vue

@@ -36,7 +36,6 @@ const userCardData = userCardStore()
 const groupCardData = groupCardStore()
 const isShowSelectDialog = ref(false)
 const isShowSingleSelectDialog = ref(false)
-const method = ref('') //有加人，减人两中method
 const isShowEditAvatar = ref(false)
 const myAccount = computed(() => userData.user.account)
 const newGroupName = ref('')
@@ -64,6 +63,9 @@ watch(
       isHistoryBrowse.value = groupInfo.value.historyBrowse
       isTop.value = sessionInfo.value.top
       isDnd.value = sessionInfo.value.dnd
+    } else {
+      groupCardData.setShowModel('')
+      groupCardData.setChangeMemberModel('')
     }
   }
 )
@@ -87,6 +89,22 @@ watch(
   }
 )
 
+watch(
+  () => groupCardData.changeMemberModel,
+  (newValue) => {
+    switch (newValue) {
+      case 'addMember':
+        isShowSelectDialog.value = true
+        break
+      case 'delMember':
+        isShowSelectDialog.value = true
+        break
+      default:
+        break
+    }
+  }
+)
+
 const goToSessionTab = () => {
   router.push({
     path: '/message',
@@ -197,7 +215,7 @@ const onShowUserCard = (account) => {
 }
 
 const selectDialogOptions = computed(() => {
-  if (method.value === 'add') {
+  if (changeMemberModel.value === 'addMember') {
     const data = {}
     Object.values(messageData.sessionList).forEach((item) => {
       if (item.sessionType === MsgType.CHAT) {
@@ -205,7 +223,7 @@ const selectDialogOptions = computed(() => {
       }
     })
     return data
-  } else if (method.value === 'del') {
+  } else if (changeMemberModel.value === 'delMember') {
     return showMembers.value
   } else {
     return {}
@@ -213,9 +231,9 @@ const selectDialogOptions = computed(() => {
 })
 
 const selectDialogDisabledOptions = computed(() => {
-  if (method.value === 'add') {
+  if (changeMemberModel.value === 'addMember') {
     return Object.keys(showMembers.value)
-  } else if (method.value === 'del') {
+  } else if (changeMemberModel.value === 'delMember') {
     const data = []
     Object.values(showMembers.value).forEach((item) => {
       if (item.account === myAccount.value) data.push(item.account) // 删除时要排除自己
@@ -229,21 +247,21 @@ const selectDialogDisabledOptions = computed(() => {
 })
 
 const searchModel = computed(() => {
-  return method.value === 'add' ? 'server' : 'default'
+  return changeMemberModel.value === 'addMember' ? 'server' : 'default'
 })
 
 const onAddmember = () => {
   isShowSelectDialog.value = true
-  method.value = 'add'
+  groupCardData.setChangeMemberModel('addMember')
 }
 
 const delAddmember = () => {
   isShowSelectDialog.value = true
-  method.value = 'del'
+  groupCardData.setChangeMemberModel('delMember')
 }
 
 const selectDialogTitle = computed(() => {
-  return method.value === 'add' ? '添加成员' : '移除成员'
+  return changeMemberModel.value === 'addMember' ? '添加成员' : '移除成员'
 })
 
 const doAdd = (userArray) => {
@@ -294,9 +312,9 @@ const doDelete = (userArray) => {
 
 const onConfirmSelect = (selected) => {
   isShowSelectDialog.value = false // 这里要先关闭，不然移除的时候会报错
-  if (method.value === 'add') {
+  if (changeMemberModel.value === 'addMember') {
     doAdd(selected)
-  } else if (method.value === 'del') {
+  } else if (changeMemberModel.value === 'delMember') {
     doDelete(selected)
   }
 }
@@ -305,6 +323,10 @@ const showModel = computed(() => {
   return groupCardData.showModel
 })
 
+const changeMemberModel = computed(() => {
+  return groupCardData.changeMemberModel
+})
+
 const onShowMembers = () => {
   groupCardData.setShowModel('members')
 }

src/components/common/SelectDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { Search, Close } from '@element-plus/icons-vue'
 import ContactItem from '@/components/item/ContactItem.vue'
 import HashNoData from '@/components/common/HasNoData.vue'
@@ -18,7 +18,14 @@ const props = defineProps([
 ])
 const emit = defineEmits(['update:modelValue', 'showUserCard', 'confirm'])
 
-const selected = ref(props.defaultSelected || [])
+const selected = ref([])
+watch(
+  () => props.defaultSelected,
+  (newValue) => {
+    selected.value = newValue
+  }
+)
+
 const searchKey = ref('')
 const optionsFromServer = ref({})
 

src/stores/groupCard.js

@@ -10,6 +10,8 @@ export const groupCardStore = defineStore('anyim-groupCard', () => {
 
   const showModel = ref('')
 
+  const changeMemberModel = ref('')
+
   const setIsShow = (flag) => {
     isShow.value = flag
   }
@@ -22,13 +24,19 @@ export const groupCardStore = defineStore('anyim-groupCard', () => {
     showModel.value = model
   }
 
+  const setChangeMemberModel = (model) => {
+    changeMemberModel.value = model
+  }
+
   return {
     isShow,
     groupId,
     showModel,
+    changeMemberModel,
 
     setIsShow,
     setGroupId,
-    setShowModel
+    setShowModel,
+    setChangeMemberModel
   }
 })

src/views/message/MessageLayout.vue

@@ -744,10 +744,34 @@ const onVideoCall = () => {
   ElMessage.warning('功能开发中')
 }
 
-const onInviteIntoGroup = () => {
-  ElMessage.warning('功能开发中')
+const onInviteToGroup = () => {
+  if (selectedSession.value.sessionType === MsgType.GROUP_CHAT) {
+    const groupId = selectedSession.value.remoteId
+    const joinGroupApproval = groupData.groupInfoList[groupId].joinGroupApproval
+    if (joinGroupApproval || iAmManager.value) {
+      onShowGroupCard({ groupId: selectedSession.value.remoteId })
+      setTimeout(() => {
+        groupCardData.setChangeMemberModel('addMember')
+      }, 300)
+    } else {
+      ElMessage.warning('没有权限，请联系群组管理员')
+    }
+  } else if (selectedSession.value.sessionType === MsgType.CHAT) {
+    defaultSelectedOptionIds.value = [selectedSession.value.remoteId]
+    isShowSelectDialog.value = true
+  }
 }
 
+const iAmManager = computed(() => {
+  if (selectedSession.value.sessionType === MsgType.GROUP_CHAT) {
+    const groupId = selectedSession.value.remoteId
+    const members = groupData.groupMembersList[groupId]
+    return members[myAccount.value].role > 0
+  } else {
+    return false
+  }
+})
+
 const onMoreSetting = () => {
   if (selectedSession.value.sessionType === MsgType.CHAT) {
     onShowUserCard({
@@ -764,6 +788,7 @@ const addOprMenuRef = ref()
 const onSelectOprMenu = (label) => {
   switch (label) {
     case 'createGroup':
+      defaultSelectedOptionIds.value = []
       isShowSelectDialog.value = true
       break
     case 'createVoiceMeeting':
@@ -794,6 +819,11 @@ const selectDialogOptions = computed(() => {
   return data
 })
 
+/**
+ * 用于显示创建群组弹窗中的默认选中的名单id（account）
+ */
+const defaultSelectedOptionIds = ref([])
+
 const onConfirmSelect = async (selected) => {
   if (selected.length < 2) {
     ElMessage.warning('请至少选择两位群成员')
@@ -908,11 +938,10 @@ const onConfirmSelect = async (selected) => {
               <VideoCamera />
             </el-icon>
             <el-icon
-              v-if="selectedSession.sessionType === MsgType.GROUP_CHAT"
               class="action-button"
               size="20"
-              title="邀请进群"
-              @click="onInviteIntoGroup"
+              :title="selectedSession.sessionType === MsgType.GROUP_CHAT ? '邀请进群' : '创建群组'"
+              @click="onInviteToGroup"
             >
               <CirclePlus />
             </el-icon>
@@ -1051,6 +1080,7 @@ const onConfirmSelect = async (selected) => {
   <SelectDialog
     v-model="isShowSelectDialog"
     :options="selectDialogOptions"
+    :defaultSelected="defaultSelectedOptionIds"
     :searchModel="'server'"
     @showUserCard="onShowUserCard"
     @confirm="onConfirmSelect"