txl-ai-fullgenerate

txl-ai-fullgenerate

Vue 3 + TypeScript 组织人员选择组件，支持组织树懒加载、人员搜索、分页、跨页选择和已选人员回显。

特性

• 组织树懒加载和组织搜索
• 人员分页、姓名/账号搜索
• 跨组织、跨页保留已选人员
• 已选人员列表快速删除
• 支持 defaultSelectedUsers 回显
• 支持组件事件和实例方法

安装

npm install txl-ai-fullgenerate vue element-plus @element-plus/icons-vue

项目要求 Vue 3.5+、Element Plus 2.14+ 和 Node.js 22.18+ 或 24.12+。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { OrgUserSelector } from 'txl-ai-fullgenerate'
import 'txl-ai-fullgenerate/style.css'
import 'element-plus/dist/index.css'
import type { User } from 'txl-ai-fullgenerate'

const visible = ref(false)
const selectedUsers = ref<User[]>([])

const handleConfirm = (users: User[]) => {
  selectedUsers.value = users
}
</script>

<template>
  <el-button type="primary" @click="visible = true">选择人员</el-button>

  <OrgUserSelector
    v-model="visible"
    :default-selected-users="selectedUsers"
    @confirm="handleConfirm"
  />
</template>

也可以使用插件方式注册组件：

import { createApp } from 'vue'
import OrgUserSelector from 'txl-ai-fullgenerate'

createApp(App).use(OrgUserSelector).mount('#app')

Props

User 类型：

interface User {
  userId: string
  userName: string
  account: string
  orgId: string
  orgName: string
}

事件

实例方法

通过模板 ref 可调用：

const selectorRef = ref<InstanceType<typeof OrgUserSelector>>()

selectorRef.value?.clear()
const users = selectorRef.value?.getSelectedUsers()

• clear()：清空当前已选人员。
• getSelectedUsers()：获取当前已选人员数组。

样式和依赖

组件不会打包 Vue、Element Plus 和图标库，请确保宿主项目安装并注册 Element Plus。组件样式通过以下路径引入：

import 'txl-ai-fullgenerate/style.css'

本地开发

pnpm install
pnpm dev
pnpm run type-check
pnpm run test:unit:run
pnpm run build

License

MIT