选人控件
```
<template>
<el-dialog
title="调用权限"
center
width="550px"
:visible.sync="jurisdiction"
:close-on-click-modal="false"
@close=callback>
<el-row>
<el-col :span="12">
<div class="btn">
<button :class="{'active':active===1}" @click="tabactive(1)" v-if="show!==2">
部门
</button>
<button :class="{'active':active===2}" @click="tabactive(2)" v-if="show!==1">
人员
</button>
</div>
<el-input v-model="department"
:placeholder="active===1?'请输入部门':'请输入erp、人名'"
style="margin:10px 0"
center
@input='searchOrgAsync(active)'
></el-input>
<div style="position:relative;">
<el-checkbox-group v-model="checkList" style="display:flex;flex-direction:column;" v-if="orgPullDownShowList">
<el-checkbox v-for="(item,index) in orgPullDownShowList"
v-if="index<5"
:key="index"
:label="item.realName?`${item.realName}(${item.Erp})`:`${item.name}(Department|${item.code})`"
@change="onParticulars($event,item)"
@mouseenter.native="showExplain($event,1,index)"
@mouseleave.native="showExplain($event,0,index)">
<span v-if="item.Erp">{{item.realName}}({{item.Erp}})</br></span>
<span class='constraint'>{{item.name}}</span>
<span class='constraint'>{{item.positionName?item.positionName:item.ParentName}}</span>
</el-checkbox>
</el-checkbox-group>
<div class="explain" :style="{top:ofsetY+'px',left:ofsetX+'px'}" v-if="showOfset">部门:{{orgPullDownShowList[Oindex].name}}</br>
{{orgPullDownShowList[Oindex].realName?`岗位:${orgPullDownShowList[Oindex].positionName}`:`上级:${orgPullDownShowList[Oindex].ParentName}`}}
</div>
</div>
</el-col>
<el-col :span="12">
<div style="border:1px solid #999;height:300px;
box-sizing:border-box;
margin: 0 20px 0px 30px;
padding:10px;
">
<el-checkbox-group v-model="checkList" style="display:flex;flex-direction:column;" v-if="List">
<el-checkbox v-for="(item,index) in List" :key="index" @change="onParticulars($event,item)" :label="`${item.value}(${item.code})`">{{item.code.indexOf('Department|')==-1?`${item.value}(${item.code})`:item.value}}</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="jurisdiction=false">取 消</el-button>
<el-button size="small" type="primary" @click="selection">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import {queryOrg,queryUser} from "@/api/third/third";
export default {
props: {
},
data(){
return{
show:null,
//部门人员切换
active:1,
// 选人控件是否展示
jurisdiction:false,
// 部门搜索input
department:null,
// 复选框
checkList:[],
/**部门人员展示列表*/
orgPullDownShowList: [],
// 详情定位显示位置
ofsetX:null,
ofsetY:null,
List:[],
// 详情定位显示隐藏
showOfset:false,
// timeout定时器防抖
timeout:null,
// 下标
Oindex:0,
}
},
// // 计算属性
// computed:{
// authList(){
// if(this.List){
// let array=this.List.map(item=>{
// return item.value
// })
// return array.join(",")
// }else{
// return ''
// }
// },
// },
// watch:{
// department:function(newval,oldval){
// // if(newval===''){
// console.log(this.orgPullDownShowList)
// // this.orgPullDownShowList=null
// // }
// }
// },
//方法
methods: {
// 选人控件tab切换
tabactive(index){
this.orgPullDownShowList=null;
this.department=null;
this.active=index
},
// 请求部门或者人员数据
searchOrgAsync(active) {
this.orgPullDownShowList=null;
if(!this.department) return
if(active===1){
queryOrg({keyWord:this.department}).then((res) => {
if(!res.data) return null
if(!this.department) return
this.orgPullDownShowList = res.data.map(item => {
return {code: item.organizationCode,
name: item.organizationName,
ParentName:item.organizationParentName,
authList:{
code:`Department|${item.organizationCode}`,
value:item.organizationName
}
};
});
})
}else{
queryUser({keyWord:this.department}).then((res) => {
if(!res.data) return null
if(!this.department) return
this.orgPullDownShowList = res.data.map(item => {
return {code: item.organizationCode,
name: item.organizationName,
Erp:item.userErp,
realName:item.realName,
positionName:item.positionName,
positionCode:item.positionCode,
authList:{
code:item.userErp,
value:item.realName
}
};
});
})
}
},
// 选人控件显示隐藏
newcall(list){
this.department=null,
this.orgPullDownShowList=null
this.List=list
this.checkList=this.List.map(item=>{
if(item.code.indexOf('Department|')==-1){
return `${item.value}(${item.code})`
}else{
return `${item.value}(${item.code})`
}
})
this.jurisdiction=true
this.$emit('showmodule',true)
},
// check状态改变
onParticulars(e,state){
if(e){
this.List.push(state.authList)
}else{
this.List=this.List.filter(item=>{
if(state.authList){
return item.code!==state.authList.code
}else{
return item.code!==state.code
}
})
}
},
// 详情显示与隐藏
showExplain(e,i,index){
this.Oindex=index
if(i){
let that=this;
if(that.timeout) clearTimeout(that.timeout);
that.timeout=setTimeout(()=>{
that.showOfset=true,
that.ofsetX=e.offsetX+10-0,
that.ofsetY=e.target.offsetTop+10-0
},1000)
}else{
if(this.timeout) clearTimeout(this.timeout);
this.showOfset=false
}
},
// 选择部门
selection(){
this.jurisdiction = false;
},
callback(){
this.$emit('data',this.List)
this.$emit('showmodule',false)
}
}
}
</script>
<style lang="scss" scoped>
// 选人控件样式
.btn{
font-size: 0;
overflow: hidden;
display: flex;
justify-content: center;
>button{
font-size: 14px;
width: 50%;
border: 1px solid #999;
height: 30px;
background: #ffffff;
outline:none;
}
>.active{
background:#F2F2F2;
font-weight: bold;
}
>button:hover{
background: #E6F5FF;
color: #0099FF;
}
}
.el-checkbox+.el-checkbox{
margin: 2px 0;
}
.el-checkbox{
margin: 2px 0;
}
.explain{
background: rgba($color: #000, $alpha: 0.5);
position: absolute;
padding: 5px;
min-width:200px;
color: #ffffff;
}
/deep/.el-checkbox__input{
vertical-align:top;
}
/deep/.el-dialog__footer{
text-align:right;
}
/deep/.el-checkbox__label{
white-space:nowrap;
width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
.constraint{
white-space:nowrap;
display:inline-block!important;
width:40%!important;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
```
```
<Candidate ref="child" @data='reception' @showmodule='showmodule'></Candidate>
```
