select-unit

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(),
    }
  }
}