cd-personselector 1.3.2 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-personselector",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "人员选择器组件 - 支持多Tab、树形结构、搜索、懒加载、输入框选择模式",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -19,6 +19,11 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
   "keywords": [
     "vue",
     "vue3",
@@ -46,9 +51,5 @@
   },
   "dependencies": {
     "remixicon": "^4.8.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build"
   }
-}
+}

package/src/PersonSelector.vue

@@ -17,42 +17,44 @@
           </t-select>
         </div>
         <div class="cd-ps-search-input">
-          <t-input v-model="searchKeyword" placeholder="输入手机号/工号/姓名/部门/职位搜索" clearable @input="handleSearchInput" @clear="clearSearch">
+          <t-input v-model="searchKeyword" placeholder="输入手机号/工号/姓名/部门/职位搜索" clearable :inputProps="{ autocomplete: 'off' }" @input="handleSearchInput" @clear="clearSearch">
             <template #prefix-icon><t-icon name="search" /></template>
           </t-input>
         </div>
       </div>
       <div class="cd-ps-content">
         <div class="cd-ps-left">
-          <div v-if="isSearchMode" class="cd-ps-search-results">
-            <div class="cd-ps-search-header">
-              <span>搜索结果</span>
-              <t-button size="small" variant="text" @click="clearSearch">返回</t-button>
-            </div>
-            <div v-if="searchLoading" class="cd-ps-loading">
-              <t-loading /><span>搜索中...</span>
-            </div>
-            <div v-else-if="searchResults.length === 0" class="cd-ps-empty">
-              <t-icon name="search" size="48px" style="color: #ddd;" /><p>未找到匹配的人员</p>
-            </div>
-            <div v-else class="cd-ps-result-list">
-              <div v-for="user in searchResults" :key="user.id" class="cd-ps-result-item" :class="{ 'cd-ps-selected': selectedIds.includes(user.id) }" @click="toggleSearchResultSelect(user)">
-                <t-checkbox :checked="selectedIds.includes(user.id)" @click.stop />
-                <div class="cd-ps-avatar"><t-icon name="user" /></div>
-                <div class="cd-ps-info">
-                  <div class="cd-ps-name">{{ user.displayName || user.name }}</div>
-                  <div class="cd-ps-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>
+          <t-tabs v-model="activeTab" @change="handleTabChange">
+            <t-tab-panel v-for="tab in tabs" :key="tab.key" :value="tab.key" :label="getTabLabel(tab)">
+              <!-- 搜索模式 -->
+              <template v-if="isSearchMode">
+                <div v-if="searchLoading" class="cd-ps-loading">
+                  <t-loading /><span>搜索中...</span>
+                </div>
+                <div v-else-if="!searchResultsMap[tab.key] || searchResultsMap[tab.key].length === 0" class="cd-ps-empty">
+                  <t-icon name="search" size="48px" style="color: #ddd;" /><p>暂无结果</p>
+                </div>
+                <div v-else class="cd-ps-result-list">
+                  <div v-for="user in searchResultsMap[tab.key]" :key="user.id" class="cd-ps-result-item" :class="{ 'cd-ps-selected': selectedIds.includes(user.id), 'cd-ps-dept-result': !user.isUser }" @click="toggleSearchResultSelect(user)">
+                    <t-checkbox :checked="selectedIds.includes(user.id)" @click.stop />
+                    <div class="cd-ps-avatar" :class="{ 'cd-ps-avatar-dept': !user.isUser }">
+                      <t-icon :name="user.isUser ? 'user' : (user.isPost ? 'assignment-checked' : 'folder')" />
+                    </div>
+                    <div class="cd-ps-info">
+                      <div class="cd-ps-name">{{ user.displayName || user.name }}</div>
+                      <div class="cd-ps-meta">
+                        <span v-if="!user.isUser" class="cd-ps-type-tag">{{ user.isPost ? '职位' : '部门' }}</span>
+                        <span v-if="user.position">{{ user.position }}</span>
+                        <span v-if="user.department">{{ user.department }}</span>
+                        <span v-if="user.phone">{{ user.phone }}</span>
+                        <span v-if="user.userCount">{{ user.userCount }}人</span>
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <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="cd-ps-tree">
+              </template>
+              <!-- 非搜索模式：树 -->
+              <div v-else class="cd-ps-tree">
                 <t-tree
                   :ref="(el: any) => setTreeRef(tab.key, el)"
                   v-if="internalTreeData[tab.key]?.length > 0"
