1.0.6 • Published 2 years ago
select-unit v1.0.6
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(),
}
}
}