自定义checkbox新增disabled状态；选择人员新增已在群内人员禁止选择

src/components/checkBox/index.vue

@@ -1,56 +1,63 @@
 <template>
-  <div @click.stop="onCheck" >
+  <div @click.stop="onCheck">
     <tm-image :width="size" :height="size" :src="imageSrc"></tm-image>
   </div>
 </template>
 
 <script setup>
-import { defineProps,computed,defineEmits } from "vue";
-import circle from "@/static/image/checkBox/circle@2x.png";
-import zu6039 from "@/static/image/checkBox/zu6039@2x.png";
-import zu6040 from "@/static/image/checkBox/zu6040@2x.png";
+import { defineProps, computed, defineEmits } from 'vue'
+import circle from '@/static/image/checkBox/circle@2x.png'
+import zu6039 from '@/static/image/checkBox/zu6039@2x.png'
+import zu6040 from '@/static/image/checkBox/zu6040@2x.png'
+import checkBoxDisabled from '@/static/image/checkBox/disabled.png'
 
 const props = defineProps({
   modelValue: {
     type: String,
-    default: "noChecked", // noChecked, checked, halfChecked
+    default: 'noChecked', // noChecked, checked, halfChecked, disabled
   },
   size: {
     type: Number,
     default: 28,
   },
-});
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
 
-const emit = defineEmits(['update:modelValue','change']);
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const imageSrc = computed(() => {
-  switch (props.modelValue) {
-    case "noChecked":
-      return circle;
-    case "checked":
-      return zu6039;
-    case "halfChecked":
-      return zu6040;
+  if (props.disabled) {
+    return checkBoxDisabled
   }
-});
+  switch (props.modelValue) {
+    case 'noChecked':
+      return circle
+    case 'checked':
+      return zu6039
+    case 'halfChecked':
+      return zu6040
+  }
+})
 
 const onCheck = () => {
+  if (props.disabled) return
   switch (props.modelValue) {
-    case "noChecked":
-      emit('update:modelValue', 'checked');
-      emit('change', 'checked');
-      break;
-    case "checked":
-      emit('update:modelValue', 'noChecked');
-      emit('change', 'noChecked');
-      break;
-    case "halfChecked":
-      emit('update:modelValue', 'checked');
-      emit('change', 'checked');
-      break;
+    case 'noChecked':
+      emit('update:modelValue', 'checked')
+      emit('change', 'checked')
+      break
+    case 'checked':
+      emit('update:modelValue', 'noChecked')
+      emit('change', 'noChecked')
+      break
+    case 'halfChecked':
+      emit('update:modelValue', 'checked')
+      emit('change', 'checked')
+      break
   }
-};
-
+}
 </script>
-<style scoped lang='less'>
-</style>
+<style scoped lang="less"></style>

src/pages/chatSettings/components/groupMembersList.vue

