select-unit

基于 element-ui 的选择部门控件

安装

npm install select-unit

插件引入

import SelectUnit from "select-unit";
Vue.use(SelectUnit);

参数说明

| 名称 | 类型 | 默认值 | 是否必填 | 备注 | | :-------------------- | :-------------------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------- | | selectData | Object | null | 否 | 已选中的右侧初始值，格式：{selectDeptList:[{id,name}],selectPersonList:[{id,name,avatarUrl}]} | | requestHeader | Object | null | 否 | 自定义报文头 | | diaTitle | String | 请选择 | 否 | 控件弹窗的标题 | | visible | Boolean | false | 是 | 控制弹窗的显示和隐藏 | | parentId | String/Number | "" | 否 | 初始化时，父部门 ID | | noSelectDept | Boolean | false | 否 | 是否选择部门，true:不选择，false:选择 | | noSelectPerson | Boolean | false | 否 | 是否选择人员，true:不选择，false:选择 | | selectMuti | Boolean | true | 否 | 是否多选，true:多选，false:单选 | | nextDeptName | String | 下级 | 否 | 部门右侧选择下级的文案 | | addressRequestUrl | String | 获取通讯录的地址 | 是 | 获取通讯录的地址 | | customParams | Object | null | 否 | 额外的请求参数 | | showLimitPersonNum | Boolean | false | 否 | 是否显示选择的人员数量，true:显示,false:不显示 | | maxPersonNum | Number | 999 | 否 | 最多可选择的人数 | | showSelectAll | Boolean | true | 否 | 是否左侧显示全选按钮，true:显示，否:不显示 | | showRightPersonBelong | Boolean | true | 否 | 是否显示已选择人员的单位部门信息 | | requestItemParams | Array | [] | 否 | 点击通讯录、单位、部门时，需要额外传递的参数 | | addressSearchKey | String | searchKey | 否 | 搜索关键字的 key | | addressPlaceholder | String | 搜索单位/部门 | 否 | 搜索输入框的占位符 | | addressChildKey | String | deptList | 否 | 通讯录下级部门的 key | | addressNavKey | String | parentDeptList | 否 | 通讯录导航的 key | | addressEmployeeKey | String | employees | 否 | 返回的人员 key | | modalZIndex | Number | 1999 | 否 | 遮罩层的层级 | | zIndex | Number | 99000 | 否 | 弹窗层级 | | requestFlagKey | String | success | 否 | 请求成功的标志 key | | requestFlagValue | String,Number,Boolean | true | 否 | 请求成功的标志值 | | responseResultKey | String | data | 否 | 返回数据的 key | | addressTabLabel | String | 通讯录 | 否 | 通讯录 tab 的文案 |

事件

| 名称 | 说明 | 回调参数 | | :--- | :----------- | :-------------------------------- | | sure | 点击确定按钮 | {selectDeptList,selectPersonList} |

使用示例

<SelectUnit
  :visible.sync="selectDeptVisible"
  diaTitle="选择部门"
  :selectData="selectDeptData"
  :hideTab="true"
  :selectMuti="true"
  :addressRequestUrl="addressRequestUrl"
  @sure="sureSelectDept"
  :requestHeader="requestHeader"
></SelectUnit>

data(){
  return{
    selectDeptVisible: false, //选择单位弹窗
    selectDeptData: {
      selectCompanyList: [],
      selectDeptList: [],
      selectPersonList: [],
    }, //已经选择的单位信息
    addressRequestUrl: "/udcms/api/department/getByParent",
    requestHeader: {
      token: Cookies.get("token"),
      time: new Date().getTime(),
    }
  }
}