image.png
功能描述
1.tree是类加载（数据比较多），点击的时候获取最新的数据
2.右侧全选的有部门 公司 人员（接口返回 前端把人员和部门的数据累加起来）
3.选中的数据显示到最底下（取消。里面的数据对应取消）
4.判断全选的状态
5.单选的时候，判断code是否相等，在判断是否选中，选中就往里面push数据，去掉就删除对象的code的数据
6.全选状态，把累加的数组（最下面的数组和右边checkbox取交集，取出来的数组再和右边checkbox对比）
代码如下
let checkedItemCode=this.checkedNodes.filter(item => this.userCheckAllList[0].userList.some(ele=>ele.detailCode===item.detailCode)); //交集的数组（选中）
this.userCheckAllList[0].checkAllUser = checkedItemCode.length===this.userCheckAllList[0].userList.length || checkedItemCode.length > this.userCheckAllList[0].userList.length
this.userCheckAllList[0].isIndeterminateUser =checkedItemCode.length>0&&checkedItemCode.length < this.userCheckAllList[0].userList.length
html结构(change事件放到checkbox上面不要放checkbox-group上)
<!--弹窗里面嵌套弹框，需要是在第二个弹窗里面设置:append-to-body="true"-->
<el-dialog :close-on-click-modal="false" :before-close="closeDialogTwo" :title="dialogTitleTwo"
:visible.sync="dialogVisibleTwo" :append-to-body="true">
<div class="dialog">
<div class="searchBox">
<span class="textBox"></span>
<span class="searchInput">
<el-input v-model.trim="searchKey" placeholder="请输入关键字查询" @input="handleGroupKey"></el-input>
</span>
</div>
<div class="dialogWrapper">
<div class="dialogLift">
<!--机构部门-->
<el-tree
accordion
@check-change="handleCheckChange"
@node-click="handleNodeClick"
:render-content="renderContent"
:props="props"
:load="loadNode"
lazy
node-key="deptCode"
ref="tree">
</el-tree>
</div>
<div class="dialogRight">
<!--搜索成员-->
<div v-for="(item,index) in userCheckAllList" :key="index">
<el-checkbox :indeterminate="item.isIndeterminateUser" v-model="item.checkAllUser" @change="handleCheckAllChange">{{item.menuDesc}}</el-checkbox>
<el-checkbox-group
class="searchListBox"
v-model="item.checkedNameList"
ref="checked"
>
<el-checkbox
@change="handleChangeSearch(value)"
calss="checkBox"
v-for="(value,index) in item.userList"
:label="value.detailCode"
:key="value.detailCode+index"
>
<span v-if="value.detailType==1"><i class="iconfont icon-jigouyinhang"></i></span>
<span v-else-if="value.detailType==2"><i class="iconfont icon-bumen"></i></span>
<span v-else><i class="iconfont icon-renyuan1"></i></span>
{{value.detailName}}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div class="dialogBottom"
@mouseenter="mouseenterAll"
@mouseleave="mouseleaveAll">
<div class="deleteImgAll" v-show="removeShow&&checkedNodes.length>0" @click="removeAll">
<i class="el-icon-close"></i>
</div>
<span class="dialogBottomItem"
v-for="item in checkedNodes"
:key="item.detailCode"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
>
<div class="delete-img" v-show="item.show" @click="remove(item.detailCode)">
<i class="el-icon-close"></i>
</div>
<div class="companyImg" v-if="checkedNodes.length>0">
<span v-if="item.detailType==1"><i class="iconfont icon-jigouyinhang"></i></span>
<span v-else-if="item.detailType==2"><i class="iconfont icon-bumen"></i></span>
<span v-else><i class="iconfont icon-renyuan1"></i></span>
</div>
<div class="itemText">{{item.detailName}}</div>
</span>
</div>
<div class="dialog_button">
<el-button type="primary" @click="submitFormTwo">确定 <span v-if="checkedNodes.length>0">({{checkedNodes.length}})</span></el-button>
<el-button @click="closeDialogTwo">取消</el-button>
</div>
</div>
</el-dialog>
data定义的
//搜索
searchKey:'', //搜索tree的key值
type:'1,2,3,4', //type：1-群组，2-组织/部门，3-省区，4-员工信息；
userCheckAllList:[], //组装循环数据结构
//添加,修改
dialogForm: {
groupName:'',//群组名
groupCode:'',//群组code
mono:'',//备注
status:1,//是否启用，1：是，0：否
groupDetailVoList:[]//选中群组人员
},
//添加，修改里面的弹窗 组织成员
dialogFormTwo:{
//选中群组人员
},
props: {
label: 'orgName',
children: 'children'
},
removeShow:false,
checkedNodes:[],//选中的数据
tempCheck:[],//临时数组
tempAllCheck:[],//全选临时数组
checkedNodesEdit:[],//编辑回显后台返回来的数据
userList:[],
checkedNameList:[],
isDisabled:false,//默认可编辑
isDetailPage: false, // 是否是详情页
newUserList:[],
methods方法里面的
//tree 搜索
handleGroupKey(val){
this.searchKey= val
},
//搜索
getSearchGroupKey(){
if (this.searchKey === '') {
return false;
}
let params={
key:this.searchKey,
type:this.type
}
groupMessageApi.getGroupSearchOrg(params).then(res=>{
if(res.status==0){
if(res.data.length>0){
//组装数据结构
this.userList=[];
if(res.data&&res.data.length>0){
res.data.map(item=>{
this.userList.push({
detailCode:item.deptCode,
detailName:item.orgName,
detailType:item.deptType,
checkedFlag:false
})
})
}
let dataList=this.userList; //点击的时候获取所有的接口的数据
let getCheckList=[]; //选中相同的数据
dataList.map(item=>{
this.checkedNameList.filter(value=>{
if(item.detailCode===value){
getCheckList.push(item)
}
})
})
let noCheckList = dataList.filter(item => !this.checkedNameList.some(ele=>ele===item.detailCode)); //没有选中的数据
let arrAllDataList=getCheckList.concat(noCheckList) //code相等并且选中的和没有选中的合并，就是当前点击这一项的回显的所有数据
this.userCheckAllList=[]
this.userCheckAllList.push({
id: 0,
menuDesc: '全选',
isIndeterminateUser:getCheckList.length>0&&getCheckList.length<arrAllDataList.length,
checkAllUser:getCheckList.length===arrAllDataList.length || getCheckList.length > arrAllDataList.length,
checkedNameList:this.checkedNameList,
userList: dataList,
})
}
}else{
this.$message.error(res.message)
}
}) .catch((error) => {
console.log('/announceMng/addEditAnnounce内容修改/添加', error)
});
},
//全选人员
handleCheckAllChange(val){
let arr=[]
this.userCheckAllList.map(item=>{
item.userList&&item.userList.map(ele=>{
return arr.push(ele.detailCode);
})
item.checkedNameList = val ? arr : [];
})
if(val) {
let myArr=[];
this.userCheckAllList[0].userList.forEach(item=>{
myArr.push({
detailName: item.detailName,
detailCode: item.detailCode,
detailType: item.detailType
});
// 建个临时数组
this.tempAllCheck = myArr.concat([])
if (this.checkedNodes.length === 0) {
this.checkedNodes = this.checkedNodes.concat(this.tempAllCheck)
} else { //取消选中
//去重之后再合并
for (let i = 0; i < this.checkedNodes.length; i++) {
for (let j = 0; j < this.tempAllCheck.length; j++) {
if (this.checkedNodes[i].detailCode == this.tempAllCheck[j].detailCode) {
this.tempAllCheck.splice(j, 1);
}
}
}
this.checkedNodes = this.checkedNodes.concat(this.tempAllCheck);
}
})
}else{
this.checkedNodes =[]
}
},
//右边的人员搜索出来的结果(单选)
handleChangeSearch(data){
//判断是否选中还是取消
if(this.userCheckAllList.length>0){
this.userCheckAllList[0].userList.forEach(item=>{
let arr = []
if(item.detailCode==data.detailCode) {
if (this.userCheckAllList[0].checkedNameList.includes(data.detailCode)) {//选中
arr.push({
detailName: item.detailName,
detailCode: item.detailCode,
detailType: item.detailType
});
// 建个临时数组
this.tempCheck = arr.concat([])
if (this.checkedNodes.length === 0) {
this.checkedNodes = this.checkedNodes.concat(this.tempCheck)
} else { //取消选中
//去重之后再合并
for (let i = 0; i < this.checkedNodes.length; i++) {
for (let j = 0; j < this.tempCheck.length; j++) {
if (this.checkedNodes[i].detailCode == this.tempCheck[j].detailCode) {
this.tempCheck.splice(j, 1);
}
}
}
this.checkedNodes = this.checkedNodes.concat(this.tempCheck);
}
} else {
this.checkedNodes = this.checkedNodes.filter(val => !(val.detailCode === data.detailCode))
}
}
let checkedItemCode=this.checkedNodes.filter(item => this.userCheckAllList[0].userList.some(ele=>ele.detailCode===item.detailCode)); //交集的数组（选中）
this.userCheckAllList[0].checkAllUser = checkedItemCode.length===this.userCheckAllList[0].userList.length || checkedItemCode.length > this.userCheckAllList[0].userList.length
this.userCheckAllList[0].isIndeterminateUser =checkedItemCode.length>0&&checkedItemCode.length < this.userCheckAllList[0].userList.length
})
}
},
//单个 删除按钮鼠标上去显示，移出隐藏
mouseenter(data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},
//单个删除
remove(data){
this.checkedNodes=this.checkedNodes.filter( item=>!(data===item.detailCode));//单个删除
this.userCheckAllList.map(item=>{ //单个删除对应的选中的也去掉
if(item.checkedNameList){
item.checkedNameList=item.checkedNameList.filter(value => !(data===value));
if(item.checkedNameList.length===0){
item.checkAllUser=false
item.isIndeterminateUser = false
}else{
item.checkAllUser=true
item.isIndeterminateUser = false
}
}
});
},
//全部删除是否显示隐藏
mouseenterAll(){
this.removeShow=true
},
mouseleaveAll(){
this.removeShow=false
},
//全部删除
removeAll(){
this.$nextTick(function () {
this.userCheckAllList.map(item=>{
item.checkAllUser=false
item.isIndeterminateUser=false
item.checkedNameList=[] //去掉选中的样式
});
this.checkedNodes=[]; //数据清空
});
},
// 加载树型组织部门信息
loadNode(node, resolve) {
let params = {
deptType: node.data == undefined ? 1 : node.data.deptType,
orgCode: node.data == undefined ? "FIRST" : node.data.orgCode
}
groupMessageApi.organizationsTreeDepts(params).then(res => {
if (res.status == 0) {
if(res.data){
return resolve(res.data.departmentResps)
}
} else {
return this.$message.error(res.message)
}
})
},
//添加icon
renderContent(h, { data }){
let createElement = arguments[0];
if (data.deptType == 1) {
return createElement('span', [
createElement('i', {attrs: {class: 'iconfont icon-jigouyinhang'}}),
createElement('span', " "),
createElement('span', arguments[1].node.label)
]);
}else if(data.deptType == 2){
return createElement('span', [
createElement('i', {attrs: {class: 'iconfont icon-bumen'}}),
createElement('span', " "),
createElement('span', arguments[1].node.label)
]);
}else{
return createElement('span', [
createElement('i', {attrs: {class: 'iconfont icon-renyuan'}}),
createElement('span', " "),
createElement('span', arguments[1].node.label)
]);
}
},
//节点被点击时回调
handleNodeClick(event){
let params = {
deptType: event.deptType,
orgCode: event.orgCode
}
groupMessageApi.organizationsTreeDepts(params).then(res => {
if (res.status == 0) {
if(res.data){
let arrUserList=[];
let arrDeptList=[];
//部门和人员同时存在时
if(res.data.deptUsers&&res.data.deptUsers.length>0 || res.data.departmentResps&&res.data.departmentResps.length>1){
res.data.deptUsers.map(item=>{
arrUserList.push({
detailCode:item.userCode,
detailName:item.userName,
detailType:null,
checkedFlag:false
})
return arrUserList
})
res.data.departmentResps.map(item=>{
arrDeptList.push({
detailCode:item.deptCode,
detailName:item.orgName,
detailType:item.deptType,
checkedFlag:false
})
return arrDeptList
})
let dataList=arrUserList.concat(arrDeptList); //点击的时候获取所有的接口的数据
let getCheckList=[]; //选中相同的数据
dataList.map(item=>{
this.checkedNameList.filter(value=>{
if(item.detailCode===value){
getCheckList.push(item)
}
})
});
let noCheckList = dataList.filter(item => !this.checkedNameList.some(ele=>ele===item.detailCode)); //没有选中的数据
let arrAllDataList=getCheckList.concat(noCheckList) //code相等并且选中的和没有选中的合并，就是当前点击这一项的回显的所有数据
//回显
this.checkedNameList=[] //回显人员
this.checkedNodes= this.checkedNodes.map(item=>{
this.checkedNameList.push(item.detailCode)
let obj={
detailName:item.detailName,
detailCode:item.detailCode,
detailType:item.detailType
};
return obj
});
this.userCheckAllList=[]
this.userCheckAllList.push({
id: 0,
menuDesc: '全选',
isIndeterminateUser:getCheckList.length>0&&getCheckList.length<arrAllDataList.length,
checkAllUser:getCheckList.length===arrAllDataList.length || getCheckList.length > arrAllDataList.length,
checkedNameList:this.checkedNameList,
userList: dataList,
})
}
}
} else {
return this.$message.error(res.message)
}
})
},
//tree change事件
handleCheckChange() {
this.checkedNodes = this.$refs.tree.getCheckedNodes()
},
//根据groupCode查询人员
groupList(groupCode){
groupMessageApi.getQueryGroupDetail({groupCode:groupCode}).then(res => {
if (res.status === 0) {
this.checkedNodesEdit=res.data;
this.checkedNodes=[];
this.checkedNameList=[] //回显人员
this.checkedNodes=this.checkedNodesEdit.map(item=>{
this.checkedNameList.push(item.detailCode)
let obj={
detailName:item.detailName,
detailCode:item.detailCode,
detailType:item.detailType
};
return obj
});
} else {
this.$message.error(res.message)
}
})
},