@@ -68,7 +70,7 @@
                         <span v-if="node.data.isUser && node.data.position" class="cd-ps-position">{{ node.data.position }}</span>
                       </span>
                       <span v-if="node.data.userCount && !node.data.isUser" class="cd-ps-count">({{ node.data.userCount }})</span>
-                      <t-button v-if="!node.data.isUser && !node.data.children?.length && !node.data.loaded" size="small" variant="text" class="cd-ps-load-btn" @click.stop="handleLoadUsers(node, tab.key)">显示人员</t-button>
+                      <t-button v-if="!node.data.isUser" size="small" variant="text" class="cd-ps-load-btn" @click.stop="handleLoadUsers(node, tab.key)">{{ node.data.loaded ? '刷新人员' : '显示人员' }}</t-button>
                     </div>
                   </template>
                 </t-tree>
@@ -177,7 +179,8 @@ const emit = defineEmits<{
   '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 }];
-  'org-change': [orgId: number | string];
+  'org-change': [params: { orgId: number | string; tabKey: string; callback?: () => void }];
+  'tab-change': [params: { tabKey: string }];
 }>();
 const dialogVisible = ref(props.visible);
 const activeTab = ref(props.tabs?.[0]?.key || '');
@@ -188,7 +191,7 @@ const selectedItemsMap = ref<Map<number | string, any>>(new Map()); // 缓存已
 const treeRefs = ref<Record<string, any>>({});
 const isSearchMode = ref(false);
 const searchLoading = ref(false);
-const searchResults = ref<User[]>([]);
+const searchResultsMap = ref<Record<string, User[]>>({});
 const tabs = computed(() => props.tabs || []);
 const organizations = computed(() => props.organizations || []);
 const tips = computed(() => props.tips || '');
@@ -269,14 +272,26 @@ function removeSelectedItem(id: number | string) {
   selectedIds.value = selectedIds.value.filter(i => i !== id);
   selectedItemsMap.value.delete(id);
 }
