cd-personselector 1.3.4 → 1.3.5

package/package.json

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

package/src/InputSelect.vue

@@ -40,18 +40,23 @@
                             </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'
+                                    backgroundColor: getNodeTypeColor(result.nodeType),
+                                    color: '#fff'
                                 }">
-                                {{ getAvatarInitial(result.name) }}
+                                {{ 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.department || result.position" class="cd-input-select__option-desc">
-                                    {{ result.department }}{{ result.department && result.position ? ' · ' : '' }}{{ result.position }}
+                                <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>
-                            <i v-if="isDepartment(result.id)" class="ri-building-line cd-input-select__option-icon"></i>
+                            <span class="cd-input-select__option-tag" :style="{ backgroundColor: getNodeTypeColor(result.nodeType) + '18', color: getNodeTypeColor(result.nodeType) }">
+                                {{ getNodeTypeLabel(result.nodeType) }}
+                            </span>
                         </div>
                     </t-checkbox>
                 </div>
@@ -137,6 +142,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);
@@ -315,6 +333,8 @@ watch(inputValue, (keyword) => {
     &__panel {
         max-height: 300px;
         overflow-y: auto;
+        width: 100%;
+        box-sizing: border-box;
     }
     &__loading,
     &__empty {
@@ -383,5 +403,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"
   >