@@ -103,7 +103,9 @@ const toUserDetailPage = (userItem) => {
 //点击群聊拉人
 const groupAddMembers = () => {
   uni.navigateTo({
-    url: '/pages/chooseByDeps/index?chooseMode=2',
+    url:
+      '/pages/chooseByDeps/index?chooseMode=2&preSelectedMembers=' +
+      encodeURIComponent(JSON.stringify(props?.memberList)),
   })
 }
 

src/pages/chooseByDeps/index.vue

@@ -42,16 +42,16 @@
           <div
             v-if="
               (state.chooseMode === 1 || state.chooseMode === 2) &&
-              (currentCrumbs?.sons?.length > 0 || currentMembers?.length > 0)
+              ((currentCrumbs?.sons?.length > 0 &&
+                ((state.chooseMode === 2 && !searchVal) ||
+                  state.chooseMode !== 2)) ||
+                currentMembers?.length > 0)
             "
             class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
             @click="() => allCheck(allCheckStatus)"
           >
             <div class="mr-[20rpx]">
-              <checkBox
-                :disabled="currentCrumbs?.sons?.length === 0"
-                :modelValue="allCheckStatus"
-              ></checkBox>
+              <checkBox :modelValue="allCheckStatus"></checkBox>
             </div>
             <div class="font-medium text-[28rpx] leading-[40rpx]">
               {{ $t('radio.btn.selectAll') }}
@@ -84,7 +84,6 @@
                   v-if="state.chooseMode === 1 || state.chooseMode === 2"
                 >
                   <checkBox
-                    :disabled="!item?.sons?.length"
                     v-model="item.checkStatus"
                     @change="(val) => checkItemChange(item, val)"
                   ></checkBox>
@@ -186,6 +185,7 @@
                   v-if="state.chooseMode === 1 || state.chooseMode === 2"
                 >
                   <checkBox
+                    :disabled="isPreSelectedMember(item)"
                     :modelValue="
                       membersCheckedKeys.filter((v) => v.ID === item.ID)
                         .length > 0
@@ -483,14 +483,34 @@ const currentMembers = ref([])
 
 const state = reactive({
   chooseMode: 1, //1=选择部门；2=选择人员; 3=通讯录
+  preSelectedMembers: [], // 已在群里的成员数据
 })
 
 onLoad((options) => {
   if (options.chooseMode) {
     state.chooseMode = Number(options.chooseMode)
   }
+
+  // 如果有预选成员数据，初始化选中状态
+  if (options.preSelectedMembers) {
+    try {
+      const preSelectedMembers = JSON.parse(
+        decodeURIComponent(options.preSelectedMembers),
+      )
+      state.preSelectedMembers = preSelectedMembers
+    } catch (e) {
+      console.error('解析预选成员数据失败:', e)
+    }
+  }
 })
 
+// 添加判断是否为预选成员的方法
+const isPreSelectedMember = (member) => {
+  return state.preSelectedMembers.some(
+    (preMember) => preMember.erp_user_id === member.ID,
+  )
+}
+
 const pageTitle = computed(() => {
   let page_title = ''
   if (state.chooseMode === 1) {
@@ -591,30 +611,33 @@ const allCheckStatus = computed(() => {
         ? currentCrumbs?.value?.sons?.every(
             (son) => son.checkStatus === 'checked',
           )
-        : true // 如果没有子部门，则视为部门全选
+        : true
 
-    // 检查人员选择状态
+    // 检查人员选择状态，需要排除已在群里的成员
+    const selectableMembers = currentMembers.value.filter(
+      (member) => !isPreSelectedMember(member),
+    )
     const allMembersChecked =
-      currentMembers.value.length > 0 &&
-      currentMembers.value.every((member) =>
+      selectableMembers.length > 0 &&
+      selectableMembers.every((member) =>
         membersCheckedKeys.value.some((checked) => checked.ID === member.ID),
       )
 
     // 综合判断全选状态
-    // 1. 如果有子部门和成员，则需要都选中才是全选
-    // 2. 如果只有成员没有子部门，则只需要成员全选即可
-    // 3. 如果只有子部门没有成员，则只需要子部门全选即可
     if (
-      (currentCrumbs?.value?.sons?.length > 0 && allDepsChecked) ||
-      (currentMembers.value.length > 0 && allMembersChecked)
+      // 如果有可选部门，必须全部选中
+      (currentCrumbs?.value?.sons?.length === 0 || allDepsChecked) &&
+      // 如果有可选成员，必须全部选中
+      (selectableMembers.length === 0 || allMembersChecked)
     ) {
       return 'checked'
     } else if (
+      // 只要有部门或成员被选中就是半选状态
       currentCrumbs?.value?.sons?.some(
         (son) =>
           son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
       ) ||
-      currentMembers.value.some((member) =>
+      selectableMembers.some((member) =>
         membersCheckedKeys.value.some((checked) => checked.ID === member.ID),
       )
     ) {
@@ -812,16 +835,16 @@ const allCheck = (status) => {
   // 人员选择模式下处理成员
   if (state.chooseMode === 2) {
     if (statusT === 'checked') {
-      // 全选时，添加所有当前显示的成员
+      // 全选时，添加所有当前显示的成员（排除已在群里的成员）
       const newMembers = currentMembers.value.filter(
         (member) =>
           !membersCheckedKeys.value.some(
             (existing) => existing.ID === member.ID,
-          ),
+          ) && !isPreSelectedMember(member),
       )
       membersCheckedKeys.value = [...membersCheckedKeys.value, ...newMembers]
     } else {
-      // 取消全选时，移除当前显示的所有成员
+      // 取消全选时，移除当前显示的所有成员（已在群里的成员本来就是禁用的，不用特殊处理）
       const currentMemberIds = new Set(
         currentMembers.value.map((member) => member.ID),
       )
@@ -1020,6 +1043,9 @@ const getCurrentMembers = async (depItem) => {
 }
 
 const checkMember = (item, val) => {
+  if (isPreSelectedMember(item)) {
+    return
+  }
   if (val === 'checked') {
     membersCheckedKeys.value.push(item)
   } else {

src/pages/creatGroupChat/index.vue

@@ -99,7 +99,6 @@
             <div @click="chooseMembers" class="left-box">
               <div class="ml-[32rpx] flex items-center">
                 <div
-                  v-if="!groupAdmins.length"
                   class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]"
                 >
                   全部({{ allChooseMembers?.length || 0 }})