-const handleTabChange = () => { searchKeyword.value = ''; };
+const getTabLabel = (tab: TabConfig) => {
+  if (!isSearchMode.value) return tab.name;
+  const count = searchResultsMap.value[tab.key]?.length ?? 0;
+  return count > 0 ? `${tab.name} (${count})` : tab.name;
+};
+const handleTabChange = (tabKey: string) => {
+  if (isSearchMode.value) return;
+  searchKeyword.value = '';
+  emit('tab-change', { tabKey });
+};
 const handleOrgChange = (orgId: number | string) => {
   // 清空左侧树数据，等待父组件重新传入
   const newData: Record<string, TreeNode[]> = {};
   props.tabs.forEach((tab) => { newData[tab.key] = []; });
   internalTreeData.value = newData;
   // 触发事件，让父组件重新加载数据
-  emit('org-change', orgId);
+  const callback = () => {
+    // 父组件更新完成后的回调，可以在这里做一些后续处理
+  };
+  emit('org-change', { orgId, tabKey: activeTab.value, callback });
 };
 let searchTimer: ReturnType<typeof setTimeout> | null = null;
 const handleSearchInput = () => {
@@ -287,9 +302,16 @@ const handleSearchInput = () => {
   searchTimer = setTimeout(() => doSearch(), 300);
 };
 const doSearch = () => {
-  searchResults.value = [];
+  searchResultsMap.value = {};
   const callback = (users: User[]) => {
-    searchResults.value = users.map(u => ({ ...u, isUser: true }));
+    const map: Record<string, User[]> = {};
+    users.forEach(u => {
+      const normalized = { ...u, isUser: u.isUser !== false };
+      const key = u.nodeType || (u.isUser !== false ? 'user' : 'department');
+      if (!map[key]) map[key] = [];
+      map[key].push(normalized);
+    });
+    searchResultsMap.value = map;
     searchLoading.value = false;
   };
   emit('search', { keyword: searchKeyword.value, orgId: selectedOrgId.value || undefined, callback });
@@ -298,7 +320,7 @@ const clearSearch = () => {
   if (searchTimer) { clearTimeout(searchTimer); searchTimer = null; }
   isSearchMode.value = false;
   searchKeyword.value = '';
-  searchResults.value = [];
+  searchResultsMap.value = {};
   searchLoading.value = false;
 };
 const toggleSearchResultSelect = (user: User) => {
@@ -310,7 +332,8 @@ const toggleSearchResultSelect = (user: User) => {
       selectedIds.value = [];
       selectedItemsMap.value.clear();
     }
-    addSelectedItem(user.id, { ...user, isUser: true, typeName: '搜索结果', orgId: selectedOrgId.value });
+    const typeName = !user.isUser ? (user.isPost ? '职位' : '部门') : '搜索结果';
+    addSelectedItem(user.id, { ...user, typeName, orgId: selectedOrgId.value });
     if (!props.multiple) {
       handleConfirm();
     }
@@ -370,6 +393,23 @@ function addChildrenToNode(tree: TreeNode[], parentId: number | string, children
 async function handleLoadUsers(node: any, tabKey: string) {
   const nodeId = node.value;
   const treeRef = treeRefs.value[tabKey];
+  // 如果已加载过，先移除旧的用户子节点
+  if (node.data.loaded) {
+    const treeData = internalTreeData.value[tabKey];
+    if (treeData) {
+      const targetNode = findNodeById(treeData, nodeId);
+      if (targetNode && targetNode.children) {
+        targetNode.children = targetNode.children.filter((c: any) => !c.isUser);
+      }
+    }
+    if (treeRef) {
+      const children = treeRef.getItem(nodeId)?.children || [];
+      children.filter((c: any) => c.data?.isUser).forEach((c: any) => {
+        try { treeRef.remove(c.value); } catch { /* ignore */ }
+      });
+    }
+    node.data.loaded = false;
+  }
   const callback = async (users: User[]) => {
     if (users.length > 0) {
       const userNodes = users.map((user) => {
@@ -428,9 +468,12 @@ defineExpose({
 .cd-ps-org-select { flex-shrink: 0; }
 .cd-ps-search-input { flex: 1; }
 .cd-ps-content { display: flex; gap: 0; height: 450px; border: 1px solid #dfe1e6; border-radius: 4px; overflow: hidden; }
-.cd-ps-left { width: 480px; flex-shrink: 0; border-right: 1px solid #dfe1e6; display: flex; flex-direction: column; background-color: #fafafa; }
+.cd-ps-left { width: 480px; flex-shrink: 0; border-right: 1px solid #dfe1e6; display: flex; flex-direction: column; background-color: #fafafa; min-height: 0; overflow: hidden; }
+.cd-ps-left :deep(.t-tabs) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.cd-ps-left :deep(.t-tabs__header) { flex-shrink: 0; }
 .cd-ps-left :deep(.t-tabs__nav-container) { padding: 0 8px; background-color: #fff; }
-.cd-ps-left :deep(.t-tabs__content) { flex: 1; overflow: hidden; }
+.cd-ps-left :deep(.t-tabs__content) { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.cd-ps-left :deep(.t-tab-panel) { flex: 1; min-height: 0; overflow: hidden; }
 .cd-ps-tree { height: 100%; overflow-y: auto; padding: 8px; }
 .cd-ps-tree::-webkit-scrollbar { width: 6px; }
 .cd-ps-tree::-webkit-scrollbar-track { background: #f1f1f1; }
@@ -452,6 +495,9 @@ defineExpose({
 .cd-ps-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; }
 .cd-ps-result-item:hover { border-color: #0052d9; background: #f0f5ff; }
 .cd-ps-result-item.cd-ps-selected { border-color: #0052d9; background: #e8f4ff; }
+.cd-ps-dept-result { border-color: #f5af19; }
+.cd-ps-dept-result:hover { border-color: #f5af19; background: #fffbe6; }
+.cd-ps-dept-result.cd-ps-selected { border-color: #f5af19; background: #fff7e6; }
 .cd-ps-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; }
 .cd-ps-result-item .cd-ps-avatar { width: 36px; height: 36px; }
 .cd-ps-avatar-dept { background: linear-gradient(135deg, #f5af19 0%, #f12711 100%); }
@@ -462,6 +508,8 @@ defineExpose({
 .cd-ps-result-item .cd-ps-meta { font-size: 12px; }
 .cd-ps-meta span::before { content: '•'; margin-right: 4px; }
 .cd-ps-meta span:first-child::before { display: none; }
+.cd-ps-type-tag { color: #f5af19; font-weight: 500; }
+.cd-ps-type-tag::before { display: none !important; }
 .cd-ps-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; background-color: #fafafa; }
 .cd-ps-right-header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #dfe1e6; background-color: #fff; }
 .cd-ps-title { font-weight: 500; font-size: 14px; color: #333; }