415 lines
11 KiB
Vue
415 lines
11 KiB
Vue
<template>
|
||
<div class="create-group-chat-page">
|
||
<zPaging ref="zPaging" :show-scrollbar="false">
|
||
<template #top>
|
||
<customNavbar :title="$t('pageTitle.create.group')"></customNavbar>
|
||
</template>
|
||
<div class="create-group-chat flex flex-col">
|
||
<div class="group-avatar flex items-center justify-center">
|
||
<div class="avatar-placeholder" v-if="groupActiveIndex === -1"></div>
|
||
<div v-else>
|
||
<avatarModule
|
||
:mode="2"
|
||
:avatar="avatarImg"
|
||
:groupType="groupType"
|
||
:customStyle="{ width: '192rpx', height: '192rpx' }"
|
||
></avatarModule>
|
||
</div>
|
||
</div>
|
||
<div class="input-group flex items-center justify-between">
|
||
<div class="input-item">
|
||
群名称
|
||
</div>
|
||
<div class="input-box">
|
||
<tm-input
|
||
v-model="groupName"
|
||
:followTheme="false"
|
||
fontColor="#747474"
|
||
placeholderStyle="color: #B4B4B4"
|
||
focusColor="#FFF"
|
||
:fontSize="28"
|
||
:maxlength="20"
|
||
:height="40"
|
||
:transprent="true"
|
||
placeholder="请输入群名称（1~20个字）"
|
||
:padding="[0, 0]"
|
||
align="right"
|
||
></tm-input>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<div class="input-item">
|
||
群类型
|
||
</div>
|
||
<div @click="chooseGroupType" class="left-box">
|
||
<div class="text-[#B4B4B4] text-[28rpx] font-bold">
|
||
<span v-if="groupActiveIndex === -1">请选择群类型</span>
|
||
<span v-else-if="groupActiveIndex === 0">普通群</span>
|
||
<span v-else-if="groupActiveIndex === 1">部门群</span>
|
||
<span v-else-if="groupActiveIndex === 2">项目群</span>
|
||
</div>
|
||
<div class="ml-[32rpx]">
|
||
<tm-icon
|
||
:font-size="22"
|
||
color="#747474"
|
||
name="tmicon-angle-right"
|
||
></tm-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="depCheckedKeys.length && groupActiveIndex === 1"
|
||
class="mt-[32rpx]"
|
||
>
|
||
<div
|
||
v-for="(item, index) in depCheckedKeys"
|
||
class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
|
||
:class="[
|
||
index !== 0 ? 'mt-[10rpx]' : '',
|
||
depsNoExpanded && index > 4 ? 'hidden' : '',
|
||
]"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
<div
|
||
class="text-[#46299D] text-[28rpx] mt-[20rpx] font-bold flex justify-center"
|
||
>
|
||
<div
|
||
v-if="depCheckedKeys.length > 5"
|
||
@click="depsNoExpanded = !depsNoExpanded"
|
||
class="w-[100rpx]"
|
||
>
|
||
{{ depsNoExpanded ? '展开' : '收起' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-if="groupActiveIndex === 0 || groupActiveIndex === 2"
|
||
class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<div class="input-item">
|
||
群成员
|
||
</div>
|
||
<div @click="chooseMembers" class="left-box">
|
||
<div class="ml-[32rpx] flex items-center">
|
||
<div
|
||
class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]"
|
||
>
|
||
全部({{ allChooseMembers?.length || 0 }})
|
||
</div>
|
||
<tm-icon
|
||
:font-size="22"
|
||
color="#747474"
|
||
name="tmicon-angle-right"
|
||
></tm-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<groupMemberList
|
||
:groupType="3"
|
||
:is_manager="true"
|
||
:memberList="allChooseMembers"
|
||
:memberListsLimit="15"
|
||
:hideAddRemoveBtns="true"
|
||
></groupMemberList>
|
||
</div>
|
||
|
||
<div
|
||
v-if="groupActiveIndex === 1"
|
||
class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<div class="input-item">
|
||
群管理员
|
||
</div>
|
||
<div @click="chooseGroupAdmin" class="left-box">
|
||
<div class="ml-[32rpx] flex items-center">
|
||
<div
|
||
v-if="!groupAdmins.length"
|
||
class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]"
|
||
>
|
||
请选择群管理员
|
||
</div>
|
||
<tm-icon
|
||
:font-size="22"
|
||
color="#747474"
|
||
name="tmicon-angle-right"
|
||
></tm-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="groupAdmins.length" class="mt-[32rpx]">
|
||
<div
|
||
v-for="(item, index) in groupAdmins"
|
||
class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
|
||
:class="[
|
||
index !== 0 ? 'mt-[10rpx]' : '',
|
||
depsNoExpanded && index > 4 ? 'hidden' : '',
|
||
]"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
<div
|
||
class="text-[#46299D] text-[28rpx] mt-[20rpx] font-bold flex justify-center"
|
||
>
|
||
<div
|
||
v-if="groupAdmins.length > 5"
|
||
@click="depsNoExpanded = !depsNoExpanded"
|
||
class="w-[100rpx]"
|
||
>
|
||
{{ depsNoExpanded ? '展开' : '收起' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #bottom>
|
||
<customBtn
|
||
:isBottom="true"
|
||
:btnText="$t('pageTitle.create.group')"
|
||
@click="handleConfirm"
|
||
:disabled="confirmBtnStatus"
|
||
></customBtn>
|
||
</template>
|
||
</zPaging>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
||
import groupMemberList from '../chatSettings/components/groupMembersList.vue'
|
||
import avatarModule from '@/components/avatar-module/index.vue'
|
||
|
||
import { ref, watch, computed, onMounted } from 'vue'
|
||
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
|
||
import { useChatList } from '@/store/chatList/index.js'
|
||
import { useAuth } from '@/store/auth'
|
||
import { useTalkStore, useUserStore, useGroupStore } from '@/store'
|
||
import addCircle from '@/static/image/chatList/addCircle.png'
|
||
import cahtPopover from '@/static/image/chatList/cahtPopover.png'
|
||
import { ServeCreateGroup } from '@/api/group/index'
|
||
import { useGroupTypeStore } from '@/store/groupType'
|
||
import { handleSetWebviewStyle } from '@/utils/common'
|
||
|
||
const {
|
||
groupName,
|
||
groupActiveIndex,
|
||
depCheckedKeys,
|
||
groupAdmins,
|
||
createDepGroup,
|
||
resetGroupInfo,
|
||
allChooseMembers,
|
||
} = useGroupTypeStore()
|
||
const talkStore = useTalkStore()
|
||
const userStore = useUserStore()
|
||
const groupStore = useGroupStore()
|
||
const { userInfo } = useAuth()
|
||
|
||
const groupChatType = ref('')
|
||
const depsNoExpanded = ref(true)
|
||
|
||
|
||
onLoad(()=> {
|
||
groupStore.$reset()
|
||
})
|
||
onUnload(()=> {
|
||
resetGroupInfo();
|
||
})
|
||
onMounted(() => {
|
||
handleSetWebviewStyle()
|
||
})
|
||
|
||
//群类型
|
||
const groupType = computed(() => {
|
||
let group_type = ''
|
||
switch (groupActiveIndex.value) {
|
||
case 0:
|
||
group_type = 1
|
||
break
|
||
case 1:
|
||
group_type = 2
|
||
break
|
||
case 2:
|
||
group_type = 3
|
||
break
|
||
default:
|
||
group_type = ''
|
||
}
|
||
return group_type
|
||
})
|
||
|
||
//点击跳转到选择群类型页面
|
||
const chooseGroupType = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/chooseGroupType/index',
|
||
})
|
||
}
|
||
|
||
const chooseGroupAdmin = () => {
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages/chatSettings/groupManage/selectMembers?manageType=admin&isCreateDepGroup=1',
|
||
})
|
||
}
|
||
|
||
const chooseMembers = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/chooseByDeps/index?chooseMode=2',
|
||
})
|
||
}
|
||
|
||
//点击发起群聊
|
||
const handleConfirm = async () => {
|
||
// console.log(allChooseMembers.value)
|
||
let erp_ids = ''
|
||
if (allChooseMembers?.value?.length > 0) {
|
||
allChooseMembers?.value?.forEach((ele) => {
|
||
if (!erp_ids) {
|
||
erp_ids = String(ele.ID)
|
||
} else {
|
||
erp_ids += ',' + ele.ID
|
||
}
|
||
})
|
||
}
|
||
if (groupActiveIndex.value === 0) {
|
||
//普通群
|
||
let params = {
|
||
avatar: '',
|
||
name: groupName.value,
|
||
erp_ids: erp_ids,
|
||
type: 1,
|
||
profile: '',
|
||
}
|
||
console.log(params)
|
||
const res = await ServeCreateGroup(params)
|
||
if (res.code === 200) {
|
||
resetGroupInfo()
|
||
uni.navigateBack()
|
||
}
|
||
} else if (groupActiveIndex.value === 1) {
|
||
//部门群
|
||
const res = await createDepGroup()
|
||
if (res.code === 200) {
|
||
resetGroupInfo()
|
||
uni.navigateBack()
|
||
}
|
||
} else if (groupActiveIndex.value === 2) {
|
||
//项目群
|
||
let params = {
|
||
avatar: '',
|
||
name: groupName.value,
|
||
erp_ids: erp_ids,
|
||
type: 3,
|
||
profile: '',
|
||
}
|
||
console.log(params)
|
||
const res = await ServeCreateGroup(params)
|
||
if (res.code === 200) {
|
||
resetGroupInfo()
|
||
uni.navigateBack()
|
||
}
|
||
} else {
|
||
}
|
||
}
|
||
//发起群聊按钮可点击状态
|
||
const confirmBtnStatus = computed(() => {
|
||
let disabledT = false
|
||
if (
|
||
groupName.value === '' ||
|
||
(groupActiveIndex.value && groupActiveIndex.value === -1) ||
|
||
(!groupActiveIndex.value && groupActiveIndex.value !== 0)
|
||
) {
|
||
return true
|
||
}
|
||
// 选择的人员里面包含发起人，需要去重
|
||
let temp = []
|
||
allChooseMembers?.value?.forEach((ele) => {
|
||
if (ele.ID !== userInfo.value.ID) {
|
||
temp.push(ele)
|
||
}
|
||
})
|
||
switch (groupActiveIndex.value) {
|
||
case 0:
|
||
if(temp?.length < 2) {
|
||
disabledT = true
|
||
}
|
||
break
|
||
case 1:
|
||
if (!depCheckedKeys.value.length) {
|
||
disabledT = true
|
||
}
|
||
if (!groupAdmins.value.length) {
|
||
disabledT = true
|
||
}
|
||
break
|
||
case 2:
|
||
if(temp?.length < 2) {
|
||
disabledT = true
|
||
}
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
return disabledT
|
||
})
|
||
|
||
onShow(() => {
|
||
depsNoExpanded.value = true
|
||
})
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep .zp-paging-container-content {
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.create-group-chat {
|
||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||
background-size: cover;
|
||
background-position: center bottom;
|
||
width: 100%;
|
||
padding: 0 32rpx 20rpx;
|
||
.group-avatar {
|
||
padding: 60rpx 0;
|
||
.avatar-placeholder {
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
background-color: #e0e0e0;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: #7c7c7c;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.input-group {
|
||
background-color: #fff;
|
||
padding: 38rpx 40rpx 32rpx 32rpx;
|
||
}
|
||
.input-item {
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
.input-box {
|
||
margin-left: 84rpx;
|
||
line-height: 40rpx;
|
||
width: 404rpx;
|
||
font-weight: bold;
|
||
}
|
||
.left-box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|