修改部分选择人员的规则与交互

src/pages/chooseByDeps/index.vue

@@ -58,7 +58,10 @@
             </div>
           </div>
           <div
-            v-if="currentCrumbs?.sons?.length > 0"
+            v-if="
+              currentCrumbs?.sons?.length > 0 &&
+              ((state.chooseMode === 2 && !searchVal) || state.chooseMode !== 2)
+            "
             v-for="item in currentCrumbs?.sons"
             @click="
               state.chooseMode === 1 || state.chooseMode === 2
@@ -262,7 +265,9 @@
                   v-if="state.chooseMode === 2"
                   v-for="item in allCheckedList"
                 >
-                  {{ item.name }}({{ item.staffNum }})
+                  <span v-if="item.showInPopup">
+                    {{ item.name }}({{ getDepTotalMembers(item) }})
+                  </span>
                 </span>
                 <span
                   v-if="state.chooseMode === 2"
@@ -337,6 +342,10 @@
                 >
                   <div v-if="index === 0" class="divider"></div>
                   <div
+                    v-if="
+                      (item.showInPopup && state.chooseMode === 2) ||
+                      state.chooseMode !== 2
+                    "
                     class="flex items-center justify-between mt-[36rpx] font-medium text-[#000000] leading-[40rpx] mb-[34rpx]"
                   >
                     <div class="text-[28rpx] ml-[10rpx]">
@@ -350,11 +359,21 @@
                         :plain="true"
                         :btnText="$t('chatSettings.btn.removeAdmin')"
                         @clickBtn="deleteNode(item)"
-                        :disabled="userDepIds.includes(item.ID)"
+                        :disabled="
+                          state.chooseMode === 2
+                            ? false
+                            : userDepIds.includes(item.ID)
+                        "
                       ></customBtn>
                     </div>
                   </div>
-                  <div class="divider"></div>
+                  <div
+                    class="divider"
+                    v-if="
+                      (item.showInPopup && state.chooseMode === 2) ||
+                      state.chooseMode !== 2
+                    "
+                  ></div>
                 </div>
                 <div
                   v-for="(item, index) in membersCheckedKeys"
@@ -528,10 +547,10 @@ const allCheckStatus = computed(() => {
   if (currentCrumbs?.value?.sons?.length === 0) {
     return 'noChecked'
   }
-  const allChecked = currentCrumbs.value.sons.every(
+  const allChecked = currentCrumbs?.value?.sons?.every(
     (son) => son.checkStatus === 'checked',
   )
-  const someChecked = currentCrumbs.value.sons.some(
+  const someChecked = currentCrumbs?.value?.sons?.some(
     (son) => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
   )
   if (allChecked) {
@@ -618,8 +637,14 @@ const updateNodeStatus = (node) => {
 }
 
 // 更新当前节点及其所有子节点的状态
-const updateCheckStatus = (node, status) => {
+const updateCheckStatus = (node, status, doShow) => {
   node.checkStatus = status
+  if (state.chooseMode === 2 && doShow) {
+    node.showInPopup = true
+    if (state.searchVal) {
+      return
+    }
+  }
   if (node.sons && Array.isArray(node.sons) && node.sons.length > 0) {
     node.sons.forEach((son) => updateCheckStatus(son, status))
   }
@@ -627,7 +652,7 @@ const updateCheckStatus = (node, status) => {
 
 const checkItemChange = (item, val) => {
   // 更新当前节点及其子节点的状态
-  updateCheckStatus(item, val)
+  updateCheckStatus(item, val, true)
 
   // 更新父节点的状态
   updateParentStatus(item)
@@ -637,6 +662,13 @@ const deleteNode = (item) => {
   const treeNode = findNodeById(depTreeMyList.value[0], item.ID)
   if (!treeNode) return
   treeNode.checkStatus = 'noChecked'
+  if (
+    state.chooseMode === 2 &&
+    treeNode?.sons?.length > 0 &&
+    Array.isArray(treeNode?.sons)
+  ) {
+    updateCheckStatus(item, false)
+  }
   updateNodeStatus(treeNode)
   updateParentStatus(treeNode)
 }
@@ -664,11 +696,35 @@ const allCheck = (status) => {
   } else {
     statusT = 'checked'
   }
-  currentCrumbs.value.sons.forEach((item) => {
+  currentCrumbs?.value?.sons?.forEach((item) => {
     const itemT = findNodeById(depTreeMyList.value[0], item.ID)
     if (!itemT) return
     checkItemChange(itemT, statusT)
   })
+  if (state.chooseMode === 2) {
+    console.log(currentMembers.value)
+    console.log(membersCheckedKeys.value)
+    const map = new Map()
+    if (status === 'noChecked' || status === 'halfChecked') {
+      ;[currentMembers.value, membersCheckedKeys.value]
+        .flat()
+        .forEach((item) => {
+          map.set(item.ID, item)
+        })
+      const mergedArray = Array.from(map.values())
+      console.log(mergedArray)
+      membersCheckedKeys.value = mergedArray
+    } else if (status === 'checked') {
+      const filteredArray = computed(() => {
+        const unSelectArr = new Set(currentMembers.value.map((item) => item.ID))
+        return membersCheckedKeys.value.filter(
+          (item) => !unSelectArr.has(item.ID),
+        )
+      })
+      console.log(filteredArray)
+      membersCheckedKeys.value = filteredArray.value
+    }
+  }
 }
 
 const openDrawer = () => {