cd-personselector 1.0.0

package/src/PersonSelector.vue

@@ -0,0 +1,819 @@
+<template>
+  <t-dialog
+    v-model:visible="dialogVisible"
+    header="选择人员"
+    :width="dialogWidth"
+    :footer="true"
+    destroy-on-close
+    @confirm="handleConfirm"
+    @close="handleClose"
+  >
+    <div class="person-selector">
+      <!-- 头部说明 -->
+      <div v-if="tips" class="selector-tips">
+        <t-icon name="info-circle" />
+        <span>{{ tips }}</span>
+      </div>
+      <!-- 搜索区域 -->
+      <div v-if="showSearch" class="search-area">
+        <div v-if="organizations.length > 0" class="org-select">
+          <t-select
+            v-model="selectedOrgId"
+            placeholder="选择组织"
+            style="width: 200px"
+            @change="handleOrgChange"
+          >
+            <t-option
+              v-for="org in organizations"
+              :key="org.id"
+              :value="org.id"
+              :label="org.displayName || org.name"
+            />
+          </t-select>
+        </div>
+        <div class="search-input">
+          <t-input
+            v-model="searchKeyword"
+            placeholder="搜索"
+            clearable
+            @input="handleSearchInput"
+            @clear="clearSearch"
+          >
+            <template #prefix-icon>
+              <t-icon name="search" />
+            </template>
+          </t-input>
+        </div>
+      </div>
+      <!-- 主内容区域 -->
+      <div class="content-area">
+        <!-- 左侧：Tab + 树形结构 / 搜索结果 -->
+        <div class="left-panel tree-panel">
+          <!-- 搜索结果模式 -->
+          <div v-if="isSearchMode" class="search-results">
+            <div class="search-results-header">
+              <span>搜索结果</span>
+              <t-button size="small" variant="text" @click="clearSearch">返回</t-button>
+            </div>
+            <div v-if="searchLoading" class="search-loading">
+              <t-loading />
+              <span>搜索中...</span>
+            </div>
+            <div v-else-if="searchResults.length === 0" class="empty-search">
+              <t-icon name="search" size="48px" style="color: #ddd;" />
+              <p>未找到匹配的人员</p>
+            </div>
+            <div v-else class="search-result-list">
+              <div
+                v-for="user in searchResults"
+                :key="user.id"
+                class="search-result-item"
+                :class="{ 'is-selected': selectedIds.includes(user.id) }"
+                @click="toggleSearchResultSelect(user)"
+              >
+                <t-checkbox :checked="selectedIds.includes(user.id)" @click.stop />
+                <div class="user-avatar">
+                  <t-icon name="user" />
+                </div>
+                <div class="user-details">
+                  <div class="user-name">{{ user.displayName || user.name }}</div>
+                  <div class="user-meta">
+                    <span v-if="user.position">{{ user.position }}</span>
+                    <span v-if="user.department">{{ user.department }}</span>
+                    <span v-if="user.phone">{{ user.phone }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 正常 Tab 模式 -->
+          <t-tabs v-else v-model="activeTab" @change="handleTabChange">
+            <t-tab-panel
+              v-for="tab in tabs"
+              :key="tab.key"
+              :value="tab.key"
+              :label="tab.name"
+            >
+              <div class="tree-container">
+                <t-tree
+                  :ref="(el: any) => setTreeRef(tab.key, el)"
+                  v-if="internalTreeData[tab.key]?.length > 0"
+                  :data="internalTreeData[tab.key]"
+                  :keys="{ value: 'id', label: 'name', children: 'children' }"
+                  hover
+                  checkable
+                  :expand-all="false"
+                  :value="selectedIds"
+                  @change="handleTreeCheck"
+                >
+                  <template #label="{ node }">
+                    <div class="tree-node-label" :class="{ 'is-user': node.data.isUser }">
+                      <t-icon :name="node.data.isUser ? 'user' : (tab.icon || 'folder')" />
+                      <span>{{ node.label }}</span>
+                      <span v-if="node.data.userCount && !node.data.isUser" class="user-count">({{ node.data.userCount }})</span>
+                      <t-button
+                        v-if="!node.data.isUser && !node.data.children?.length && !node.data.loaded"
+                        size="small"
+                        variant="text"
+                        class="load-users-btn"
+                        @click.stop="handleLoadUsers(node, tab.key)"
+                      >
+                        显示人员
+                      </t-button>
+                    </div>
+                  </template>
+                </t-tree>
+                <div v-else class="empty-tree">
+                  <t-icon :name="tab.icon || 'folder-open'" size="48px" style="color: #ddd;" />
+                  <p>暂无数据</p>
+                </div>
+              </div>
+            </t-tab-panel>
+          </t-tabs>
+        </div>
+        <!-- 右侧：已选择 -->
+        <div class="right-panel">
+          <div class="selected-header">
+            <span class="header-title">已选择</span>
+            <span class="header-count">{{ selectedItems.length }} 项</span>
+            <t-button v-if="selectedItems.length > 0" size="small" variant="text" @click="clearSelection">清空</t-button>
+          </div>
+          <div class="selected-list-container">
+            <div v-if="selectedItems.length === 0" class="empty-selected">
+              <t-icon name="user-checked" size="64px" style="color: #ddd;" />
+              <p>暂无选择</p>
+            </div>
+            <div v-else class="selected-user-list">
+              <div
+                v-for="item in selectedItems"
+                :key="item.id"
+                class="selected-user-item"
+                :class="{ 'selected-dept-item': !item.isUser }"
+              >
+                <div class="user-info">
+                  <div class="user-avatar" :class="{ 'dept-avatar': !item.isUser }">
+                    <t-icon :name="item.isUser ? 'user' : 'folder'" />
+                  </div>
+                  <div class="user-details">
+                    <div class="user-name">{{ item.displayName || item.name }}</div>
+                    <div class="user-meta">
+                      <span v-if="item.isUser && item.position">{{ item.position }}</span>
+                      <span v-if="item.isUser && item.department">{{ item.department }}</span>
+                      <span v-if="!item.isUser">{{ item.typeName || '部门' }}</span>
+                      <span v-if="!item.isUser && item.userCount">{{ item.userCount }}人</span>
+                    </div>
+                  </div>
+                </div>
+                <t-button
+                  size="small"
+                  variant="text"
+                  shape="circle"
+                  @click="handleRemoveItem(item.id)"
+                >
+                  <template #icon>
+                    <t-icon name="close" />
+                  </template>
+                </t-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </t-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+// 类型定义
+interface User {
+  id: number | string;
+  name: string;
+  displayName?: string;
+  phone?: string;
+  email?: string;
+  position?: string;
+  department?: string;
+  isUser?: boolean;
+  [key: string]: any;
+}
+interface TreeNode {
+  id: number | string;
+  name: string;
+  children?: TreeNode[];
+  userCount?: number;
+  isUser?: boolean;
+  loaded?: boolean;
+  [key: string]: any;
+}
+interface Organization {
+  id: number | string;
+  name: string;
+  displayName?: string;
+}
+// Tab 配置接口
+interface TabConfig {
+  key: string;
+  name: string;
+  icon?: string;
+  tree: TreeNode[];
+}
+// Props
+interface Props {
+  visible: boolean;
+  tabs?: TabConfig[];
+  organizations?: Organization[];
+  modelValue?: (number | string)[];
+  dialogWidth?: string;
+  tips?: string;
+  showSearch?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  tabs: () => [],
+  organizations: () => [],
+  modelValue: () => [],
+  dialogWidth: '900px',
+  tips: '',
+  showSearch: true,
+});
+// Emits
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+  'update:modelValue': [value: (number | string)[]];
+  'confirm': [items: any[]];
+  'load-users': [params: { tabKey: string; nodeId: number | string; node: any; callback: (users: User[]) => void }];
+  'search': [params: { keyword: string; orgId?: number | string; callback: (users: User[]) => void }];
+}>();
+// 内部状态
+const dialogVisible = ref(props.visible);
+const activeTab = ref(props.tabs?.[0]?.key || '');
+const selectedOrgId = ref<number | string | null>(null);
+const searchKeyword = ref('');
+const selectedIds = ref<(number | string)[]>([]);
+const treeRefs = ref<Record<string, any>>({});
+// 搜索相关状态
+const isSearchMode = ref(false);
+const searchLoading = ref(false);
+const searchResults = ref<User[]>([]);
+// 暴露给模板使用
+const tabs = computed(() => props.tabs || []);
+const organizations = computed(() => props.organizations || []);
+const tips = computed(() => props.tips || '');
+const showSearch = computed(() => props.showSearch);
+const dialogWidth = computed(() => props.dialogWidth);
+// 内部树数据（用于动态添加用户节点）
+const internalTreeData = ref<Record<string, TreeNode[]>>({});
+// 初始化内部树数据
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    if (newTabs && newTabs.length > 0) {
+      const newData: Record<string, TreeNode[]> = {};
+      newTabs.forEach((tab) => {
+        newData[tab.key] = JSON.parse(JSON.stringify(tab.tree));
+      });
+      internalTreeData.value = newData;
+      if (!activeTab.value || !newTabs.find(t => t.key === activeTab.value)) {
+        activeTab.value = newTabs[0].key;
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+// 监听外部 visible 变化
+watch(() => props.visible, (newVal) => {
+  dialogVisible.value = newVal;
+  if (newVal) {
+    selectedIds.value = props.modelValue ? [...props.modelValue] : [];
+    if (props.organizations.length > 0 && !selectedOrgId.value) {
+      selectedOrgId.value = props.organizations[0].id;
+    }
+  }
+});
+// 监听内部 dialogVisible 变化
+watch(dialogVisible, (newVal) => {
+  emit('update:visible', newVal);
+});
+// 设置树组件 ref
+function setTreeRef(key: string, el: any) {
+  if (el) {
+    treeRefs.value[key] = el;
+  }
+}
+// 递归查找节点
+function findNodeById(tree: TreeNode[], id: number | string): TreeNode | null {
+  for (const node of tree) {
+    if (node.id === id) return node;
+    if (node.children) {
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+// 已选择的项目
+const selectedItems = computed(() => {
+  const items: any[] = [];
+  selectedIds.value.forEach(id => {
+    // 先在搜索结果中查找
+    const searchUser = searchResults.value.find(u => u.id === id);
+    if (searchUser) {
+      items.push({ ...searchUser, typeName: '搜索结果' });
+      return;
+    }
+    // 在所有 tab 的树中查找
+    for (const tab of props.tabs) {
+      const treeData = internalTreeData.value[tab.key] || [];
+      const node = findNodeById(treeData, id);
+      if (node) {
+        items.push({
+          ...node,
+          typeName: tab.name
+        });
+        break;
+      }
+    }
+  });
+  return items;
+});
+// Tab 切换处理
+const handleTabChange = () => {
+  searchKeyword.value = '';
+};
+// 组织变化处理
+const handleOrgChange = () => {
+  // 可以触发重新加载数据
+};
+// 防抖定时器
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+// 搜索输入处理（带防抖）
+const handleSearchInput = () => {
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+  }
+  if (!searchKeyword.value.trim()) {
+    clearSearch();
+    return;
+  }
+  // 立即显示搜索模式和loading
+  isSearchMode.value = true;
+  searchLoading.value = true;
+  // 300ms 防抖
+  searchTimer = setTimeout(() => {
+    doSearch();
+  }, 300);
+};
+// 执行搜索
+const doSearch = () => {
+  searchResults.value = [];
+  const callback = (users: User[]) => {
+    searchResults.value = users.map(u => ({ ...u, isUser: true }));
+    searchLoading.value = false;
+  };
+  emit('search', { 
+    keyword: searchKeyword.value, 
+    orgId: selectedOrgId.value || undefined,
+    callback
+  });
+};
+// 清除搜索，返回 tab 模式
+const clearSearch = () => {
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+    searchTimer = null;
+  }
+  isSearchMode.value = false;
+  searchKeyword.value = '';
+  searchResults.value = [];
+  searchLoading.value = false;
+};
+// 切换搜索结果中的选中状态
+const toggleSearchResultSelect = (user: User) => {
+  const idx = selectedIds.value.indexOf(user.id);
+  if (idx > -1) {
+    selectedIds.value.splice(idx, 1);
+  } else {
+    selectedIds.value.push(user.id);
+  }
+};
+// 获取当前 tab 树中所有节点的 id
+function getAllNodeIds(tree: TreeNode[]): (number | string)[] {
+  const ids: (number | string)[] = [];
+  const traverse = (nodes: TreeNode[]) => {
+    for (const node of nodes) {
+      ids.push(node.id);
+      if (node.children) {
+        traverse(node.children);
+      }
+    }
+  };
+  traverse(tree);
+  return ids;
+}
+// 处理树节点 checkbox 变化
+const handleTreeCheck = (checkedIds: (number | string)[]) => {
+  // 获取当前 tab 的所有节点 id
+  const currentTreeData = internalTreeData.value[activeTab.value] || [];
+  const currentTreeNodeIds = getAllNodeIds(currentTreeData);
+  // 保留不属于当前 tab 的选中项
+  const otherSelectedIds = selectedIds.value.filter(id => !currentTreeNodeIds.includes(id));
+  // 合并：其他 tab 的选中项 + 当前 tab 的选中项
+  selectedIds.value = [...otherSelectedIds, ...checkedIds];
+};
+// 点击"显示人员"按钮
+async function handleLoadUsers(node: any, tabKey: string) {
+  const nodeId = node.value;
+  const treeRef = treeRefs.value[tabKey];
+  // 回调函数，父组件调用此函数传入用户数据
+  const callback = async (users: User[]) => {
+    if (users.length > 0) {
+      const userNodes = users.map((user) => {
+        const { id, name, ...rest } = user;
+        return {
+          ...rest,
+          id,
+          name: user.displayName || name,
+          isUser: true,
+        };
+      });
+      // 添加到树中
+      if (treeRef) {
+        treeRef.appendTo(nodeId, userNodes);
+        node.data.loaded = true;
+        await nextTick();
+        // 使用 treeRef 的 setItem 方法展开节点
+        try {
+          treeRef.setItem(nodeId, { expanded: true });
+        } catch (e) {
+          console.log('展开节点失败', e);
+        }
+      }
+    } else {
+      node.data.loaded = true;
+    }
+  };
+  // 触发事件，让父组件加载数据
+  emit('load-users', { tabKey, nodeId, node, callback });
+}
+// 移除选中项
+const handleRemoveItem = (id: number | string) => {
+  selectedIds.value = selectedIds.value.filter(i => i !== id);
+};
+// 清空选择
+const clearSelection = () => {
+  selectedIds.value = [];
+};
+// 确认
+const handleConfirm = () => {
+  emit('update:modelValue', selectedIds.value);
+  emit('confirm', selectedItems.value);
+  dialogVisible.value = false;
+};
+// 关闭
+const handleClose = () => {
+  dialogVisible.value = false;
+};
+// 暴露方法给父组件
+defineExpose({
+  clearSelection,
+  appendUsers: (tabKey: string, nodeId: number | string, users: User[]) => {
+    const treeRef = treeRefs.value[tabKey];
+    if (treeRef && users.length > 0) {
+      const userNodes = users.map((user) => {
+        const { id, name, ...rest } = user;
+        return {
+          ...rest,
+          id,
+          name: user.displayName || name,
+          isUser: true,
+        };
+      });
+      treeRef.appendTo(nodeId, userNodes);
+    }
+  },
+});
+</script>
+<style scoped>
+.person-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 500px;
+}
+.selector-tips {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background-color: #e8f4ff;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #0052d9;
+}
+.search-area {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.search-area .org-select {
+  flex-shrink: 0;
+}
+.search-area .search-input {
+  flex: 1;
+}
+.content-area {
+  display: flex;
+  gap: 0;
+  height: 450px;
+  border: 1px solid #dfe1e6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.tree-panel {
+  width: 480px;
+  flex-shrink: 0;
+  border-right: 1px solid #dfe1e6;
+  display: flex;
+  flex-direction: column;
+  background-color: #fafafa;
+}
+.tree-panel :deep(.t-tabs__nav-container) {
+  padding: 0 8px;
+  background-color: #fff;
+}
+.tree-panel :deep(.t-tabs__content) {
+  flex: 1;
+  overflow: hidden;
+}
+.tree-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 8px;
+}
+.tree-container::-webkit-scrollbar {
+  width: 6px;
+}
+.tree-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.tree-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+.tree-node-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  width: 100%;
+}
+:deep(.t-tree__label) {
+  flex: 1;
+}
+:deep(.t-checkbox__label) {
+  width: 100%;
+}
+.tree-node-label.is-user {
+  font-size: 13px;
+  color: #666;
+}
+.tree-node-label .user-count {
+  color: #999;
+  font-size: 12px;
+}
+.tree-node-label .load-users-btn {
+  margin-left: auto;
+  color: #0052d9;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+.empty-tree {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+.empty-tree p {
+  margin-top: 16px;
+  font-size: 14px;
+}
+/* 搜索结果样式 */
+.search-results {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.search-results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #dfe1e6;
+  font-weight: 500;
+}
+.search-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  gap: 12px;
+  color: #999;
+}
+.empty-search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+.empty-search p {
+  margin-top: 16px;
+  font-size: 14px;
+}
+.search-result-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.search-result-item:hover {
+  border-color: #0052d9;
+  background: #f0f5ff;
+}
+.search-result-item.is-selected {
+  border-color: #0052d9;
+  background: #e8f4ff;
+}
+.search-result-item .user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+.search-result-item .user-details {
+  flex: 1;
+  min-width: 0;
+}
+.search-result-item .user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+.search-result-item .user-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  font-size: 12px;
+  color: #999;
+}
+.search-result-item .user-meta span::before {
+  content: '•';
+  margin-right: 4px;
+}
+.search-result-item .user-meta span:first-child::before {
+  display: none;
+}
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #fafafa;
+}
+.selected-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #dfe1e6;
+  background-color: #fff;
+}
+.selected-header .header-title {
+  font-weight: 500;
+  font-size: 14px;
+  color: #333;
+}
+.selected-header .header-count {
+  font-size: 13px;
+  color: #0052d9;
+  font-weight: 600;
+  margin-left: 8px;
+  flex: 1;
+}
+.selected-list-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.selected-list-container::-webkit-scrollbar {
+  width: 6px;
+}
+.selected-list-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.selected-list-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+.empty-selected {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+.empty-selected p {
+  margin-top: 16px;
+  font-size: 14px;
+}
+.selected-user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.selected-user-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s;
+}
+.selected-user-item:hover {
+  border-color: #0052d9;
+  box-shadow: 0 2px 4px rgba(0, 82, 217, 0.1);
+}
+.selected-user-item .user-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background:  #667eea;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.dept-avatar {
+  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
+}
+.selected-dept-item {
+  border-color: #f5af19;
+}
+.selected-user-item .user-details {
+  flex: 1;
+  min-width: 0;
+}
+.selected-user-item .user-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+.selected-user-item .user-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  font-size: 11px;
+  color: #999;
+}
+.selected-user-item .user-meta span::before {
+  content: '•';
+  margin-right: 4px;
+}
+.selected-user-item .user-meta span:first-child::before {
+  display: none;
+}
+</style>