@ebiz/designer-components 0.1.12 → 0.1.13

package/src/components/EbizEmployeeSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ebiz-employee-selector">
     <!-- 选择框展示区 -->
-    <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
+    <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px">
       <div class="selected-items" v-if="selectedItems && selectedItems.length">
         <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
           <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
@@ -17,9 +17,16 @@
     </div>
 
     <!-- 选择弹窗 -->
-    <t-dialog v-model:visible="dialogVisible" :header="props.content" :width="800" footer :close-btn="true"
-      :close-on-esc-keydown="true" :close-on-overlay-click="true" destroyOnClose>
-
+    <t-dialog
+      v-model:visible="dialogVisible"
+      :header="props.content"
+      :width="800"
+      footer
+      :close-btn="true"
+      :close-on-esc-keydown="true"
+      :close-on-overlay-click="true"
+      destroyOnClose
+    >
       <!-- 选项卡 -->
       <t-tabs v-model="activeTab" class="selector-tabs">
         <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false"></t-tab-panel>
@@ -29,9 +36,7 @@
         <!-- <t-tab-panel value="subordinate" label="我的下属" :destroyOnHide="false"></t-tab-panel> -->
       </t-tabs>
 
-
       <div>
-
         <div class="selector-dialog-content">
           <!-- 左侧选择区域 -->
           <div class="left-panel">
@@ -42,21 +47,43 @@
               </div>
               <!-- 组织架构 -->
               <div v-show="activeTab === 'organization'" class="tab-content">
-                <t-tree ref="organizationTree" :data="organizationData"
-                  :keys="{ label: 'name', value: 'id', children: 'children' }" hover activable :active="currentActive"
-                  @active="handleActive" />
+                <t-tree
+                  ref="organizationTree"
+                  :data="organizationData"
+                  expandAll
+                  :keys="{ label: 'name', value: 'id', children: 'children' }"
+                  hover
+                  activable
+                  :active="currentActive"
+                  @click="handleActive"
+                />
               </div>
 
               <!-- 角色 -->
               <div v-show="activeTab === 'role'" class="tab-content">
-                <t-tree ref="roleTree" :data="roleData" :keys="{ label: 'name', value: 'code' }" hover activable
-                  :active="currentActive" @active="handleActive" />
+                <t-tree
+                  ref="roleTree"
+                  :data="roleData"
+                  expandAll
+                  :keys="{ label: 'name', value: 'code' }"
+                  hover
+                  activable
+                  :active="currentActive"
+                  @click="handleActive"
+                />
               </div>
 
               <!-- 岗位 -->
               <div v-show="activeTab === 'position'" class="tab-content">
-                <t-tree ref="positionTree" :data="positionData" :keys="{ label: 'name', value: 'id' }" hover activable
-                  :active="currentActive" @active="handleActive" />
+                <t-tree
+                  ref="positionTree"
+                  :data="positionData"
+                  :keys="{ label: 'name', value: 'id' }"
+                  hover
+                  activable
+                  :active="currentActive"
+                  @click="handleActive"
+                />
               </div>
 
               <!-- 同部门 -->
@@ -100,24 +127,35 @@
 
             <!-- 搜索框 -->
             <div class="search-box">
-              <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号搜索" clearable @keyup.enter="handleSearchEnter">
+              <t-input
+                v-model="searchText"
+                placeholder="请输入姓名/拼音/工号搜索"
+                clearable
+                @keyup.enter="handleSearch"
+              >
                 <template #suffix-icon>
-                  <t-icon name="search" @click="handleSearchClick"></t-icon>
+                  <t-icon name="search" @click="handleSearch"></t-icon>
                 </template>
               </t-input>
-              <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn"
-                @click="clearSearch">清除搜索</t-button>
+              <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn" @click="clearSearch"
+                >清除搜索</t-button
+              >
             </div>
 
             <div class="employee-list">
-              <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item">
-                <t-checkbox v-model="item.checked" @change="handleCheckChange(item)"></t-checkbox>
+              <div
+                v-for="(item, index) in filteredEmployeeList"
+                :key="index"
+                class="employee-item"
+                @click="handleCheckChange(item)"
+              >
+                <t-checkbox v-model="item.checked" style="pointer-events: none"></t-checkbox>
                 <div class="employee-avatar">
                   <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
                   <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
                 </div>
                 <div class="employee-info">
