1.1.4 • Published 6 months ago
iking-picker v1.1.4
Vue 3 + TypeScript + Vite
金合信息科技
部门、人员、角色选择组件
组件Props
export const defaultProps = {
// 是否显示
modelValue: {
type: Boolean,
default: false,
required: true
},
// 宽度 为Number时为百分比,字符串时为具体像素
width: {
type: Number || String,
default: "685px",
},
height: {
type: Number || String,
default: "580px",
},
// 标题
title: {
type: String,
default: "选择人员",
},
// 已选数据 - 数据回显
data: {
type: Array as PropType<Array<TList>>,
default: () => [],
},
// 部门数据
depList: {
type: Array as PropType<Array<TList>>,
default: () => [],
},
// 人员数据
userList: {
type: Array as PropType<Array<TList>>,
default: () => [],
},
// 角色数据
roleList: {
type: Array as PropType<Array<TList>>,
default: () => [],
},
// 岗位数据
postList: {
type: Array as PropType<Array<TList>>,
default: () => [],
},
// 是否多选
multiple: {
type: Boolean,
default: true
},
// 最大允许选择数量
// 0表示不限制
max: {
type: Number,
default: 0,
},
// 加载状态
loading: {
type: Boolean,
default: false
},
// 显示的选项卡
// 当只有一个选项卡时,不显示tab页
tabs: {
type: Array as PropType<Array<keyof typeof ETab>>,
// prop校验
validator: (val: Array<'group' | 'role' | 'post'>) => {
if(val === undefined) return true;
if(!Array.isArray(val)){
console.error("IkingPicker参数错误:tabs必须是Array类型")
return false
}else if( !val?.length){
console.error("IkingPicker参数错误:tabs必须是['group', 'role', 'post']中的一种或多种组合")
return false
}
return true;
},
default: () => ['group', 'role', 'post']
},
// 选择类别
chooseType: {
type: Array as PropType<Array<keyof typeof EChooseType>>,
// 传['dep_user']选择部门和人员 传['dep']则只选择部门,传['user']则只选择人员,传['role']则只选择角色
// 不传则默认选择人员和部门
// 传['dep', 'user']则选择人员和部门
// 传['dep', 'user', 'role']则选择人员、部门和角色
default: () => ['dep']
},
// api地址
api: {
type: Object as PropType<{
methods?: "get" | "post";
headers?: any;
url?: string;
param?: any;
paramKey?: string;
}>,
default: () => {
return {
methods: "get",
headers: null,
url: "",
param: null,
paramKey: "type",
};
},
},
// 类型字段映射
typeOption: {
type: Object as PropType<{
dep?: string;
user?: string;
role?: string;
post?: string;
}>,
default: () => { },
},
// 字段映射 {name: 'label', type: 'type'}
propOption: {
type: Object as PropType<{
name?: string;
type?: string;
id?: string | number;
avatar?: string;
}>,
default: () => null,
},
// 显示搜索栏
search: {
type: Boolean,
default: true,
},
// 是否懒加载
lazy: {
type: Boolean,
default: true,
},
// 是否缓存请求过得数据
cache: {
type: Boolean,
default: true,
},
// placeholder
placeholder: {
type: String,
default: "模糊搜索人员、部门",
},
emptyText: {
type: String,
default: "暂无数据",
},
}
拖动配置项
export const defaultDrag = {
animation: 200,
group: "gl",
disabled: false,
ghostClass: "ghost",
sort: true,
delay: 100,
showIcon: true,
itemStyle: {
radius: 4,
bottom: 8,
background: "#0000"
}
}
枚举
export enum EType {
"部门" = "dep",
"用户" = "user",
"角色" = "role",
}
export type TList = {
id: string;
name: string;
type: EType; // 部门 用户 角色
[key: string]: any;
};
export type TMap = Map<string, TList>;
export type TCheck = {
dep: TMap;
user: TMap;
role: TMap;
};
1.1.1
6 months ago
1.1.0
7 months ago
1.1.4
6 months ago
1.1.3
6 months ago
1.1.2
6 months ago
1.0.9
7 months ago
1.0.8
7 months ago
1.0.7
8 months ago
1.0.6
8 months ago
1.0.5
8 months ago
1.0.4
8 months ago
1.0.2
8 months ago
1.0.3
8 months ago
1.0.1
9 months ago
1.0.0
10 months ago
0.1.10
10 months ago
0.1.12
10 months ago
0.2.1
10 months ago
0.2.0
10 months ago
0.1.8
12 months ago
0.1.7
12 months ago
0.1.9
10 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.6
12 months ago
0.1.5
12 months ago
0.0.10
1 year ago
0.0.11
1 year ago
0.0.12
1 year ago
0.0.13
1 year ago
0.0.14
1 year ago
0.1.0
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.0.15
1 year ago
0.0.16
1 year ago
0.0.17
1 year ago
0.0.18
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago