部门人员选择组件 - IkPicker

用于选择部门、人员、角色、岗位的组件

props

<!-- 枚举 -->
  export enum EType {
    "部门" = "dep",
    "用户" = "user",
    "角色" = "role",
  }

  export type TList = {
    id: string;
    name: string;
    type: EType; // 部门  用户  角色
    [key: string]: any;
  };
  export type apiType = {
    methods?: "get" | "post";
    headers?: any;
    url?: string;
    param?: any;
    paramKey?: string;
  }
  export type typeOptionType = {
    dep?: string;
    user?: string;
    role?: string;
  }
  export type propOptionType = {
    // 部门名/姓名
    name?: string;
    // 类型
    type?: string;
    // id
    id?: string
    // 头像
    avatar: string;
  }

props	类型	说明	默认值
modelValue/v-model	Array as PropType<Array<TList>>	v-model绑定 选中数据	[]
data	Array as PropType<Array<TList>	已选数据 - 数据回显	[]
show	Boolean	是否显示	false
width	Number || String	弹框宽度	'685px'
height	Number || String	弹框高度	'580px'
title	String	标题	'选择人员'
depList	Array as PropType<Array<TList>>	部门数据	[]
userList	Array as PropType<Array<TList>>	人员数据	[]
roleList	Array as PropType<Array<TList>>	角色数据	[]
postList	Array as PropType<Array<TList>>	岗位数据	[]
multiple	Boolean	是否多选	true
showDep	Boolean	是否显示部门	true
chooseType	Array	选择类型	["dep"]
max	Number	最大允许选择数量 0表示不限制	0
api	Array as PropType<Array<apiType>>	api地址 在不传数据是传递，但须满足要求	{ methods: "get", headers: null, url: "", param: null, paramKey: "type", }
typeOption	Array as PropType<Array<typeOptionType>>	类型别名 dep: 'dept'	{ dep: "dep", user: "user", role: "role", post: "post",}
propOption	Array as PropType<Array<propOptionType>>	字段映射	{ name: "name", type: "type", id: "id", avatar: "avatar", }
search	boolean	搜索栏	true
lazy	boolean	懒加载，需传递api时生效	true
cache	boolean	缓存已查询到的数据	true
emptyText	string	空数据时显示文字	"暂无数据"
placeholder	string	placeholder	"模糊搜索人员、部门"
tabs	Array as PropType<Array<keyof typeof ETab>>	可切换tabs	["group", "role", "post"]
loading	boolean	加载状态	true

事件

名称	说明	类型
ok	选中触发	({ // 所有选项、部门、人员、角色分别列出 ...choose.value, // 排序后的列表 sort: chooseList.value, }) => void

示例代码

<template>
  <!-- 示例 -->
  <IkPicker
    v-model="item.handList"
    v-model:show="item.isShow"
    @ok="handSelected($event, index)"
    :multiple="item.multiple"
    :type-option="{
      dep: 'DEPT',
      user: 'USER',
      role: 'ROLE',
      post: 'POST',
    }"
    :api="{
      methods: 'post',
      url: pickerUrl,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': TOKEN,
      },
    }"
    :dep-list="item.depList"
    :user-list="item.userList"
    :prop-option="{
      name: 'elementName',
      id: 'elementId',
      type: 'elementType',
      avatar: 'avatar',
    }"
    :chooseType="item.chooseType"
  ></IkPicker>
</template>