-                  <div class="employee-code">{{ item.no }} - </div>
+                  <div class="employee-code">{{ item.no }} -</div>
                   <div class="employee-name">{{ item.name }}</div>
                 </div>
               </div>
@@ -129,7 +167,6 @@
         </div>
       </div>
 
-
       <!-- 底部按钮区域 -->
       <template #footer>
         <div class="dialog-footer">
@@ -158,7 +195,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue'
 import {
   Dialog as TDialog,
   Button as TButton,
@@ -174,8 +211,8 @@ import {
   List as TList,
   ListItem as TListItem,
   MessagePlugin
-} from 'tdesign-vue-next';
-import dataService from '../apiService/simpleDataService';
+} from 'tdesign-vue-next'
+import dataService from '../apiService/simpleDataService'
 
 // 定义组件属性
 const props = defineProps({
@@ -226,16 +263,16 @@ const props = defineProps({
     type: String,
     default: '选择人员'
   }
-});
+})
 
 // 定义组件事件
-const emit = defineEmits(['update:modelValue', 'change', 'update:visible', 'confirm']);
-const tempVisible = ref(false);
+const emit = defineEmits(['update:modelValue', 'change', 'update:visible', 'confirm'])
+const tempVisible = ref(false)
 // 内部状态变量
 const dialogVisible = computed({
   set(val) {
     if (props.visible == null) {
-      tempVisible.value = val;
+      tempVisible.value = val
       return
     }
     emit('update:visible', val)
@@ -243,79 +280,75 @@ const dialogVisible = computed({
   get() {
     return props.visible ?? tempVisible.value
   }
-});
+})
 
-const searchText = ref('');
-const activeTab = ref(props.defaultTab);
-const loading = ref(false);
-const selectedItems = ref([]);
+const searchText = ref('')
+const activeTab = ref(props.defaultTab)
+const loading = ref(false)
+const selectedItems = ref([])
 // 对话框中临时保存的选中员工列表
-const tempSelectedEmployees = ref([]);
+const tempSelectedEmployees = computed(() => employeeList.value.filter((i) => i.checked))
 // 是否查询子部门
-const childDeptEnable = ref(false);
+const childDeptEnable = ref(false)
 
 // 数据源
-const organizationData = ref([]);
-const roleData = ref([]);
-const positionData = ref([]);
-const departmentData = ref([]);
-const subordinateData = ref([]);
-const employeeList = ref([]);
-const currentActive = ref([]);
-const currentNodeName = ref('');
-const selectAll = ref(false);
+const organizationData = ref([])
+const roleData = ref([])
+const positionData = ref([])
+const departmentData = ref([])
+const subordinateData = ref([])
+const employeeList = ref([])
+const currentActive = ref([])
+const currentNodeName = ref('')
+const selectAll = computed(() => employeeList.value > 0 && employeeList.value.every((i) => i.checked))
 
 // 从名称中获取头像显示文本
 const getAvatarText = (name) => {
-  return name ? name.substring(0, 1) : '';
-};
+  return name ? name.substring(0, 1) : ''
+}
 
 // 处理组织数据，转换为树形结构
 const _processOrgData = (data) => {
   // 转换数据结构为树形结构
-  const map = {};
-  const result = [];
+  const map = {}
+  const result = []
 
-  data.forEach(item => {
+  data.forEach((item) => {
     map[item.id] = {
       ...item,
       name: item.name,
       id: item.id,
       children: []
-    };
-  });
+    }
+  })
 
-  data.forEach(item => {
-    const node = map[item.id];
+  data.forEach((item) => {
+    const node = map[item.id]
 
     if (item.manager_dept && map[item.manager_dept]) {
-      map[item.manager_dept].children.push(node);
+      map[item.manager_dept].children.push(node)
     } else {
       // 只有在显示根组织或不存在父节点时才添加到结果中
       if (props.showRootOrg || !item.manager_dept) {
-        result.push(node);
+        result.push(node)
       }
     }
-  });
+  })
 
