@ebiz/designer-components 0.1.78 → 0.1.79

package/src/components/EbizEmployeeSelector.vue

@@ -1,1160 +1,1160 @@
-<template>
-  <div class="ebiz-employee-selector">
-    <!-- 选择框展示区 -->
-    <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
-      <slot name="selected-items" :event="{ remove: removeItem }" :data="selectedItems">
-        <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" />
-            <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
-            <span class="item-info">
-              <span class="item-code">{{ item.no }} - </span>
-              <span class="item-name">{{ item.name }}</span>
-            </span>
-            <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
-          </div>
-        </div>
-      </slot>
-
-      <t-button @click="showDialog" variant="text" theme="primary">{{ props.content }}</t-button>
-    </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-tabs v-model="activeTab" class="selector-tabs">
-        <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false"></t-tab-panel>
-        <t-tab-panel value="role" label="角色" :destroyOnHide="false"></t-tab-panel>
-        <!-- <t-tab-panel value="position" label="岗位" :destroyOnHide="false"></t-tab-panel> -->
-        <!-- <t-tab-panel value="department" label="同部门" :destroyOnHide="false"></t-tab-panel> -->
-        <!-- <t-tab-panel value="subordinate" label="我的下属" :destroyOnHide="false"></t-tab-panel> -->
-      </t-tabs>
-
-
-      <div>
-
-        <div class="selector-dialog-content">
-          <!-- 左侧选择区域 -->
-          <div class="left-panel">
-            <!-- 内容区域 -->
-            <div class="content-area">
-              <div v-if="loading" class="loading-container">
-                <t-loading />
-              </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" />
-              </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" />
-              </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" />
-              </div>
-
-              <!-- 同部门 -->
-              <div v-show="activeTab === 'department'" class="tab-content">
-                <t-list :split="true" size="small">
-                  <t-list-item v-for="(item, index) in departmentData" :key="index">
-                    <div class="department-item" @click="selectDepartment(item)">
-                      {{ item.name }}
-                    </div>
-                  </t-list-item>
-                </t-list>
-              </div>
-
-              <!-- 我的下属 -->
-              <div v-show="activeTab === 'subordinate'" class="tab-content">
-                <t-list :split="true" size="small">
-                  <t-list-item v-for="(item, index) in subordinateData" :key="index">
-                    <div class="department-item" @click="selectDepartment(item)">
-                      {{ item.name }}
-                    </div>
-                  </t-list-item>
-                </t-list>
-              </div>
-            </div>
-          </div>
-
-          <!-- 右侧人员列表区域 -->
-          <div class="right-panel">
-            <div class="employee-header">
-              <div class="employee-title">
-                {{ currentNodeName || '人员列表' }}
-                <div v-if="activeTab === 'organization'" class="sub-dept-option">
-                  <t-checkbox v-model="childDeptEnable">包含子部门</t-checkbox>
-                </div>
-              </div>
-              <div class="employee-count" v-if="!single">
-                <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
-                <span class="count-info">共 {{ employeeList.length }} 人</span>
-              </div>
-            </div>
-
-            <!-- 搜索框 -->
-            <div class="search-box">
-              <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号搜索" clearable @keyup.enter="handleSearchEnter">
-                <template #suffix-icon>
-                  <t-icon name="search" @click="handleSearchClick"></t-icon>
-                </template>
-              </t-input>
-              <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn"
-                @click="clearSearch">清除搜索</t-button>
-            </div>
-
-            <t-checkbox-group v-if="!single" v-model="tempSelectedEmployeeIds" style="width: 100%;"
-              @change="handleCheckChange">
-              <div class="employee-list">
-                <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
-                  style="cursor: pointer;">
-                  <t-checkbox :key="item.id" :value="item.id">
-                    <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
-                      <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 style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
-                        <div class="employee-info">
-                          <div class="employee-code">{{ item.no }} - </div>
-                          <div class="employee-name">{{ item.name }}</div>
-                        </div>
-                        <div class="employee-dept">
-                          <small style="color: #999;">{{ item.postName }}</small>
-                        </div>
-                      </div>
-                    </div>
-                  </t-checkbox>
-
-                </div>
-              </div>
-
-            </t-checkbox-group>
-
-            <t-radio-group v-else style="width: 100%;" v-model="tempSelectedEmployeeId" @change="handleCheckChange">
-              <div class="employee-list">
-                <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
-                  style="cursor: pointer;">
-                  <t-radio :value="item.id">
-                    <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
-                      <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 style="display: flex; align-items: center; justify-content: space-between;width: 300px;">
-                        <div class="employee-info">
-                          <div class="employee-code">{{ item.no }} - </div>
-                          <div class="employee-name">{{ item.name }}</div>
-                        </div>
-                        <div class="employee-dept">
-                          <small style="color: #999;">{{ item.postName }}</small>
-                        </div>
-                      </div>
-
-                    </div>
-                  </t-radio>
-
-                </div>
-
-              </div>
-
-            </t-radio-group>
-
-
-            <div v-if="filteredEmployeeList.length === 0" class="empty-data">
-              <t-empty />
-            </div>
-          </div>
-        </div>
-      </div>
-
-
-      <!-- 底部按钮区域 -->
-      <template #footer>
-        <div class="dialog-footer">
-          <div class="selected-preview">
-            <div class="selected-people-count" v-if="!single">
-              已选: {{ tempSelectedEmployees.length }} 人
-            </div>
-            <div class="selected-people-list" v-if="tempSelectedEmployees.length > 0">
-              <div v-for="(item, index) in tempSelectedEmployees" :key="index" class="selected-people-item">
-                <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
-                <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
-                <span class="item-info">
-                  <span class="item-code">{{ item.no }}</span>
-                  <span class="item-name">{{ item.name }}</span>
-                </span>
-                <t-icon v-if="!single" name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
-              </div>
-            </div>
-          </div>
-          <div class="dialog-actions">
-            <t-button theme="default" @click="handleCancel">取消</t-button>
-            <t-button theme="primary" @click="handleConfirm">确定</t-button>
-          </div>
-        </div>
-      </template>
-    </t-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import {
-  Dialog as TDialog,
-  Button as TButton,
-  Icon as TIcon,
-  Input as TInput,
-  Tabs as TTabs,
-  TabPanel as TTabPanel,
-  Loading as TLoading,
-  Tree as TTree,
-  Avatar as TAvatar,
-  Checkbox as TCheckbox,
-  CheckboxGroup as TCheckboxGroup,
-  Empty as TEmpty,
-  List as TList,
-  ListItem as TListItem,
-  MessagePlugin,
-  Radio as TRadio,
-  RadioGroup as TRadioGroup
-} from 'tdesign-vue-next';
-import dataService from '../apiService/simpleDataService';
-
-// 定义组件属性
-const props = defineProps({
-  // 选中的数据，支持v-model，只存储ID列表
-  showDefault: {
-    type: Boolean,
-    default: true
-  },
-  modelValue: {
-    type: Array,
-    default: undefined
-  },
-  // 单选模式
-  single: {
-    type: Boolean,
-    default: false
-  },
-  // 是否展示默认标签页
-  showDefaultTab: {
-    type: Boolean,
-    default: true
-  },
-  visible: {
-    type: Boolean,
-    default: null
-  },
-  // 是否包含部门
-  includeDepartment: {
-    type: Boolean,
-    default: false
-  },
-  // 默认标签页
-  defaultTab: {
-    type: String,
-    default: 'organization'
-  },
-  // 是否展示顶层组织
-  showRootOrg: {
-    type: Boolean,
-    default: true
-  },
-  // 最大选择数量，0表示不限制
-  maxCount: {
-    type: Number,
-    default: 0
-  },
-  content: {
-    type: String,
-    default: '选择人员'
-  },
-  // 是否显示已离职员工
-  showResigned: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// 定义组件事件
-const emit = defineEmits(['update:modelValue', 'change', 'update:visible', 'confirm']);
-const tempVisible = ref(false);
-
-const tempSelectedEmployeeIds = ref([])
-const tempSelectedEmployeeId = ref("")
-
-// 内部状态变量
-const dialogVisible = computed({
-  set(val) {
-    if (props.visible == null) {
-      tempVisible.value = val;
-      return
-    }
-    emit('update:visible', val)
-  },
-  get() {
-    return props.visible ?? tempVisible.value
-  }
-});
-
-const searchText = ref('');
-const activeTab = ref(props.defaultTab);
-const loading = ref(false);
-const selectedItems = ref([]);
-// 对话框中临时保存的选中员工列表
-const tempSelectedEmployees = ref([]);
-// 是否查询子部门
-const childDeptEnable = ref(true);
-
-// 数据源
-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 getAvatarText = (name) => {
-  return name ? name.substring(0, 1) : '';
-};
-
-const computedModelValue = computed({
-  set(val) {
-    if (props.single) {
-      if (val.length > 0) {
-        emit("update:modelValue", val[0]);
-      } else {
-        emit("update:modelValue", "");
-      }
-      return;
-    }
-    emit("update:modelValue", val);
-  },
-  get() {
-
-    let value = props.modelValue
-
-    if (props.single) {
-      if (Array.isArray(props.modelValue)) {
-        value = props.modelValue ? props.modelValue : [];
-      } else {
-        value = props.modelValue ? [props.modelValue] : [];
-      }
-    } else {
-      if (!value) {
-        value = [];
-      }
-    }
-    console.log(props.single, value)
-    value.forEach((val) => {
-      return Number(val);
-    })
-    return value;
-  }
-});
-
-// 更新全选状态
-const updateSelectAllStatus = () => {
-  selectAll.value = employeeList.value.length > 0 && employeeList.value.every(item => item.checked);
-};
-
-const updateSelectStatus = () => {
-  employeeList.value.forEach(item => {
-    item.checked = computedModelValue.value.includes(item.id);
-  })
-}
-
-// 选中的员工列表
-const selectedEmployees = computed(() => {
-  return employeeList.value.filter((item) => item.checked);
-});
-
-// 根据搜索文本过滤的员工列表
-const filteredEmployeeList = computed(() => {
-  return employeeList.value
-});
-
-
-// 获取组织架构数据
-const fetchOrganizationData = async () => {
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
-      {},
-      {
-        apiId: 1933,
-        key: 'organizationalStructure'
-      }, "/process/deptList"
-    );
-    organizationData.value = response;
-    handleActive(null, 'organization')
-    // organizationData.value = processOrgData(response.data || []);
-  } catch (error) {
-    MessagePlugin.error({
-      content: '获取组织架构数据失败',
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 获取角色数据
-const fetchRoleData = async () => {
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
-      {},
-      {},
-      '/process/roleList'
-    );
-    roleData.value = response || [];
-  } catch (error) {
-    MessagePlugin.error({
-      content: '获取角色数据失败',
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 获取岗位数据
-const fetchPositionData = async () => {
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
-      {},
-      {
-      },
-      '/process/roleList'
-    );
-    positionData.value = response?.data || [];
-  } catch (error) {
-    MessagePlugin.error({
-      content: '获取岗位数据失败',
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 获取部门数据
-const fetchDepartmentData = async () => {
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
-      {},
-      {
-        apiId: 1933,
-        key: 'departmentList',
-        apiType: 'MULTIPLE_DATA_SEARCH'
-      }
-    );
-    departmentData.value = response?.data || [];
-  } catch (error) {
-    MessagePlugin.error({
-      content: '获取部门数据失败',
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 获取下属数据
-const fetchSubordinateData = async () => {
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
-      {},
-      {
-        apiKey: 'subordinateList',
-        apiType: 'MULTIPLE_DATA_SEARCH'
-      }
-    );
-    subordinateData.value = response?.data || [];
-  } catch (error) {
-    MessagePlugin.error({
-      content: '获取下属数据失败',
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 根据节点ID获取员工列表
-const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
-  loading.value = true;
-  try {
-    const params = {};
-
-    // 只有当nodeId不为空且type有效时，添加对应参数
-    if (nodeId && type) {
-      // 添加是否显示已离职员工参数
-      params.showResigned = props.showResigned;
-      // 根据不同类型设置不同的查询参数
-      switch (type) {
-        case 'organization':
-          params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId;
-          // 添加子部门查询参数
-          params.childDeptEnable = childDeptEnable.value;
-          break;
-        case 'role':
-          params.roleKeyWork = nodeId[0];
-          break;
-        case 'position':
-          params.positionId = nodeId;
-          break;
-        case 'department':
-          params.departmentId = nodeId;
-          break;
-        case 'subordinate':
-          params.managerId = nodeId;
-          break;
-      }
-    }
-
-    // 如果有搜索关键词，添加到查询参数中
-    if (keyword) {
-      params.keyWord = keyword;
-    }
-
-    const response = await dataService.fetch(
-      params,
-      {},
-      '/process/userList'
-    );
-    // 获取当前已选择的员工ID列表
-    const selectedIds = [...new Set(tempSelectedEmployees.value.map(emp => emp.id))];
-
-    // 处理返回数据，添加checked属性，保留已选状态
-    const employees = (response || []).map(emp => ({
-      ...emp,
-      checked: selectedIds.includes(emp.id)
-    }));
-
-    employeeList.value = employees;
-
-    handleCheckChange()
-
-    updateSelectAllStatus();
-  } catch (error) {
-    MessagePlugin.error({
-      content: '获取员工列表失败',
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 根据ID列表批量获取员工信息
-const fetchEmployeesByIds = async (ids) => {
-  if (!ids || ids.length === 0) {
-    selectedItems.value = [];
-    return;
-  }
-  if (!(ids instanceof Array)) {
-    ids = [ids];
-  }
-
-  loading.value = true;
-  try {
-    const response = await dataService.fetch(
-      {
-        userIds: ids // 使用新的接口参数格式
-      },
-      {},
-      '/process/userList' // 直接使用新的API路径
-    );
-
-    if (response && Array.isArray(response)) {
-      selectedItems.value = response;
-    } else {
-      selectedItems.value = [];
-      MessagePlugin.warning({
-        content: '获取员工详情返回的数据格式不正确',
-        duration: 3000
-      });
-    }
-  } catch (error) {
-    selectedItems.value = [];
-    MessagePlugin.error({
-      content: '获取员工详情失败: ' + (error.message || '未知错误'),
-      duration: 3000
-    });
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 处理节点激活
-const handleActive = (value, context) => {
-  console.log("value", value)
-  currentActive.value = [value];
-  currentNodeName.value = context.node?.label || '';
-
-  // 获取该节点下的员工
-  fetchEmployeesByNode(value, activeTab.value);
-};
-
-// 选择部门
-const selectDepartment = (department) => {
-  currentNodeName.value = department.name;
-  fetchEmployeesByNode(department.id, activeTab.value);
-};
-
-// 处理全选
-const handleSelectAll = (checked) => {
-  if (!checked) {
-    // 移除当前页的选择
-    employeeList.value.forEach(item => {
-      console.log("item", item, (tempSelectedEmployees.value.indexOf(item.id) !== -1))
-      if (tempSelectedEmployeeIds.value.indexOf(item.id) !== -1) {
-        tempSelectedEmployeeIds.value.splice(tempSelectedEmployeeIds.value.indexOf(item.id), 1);
-      }
-    });
-    handleCheckChange()
-  } else {
-    employeeList.value.forEach(item => {
-
-      // 如果选中，确保添加到临时选中列表
-      if (!tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
-        tempSelectedEmployees.value.push(item);
-        tempSelectedEmployeeIds.value.push(item.id);
-      }
-    });
-  }
-
-};
-
-// 处理选中状态变更
-const handleCheckChange = () => {
-  console.log("tempSelectedEmployeeIds", tempSelectedEmployeeIds.value)
-  // 单选模式下，取消其他选中
-  const selectedEmployees = []
-
-  if (props.single) {
-    console.log("single", tempSelectedEmployeeId.value)
-    employeeList.value.forEach(emp => {
-      if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
-        selectedEmployees.push(emp)
-      }
-    });
-    if (selectedEmployees.length === 0) {
-      selectedItems.value.forEach(emp => {
-        if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
-          selectedEmployees.push(emp)
-        }
-      });
-    }
-    if (selectedEmployees.length === 0) {
-      tempSelectedEmployees.value.forEach(emp => {
-        if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
-          selectedEmployees.push(emp)
-        }
-      });
-    }
-
-  } else {
-    const handled = [];
-    console.log("multi", tempSelectedEmployeeIds.value)
-
-    tempSelectedEmployees.value.forEach(emp => {
-      if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1) {
-        selectedEmployees.push(emp)
-        handled.push(emp.id)
-      }
-    });
-    employeeList.value.forEach(emp => {
-      if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
-        selectedEmployees.push(emp)
-        handled.push(emp.id)
-      }
-    });
-    selectedItems.value.forEach(emp => {
-      if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
-        selectedEmployees.push(emp)
-        handled.push(emp.id)
-      }
-    });
-  }
-  tempSelectedEmployees.value = selectedEmployees
-  updateSelectAllStatus();
-};
-
-// 移除已选择的项目
-const removeItem = (index, id) => {
-  // 移除ID
-  const newIds = [...computedModelValue.value];
-  const idIndex = newIds.indexOf(id);
-  if (idIndex !== -1) {
-    newIds.splice(idIndex, 1);
-    emit('update:modelValue', newIds);
-    emit('change', newIds);
-  }
-  // 移除展示项
-  selectedItems.value.splice(index, 1);
-};
-
-// 从已选列表中移除员工
-const removeSelectedEmployee = (employee) => {
-  // 从临时选中列表中移除
-  const index = tempSelectedEmployeeIds.value.findIndex(id => employee.id === id);
-  if (index !== -1) {
-    tempSelectedEmployeeIds.value.splice(index, 1);
-  }
-
-  handleCheckChange()
-
-  // 更新全选状态
-  updateSelectAllStatus();
-};
-
-// 初始化选择器
-const initSelector = async () => {
-  // 获取数据
-  if (activeTab.value === 'organization' && organizationData.value.length === 0) {
-    await fetchOrganizationData();
-  } else if (activeTab.value === 'role' && roleData.value.length === 0) {
-    await fetchRoleData();
-  } else if (activeTab.value === 'position' && positionData.value.length === 0) {
-    await fetchPositionData();
-  } else if (activeTab.value === 'department' && departmentData.value.length === 0) {
-    await fetchDepartmentData();
-  } else if (activeTab.value === 'subordinate' && subordinateData.value.length === 0) {
-    await fetchSubordinateData();
-  }
-};
-
-// 显示对话框
-const showDialog = () => {
-  // 初始化临时选中列表
-  if (props.single) {
-    tempSelectedEmployeeId.value = props.modelValue || []
-  } else {
-    tempSelectedEmployeeIds.value = props.modelValue || []
-  }
-
-  // 初始化数据
-  if (props.visible == null) {
-    initSelector();
-  }
-
-  handleCheckChange()
-
-  dialogVisible.value = true;
-
-};
-
-// 确认选择
-const handleConfirm = () => {
-  const selectedEmployeeIds = tempSelectedEmployees.value.map(item => item.id);
-
-  computedModelValue.value = selectedEmployeeIds;
-  if (props.single) {
-    emit('change', selectedEmployeeIds[0]);
-    emit('confirm', selectedEmployeeIds[0]);
-  } else {
-    emit('change', selectedEmployeeIds);
-    emit('confirm', selectedEmployeeIds);
-  }
-  dialogVisible.value = false;
-};
-
-// 取消选择
-const handleCancel = () => {
-  // 放弃临时选择
-  tempSelectedEmployees.value = [];
-  dialogVisible.value = false;
-};
-
-// 监听标签页切换
-watch(activeTab, () => {
-  // 切换标签页时重新加载数据
-  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(childDeptEnable, () => {
-  // 如果当前在组织架构页面且有选中节点，重新加载员工列表
-  if (activeTab.value === 'organization' && currentActive.value && currentActive.value.length > 0) {
-    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
-  }
-});
-
-// 防抖函数
-const debounce = (fn, delay) => {
-  let timer = null;
-  return function (...args) {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      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);
-  } else if (currentActive.value && currentActive.value.length > 0) {
-    // 如果搜索框清空，恢复显示当前选中节点的员工列表
-    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
-  } else {
-    // 如果没有选中节点，清空员工列表
-    employeeList.value = [];
-  }
-}, 300); // 300ms防抖
-
-// 监听搜索文本变化，触发搜索
-watch(searchText, (newValue) => {
-  debouncedSearch(newValue);
-}, { immediate: false });
-
-// 组件挂载时执行
-onMounted(() => {
-  // 获取已选员工详情
-  fetchEmployeesByIds(computedModelValue.value);
-});
-
-// 处理搜索图标点击
-const handleSearchClick = () => {
-  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 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 = '';
-  if (currentActive.value && currentActive.value.length > 0) {
-    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
-  }
-};
-</script>
-
-<style scoped>
-.ebiz-employee-selector {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 选择框展示区 */
-.employee-selector-container {
-  min-height: 32px;
-  width: 100%;
-  border: 1px solid #dcdcdc;
-  border-radius: 3px;
-  padding: 4px 8px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.selected-items {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.selected-item {
-  display: flex;
-  align-items: center;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  padding: 2px 8px 2px 2px;
-  gap: 8px;
-}
-
-.item-info {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.item-code {
-  color: #999;
-  font-size: 12px;
-}
-
-.item-name {
-  font-size: 14px;
-}
-
-.item-remove {
-  cursor: pointer;
-  color: #999;
-  font-size: 12px;
-}
-
-.item-remove:hover {
-  color: #E34D59;
-}
-
-/* 选择弹窗 */
-.selector-dialog-content {
-  display: flex;
-  height: 500px;
-}
-
-.left-panel,
-.right-panel {
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.left-panel {
-  width: 40%;
-  border-right: 1px solid #dcdcdc;
-  padding-right: 16px;
-}
-
-.right-panel {
-  width: 60%;
-  padding-left: 16px;
-}
-
-.search-box {
-  margin-bottom: 16px;
-}
-
-.right-panel .search-box {
-  margin-top: 8px;
-  margin-bottom: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.right-panel .search-box .t-input {
-  width: 100%;
-  border-radius: 4px;
-}
-
-.right-panel .search-box .t-input__suffix-icon {
-  cursor: pointer;
-}
-
-.right-panel .search-box .t-input__suffix-icon:hover {
-  color: var(--td-brand-color);
-}
-
-.selector-tabs {
-  margin-bottom: 16px;
-}
-
-.content-area {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-}
-
-.loading-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(255, 255, 255, 0.6);
-  z-index: 1;
-}
-
-.tab-content {
-  height: 100%;
-  overflow: auto;
-}
-
-.department-item {
-  cursor: pointer;
-  padding: 8px;
-}
-
-.department-item:hover {
-  background-color: #f5f5f5;
-}
-
-.employee-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.employee-title {
-  font-weight: bold;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.sub-dept-option {
-  margin-left: 10px;
-  font-weight: normal;
-  font-size: 14px;
-}
-
-.employee-count {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.count-info {
-  color: #999;
-  font-size: 14px;
-}
-
-.employee-list {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  height: 400px;
-}
-
-.employee-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  border-radius: 4px;
-}
-
-.employee-item:hover {
-  background-color: #f5f5f5;
-}
-
-.employee-avatar {
-  display: flex;
-  align-items: center;
-}
-
-.employee-info {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.employee-code {
-  color: #999;
-  font-size: 12px;
-}
-
-.employee-name {
-  font-size: 14px;
-}
-
-.empty-data {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 0;
-}
-
-.selected-preview {
-  color: #666;
-}
-
-.dialog-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.selected-people-list {
-  margin-top: 8px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.selected-people-item {
-  display: flex;
-  align-items: center;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  padding: 2px 8px 2px 2px;
-  gap: 8px;
-}
-
-.selected-people-item:hover {
-  background-color: #e0e0e0;
-}
-
-.selected-people-item .item-remove {
-  cursor: pointer;
-  color: #999;
-  font-size: 12px;
-}
-
-.selected-people-item .item-remove:hover {
-  color: #E34D59;
-}
+<template>
+  <div class="ebiz-employee-selector">
+    <!-- 选择框展示区 -->
+    <div v-if="showDefault" style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
+      <slot name="selected-items" :event="{ remove: removeItem }" :data="selectedItems">
+        <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" />
+            <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
+            <span class="item-info">
+              <span class="item-code">{{ item.no }} - </span>
+              <span class="item-name">{{ item.name }}</span>
+            </span>
+            <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
+          </div>
+        </div>
+      </slot>
+
+      <t-button @click="showDialog" variant="text" theme="primary">{{ props.content }}</t-button>
+    </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-tabs v-model="activeTab" class="selector-tabs">
+        <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false"></t-tab-panel>
+        <t-tab-panel value="role" label="角色" :destroyOnHide="false"></t-tab-panel>
+        <!-- <t-tab-panel value="position" label="岗位" :destroyOnHide="false"></t-tab-panel> -->
+        <!-- <t-tab-panel value="department" label="同部门" :destroyOnHide="false"></t-tab-panel> -->
+        <!-- <t-tab-panel value="subordinate" label="我的下属" :destroyOnHide="false"></t-tab-panel> -->
+      </t-tabs>
+
+
+      <div>
+
+        <div class="selector-dialog-content">
+          <!-- 左侧选择区域 -->
+          <div class="left-panel">
+            <!-- 内容区域 -->
+            <div class="content-area">
+              <div v-if="loading" class="loading-container">
+                <t-loading />
+              </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" />
+              </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" />
+              </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" />
+              </div>
+
+              <!-- 同部门 -->
+              <div v-show="activeTab === 'department'" class="tab-content">
+                <t-list :split="true" size="small">
+                  <t-list-item v-for="(item, index) in departmentData" :key="index">
+                    <div class="department-item" @click="selectDepartment(item)">
+                      {{ item.name }}
+                    </div>
+                  </t-list-item>
+                </t-list>
+              </div>
+
+              <!-- 我的下属 -->
+              <div v-show="activeTab === 'subordinate'" class="tab-content">
+                <t-list :split="true" size="small">
+                  <t-list-item v-for="(item, index) in subordinateData" :key="index">
+                    <div class="department-item" @click="selectDepartment(item)">
+                      {{ item.name }}
+                    </div>
+                  </t-list-item>
+                </t-list>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧人员列表区域 -->
+          <div class="right-panel">
+            <div class="employee-header">
+              <div class="employee-title">
+                {{ currentNodeName || '人员列表' }}
+                <div v-if="activeTab === 'organization'" class="sub-dept-option">
+                  <t-checkbox v-model="childDeptEnable">包含子部门</t-checkbox>
+                </div>
+              </div>
+              <div class="employee-count" v-if="!single">
+                <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
+                <span class="count-info">共 {{ employeeList.length }} 人</span>
+              </div>
+            </div>
+
+            <!-- 搜索框 -->
+            <div class="search-box">
+              <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号搜索" clearable @keyup.enter="handleSearchEnter">
+                <template #suffix-icon>
+                  <t-icon name="search" @click="handleSearchClick"></t-icon>
+                </template>
+              </t-input>
+              <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn"
+                @click="clearSearch">清除搜索</t-button>
+            </div>
+
+            <t-checkbox-group v-if="!single" v-model="tempSelectedEmployeeIds" style="width: 100%;"
+              @change="handleCheckChange">
+              <div class="employee-list">
+                <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
+                  style="cursor: pointer;">
+                  <t-checkbox :key="item.id" :value="item.id">
+                    <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
+                      <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 style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
+                        <div class="employee-info">
+                          <div class="employee-code">{{ item.no }} - </div>
+                          <div class="employee-name">{{ item.name }}</div>
+                        </div>
+                        <div class="employee-dept">
+                          <small style="color: #999;">{{ item.postName }}</small>
+                        </div>
+                      </div>
+                    </div>
+                  </t-checkbox>
+
+                </div>
+              </div>
+
+            </t-checkbox-group>
+
+            <t-radio-group v-else style="width: 100%;" v-model="tempSelectedEmployeeId" @change="handleCheckChange">
+              <div class="employee-list">
+                <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item"
+                  style="cursor: pointer;">
+                  <t-radio :value="item.id">
+                    <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
+                      <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 style="display: flex; align-items: center; justify-content: space-between;width: 300px;">
+                        <div class="employee-info">
+                          <div class="employee-code">{{ item.no }} - </div>
+                          <div class="employee-name">{{ item.name }}</div>
+                        </div>
+                        <div class="employee-dept">
+                          <small style="color: #999;">{{ item.postName }}</small>
+                        </div>
+                      </div>
+
+                    </div>
+                  </t-radio>
+
+                </div>
+
+              </div>
+
+            </t-radio-group>
+
+
+            <div v-if="filteredEmployeeList.length === 0" class="empty-data">
+              <t-empty />
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- 底部按钮区域 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="selected-preview">
+            <div class="selected-people-count" v-if="!single">
+              已选: {{ tempSelectedEmployees.length }} 人
+            </div>
+            <div class="selected-people-list" v-if="tempSelectedEmployees.length > 0">
+              <div v-for="(item, index) in tempSelectedEmployees" :key="index" class="selected-people-item">
+                <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
+                <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
+                <span class="item-info">
+                  <span class="item-code">{{ item.no }}</span>
+                  <span class="item-name">{{ item.name }}</span>
+                </span>
+                <t-icon v-if="!single" name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
+              </div>
+            </div>
+          </div>
+          <div class="dialog-actions">
+            <t-button theme="default" @click="handleCancel">取消</t-button>
+            <t-button theme="primary" @click="handleConfirm">确定</t-button>
+          </div>
+        </div>
+      </template>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import {
+  Dialog as TDialog,
+  Button as TButton,
+  Icon as TIcon,
+  Input as TInput,
+  Tabs as TTabs,
+  TabPanel as TTabPanel,
+  Loading as TLoading,
+  Tree as TTree,
+  Avatar as TAvatar,
+  Checkbox as TCheckbox,
+  CheckboxGroup as TCheckboxGroup,
+  Empty as TEmpty,
+  List as TList,
+  ListItem as TListItem,
+  MessagePlugin,
+  Radio as TRadio,
+  RadioGroup as TRadioGroup
+} from 'tdesign-vue-next';
+import dataService from '../apiService/simpleDataService';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中的数据，支持v-model，只存储ID列表
+  showDefault: {
+    type: Boolean,
+    default: true
+  },
+  modelValue: {
+    type: Array,
+    default: undefined
+  },
+  // 单选模式
+  single: {
+    type: Boolean,
+    default: false
+  },
+  // 是否展示默认标签页
+  showDefaultTab: {
+    type: Boolean,
+    default: true
+  },
+  visible: {
+    type: Boolean,
+    default: null
+  },
+  // 是否包含部门
+  includeDepartment: {
+    type: Boolean,
+    default: false
+  },
+  // 默认标签页
+  defaultTab: {
+    type: String,
+    default: 'organization'
+  },
+  // 是否展示顶层组织
+  showRootOrg: {
+    type: Boolean,
+    default: true
+  },
+  // 最大选择数量，0表示不限制
+  maxCount: {
+    type: Number,
+    default: 0
+  },
+  content: {
+    type: String,
+    default: '选择人员'
+  },
+  // 是否显示已离职员工
+  showResigned: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits(['update:modelValue', 'change', 'update:visible', 'confirm']);
+const tempVisible = ref(false);
+
+const tempSelectedEmployeeIds = ref([])
+const tempSelectedEmployeeId = ref("")
+
+// 内部状态变量
+const dialogVisible = computed({
+  set(val) {
+    if (props.visible == null) {
+      tempVisible.value = val;
+      return
+    }
+    emit('update:visible', val)
+  },
+  get() {
+    return props.visible ?? tempVisible.value
+  }
+});
+
+const searchText = ref('');
+const activeTab = ref(props.defaultTab);
+const loading = ref(false);
+const selectedItems = ref([]);
+// 对话框中临时保存的选中员工列表
+const tempSelectedEmployees = ref([]);
+// 是否查询子部门
+const childDeptEnable = ref(true);
+
+// 数据源
+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 getAvatarText = (name) => {
+  return name ? name.substring(0, 1) : '';
+};
+
+const computedModelValue = computed({
+  set(val) {
+    if (props.single) {
+      if (val.length > 0) {
+        emit("update:modelValue", val[0]);
+      } else {
+        emit("update:modelValue", "");
+      }
+      return;
+    }
+    emit("update:modelValue", val);
+  },
+  get() {
+
+    let value = props.modelValue
+
+    if (props.single) {
+      if (Array.isArray(props.modelValue)) {
+        value = props.modelValue ? props.modelValue : [];
+      } else {
+        value = props.modelValue ? [props.modelValue] : [];
+      }
+    } else {
+      if (!value) {
+        value = [];
+      }
+    }
+    console.log(props.single, value)
+    value.forEach((val) => {
+      return Number(val);
+    })
+    return value;
+  }
+});
+
+// 更新全选状态
+const updateSelectAllStatus = () => {
+  selectAll.value = employeeList.value.length > 0 && employeeList.value.every(item => item.checked);
+};
+
+const updateSelectStatus = () => {
+  employeeList.value.forEach(item => {
+    item.checked = computedModelValue.value.includes(item.id);
+  })
+}
+
+// 选中的员工列表
+const selectedEmployees = computed(() => {
+  return employeeList.value.filter((item) => item.checked);
+});
+
+// 根据搜索文本过滤的员工列表
+const filteredEmployeeList = computed(() => {
+  return employeeList.value
+});
+
+
+// 获取组织架构数据
+const fetchOrganizationData = async () => {
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {},
+      {
+        apiId: 1933,
+        key: 'organizationalStructure'
+      }, "/process/deptList"
+    );
+    organizationData.value = response;
+    handleActive(null, 'organization')
+    // organizationData.value = processOrgData(response.data || []);
+  } catch (error) {
+    MessagePlugin.error({
+      content: '获取组织架构数据失败',
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取角色数据
+const fetchRoleData = async () => {
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {},
+      {},
+      '/process/roleList'
+    );
+    roleData.value = response || [];
+  } catch (error) {
+    MessagePlugin.error({
+      content: '获取角色数据失败',
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取岗位数据
+const fetchPositionData = async () => {
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {},
+      {
+      },
+      '/process/roleList'
+    );
+    positionData.value = response?.data || [];
+  } catch (error) {
+    MessagePlugin.error({
+      content: '获取岗位数据失败',
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取部门数据
+const fetchDepartmentData = async () => {
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {},
+      {
+        apiId: 1933,
+        key: 'departmentList',
+        apiType: 'MULTIPLE_DATA_SEARCH'
+      }
+    );
+    departmentData.value = response?.data || [];
+  } catch (error) {
+    MessagePlugin.error({
+      content: '获取部门数据失败',
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取下属数据
+const fetchSubordinateData = async () => {
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {},
+      {
+        apiKey: 'subordinateList',
+        apiType: 'MULTIPLE_DATA_SEARCH'
+      }
+    );
+    subordinateData.value = response?.data || [];
+  } catch (error) {
+    MessagePlugin.error({
+      content: '获取下属数据失败',
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 根据节点ID获取员工列表
+const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
+  loading.value = true;
+  try {
+    const params = {};
+
+    // 只有当nodeId不为空且type有效时，添加对应参数
+    if (nodeId && type) {
+      // 添加是否显示已离职员工参数
+      params.showResigned = props.showResigned;
+      // 根据不同类型设置不同的查询参数
+      switch (type) {
+        case 'organization':
+          params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId;
+          // 添加子部门查询参数
+          params.childDeptEnable = childDeptEnable.value;
+          break;
+        case 'role':
+          params.roleKeyWork = nodeId[0];
+          break;
+        case 'position':
+          params.positionId = nodeId;
+          break;
+        case 'department':
+          params.departmentId = nodeId;
+          break;
+        case 'subordinate':
+          params.managerId = nodeId;
+          break;
+      }
+    }
+
+    // 如果有搜索关键词，添加到查询参数中
+    if (keyword) {
+      params.keyWord = keyword;
+    }
+
+    const response = await dataService.fetch(
+      params,
+      {},
+      '/process/userList'
+    );
+    // 获取当前已选择的员工ID列表
+    const selectedIds = [...new Set(tempSelectedEmployees.value.map(emp => emp.id))];
+
+    // 处理返回数据，添加checked属性，保留已选状态
+    const employees = (response || []).map(emp => ({
+      ...emp,
+      checked: selectedIds.includes(emp.id)
+    }));
+
+    employeeList.value = employees;
+
+    handleCheckChange()
+
+    updateSelectAllStatus();
+  } catch (error) {
+    MessagePlugin.error({
+      content: '获取员工列表失败',
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 根据ID列表批量获取员工信息
+const fetchEmployeesByIds = async (ids) => {
+  if (!ids || ids.length === 0) {
+    selectedItems.value = [];
+    return;
+  }
+  if (!(ids instanceof Array)) {
+    ids = [ids];
+  }
+
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {
+        userIds: ids // 使用新的接口参数格式
+      },
+      {},
+      '/process/userList' // 直接使用新的API路径
+    );
+
+    if (response && Array.isArray(response)) {
+      selectedItems.value = response;
+    } else {
+      selectedItems.value = [];
+      MessagePlugin.warning({
+        content: '获取员工详情返回的数据格式不正确',
+        duration: 3000
+      });
+    }
+  } catch (error) {
+    selectedItems.value = [];
+    MessagePlugin.error({
+      content: '获取员工详情失败: ' + (error.message || '未知错误'),
+      duration: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 处理节点激活
+const handleActive = (value, context) => {
+  console.log("value", value)
+  currentActive.value = [value];
+  currentNodeName.value = context.node?.label || '';
+
+  // 获取该节点下的员工
+  fetchEmployeesByNode(value, activeTab.value);
+};
+
+// 选择部门
+const selectDepartment = (department) => {
+  currentNodeName.value = department.name;
+  fetchEmployeesByNode(department.id, activeTab.value);
+};
+
+// 处理全选
+const handleSelectAll = (checked) => {
+  if (!checked) {
+    // 移除当前页的选择
+    employeeList.value.forEach(item => {
+      console.log("item", item, (tempSelectedEmployees.value.indexOf(item.id) !== -1))
+      if (tempSelectedEmployeeIds.value.indexOf(item.id) !== -1) {
+        tempSelectedEmployeeIds.value.splice(tempSelectedEmployeeIds.value.indexOf(item.id), 1);
+      }
+    });
+    handleCheckChange()
+  } else {
+    employeeList.value.forEach(item => {
+
+      // 如果选中，确保添加到临时选中列表
+      if (!tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
+        tempSelectedEmployees.value.push(item);
+        tempSelectedEmployeeIds.value.push(item.id);
+      }
+    });
+  }
+
+};
+
+// 处理选中状态变更
+const handleCheckChange = () => {
+  console.log("tempSelectedEmployeeIds", tempSelectedEmployeeIds.value)
+  // 单选模式下，取消其他选中
+  const selectedEmployees = []
+
+  if (props.single) {
+    console.log("single", tempSelectedEmployeeId.value)
+    employeeList.value.forEach(emp => {
+      if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
+        selectedEmployees.push(emp)
+      }
+    });
+    if (selectedEmployees.length === 0) {
+      selectedItems.value.forEach(emp => {
+        if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
+          selectedEmployees.push(emp)
+        }
+      });
+    }
+    if (selectedEmployees.length === 0) {
+      tempSelectedEmployees.value.forEach(emp => {
+        if (Number(emp.id) === Number(tempSelectedEmployeeId.value)) {
+          selectedEmployees.push(emp)
+        }
+      });
+    }
+
+  } else {
+    const handled = [];
+    console.log("multi", tempSelectedEmployeeIds.value)
+
+    tempSelectedEmployees.value.forEach(emp => {
+      if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1) {
+        selectedEmployees.push(emp)
+        handled.push(emp.id)
+      }
+    });
+    employeeList.value.forEach(emp => {
+      if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
+        selectedEmployees.push(emp)
+        handled.push(emp.id)
+      }
+    });
+    selectedItems.value.forEach(emp => {
+      if (tempSelectedEmployeeIds.value.indexOf(emp.id) !== -1 && handled.indexOf(emp.id) === -1) {
+        selectedEmployees.push(emp)
+        handled.push(emp.id)
+      }
+    });
+  }
+  tempSelectedEmployees.value = selectedEmployees
+  updateSelectAllStatus();
+};
+
+// 移除已选择的项目
+const removeItem = (index, id) => {
+  // 移除ID
+  const newIds = [...computedModelValue.value];
+  const idIndex = newIds.indexOf(id);
+  if (idIndex !== -1) {
+    newIds.splice(idIndex, 1);
+    emit('update:modelValue', newIds);
+    emit('change', newIds);
+  }
+  // 移除展示项
+  selectedItems.value.splice(index, 1);
+};
+
+// 从已选列表中移除员工
+const removeSelectedEmployee = (employee) => {
+  // 从临时选中列表中移除
+  const index = tempSelectedEmployeeIds.value.findIndex(id => employee.id === id);
+  if (index !== -1) {
+    tempSelectedEmployeeIds.value.splice(index, 1);
+  }
+
+  handleCheckChange()
+
+  // 更新全选状态
+  updateSelectAllStatus();
+};
+
+// 初始化选择器
+const initSelector = async () => {
+  // 获取数据
+  if (activeTab.value === 'organization' && organizationData.value.length === 0) {
+    await fetchOrganizationData();
+  } else if (activeTab.value === 'role' && roleData.value.length === 0) {
+    await fetchRoleData();
+  } else if (activeTab.value === 'position' && positionData.value.length === 0) {
+    await fetchPositionData();
+  } else if (activeTab.value === 'department' && departmentData.value.length === 0) {
+    await fetchDepartmentData();
+  } else if (activeTab.value === 'subordinate' && subordinateData.value.length === 0) {
+    await fetchSubordinateData();
+  }
+};
+
+// 显示对话框
+const showDialog = () => {
+  // 初始化临时选中列表
+  if (props.single) {
+    tempSelectedEmployeeId.value = props.modelValue || []
+  } else {
+    tempSelectedEmployeeIds.value = props.modelValue || []
+  }
+
+  // 初始化数据
+  if (props.visible == null) {
+    initSelector();
+  }
+
+  handleCheckChange()
+
+  dialogVisible.value = true;
+
+};
+
+// 确认选择
+const handleConfirm = () => {
+  const selectedEmployeeIds = tempSelectedEmployees.value.map(item => item.id);
+
+  computedModelValue.value = selectedEmployeeIds;
+  if (props.single) {
+    emit('change', selectedEmployeeIds[0]);
+    emit('confirm', selectedEmployeeIds[0]);
+  } else {
+    emit('change', selectedEmployeeIds);
+    emit('confirm', selectedEmployeeIds);
+  }
+  dialogVisible.value = false;
+};
+
+// 取消选择
+const handleCancel = () => {
+  // 放弃临时选择
+  tempSelectedEmployees.value = [];
+  dialogVisible.value = false;
+};
+
+// 监听标签页切换
+watch(activeTab, () => {
+  // 切换标签页时重新加载数据
+  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(childDeptEnable, () => {
+  // 如果当前在组织架构页面且有选中节点，重新加载员工列表
+  if (activeTab.value === 'organization' && currentActive.value && currentActive.value.length > 0) {
+    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+  }
+});
+
+// 防抖函数
+const debounce = (fn, delay) => {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      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);
+  } else if (currentActive.value && currentActive.value.length > 0) {
+    // 如果搜索框清空，恢复显示当前选中节点的员工列表
+    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+  } else {
+    // 如果没有选中节点，清空员工列表
+    employeeList.value = [];
+  }
+}, 300); // 300ms防抖
+
+// 监听搜索文本变化，触发搜索
+watch(searchText, (newValue) => {
+  debouncedSearch(newValue);
+}, { immediate: false });
+
+// 组件挂载时执行
+onMounted(() => {
+  // 获取已选员工详情
+  fetchEmployeesByIds(computedModelValue.value);
+});
+
+// 处理搜索图标点击
+const handleSearchClick = () => {
+  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 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 = '';
+  if (currentActive.value && currentActive.value.length > 0) {
+    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+  }
+};
+</script>
+
+<style scoped>
+.ebiz-employee-selector {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 选择框展示区 */
+.employee-selector-container {
+  min-height: 32px;
+  width: 100%;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  padding: 4px 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  padding: 2px 8px 2px 2px;
+  gap: 8px;
+}
+
+.item-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.item-code {
+  color: #999;
+  font-size: 12px;
+}
+
+.item-name {
+  font-size: 14px;
+}
+
+.item-remove {
+  cursor: pointer;
+  color: #999;
+  font-size: 12px;
+}
+
+.item-remove:hover {
+  color: #E34D59;
+}
+
+/* 选择弹窗 */
+.selector-dialog-content {
+  display: flex;
+  height: 500px;
+}
+
+.left-panel,
+.right-panel {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.left-panel {
+  width: 40%;
+  border-right: 1px solid #dcdcdc;
+  padding-right: 16px;
+}
+
+.right-panel {
+  width: 60%;
+  padding-left: 16px;
+}
+
+.search-box {
+  margin-bottom: 16px;
+}
+
+.right-panel .search-box {
+  margin-top: 8px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.right-panel .search-box .t-input {
+  width: 100%;
+  border-radius: 4px;
+}
+
+.right-panel .search-box .t-input__suffix-icon {
+  cursor: pointer;
+}
+
+.right-panel .search-box .t-input__suffix-icon:hover {
+  color: var(--td-brand-color);
+}
+
+.selector-tabs {
+  margin-bottom: 16px;
+}
+
+.content-area {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+.loading-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 1;
+}
+
+.tab-content {
+  height: 100%;
+  overflow: auto;
+}
+
+.department-item {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.department-item:hover {
+  background-color: #f5f5f5;
+}
+
+.employee-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.employee-title {
+  font-weight: bold;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sub-dept-option {
+  margin-left: 10px;
+  font-weight: normal;
+  font-size: 14px;
+}
+
+.employee-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.count-info {
+  color: #999;
+  font-size: 14px;
+}
+
+.employee-list {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 400px;
+}
+
+.employee-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.employee-item:hover {
+  background-color: #f5f5f5;
+}
+
+.employee-avatar {
+  display: flex;
+  align-items: center;
+}
+
+.employee-info {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.employee-code {
+  color: #999;
+  font-size: 12px;
+}
+
+.employee-name {
+  font-size: 14px;
+}
+
+.empty-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.selected-preview {
+  color: #666;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.selected-people-list {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-people-item {
+  display: flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  padding: 2px 8px 2px 2px;
+  gap: 8px;
+}
+
+.selected-people-item:hover {
+  background-color: #e0e0e0;
+}
+
+.selected-people-item .item-remove {
+  cursor: pointer;
+  color: #999;
+  font-size: 12px;
+}
+
+.selected-people-item .item-remove:hover {
+  color: #E34D59;
+}
 </style>