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;
};