-  return result;
-};
+  return result
+}
 
 // 更新全选状态
-const updateSelectAllStatus = () => {
-  selectAll.value = employeeList.value.length > 0 && employeeList.value.every(item => item.checked);
-};
-
 const updateSelectStatus = () => {
-  employeeList.value.forEach(item => {
-    item.checked = props.modelValue.includes(item.id);
+  employeeList.value.forEach((item) => {
+    item.checked = props.modelValue.includes(item.id)
   })
 }
 
 // 选中的员工列表
 const selectedEmployees = computed(() => {
-  return employeeList.value.filter((item) => item.checked);
-});
+  return employeeList.value.filter((item) => item.checked)
+})
 
 // 根据搜索文本过滤的员工列表
 const filteredEmployeeList = computed(() => {
@@ -333,84 +366,68 @@ const filteredEmployeeList = computed(() => {
   //     (item.code && item.code.toLowerCase().includes(keyword))
   //   );
   // });
-});
-
-const allData = ref([])
-
-const fetchAllData = async () => {
-  const response = await dataService.fetch({}, {}, '/process/deptList');
-  employeeList.value = response ?? [];
-}
-fetchAllData()
+})
 
 // 获取组织架构数据
 const fetchOrganizationData = async () => {
-  loading.value = true;
+  loading.value = true
   try {
     const response = await dataService.fetch(
       {},
       {
         apiId: 1933,
         key: 'organizationalStructure'
-      }, "/process/deptList"
-    );
-    organizationData.value = response;
-    handleActive(response[0].id, 'organization')
+      },
+      '/process/deptList'
+    )
+    organizationData.value = response
+    // handleActive(response[0].id, 'organization')
     // organizationData.value = processOrgData(response.data || []);
   } catch (error) {
     MessagePlugin.error({
       content: '获取组织架构数据失败',
       duration: 3000
-    });
+    })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
-};
+}
 
 // 获取角色数据
 const fetchRoleData = async () => {
-  loading.value = true;
+  loading.value = true
   try {
-    const response = await dataService.fetch(
-      {},
-      {},
-      '/process/roleList'
-    );
-    roleData.value = response || [];
+    const response = await dataService.fetch({}, {}, '/process/roleList')
+    roleData.value = response || []
   } catch (error) {
     MessagePlugin.error({
       content: '获取角色数据失败',
       duration: 3000
-    });
+    })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
-};
+}
 
 // 获取岗位数据
 const fetchPositionData = async () => {
-  loading.value = true;
+  loading.value = true
   try {
-    const response = await dataService.fetch(
-      {},
-      {
-      },
-      '/process/roleList'
-    );
-    positionData.value = response?.data || [];
+    const response = await dataService.fetch({}, {}, '/process/roleList')
+    positionData.value = response?.data || []
   } catch (error) {
     MessagePlugin.error({
       content: '获取岗位数据失败',
       duration: 3000
-    });
+    })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
-};
+}
 
 // 获取部门数据
 const fetchDepartmentData = async () => {
-  loading.value = true;
+  loading.value = true
   try {
     const response = await dataService.fetch(
       {},
@@ -419,21 +436,21 @@ const fetchDepartmentData = async () => {
         key: 'departmentList',
         apiType: 'MULTIPLE_DATA_SEARCH'
       }
-    );
-    departmentData.value = response?.data || [];
+    )
+    departmentData.value = response?.data || []
   } catch (error) {
     MessagePlugin.error({
       content: '获取部门数据失败',
       duration: 3000
-    });
+    })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
-};
+}
 
 // 获取下属数据
 const fetchSubordinateData = async () => {
-  loading.value = true;
+  loading.value = true
   try {
     const response = await dataService.fetch(
       {},
@@ -441,390 +458,347 @@ const fetchSubordinateData = async () => {
         apiKey: 'subordinateList',
         apiType: 'MULTIPLE_DATA_SEARCH'
       }
-    );
-    subordinateData.value = response?.data || [];
+    )
+    subordinateData.value = response?.data || []
   } catch (error) {
     MessagePlugin.error({
       content: '获取下属数据失败',
       duration: 3000
-    });
+    })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
-};
+}
 
 // 根据节点ID获取员工列表
