@ebiz/designer-components 0.0.39 → 0.0.40

package/src/components/EbizEmployeeSelector.vue

@@ -0,0 +1,825 @@
+<template>
+  <div class="ebiz-employee-selector">
+    <!-- 选择框展示区 -->
+    <div>
+      <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.code }}</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>
+      <t-button @click="showDialog" variant="text" theme="primary" size="small"> 选择人员 </t-button>
+    </div>
+
+    <!-- 选择弹窗 -->
+    <t-dialog v-model:visible="dialogVisible" header="选择人员" :width="800" :footer="false" :close-btn="true"
+      :close-on-esc-keydown="true" :close-on-overlay-click="true">
+
+      <!-- 选项卡 -->
+      <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="search-box">
+              <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号" clearable>
+                <template #suffix-icon>
+                  <t-icon name="search"></t-icon>
+                </template>
+              </t-input>
+            </div>
+
+            <!-- 内容区域 -->
+            <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: 'id' }" 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>
+              <div class="employee-count">
+                <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
+                <span class="count-info">共 {{ employeeList.length }} 人</span>
+              </div>
+            </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 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.code }}</div>
+                  <div class="employee-name">{{ item.name }}</div>
+                </div>
+              </div>
+              <div v-if="filteredEmployeeList.length === 0" class="empty-data">
+                <t-empty />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- 底部按钮区域 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="selected-preview">
+            已选: {{ selectedEmployees.length }} 人
+          </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,
+  Empty as TEmpty,
+  List as TList,
+  ListItem as TListItem,
+  MessagePlugin
+} from 'tdesign-vue-next';
+import dataService from '../apiService/simpleDataService';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中的数据，支持v-model，只存储ID列表
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 单选模式
+  single: {
+    type: Boolean,
+    default: false
+  },
+  // 是否包含部门
+  includeDepartment: {
+    type: Boolean,
+    default: false
+  },
+  // 默认标签页
+  defaultTab: {
+    type: String,
+    default: 'organization'
+  },
+  // 是否展示顶层组织
+  showRootOrg: {
+    type: Boolean,
+    default: true
+  },
+  // 最大选择数量，0表示不限制
+  maxCount: {
+    type: Number,
+    default: 0
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 内部状态变量
+const dialogVisible = ref(false);
+const searchText = ref('');
+const activeTab = ref(props.defaultTab);
+const loading = ref(false);
+const selectedItems = ref([]);
+
+// 数据源
+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 isEmployeeSelected = (employee) => {
+  return props.modelValue && props.modelValue.includes(employee.id);
+};
+
+// 处理组织数据，转换为树形结构
+const processOrgData = (data) => {
+  console.log(data);
+  // 转换数据结构为树形结构
+  const map = {};
+  const result = [];
+
+  data.forEach(item => {
+    map[item.id] = {
+      ...item,
+      name: item.name,
+      id: item.id,
+      children: []
+    };
+  });
+
+  data.forEach(item => {
+    const node = map[item.id];
+    
+    if (item.manager_dept && map[item.manager_dept]) {
+      map[item.manager_dept].children.push(node);
+    } else {
+      // 只有在显示根组织或不存在父节点时才添加到结果中
+      if (props.showRootOrg || !item.manager_dept) {
+        result.push(node);
+      }
+    }
+  });
+
+  console.log(result);
+
+  return result;
+};
+
+// 更新全选状态
+const updateSelectAllStatus = () => {
+  selectAll.value = employeeList.value.length > 0 && employeeList.value.every(item => item.checked);
+};
+
+// 选中的员工列表
+const selectedEmployees = computed(() => {
+  return employeeList.value.filter((item) => item.checked);
+});
+
+// 根据搜索文本过滤的员工列表
+const filteredEmployeeList = computed(() => {
+  if (!searchText.value) {
+    return employeeList.value;
+  }
+  
+  const keyword = searchText.value.toLowerCase();
+  return employeeList.value.filter((item) => {
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      (item.pinyin && item.pinyin.toLowerCase().includes(keyword)) ||
+      (item.code && item.code.toLowerCase().includes(keyword))
+    );
+  });
+});
+
+// 获取组织架构数据
+const fetchOrganizationData = async () => {
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {},
+      {
+        apiId: 1933,
+        key: 'organizationalStructure'
+      }
+    );
+    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) => {
+  loading.value = true;
+  employeeList.value = [];
+  
+  try {
+    const params = {};
+    
+    // 根据不同类型设置不同的查询参数
+    switch (type) {
+      case 'organization':
+        params.deptId = nodeId[0];
+        break;
+      case 'role':
+        params.roleId = nodeId;
+        break;
+      case 'position':
+        params.positionId = nodeId;
+        break;
+      case 'department':
+        params.departmentId = nodeId;
+        break;
+      case 'subordinate':
+        params.managerId = nodeId;
+        break;
+    }
+    
+    const response = await dataService.fetch(
+      params,
+      {},
+      '/process/userList' // 直接使用新的API路径
+    );
+    
+    // 处理返回数据，添加checked属性
+    const employees = (response?.data || []).map(emp => ({
+      ...emp,
+      checked: isEmployeeSelected(emp)
+    }));
+    
+    employeeList.value = employees;
+    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;
+  }
+  
+  loading.value = true;
+  try {
+    const response = await dataService.fetch(
+      {
+        ids: ids // 使用新的接口参数格式
+      },
+      {},
+      '/v1/employee/getByIds' // 直接使用新的API路径
+    );
+    
+    if (response?.data && Array.isArray(response.data)) {
+      selectedItems.value = response.data;
+    } 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) => {
+  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) => {
+  employeeList.value.forEach(item => {
+    item.checked = checked;
+  });
+};
+
+// 处理选中状态变更
+const handleCheckChange = (item) => {
+  // 单选模式下，取消其他选中
+  if (props.single && item.checked) {
+    employeeList.value.forEach(emp => {
+      if (emp.id !== item.id) {
+        emp.checked = false;
+      }
+    });
+  }
+  
+  // 检查最大选择数量限制
+  if (props.maxCount > 0) {
+    const checkedCount = employeeList.value.filter(emp => emp.checked).length;
+    if (checkedCount > props.maxCount) {
+      item.checked = false;
+      // 可以添加提示信息
+    }
+  }
+  
+  updateSelectAllStatus();
+};
+
+// 移除已选择的项目
+const removeItem = (index, id) => {
+  // 移除ID
+  const newIds = [...props.modelValue];
+  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 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 = () => {
+  // 初始化数据
+  initSelector();
+  dialogVisible.value = true;
+};
+
+// 确认选择
+const handleConfirm = () => {
+  const selectedEmployeeIds = employeeList.value
+    .filter(item => item.checked)
+    .map(item => item.id);
+  
+  emit('update:modelValue', selectedEmployeeIds);
+  emit('change', selectedEmployeeIds);
+  dialogVisible.value = false;
+};
+
+// 取消选择
+const handleCancel = () => {
+  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 });
+
+// 组件挂载时执行
+onMounted(() => {
+  // 初始化数据
+  if (props.defaultTab === 'organization') {
+    fetchOrganizationData();
+  }
+  
+  // 获取已选员工详情
+  fetchEmployeesByIds(props.modelValue);
+});
+</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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+</style>