scout666/chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构选择群类型页面部分样式；将选择部门和选择群成员合并到一起；去除选择管理员页面，复用设置管理员页面；调整按部门选择人员样式和逻辑；调整创建群聊部分规则

Browse Source
This commit is contained in:
wangyifeng 2025-02-07 17:00:57 +08:00
parent dafe65bb72
commit df07c953bf
10 changed files with 296 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages.json
View File

@ -38,22 +38,6 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/chooseDeps/index",
"type": "page",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/chooseMembers/index",
"type": "page",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/chooseGroupAdmin/index",
"type": "page",

12
src/pages/chatSettings/components/groupMembersList.vue
View File

@ -46,7 +46,10 @@
<div
class="group-member-list-each"
@click="groupAddMembers"
v-if="props?.groupType == 1 || props?.groupType == 3"
v-if="
(props?.groupType == 1 || props?.groupType == 3) &&
!props?.hideAddRemoveBtns
"
>
<div class="group-member-each">
<div class="group-member-avatar" :style="{ background: 'unset' }">
@ -61,7 +64,9 @@
class="group-member-list-each"
@click="groupRemoveMembers"
v-if="
props?.is_manager && (props?.groupType == 1 || props?.groupType == 3)
props?.is_manager &&
(props?.groupType == 1 || props?.groupType == 3) &&
!props?.hideAddRemoveBtns
"
>
<div class="group-member-each">
@ -82,6 +87,7 @@ const props = defineProps({
memberListsLimit: Number, //人员列表数量限制
is_manager: Boolean, //是否管理员
groupType: Number, //群类型
hideAddRemoveBtns: Boolean, //是否隐藏添加移除按钮
})
//点击跳转到用户详情页面
@ -97,7 +103,7 @@ const toUserDetailPage = (userItem) => {
//点击群聊拉人
const groupAddMembers = () => {
uni.navigateTo({
url: '/pages/chooseMembers/index',
url: '/pages/chooseByDeps/index?chooseMode=2',
})
}

2
src/pages/chatSettings/groupManage/manageGroupAdmin.vue
View File

@ -176,7 +176,7 @@ const getGroupAdminList = () => {
}
}
//点击跳转到添加禁言成员页面
//点击跳转到添加管理员页面
const toSelectMembersPage = () => {
uni.navigateTo({
url: '/pages/chatSettings/groupManage/selectMembers?manageType=admin',

84
src/pages/chatSettings/groupManage/selectMembers.vue
View File

@ -234,6 +234,7 @@ const state = reactive({
scrollDirection: '', //当前列表滚动方向
isAssign: false, //是否指定view
selectedMembersNum: 0, //当前选中数量
isCreateDepGroup: 0, //是否是创建部门群
})
watch(
@ -263,6 +264,10 @@ onLoad((options) => {
state.manageType = options.manageType
assembleAlphabetMemberList(dialogueParams?.memberList)
}
if (options.isCreateDepGroup) {
state.isCreateDepGroup = Number(options.isCreateDepGroup)
assembleAlphabetMemberList()
}
})
onMounted(() => {
@ -516,41 +521,16 @@ const assembleAlphabetMemberList = async (newMemberList) => {
departmentIdsArr.push(item.dept_id)
})
}
await groupTypeStore.getPositionByDepartment({
IDs: departmentIdsArr,
})
let departmentAllPositions = []
if (groupTypeParams?.departmentAllPositions?.value?.length > 0) {
groupTypeParams?.departmentAllPositions?.value?.forEach((item) => {
item?.AllPositions?.forEach((positionItem) => {
departmentAllPositions.push({
nickname: item.name + '-' + positionItem.name,
id: item.ID + '-' + positionItem.ID,
checkArr: [],
positionInfo: {
position_id: positionItem.ID,
position_name: positionItem.name,
},
})
})
getPosiByDep(departmentIdsArr)
} else if (state.isCreateDepGroup === 1) {
console.log(groupTypeStore.depCheckedKeys)
let departmentIdsArr = []
if (groupTypeStore?.depCheckedKeys?.length > 0) {
groupTypeStore.depCheckedKeys.forEach((item) => {
departmentIdsArr.push(item.ID)
})
}
if (groupParams?.groupInfo?.groupAdminList?.length > 0) {
groupParams?.groupInfo?.groupAdminList.forEach((item) => {
departmentAllPositions.forEach((idsItem) => {
if (item.dept_id + '-' + item.position_id == idsItem.id) {
idsItem.leader = 1
}
})
})
}
// console.log(departmentAllPositions)
state.resultMemberList = [
{
key: '',
memberList: departmentAllPositions,
},
]
getPosiByDep(departmentIdsArr)
} else {
state.resultMemberList = [
{
@ -562,6 +542,44 @@ const assembleAlphabetMemberList = async (newMemberList) => {
}
}
const getPosiByDep = async (departmentIdsArr) => {
await groupTypeStore.getPositionByDepartment({
IDs: departmentIdsArr,
})
let departmentAllPositions = []
if (groupTypeParams?.departmentAllPositions?.value?.length > 0) {
groupTypeParams?.departmentAllPositions?.value?.forEach((item) => {
item?.AllPositions?.forEach((positionItem) => {
departmentAllPositions.push({
nickname: item.name + '-' + positionItem.name,
id: item.ID + '-' + positionItem.ID,
checkArr: [],
positionInfo: {
position_id: positionItem.ID,
position_name: positionItem.name,
},
})
})
})
}
if (groupParams?.groupInfo?.groupAdminList?.length > 0) {
groupParams?.groupInfo?.groupAdminList.forEach((item) => {
departmentAllPositions.forEach((idsItem) => {
if (item.dept_id + '-' + item.position_id == idsItem.id) {
idsItem.leader = 1
}
})
})
}
// console.log(departmentAllPositions)
state.resultMemberList = [
{
key: '',
memberList: departmentAllPositions,
},
]
}
//滚动到指定的view
const scrollToView = (alphabet) => {
state.currentAlphabet = alphabet

15
src/pages/chatSettings/index.vue
View File

@ -185,7 +185,11 @@ import {
useGroupTypeStore,
} from '@/store'
import { onLoad } from '@dcloudio/uni-app'
import { ServeInviteGroup, ServeDismissGroup } from '@/api/group/index'
import {
ServeInviteGroup,
ServeDismissGroup,
ServeSecedeGroup,
} from '@/api/group/index'
import { ServeTopTalkList, ServeSetNotDisturb } from '@/api/chat/index'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
@ -566,6 +570,15 @@ const showConfirmPrompt = (flag) => {
delta: 2,
})
}
} else if (flag === 3) {
ServeSecedeGroup({
group_id: dialogueParams.receiver_id,
}).then(({ code, message }) => {
if (code == 200) {
// dialogueStore.apiClearRecord()
} else {
}
})
}
},
onCancel: () => {},

77
src/pages/chooseByDeps/index.vue
View File

@ -91,7 +91,11 @@
</div>
</div>
<div
v-if="item.sons?.length"
v-if="
(item.sons?.length && state.chooseMode === 1) ||
((state.chooseMode === 2 || state.chooseMode === 3) &&
getDepTotalMembers(item) > 0)
"
class="flex items-center mr-[32rpx]"
>
<div class="vDivider mr-[32rpx]"></div>
@ -178,7 +182,10 @@
{{ item.jobNum }}
</div>
</div>
<tm-popover position="tc" class="max-w-full">
<tm-popover
position="tc"
style="max-width: calc(100% - 64rpx - 112rpx - 20rpx);"
>
<div
class="max-w-full ml-[6rpx] flex max-h-[68rpx] flex-wrap line-clamp-2"
>
@ -471,7 +478,22 @@ const allCheckedList = computed(() => {
const currentCrumbs = computed(() => {
if (crumbs.value[crumbsIndex.value]) {
if (searchVal.value && searchVal.value !== '') {
let filterSons = crumbs.value[crumbsIndex.value].sons.filter((item) =>
// let searchDepKeysArr = []
// let searchDepsArr = []
// searchDepKeysArr = Array.from(
// buildDepsMap(crumbs.value).keys(),
// ).filter((key) => key.includes(searchVal.value))
// console.log(searchDepKeysArr)
// if (searchDepKeysArr.length > 0) {
// searchDepKeysArr.forEach((key) => {
// searchDepsArr.push(buildDepsMap(crumbs.value).get(key))
// })
// }
// return {
// ...crumbs.value[crumbsIndex.value],
// sons: searchDepsArr,
// }
let filterSons = crumbs.value[crumbsIndex.value].sons?.filter((item) =>
item.name.includes(searchVal.value),
)
return {
@ -485,6 +507,20 @@ const currentCrumbs = computed(() => {
return {}
})
const buildDepsMap = (departments) => {
const index = new Map()
function traverse(deps) {
for (let dep of deps) {
index.set(`${dep.name}`, dep)
if (dep?.sons?.length > 0) {
traverse(dep.sons)
}
}
}
traverse(departments)
return index
}
const allCheckStatus = computed(() => {
if (!currentCrumbs.value.sons) {
return 'noChecked'
@ -650,18 +686,19 @@ const openDrawer = () => {
const handleConfirm = async () => {
if (state.chooseMode === 2) {
const listT = membersCheckedKeys.value.map((v) => v)
const res = await getDepMembers({
departmentIds: allCheckedList.value.map((v) => v.ID),
status: 'notactive',
})
if (res.status == 0 && res.data?.data?.length) {
res.data?.data.forEach((v) => {
listT.push(v)
if (allCheckedList?.value?.length > 0) {
const res = await getDepMembers({
departmentIds: allCheckedList.value.map((v) => v.ID),
status: 'notactive',
})
if (res.status == 0 && res.data?.data?.length) {
res.data?.data.forEach((v) => {
listT.push(v)
})
}
}
allChooseMembers.value = listT
}
depCheckedKeys.value = lodash.cloneDeep(allCheckedList.value)
console.log('depCheckedKeys', depCheckedKeys.value)
uni.navigateBack()
@ -704,12 +741,24 @@ const calculateTotalStaffNum = (node) => {
}
const getCurrentMembers = async (depItem) => {
const res = await getDepMembers({
if (state.chooseMode === 1) {
currentMembers.value = []
return
}
let params = {
departmentId: depItem.ID,
status: 'notactive',
})
}
if (searchVal.value) {
delete params.departmentId
params = Object.assign({}, params, {
fatherDepartmentId: depItem.ID,
nickName: searchVal.value,
})
}
const res = await getDepMembers(params)
if (res.status === 0) {
currentMembers.value = res.data.data.length
currentMembers.value = res?.data?.data?.length
? res.data.data.map((v) => {
return {
...v,

263
src/pages/chooseGroupType/index.vue
View File

@ -1,159 +1,195 @@
<template>
<div class="outer-layer">
<div>
<tm-navbar :hideBack="false" hideHome title="选择群类型">
</tm-navbar>
</div>
<div class="root">
<div class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx] overflow-y-auto" >
<div class=" pl-[32rpx] pr-[32rpx] pt-[44rpx] pb-[42rpx] bg-[#FFFFFF]" >
<div class="text-[40rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
群类型保存后将不可修改
</div>
<div class="text-[28rpx] leading-[54rpx] text-[#46299D] mt-[16rpx]" >
请创建过程中正确选择
</div>
<div class="mt-[54rpx] w-full h-[872rpx]" >
<div @click="groupActiveIndex = 0" class="groupCard firstPanel" :class="groupActiveIndex === 0?'activePanel':''">
<div class="w-full h-full pt-[64rpx] pl-[36rpx]">
<div class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
普通群
</div>
<div class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]" >
员工线上沟通专用群
离职后自动退群
<div class="choose-group-type-page">
<ZPaging ref="zPaging" :show-scrollbar="false">
<template #top>
<customNavbar :title="$t('pageTitle.select.groupType')"></customNavbar>
</template>
<div class="choose-group-type">
<div class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx]">
<div class="pl-[32rpx] pr-[32rpx] pt-[44rpx] pb-[42rpx] bg-[#FFFFFF]">
<div class="text-[40rpx] leading-[54rpx] text-[#2F2F2F] font-bold">
群类型保存后将不可修改
</div>
<div class="text-[28rpx] leading-[54rpx] text-[#46299D] mt-[16rpx]">
请创建过程中正确选择
</div>
<div class="mt-[54rpx] w-full h-[872rpx]">
<div
@click="groupActiveIndex = 0"
class="groupCard firstPanel"
:class="groupActiveIndex === 0 ? 'activePanel' : ''"
>
<div class="w-full h-full pt-[64rpx] pl-[36rpx]">
<div
class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold"
>
普通群
</div>
<div
class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]"
>
员工线上沟通专用群 离职后自动退群
</div>
</div>
</div>
</div>
<div @click="groupActiveIndex = 1" class="groupCard secondPanel" :class="groupActiveIndex === 1?'activePanel':''">
<div class="w-full h-full pr-[36rpx] flex flex-col items-end justify-center">
<div class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
部门群
</div>
<div class="text-[24rpx] leading-[36rpx] text-[#939393] w-[288rpx] text-end" >
指定部门员工入职自动进群
离职后自动退群
</div>
<div v-if="!depCheckedKeys.length" @click="chooseDep" class="text-[24rpx] leading-[36rpx] text-[#C1B4EA] flex items-center mt-[16rpx]" >
<div :class="groupActiveIndex === 1?'text-[#7A58DE]':'text-[#C1B4EA]'" >选择部门</div>
<div class="ml-[20rpx]">
<tm-icon name="tmicon-angle-right" :font-size="18" :color="groupActiveIndex === 1?'#7A58DE':'#C1B4EA'"></tm-icon>
<div
@click="groupActiveIndex = 1"
class="groupCard secondPanel"
:class="groupActiveIndex === 1 ? 'activePanel' : ''"
>
<div
class="w-full h-full pr-[36rpx] flex flex-col items-end justify-center"
>
<div
class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold"
>
部门群
</div>
</div>
<div v-else class="text-[24rpx] leading-[36rpx] flex flex-col justify-center items-end mt-[16rpx] mb-[22rpx]" >
<div class="max-w-[336rpx] truncate" >
{{ depCheckedKeys.map(v=>v.name).toString() }}
<div
class="text-[24rpx] leading-[36rpx] text-[#939393] w-[288rpx] text-end"
>
指定部门员工入职自动进群 离职后自动退群
</div>
<div @click="chooseDep" class="flex items-center" >
<div class="text-[#7A58DE]" >查看全部</div>
<div
v-if="!depCheckedKeys.length"
@click="chooseDep"
class="text-[24rpx] leading-[36rpx] text-[#C1B4EA] flex items-center mt-[16rpx]"
>
<div
:class="
groupActiveIndex === 1
? 'text-[#7A58DE]'
: 'text-[#C1B4EA]'
"
>
选择部门
</div>
<div class="ml-[20rpx]">
<tm-icon name="tmicon-angle-right" :font-size="18" :color="groupActiveIndex === 1?'#7A58DE':'#C1B4EA'"></tm-icon>
<tm-icon
name="tmicon-angle-right"
:font-size="18"
:color="groupActiveIndex === 1 ? '#7A58DE' : '#C1B4EA'"
></tm-icon>
</div>
</div>
<div
v-else
class="text-[24rpx] leading-[36rpx] flex flex-col justify-center items-end mt-[16rpx] mb-[22rpx]"
>
<div class="max-w-[336rpx] truncate">
{{ depCheckedKeys.map((v) => v.name).toString() }}
</div>
<div @click="chooseDep" class="flex items-center">
<div class="text-[#7A58DE]">查看全部</div>
<div class="ml-[20rpx]">
<tm-icon
name="tmicon-angle-right"
:font-size="18"
:color="
groupActiveIndex === 1 ? '#7A58DE' : '#C1B4EA'
"
></tm-icon>
</div>
</div>
</div>
</div>
</div>
</div>
<div @click="groupActiveIndex = 2" class="groupCard thirdPanel" :class="groupActiveIndex === 2?'activePanel':''">
<div class="w-full h-full pt-[64rpx] pl-[36rpx]">
<div class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
项目群
</div>
<div class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]" >
项目成员沟通专用群
离职后自动退群
<div
@click="groupActiveIndex = 2"
class="groupCard thirdPanel"
:class="groupActiveIndex === 2 ? 'activePanel' : ''"
>
<div class="w-full h-full pt-[64rpx] pl-[36rpx]">
<div
class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold"
>
项目群
</div>
<div
class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]"
>
项目成员沟通专用群 离职后自动退群
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
<div class="mt-[14rpx] btnBox" >
<tm-button
@click="handleConfirm"
color="#46299D"
:disabled="confirmBtnStatus"
disabledColor="#E6E6E6"
:margin="[0]"
:shadow="0"
:width="426"
:height="76"
size="large"
label="确定"
>
</tm-button>
</div>
</div>
</div>
<template #bottom>
<customBtn
:isBottom="true"
:btnText="$t('ok')"
@click="handleConfirm"
:disabled="confirmBtnStatus"
></customBtn>
</template>
</ZPaging>
</div>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useChatList } from "@/store/chatList/index.js";
import { useAuth } from "@/store/auth";
import { useTalkStore, useUserStore } from "@/store";
import { useGroupTypeStore } from "@/store/groupType";
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
import { ref, watch, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useChatList } from '@/store/chatList/index.js'
import { useAuth } from '@/store/auth'
import { useTalkStore, useUserStore } from '@/store'
import { useGroupTypeStore } from '@/store/groupType'
const { groupActiveIndex,depCheckedKeys } = useGroupTypeStore();
const { groupActiveIndex, depCheckedKeys } = useGroupTypeStore()
const confirmBtnStatus = computed(() => {
let disabledT = false;
let disabledT = false
switch (groupActiveIndex.value) {
case 0:
break;
break
case 1:
if (!depCheckedKeys.value.length) {
disabledT = true;
disabledT = true
}
break;
break
case 2:
break;
break
default:
break;
break
}
return disabledT
})
const chooseDep = () => {
uni.navigateTo({
url: '/pages/chooseDeps/index'
});
};
url: '/pages/chooseByDeps/index?chooseMode=1',
})
}
const handleConfirm = () => {
uni.navigateBack()
// uni.navigateTo({
// url: '/pages/creatGroupChat/index'
// });
};
}
</script>
<style scoped lang="scss">
uni-page-body,
page {
::v-deep .zp-paging-container-content {
height: 100%;
display: flex;
}
.outer-layer {
overflow-y: auto;
.choose-group-type {
flex: 1;
background-image: url("@/static/image/clockIn/z3280@3x.png");
display: flex;
flex-direction: column;
background-image: url('@/static/image/clockIn/z3280@3x.png');
background-size: cover;
padding-bottom: 0;
display: flex;
flex-direction: column;
background-position: bottom center;
padding: 20rpx 0;
background-attachment: fixed;
}
.root {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 18rpx;
overflow: hidden;
}
.divider{
.divider {
height: 1rpx;
background-color: #7C7C7C;
background-color: #7c7c7c;
opacity: 0.6;
}
.avatar-placeholder {
@ -171,24 +207,23 @@ page {
background-repeat: no-repeat;
border-radius: 12rpx;
&.firstPanel {
background-image: url("@/static/image/chatList/zu6033@2x.png");
background-image: url('@/static/image/chatList/zu6033@2x.png');
}
&.secondPanel {
background-image: url("@/static/image/chatList/zu6031@2x.png");
background-image: url('@/static/image/chatList/zu6031@2x.png');
margin-top: 28rpx;
margin-bottom: 28rpx;
}
&.thirdPanel {
background-image: url("@/static/image/chatList/zu6032@2x.png");
background-image: url('@/static/image/chatList/zu6032@2x.png');
}
&.activePanel {
box-shadow: 0 0 0 3rpx #46299D;
box-shadow: 0 0 0 3rpx #46299d;
}
}
.btnBox {
:deep(uni-button[disabled="true"]){
color: #BEBEBE !important;
:deep(uni-button[disabled='true']) {
color: #bebebe !important;
}
}
</style>

10
src/pages/creatGroupChat/index.vue
View File

@ -116,9 +116,8 @@
:groupType="3"
:is_manager="true"
:memberList="allChooseMembers"
:memberListsLimit="
groupActiveIndex == 0 || groupActiveIndex == 2 ? 13 : 15
"
:memberListsLimit="15"
:hideAddRemoveBtns="true"
></groupMemberList>
</div>
@ -242,13 +241,14 @@ const chooseGroupType = () => {
const chooseGroupAdmin = () => {
uni.navigateTo({
url: '/pages/chooseGroupAdmin/index',
url:
'/pages/chatSettings/groupManage/selectMembers?manageType=admin&isCreateDepGroup=1',
})
}
const chooseMembers = () => {
uni.navigateTo({
url: '/pages/chooseMembers/index',
url: '/pages/chooseByDeps/index?chooseMode=2',
})
}

2
src/store/groupType/index.js
View File

@ -63,6 +63,8 @@ export const useGroupTypeStore = createGlobalState(() => {
crumbsIndex.value = 0
depCheckedKeys.value = []
groupAdmins.value = []
membersCheckedKeys.value = []
allChooseMembers.value = []
}
const createDepGroup = async (param) => {

3
src/uni_modules/tmui/locale/zh-Hans.json
View File

@ -143,5 +143,6 @@
"radio.btn.selectAll": "全选",
"choose.deps.nextLevel": "下级",
"statistics.selected.deps": "已选择的部门数",
"chat.manage.addMembers": "添加群成员"
"chat.manage.addMembers": "添加群成员",
"pageTitle.select.groupType": "选择群类型"
}