-const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
-  loading.value = true;
+const fetchEmployeesByNode = async (nodeId, keyword = searchText.value) => {
+  loading.value = true
   try {
-    const params = {};
+    const params = {}
 
     // 只有当nodeId不为空且type有效时，添加对应参数
-    if (nodeId && type) {
+    if (nodeId && activeTab.value) {
       // 根据不同类型设置不同的查询参数
-      switch (type) {
+      switch (activeTab.value) {
         case 'organization':
-          params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId;
+          params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId
           // 添加子部门查询参数
-          params.childDeptEnable = childDeptEnable.value;
-          break;
+          params.childDeptEnable = childDeptEnable.value
+          break
         case 'role':
-          params.roleKeyWork = nodeId[0];
-          break;
+          params.roleKeyWork = nodeId[0]
+          break
         case 'position':
-          params.positionId = nodeId;
-          break;
+          params.positionId = nodeId
+          break
         case 'department':
-          params.departmentId = nodeId;
-          break;
+          params.departmentId = nodeId
+          break
         case 'subordinate':
-          params.managerId = nodeId;
-          break;
+          params.managerId = nodeId
+          break
       }
     }
 
     // 如果有搜索关键词，添加到查询参数中
     if (keyword) {
-      params.keyWord = keyword;
+      params.keyWord = keyword
     }
 
-    const response = await dataService.fetch(
-      params,
-      {},
-      '/process/userList'
-    );
+    const response = await dataService.fetch(params, {}, '/process/userList')
     // 获取当前已选择的员工ID列表
-    const selectedIds = [...new Set(tempSelectedEmployees.value.map(emp => emp.id))];
+    const selectedIds = [...new Set(tempSelectedEmployees.value.map((emp) => emp.id))]
 
     // 处理返回数据，添加checked属性，保留已选状态
-    const employees = (response || []).map(emp => ({
+    const employees = (response || []).map((emp) => ({
       ...emp,
       checked: selectedIds.includes(emp.id)
-    }));
+    }))
 
-    employeeList.value = employees;
-    updateSelectAllStatus();
+    employeeList.value = employees
   } catch (error) {
     MessagePlugin.error({
       content: '获取员工列表失败',
       duration: 3000
-    });
+    })
   } finally {
-    loading.value = false;
+    loading.value = false
   }
-};
+}
 
 // 根据ID列表批量获取员工信息
