选择用户公共组件修改BUG

src/components/SelectRole/index.vue

@@ -13,7 +13,7 @@
         <div class="demo-collapse">
           <el-collapse v-model="activeNames">
             <el-collapse-item :title="item[deptKey]" :name="item.deptId" v-for="(item, index) in filteredDeptList" :key="index" style="margin-left: 20px">
-              <div v-for="(it,idx) in (Array.isArray(item[nameKey]) ? item[nameKey] : [item[nameKey]])" :key="idx">
+              <div v-for="it in (Array.isArray(item[nameListKey]) ? item[nameListKey] : [item[nameListKey]])" :key="it[nameIdKey]">
                 <el-checkbox
                   v-model="checked1"
                   :label="it[nameKey]"
@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { defineProps, defineEmits } from 'vue';
 
 // 接收父组件传入的props
@@ -59,10 +59,18 @@ const props = defineProps({
     type: Array,
     required: true
   },
+  nameListKey: {  // 成员列表名称（动态）
+    type: String,
+    required: true
+  },
   nameKey: {  // 成员名称字段名（默认'name'）
     type: String,
     default: 'name'
   },
+  nameIdKey: {  // 成员Id字段名（默认'id'）
+    type: String,
+    default: 'id'
+  },
   deptKey: {  // 部门名称字段名（默认'dept'）
     type: String,
     default: 'dept'
@@ -84,10 +92,18 @@ const checked1 = ref([]);
 const selectedItems = ref([]);
 const filteredDeptList = ref(props.deptList);
 const activeNames = ref([props.deptList[0].deptId]); // 新增展开项绑定
+
 // 计算左侧总项数：遍历deptList并计算所有成员数量
 const totalItems = computed(() => {
-  return props.deptList.reduce((total, dept) => total + dept[props.nameKey].length, 0);
+  const uniqueIds = new Set(); // 创建一个Set来存储唯一的id
+  props.deptList.forEach(dept => {
+    dept[props.nameListKey].forEach(member => {
+      uniqueIds.add(member[props.nameIdKey]); // 将每个成员的id加入Set中，重复的id会自动去重
+    });
+  });
+  return uniqueIds.size;
 });
+
 // 搜索功能：根据输入内容过滤部门列表
 const selectSearch = () => {
   if (!allRole.value) {
@@ -100,7 +116,7 @@ const selectSearch = () => {
 
     filteredDeptList.value = props.deptList.filter(item => {
       const deptMatch = item[props.deptKey].toLowerCase().includes(searchTerm);
-      const nameMatch = item[props.nameKey].some(it => {
+      const nameMatch = item[props.nameListKey].some(it => {
         const name = it[props.nameKey] ? it[props.nameKey] : it;
         const isMatch = name.toLowerCase().includes(searchTerm);
         if(isMatch) matchedNames.push(name); // 收集匹配的成员名称
@@ -158,6 +174,7 @@ const submitSelection = () => {
 };
 </script>
 
+
 <style scoped>
 .dialog-box{
   display: flex;