image.png
1.用的是element的tree的懒加载，但是load方法中的node和resolve都是tree自带的参数，在选中下拉中直接调用ztee的方法是得不到的，所以在调用ztree的方法的时候把node和resolve存起来，在选中的时候调用
// 加载树型组织部门信息(非公开ztree数据)
loadNodeTwo(node, resolve) {
this.node=node;//在data里面定义的参数
this.resolve=resolve;//在data里面定义的参数
let params = {
deptType: node.key==null?this.noAnnounceParams.myOrgType:node.data.deptType,
orgCode: node.key==null?this.noAnnounceParams.myOrgCode:node.data.orgCode,
};
sctMngApi.queryDeptList(params).then(res => {
if (res.status == 0) {
return resolve(res.data)
} else {
return this.$message.error(res.message)
}
})
},
2.在选中的时候调用tree方法
//非公开选中那个作为根节点 select
changeChecked(rows) {
if(rows.length>0){
rows.forEach(item=>{
if(item.orgCode===this.dialogForm.orgCode){//说明是选中的
this.noAnnounceParams.myOrgCode=item.orgCode;
this.noAnnounceParams.myOrgName=item.orgName;
this.noAnnounceParams.myOrgType=item.orgType
}
})
this.node.childNodes=[]//但是必须清空子节点
this.loadNodeTwo(this.node,this.resolve)//调用非公开树接口
}
},
3.全部的代码
<template>
<div id="contentMng">
<!--钉钉推送-->
<el-dialog :close-on-click-modal="false" :before-close="closeDialog" :title="dialogTitle"
:visible.sync="dialogVisible" v-if="dialogVisible" class="dialogForm">
<el-form :model="dialogForm" :rules="dialogFormRules" ref="dialogForm">
<el-form-item prop="orgNodes" label="推送组织/人员" v-if="dialogForm.announceType==2">
<el-tree
v-model="dialogForm.orgNodes"
class="org_div"
@check-change="handleCheckChange"
:props="props"
:load="loadNode"
lazy
show-checkbox
node-key="orgCode"
ref="tree">
</el-tree>
</el-form-item>
<div v-if="dialogForm.announceType==2">
<el-form-item v-if="dialogForm.orgCode" label="模块组织">
<el-input v-if="dialogForm.orgCode" disabled
style="width: 529px"
type="textarea" v-model="dialogForm.orgCode" ></el-input>
</el-form-item>
</div>
<div v-else>
<el-form-item label="模块组织">
<el-select v-model="noAnnounceParams.myOrgCode" placeholder="请选择" class="selectBox" @change="changeChecked(options)">
<el-option
v-for="item in options"
:key="item.orgCode"
:label="item.orgName"
:value="item.orgCode"
>
</el-option>
</el-select>
<el-tree
v-if="dialogForm.announceType==1"
v-model="dialogForm.orgNodes"
class="org_div org_box"
:load="loadNodeTwo"
@check-change="handleCheckChangeNoAnnounce"
:props="noPropsNoAnnounce"
lazy
show-checkbox
node-key="orgCode"
ref="noAnnounceZtree">
</el-tree>
</el-form-item>
<el-form-item v-if="dialogForm.orgCode&&dialogForm.announceType==1" label="模块组织">
<el-input v-if="dialogForm.orgCode&&dialogForm.announceType==1" disabled
style="width: 529px"
type="textarea" v-model="dialogForm.orgCode" ></el-input>
</el-form-item>
</div>
</el-form>
<div class="dialog_button">
<el-button type="primary" @click="submitInfo('dialogForm')">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "contentMng",
components:{
selectSectionColumn
},
data() {
return {
/*钉钉推送*/
selectCheckedData:[],
announceId:'',//当前数据id
// announceType:'',//2公开，1非公开
props: {
label: 'orgName',
children: 'children'
},
noProps: {
label: 'orgName',
children: 'children'
},
orgNodes: '',
dialogTitle: '',
dialogVisible: false,
orgInfoList:[],
userInfoList:[],
dialogForm: {
announceType:'',//2公开，1非公开
announceId: '',
orgInfoList: [],
userInfoList:[],
orgCode: '',
orgNodes: ''
},
//非公开
noAnnounceParams:{
myOrgCode:'',//选中的code
myOrgType:'',//选中的type
myOrgName:''//选中的name
},
options:[],//非公开下拉的数据
noPropsNoAnnounce: {
label: 'orgName',
children: 'children'
},
node:[],
resolve:[],
value: '',
dialogFormRules: {
// orgNodes: [{required: true, message: '请选择模块组织', trigger: ['change', 'blur']}]
},
myOrgInfoList:[],
showOrgInfoListData:[], //根据此字段判断是否是添加还是修改，有数据就是修改，没有数据就是添加
}
},
methods: {
//钉钉推送
push(row ){
this.dialogTitle = '钉钉推送';
this.dialogVisible = true
this.dialogForm.announceId=row.announceId;
this.dialogForm.announceType=row.announceType //1是非公开，2是公开
ctentMngApi.pushOrgInfoData(this.dialogForm.announceId).then(res => {//调用此接口判断是否是添加还是编辑，如果res.data.orgInfoList||res.data.userInfoList有数据是编辑，没有数据是添加
if(res.status==0){
this.showOrgInfoListData=res.data.orgInfoList
let arr=[];
if(res.data.orgInfoList){
res.data.orgInfoList.map((item)=>{
arr.push(item.orgName)
return this.dialogForm.orgCode=arr.join(',')
});
}
}
})
if(this.dialogForm.announceType==1){//非公开
//非公开，从列表找到list传给钉钉推送下拉
if(row.sectionOrg&&row.sectionOrg.orgList.length>0){
let result={};
this.options=[];
row.sectionOrg.orgList.map(item=>{
if(this.options.indexOf(item.orgCode)){
result={
orgName:item.orgName,
orgCode:item.orgCode,
orgType:item.orgType
};
}
this.options.push(result)
})
this.noAnnounceParams.myOrgCode=row.sectionOrg.orgList[0].orgCode;//第一次加载默认第一项值
this.noAnnounceParams.myOrgType=row.sectionOrg.orgList[0].orgType;
this.noAnnounceParams.myOrgName=row.sectionOrg.orgList[0].orgName;
}
}
},
loadNodeTwo(node, resolve) {
this.node=node;//在data里面定义的参数
this.resolve=resolve;//在data里面定义的参数
let params = {
deptType: node.key==null?this.noAnnounceParams.myOrgType:node.data.deptType,
orgCode: node.key==null?this.noAnnounceParams.myOrgCode:node.data.orgCode,
};
sctMngApi.queryDeptList(params).then(res => {
if (res.status == 0) {
return resolve(res.data)
} else {
return this.$message.error(res.message)
}
})
},
//非公开选中那个作为根节点 select
changeChecked(rows) {
if(rows.length>0){
rows.forEach(item=>{
if(item.orgCode===this.dialogForm.orgCode){//说明是选中的
this.noAnnounceParams.myOrgCode=item.orgCode;
this.noAnnounceParams.myOrgName=item.orgName;
this.noAnnounceParams.myOrgType=item.orgType
}
})
this.node.childNodes=[]
this.loadNodeTwo(this.node,this.resolve)//调用非公开树接口
}
},
//动态加载节点数据的方法
handleCheckChangeNoAnnounce() {
this.dialogForm.orgInfoList=this.$refs.noAnnounceZtree.getCheckedNodes()
},
// 获取除子节点的选中数据
getNodes() {
let checkedNodes=[];
// 获取选中数据
if(this.dialogForm.announceType==1){ //非公开
checkedNodes = this.$refs.noAnnounceZtree.getCheckedNodes();
}else{//公开
checkedNodes = this.$refs.tree.getCheckedNodes();
}
// 存放选中的orgCode数组
let orgCodes = []
for (let i in checkedNodes) {
orgCodes.push(checkedNodes[i].orgCode)
}
// 存放数据父节点
let orgInfoList = []
for (let k in checkedNodes) {
// 判断父节点是否存在于选中的orgCode数组中
// 若不存在，则存入orgInfoList
if (orgCodes.indexOf(checkedNodes[k].fatherOrgCode) === -1) {
orgInfoList.push(checkedNodes[k])
}
}
// 返回选中 除子节点的数据
this.myOrgInfoList=orgInfoList;
},
// 确定
submitInfo() {
this.$refs.dialogForm.validate(valid => {
if (valid) {
if(this.dialogForm.announceType==1){//非公开
if(this.showOrgInfoListData){//如果有组织就说明是编辑，否则是添加
this.edit()
}else{
this.add()
}
}else{
if(this.dialogForm.orgCode){//公开，如果有组织就是编辑，否则是添加
this.edit()
}else{
this.add()
}
}
}
});
},
//添加
add(){
this.getNodes();//组装的数据
let params = {
announceId: this.dialogForm.announceId,
announceType: this.dialogForm.announceType,//公开，非公开
orgInfoList: this.myOrgInfoList,
userInfoList:[]
};
ctentMngApi.addPushData(params).then(res => {
if (res.status === 0) {
this.$message.success('钉钉推送成功！')
this.getList();
}
}).finally(() => {
this.closeDialog();
})
},
//编辑
edit(){
this.getNodes();//组装的数据
let params = {
announceId: this.dialogForm.announceId,
announceType: this.dialogForm.announceType,
orgInfoList: this.myOrgInfoList,
userInfoList:[]
};
ctentMngApi.editPushData(params).then(res => {
if (res.status === 0) {
this.$message.success('钉钉推送成功！')
this.getList();
}
}).finally(() => {
this.closeDialog();
})
},
// 关闭新增/修改版块对话框
closeDialog() {
this.dialogVisible = false
if (this.dialogForm.announceId == '') {
this.$refs.tree.setCheckedKeys([]);
}
this.dialogForm={
announceId: '',
orgInfoList: [],
userInfoList:[],
announceType:'',//2公开，1非公开
orgCode: '',
orgNodes: ''
};
this.$nextTick(() => {
if(this.$refs.dialogForm){
this.$refs.dialogForm.clearValidate();
}
});
}
},
created() {
this.getList()
}
}
</script>
网友评论