-const fetchEmployeesByIds = async (ids) => {
+const fetchEmployeesByIds = (ids) => {
   if (!ids || ids.length === 0) {
-    selectedItems.value = [];
-    return;
+    selectedItems.value = []
+    return
   }
-
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
+  loading.value = true
+  dataService
+    .fetch(
       {
         userIds: ids // 使用新的接口参数格式
       },
       {},
       '/process/userList' // 直接使用新的API路径
-    );
-
-    if (response && Array.isArray(response)) {
-      selectedItems.value = response;
-    } else {
-      selectedItems.value = [];
-      MessagePlugin.warning({
-        content: '获取员工详情返回的数据格式不正确',
+    )
+    .then((res) => {
+      selectedItems.value = res ?? []
+    })
+    .catch((error) => {
+      selectedItems.value = []
+      MessagePlugin.error({
+        content: '获取员工详情失败: ' + (error.message || '未知错误'),
         duration: 3000
-      });
-    }
-  } catch (error) {
-    selectedItems.value = [];
-    MessagePlugin.error({
-      content: '获取员工详情失败: ' + (error.message || '未知错误'),
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
 
 // 处理节点激活
-const handleActive = (value, context) => {
-  currentActive.value = [value];
-  currentNodeName.value = context.node?.label || '';
-
+const handleActive = ({ node }) => {
+  currentActive.value = node?.value
+  currentNodeName.value = node?.label || ''
   // 获取该节点下的员工
-  fetchEmployeesByNode(value, activeTab.value);
-};
+  fetchEmployeesByNode(node.value)
+}
 
 // 选择部门
 const selectDepartment = (department) => {
-  currentNodeName.value = department.name;
-  fetchEmployeesByNode(department.id, activeTab.value);
-};
+  currentNodeName.value = department.name
+  fetchEmployeesByNode(department.id)
+}
 
 // 处理全选
 const handleSelectAll = (checked) => {
-  employeeList.value.forEach(item => {
-    item.checked = checked;
-
-    // 如果选中，确保添加到临时选中列表
-    if (checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
-      tempSelectedEmployees.value.push(item);
-    }
-  });
-};
+  employeeList.value.forEach((item) => {
+    item.checked = checked
+  })
+}
 
 // 处理选中状态变更
 const handleCheckChange = (item) => {
   // 单选模式下，取消其他选中
   if (props.single) {
-    employeeList.value.forEach(emp => {
+    employeeList.value.forEach((emp) => {
       if (emp.id !== item.id) {
-        emp.checked = false;
+        emp.checked = false
       }
-    });
-    // 单选模式下，直接替换tempSelectedEmployees
-    tempSelectedEmployees.value = item.checked ? [item] : [];
+    })
+    item.checked = true
   } else {
     // 多选模式
     // 如果选中，添加到临时选中列表
-    if (item.checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
-      tempSelectedEmployees.value.push(item);
-    } else if (!item.checked) {
-      // 如果取消选中，从临时选中列表中移除
-      const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
-      if (index !== -1) {
-        tempSelectedEmployees.value.splice(index, 1);
-      }
-    }
+    item.checked = !item.checked
   }
 
   // 检查最大选择数量限制
   if (props.maxCount > 0) {
-    const checkedCount = tempSelectedEmployees.value.length;
+    const checkedCount = tempSelectedEmployees.value.length
     if (checkedCount > props.maxCount) {
-      item.checked = false;
-      const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
-      if (index !== -1) {
-        tempSelectedEmployees.value.splice(index, 1);
-      }
+      item.checked = false
       MessagePlugin.warning({
         content: `最多只能选择${props.maxCount}个人员`,
         duration: 3000
-      });
+      })
     }
   }
-
-  updateSelectAllStatus();
-};
+}
 
 // 移除已选择的项目
 const removeItem = (index, id) => {
   // 移除ID
-  const newIds = [...props.modelValue];
-  const idIndex = newIds.indexOf(id);
+  const newIds = [...props.modelValue]
+  const idIndex = newIds.indexOf(id)
   if (idIndex !== -1) {
-    newIds.splice(idIndex, 1);
-    emit('update:modelValue', newIds);
-    emit('change', newIds);
+    newIds.splice(idIndex, 1)
+    emit('update:modelValue', newIds)
+    emit('change', newIds)
   }
 
   // 移除展示项
-  selectedItems.value.splice(index, 1);
-};
+  selectedItems.value.splice(index, 1)
+}
 
 // 从已选列表中移除员工
 const removeSelectedEmployee = (employee) => {
   // 将员工的checked状态设为false
-  const foundEmployee = employeeList.value.find(item => item.id === employee.id);
+  const foundEmployee = employeeList.value.find((item) => item.id === employee.id)
   if (foundEmployee) {
-    foundEmployee.checked = false;
-  }
-
-  // 从临时选中列表中移除
-  const index = tempSelectedEmployees.value.findIndex(emp => emp.id === employee.id);
-  if (index !== -1) {
-    tempSelectedEmployees.value.splice(index, 1);
+    foundEmployee.checked = false
   }
-
-  // 更新全选状态
-  updateSelectAllStatus();
-};
+}
 
 // 初始化选择器
 const initSelector = async () => {
   // 获取数据
   if (activeTab.value === 'organization' && organizationData.value.length === 0) {
-    await fetchOrganizationData();
+    await fetchOrganizationData()
   } else if (activeTab.value === 'role' && roleData.value.length === 0) {
-    await fetchRoleData();
+    await fetchRoleData()
   } else if (activeTab.value === 'position' && positionData.value.length === 0) {
-    await fetchPositionData();
+    await fetchPositionData()
   } else if (activeTab.value === 'department' && departmentData.value.length === 0) {
-    await fetchDepartmentData();
+    await fetchDepartmentData()
   } else if (activeTab.value === 'subordinate' && subordinateData.value.length === 0) {
-    await fetchSubordinateData();
+    await fetchSubordinateData()
   }
-};
+}
 
 // 显示对话框
 const showDialog = () => {
   // 初始化临时选中列表
   if (selectedItems.value.length > 0) {
-    tempSelectedEmployees.value = [...selectedItems.value];
+    tempSelectedEmployees.value = [...selectedItems.value]
     updateSelectStatus()
   } else {
-    tempSelectedEmployees.value = [];
+    tempSelectedEmployees.value = []
   }
 
   // 初始化数据
   if (props.visible == null) {
-    initSelector();
+    initSelector()
   }
-  dialogVisible.value = true;
-};
+  dialogVisible.value = true
+}
 
 // 确认选择
 const handleConfirm = () => {
-  const selectedEmployeeIds = tempSelectedEmployees.value.map(item => item.id);
+  const selectedEmployeeIds = tempSelectedEmployees.value.map((item) => item.id)
 
-  emit('update:modelValue', selectedEmployeeIds);
-  emit('change', selectedEmployeeIds);
-  emit('confirm', selectedEmployeeIds);
-  dialogVisible.value = false;
-};
+  emit('update:modelValue', selectedEmployeeIds)
+  emit('change', selectedEmployeeIds)
+  emit('confirm', selectedEmployeeIds)
+  dialogVisible.value = false
+}
 
 // 取消选择
 const handleCancel = () => {
   // 放弃临时选择
-  tempSelectedEmployees.value = [];
-  dialogVisible.value = false;
-};
+  tempSelectedEmployees.value = []
+  dialogVisible.value = false
+}
 
 // 监听标签页切换
 watch(activeTab, () => {
   // 切换标签页时重新加载数据
-  initSelector();
-});
+  initSelector()
+})
 
 // 监听modelValue变化，更新展示的员工信息
