cd-personselector 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-personselector",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "人员选择器组件 - 支持多Tab、树形结构、搜索、懒加载、输入框选择模式",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/InputSelect.vue

@@ -26,34 +26,49 @@
         >
             <template #panel>
                 <div v-if="currentSearchResults.length > 0" class="cd-input-select__panel">
-                    <t-checkbox
-                        v-for="result in currentSearchResults"
-                        :key="result.id"
-                        :value="result.id"
-                        :checked="isSelected(result.id)"
-                        class="cd-input-select__option"
-                        @change="(checked: boolean) => handleCheckboxChange(checked, result)"
-                    >
-                        <div class="cd-input-select__option-content">
-                            <div v-if="result.avatar" class="cd-input-select__option-avatar">
-                                <img :src="result.avatar" :alt="result.name" />
-                            </div>
-                            <div v-else class="cd-input-select__option-avatar cd-input-select__option-avatar--placeholder"
-                                :style="{
-                                    backgroundColor: isDepartment(result.id) ? '#e6f4ff' : getAvatarColor(result.name),
-                                    color: isDepartment(result.id) ? '#0052d9' : '#fff'
-                                }">
-                                {{ getAvatarInitial(result.name) }}
-                            </div>
-                            <div class="cd-input-select__option-info">
-                                <div class="cd-input-select__option-name">{{ result.name }}</div>
-                                <div v-if="result.department || result.position" class="cd-input-select__option-desc">
-                                    {{ result.department }}{{ result.department && result.position ? ' · ' : '' }}{{ result.position }}
+                    <div class="cd-input-select__grid">
+                        <t-checkbox
+                            v-for="result in paginatedSearchResults"
+                            :key="result.id"
+                            :value="result.id"
+                            :checked="isSelected(result.id)"
+                            class="cd-input-select__option"
+                            @change="(checked: boolean) => handleCheckboxChange(checked, result)"
+                        >
+                            <div class="cd-input-select__option-content">
+                                <div v-if="result.avatar" class="cd-input-select__option-avatar">
+                                    <img :src="result.avatar" :alt="result.name" />
+                                </div>
+                                <div v-else class="cd-input-select__option-avatar cd-input-select__option-avatar--placeholder"
+                                    :style="{
+                                        backgroundColor: getNodeTypeColor(result.nodeType),
+                                        color: '#fff'
+                                    }">
+                                    {{ getNodeTypeIcon(result.nodeType) }}
                                 </div>
+                                <div class="cd-input-select__option-info">
+                                    <div class="cd-input-select__option-name">{{ result.name }}</div>
+                                    <div v-if="result.isUser && (result.department || result.post)" class="cd-input-select__option-desc">
+                                        {{ result.department }}{{ result.department && result.post ? ' · ' : '' }}{{ result.post }}
+                                    </div>
+                                    <div v-else-if="result.fnumber" class="cd-input-select__option-desc">
+                                        {{ result.fnumber }}
+                                    </div>
+                                </div>
+                                <span class="cd-input-select__option-tag" :style="{ backgroundColor: getNodeTypeColor(result.nodeType) + '18', color: getNodeTypeColor(result.nodeType) }">
+                                    {{ getNodeTypeLabel(result.nodeType) }}
+                                </span>
                             </div>
-                            <i v-if="isDepartment(result.id)" class="ri-building-line cd-input-select__option-icon"></i>
+                        </t-checkbox>
+                    </div>
+                    <div v-if="searchTotalPages > 1" class="cd-input-select__pager">
+                        <span class="cd-input-select__pager-info">{{ currentSearchResults.length }} 条结果</span>
+                        <div class="cd-input-select__pager-btns">
+                            <t-button size="small" variant="text" :disabled="searchPage <= 1" @click="searchPage--">上一页</t-button>
+                            <span class="cd-input-select__pager-num">{{ searchPage }}/{{ searchTotalPages }}</span>
+                            <t-button size="small" variant="text" :disabled="searchPage >= searchTotalPages" @click="searchPage++">下一页</t-button>
                         </div>
-                    </t-checkbox>
+                    </div>
                 </div>
                 <div v-else-if="searchLoading" class="cd-input-select__loading">
                     搜索中...
@@ -108,6 +123,13 @@ const emit = defineEmits<{
 }>();
 const searchLoading = ref(false);
 const currentSearchResults = ref<UserItem[]>([]);
+const searchPage = ref(1);
+const searchPageSize = 10;
+const paginatedSearchResults = computed(() => {
+    const start = (searchPage.value - 1) * searchPageSize;
+    return currentSearchResults.value.slice(start, start + searchPageSize);
+});
+const searchTotalPages = computed(() => Math.ceil(currentSearchResults.value.length / searchPageSize));
 const showPersonSelector = ref(false);
 const selectedIds = ref<(string | number)[]>([]);
 const selectedOptions = ref<UserItem[]>([]);
@@ -137,6 +159,19 @@ const isDepartment = (id: string | number): boolean => {
     return String(id).startsWith('dept-');
 };
 
+// nodeType 辅助函数
+const nodeTypeMap: Record<string, { label: string; color: string; icon: string }> = {
+    department: { label: '部门', color: '#0052d9', icon: '部' },
+    user:       { label: '人员', color: '#1890ff', icon: '人' },
+    post:       { label: '岗位', color: '#52c41a', icon: '岗' },
+    position:   { label: '职务', color: '#722ed1', icon: '职' },
+    business:   { label: '商业', color: '#fa8c16', icon: '商' },
+    external:   { label: '外部', color: '#eb2f96', icon: '外' },
+};
+const getNodeTypeLabel = (t?: string) => nodeTypeMap[t || '']?.label || '其他';
+const getNodeTypeColor = (t?: string) => nodeTypeMap[t || '']?.color || '#999';
+const getNodeTypeIcon = (t?: string) => nodeTypeMap[t || '']?.icon || '?';
+
 // 根据 value (ID) 获取标签主题颜色
 const getTagThemeByValue = (value: string | number): 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' => {
     const idStr = String(value);
@@ -277,6 +312,7 @@ watch(inputValue, (keyword) => {
         keyword,
         callback: (results: UserItem[]) => {
             currentSearchResults.value = results;
+            searchPage.value = 1;
             searchLoading.value = false;
             if (results.length > 0) {
                 popupVisible.value = true;
@@ -313,8 +349,37 @@ watch(inputValue, (keyword) => {
         margin: 0 !important;
     }
     &__panel {
-        max-height: 300px;
+        max-height: 400px;
         overflow-y: auto;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 4px;
+    }
+    &__grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+    }
+    &__pager {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 8px;
+        border-top: 1px solid #e5e7eb;
+        margin-top: 4px;
+        &-info {
+            font-size: 12px;
+            color: #999;
+        }
+        &-btns {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        &-num {
+            font-size: 12px;
+            color: #666;
+        }
     }
     &__loading,
     &__empty {
@@ -383,5 +448,12 @@ watch(inputValue, (keyword) => {
         color: var(--td-brand-color, #0052d9);
         flex-shrink: 0;
     }
+    &-tag {
+        font-size: 11px;
+        padding: 1px 6px;
+        border-radius: 3px;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
 }
 </style>

package/src/PersonSelector.vue

@@ -6,6 +6,7 @@
     :footer="true"
     placement="center"
     destroy-on-close
+    attach="body"
     @confirm="handleConfirm"
     @close="handleClose"
   >