-watch(() => props.modelValue, (newIds, oldIds) => {
-  // 判断值是否真的变化了 (通过比较JSON字符串)
-  const newIdsStr = JSON.stringify(newIds || []);
-  const oldIdsStr = JSON.stringify(oldIds || []);
-
-  if (newIdsStr !== oldIdsStr) {
-    // 获取员工详情数据
-    fetchEmployeesByIds(newIds);
-  }
-}, { immediate: true, deep: true });
-watch(() => props.visible, (val) => {
-  tempSelectedEmployees.value = [];
-  currentActive.value = [];
-  currentNodeName.value = '';
-
-  if (val) {
-    fetchOrganizationData()
-  }
-}, { immediate: true })
-// 监听选中员工变化，更新临时已选列表
-watch(selectedEmployees, (newVal) => {
-  // 更新临时选中列表，保留之前不在当前列表中的已选员工
-  const currentIds = new Set(newVal.map(emp => emp.id));
-
-  // 移除tempSelectedEmployees中已经不再选中的员工
-  tempSelectedEmployees.value = tempSelectedEmployees.value.filter(emp =>
-    !currentIds.has(emp.id) || newVal.some(item => item.id === emp.id)
-  );
-
-  // 添加新选中的员工
-  newVal.forEach(emp => {
-    if (!tempSelectedEmployees.value.some(item => item.id === emp.id)) {
-      tempSelectedEmployees.value.push(emp);
+watch(
+  () => props.modelValue,
+  (newIds, oldIds) => {
+    // 判断值是否真的变化了 (通过比较JSON字符串)
+    const newIdsStr = JSON.stringify(newIds || [])
+    const oldIdsStr = JSON.stringify(oldIds || [])
+
+    if (newIdsStr !== oldIdsStr) {
+      // 获取员工详情数据
+      fetchEmployeesByIds(newIds)
     }
-  });
-}, { deep: true });
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => props.visible,
+  (val) => {
+    tempSelectedEmployees.value = []
+    currentActive.value = []
+    currentNodeName.value = ''
+
+    if (val) {
+      fetchOrganizationData()
+    }
+  },
+  { immediate: true }
+)
+// 监听选中员工变化，更新临时已选列表
+watch(
+  selectedEmployees,
+  (newVal) => {
+    // 更新临时选中列表，保留之前不在当前列表中的已选员工
+    const currentIds = new Set(newVal.map((emp) => emp.id))
+
+    // 移除tempSelectedEmployees中已经不再选中的员工
+    tempSelectedEmployees.value = tempSelectedEmployees.value.filter(
+      (emp) => !currentIds.has(emp.id) || newVal.some((item) => item.id === emp.id)
+    )
+
+    // 添加新选中的员工
+    newVal.forEach((emp) => {
+      if (!tempSelectedEmployees.value.some((item) => item.id === emp.id)) {
+        tempSelectedEmployees.value.push(emp)
+      }
+    })
+  },
+  { deep: true }
+)
 
 // 监听子部门查询开关变化
 watch(childDeptEnable, () => {
   // 如果当前在组织架构页面且有选中节点，重新加载员工列表
   if (activeTab.value === 'organization' && currentActive.value && currentActive.value.length > 0) {
-    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+    fetchEmployeesByNode(currentActive.value[0])
   }
-});
+})
 
 // 防抖函数
 const debounce = (fn, delay) => {
-  let timer = null;
+  let timer = null
   return function (...args) {
-    if (timer) clearTimeout(timer);
+    if (timer) clearTimeout(timer)
     timer = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
-  };
-};
+      fn.apply(this, args)
+    }, delay)
+  }
+}
 
 // 防抖处理过的搜索函数
 const debouncedSearch = debounce((keyword) => {
   if (keyword) {
-    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
-    const type = nodeId ? activeTab.value : null;
-    fetchEmployeesByNode(nodeId, type, keyword);
+    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null
+    fetchEmployeesByNode(nodeId, keyword)
   } else if (currentActive.value && currentActive.value.length > 0) {
     // 如果搜索框清空，恢复显示当前选中节点的员工列表
-    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+    fetchEmployeesByNode(currentActive.value[0])
   } else {
     // 如果没有选中节点，清空员工列表
-    employeeList.value = [];
+    employeeList.value = []
   }
-}, 300); // 300ms防抖
+}, 300) // 300ms防抖
 
 // 监听搜索文本变化，触发搜索
-watch(searchText, (newValue) => {
-  debouncedSearch(newValue);
-}, { immediate: false });
-
-// 组件挂载时执行
-onMounted(() => {
-  // 获取已选员工详情
-  fetchEmployeesByIds(props.modelValue);
-});
+watch(
+  searchText,
+  (newValue) => {
+    debouncedSearch(newValue)
+  },
+  { immediate: false }
+)
 
 // 处理搜索图标点击
-const handleSearchClick = () => {
+const handleSearch = () => {
   if (searchText.value) {
-    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
-    const type = nodeId ? activeTab.value : null;
-    fetchEmployeesByNode(nodeId, type, searchText.value);
+    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null
+    fetchEmployeesByNode(nodeId, searchText.value)
   }
-};
-
-// 处理回车键搜索
-const handleSearchEnter = () => {
-  if (searchText.value) {
-    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
-    const type = nodeId ? activeTab.value : null;
-    fetchEmployeesByNode(nodeId, type, searchText.value);
-  }
-};
+}
 
 // 清除搜索
 const clearSearch = () => {
-  searchText.value = '';
+  searchText.value = ''
   if (currentActive.value && currentActive.value.length > 0) {
-    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+    fetchEmployeesByNode(currentActive.value[0])
   } else {
     // 如果没有选中节点，重置员工列表但保留选中状态
-    employeeList.value = employeeList.value.map(emp => ({
+    employeeList.value = employeeList.value.map((emp) => ({
       ...emp,
-      checked: tempSelectedEmployees.value.some(item => item.id === emp.id)
-    }));
+      checked: tempSelectedEmployees.value.some((item) => item.id === emp.id)
+    }))
   }
-};
+}
 </script>
 
 <style scoped>
@@ -884,7 +858,7 @@ const clearSearch = () => {
 }
 
 .item-remove:hover {
-  color: #E34D59;
+  color: #e34d59;
 }
 
 /* 选择弹窗 */
@@ -1096,6 +1070,6 @@ const clearSearch = () => {
 }
 
 .selected-people-item .item-remove:hover {
-  color: #E34D59;
+  color: #e34d59;
 }
 </style>